[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fcomponents\u002Finline-editing":3},{"canonical_path":4,"template":5,"family":6,"indexable":7,"totals":8,"category":10,"seo":14,"breadcrumbs":18,"content":27,"examples":36,"showcases":173,"links":174,"dates":202},"\u002Fexamples\u002Fcomponents\u002Finline-editing","collection","components",true,{"example_count":9,"app_count":9},5,{"id":11,"title":12,"description":13},196,"Inline editing","See how interfaces let people change a value where it is displayed. Explore how editable text, field states, and save or cancel controls fit within the existing layout.",{"title":15,"description":16,"og_image":17},"Inline editing UI examples - Nicelydone","Inline editing UI design examples from SaaS apps. See how interfaces let people change a value where it is displayed. Explore how editable text, field…","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F20510fb9-15df-4613-bb1e-ad0c613382f7.png",[19,22,25],{"label":20,"to":21},"Examples","\u002Fexamples",{"label":23,"to":24},"SaaS UI component examples","\u002Fexamples\u002Fcomponents",{"label":26,"to":4},"Inline editing UI examples",{"title":26,"eyebrow":28,"description":29,"sections":30,"body":34},"UI component category","Inline editing UI design examples from SaaS apps. See how interfaces let people change a value where it is displayed. Explore how editable text, field states, and save or cancel controls fit within the…",[31],{"title":32,"description":13,"links":33},"About Inline editing",[],[35],"5 UI components",[37,67,92,125,148],{"uuid":38,"title":39,"description":40,"canonical_path":41,"image":17,"width":42,"height":43,"image_alt":44,"kind":45,"categories":46,"app":49},"ea6a0d02-e3c1-4ce9-8f0d-6a38c6f2783f","Kitemaker UI component","A text editor toolbar","\u002Fexamples\u002Fapps\u002Fkitemaker\u002Fcomponents",1312,392,"UI component from Kitemaker","component",[47],{"id":11,"title":12,"slug":48},"inline-editing",{"slug":50,"title":51,"logo":52,"baseline":53,"categories":54},"kitemaker","Kitemaker","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fkitemaker-cfea7794.png","Build better software. Together.",[55,59,63],{"id":56,"title":57,"slug":58},86,"Product management","product-management",{"id":60,"title":61,"slug":62},29,"Task Management","task-management",{"id":64,"title":65,"slug":66},35,"Feedback","feedback",{"uuid":68,"title":69,"description":70,"canonical_path":71,"image":72,"width":73,"height":74,"image_alt":75,"kind":45,"categories":76,"app":78},"a5d3ea82-e12e-49f8-8a15-dfc34b96d766","Empty state title input","An inline text input for a document title, currently showing placeholder text and an active cursor. Below it is helper text with keyboard shortcut instructions and a link to choose a template.","\u002Fexamples\u002Fapps\u002Fwhimsical\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F15ae3dd5-9e5a-4a45-b553-4896c201ca06.png",1301,438,"Empty state title input from Whimsical",[77],{"id":11,"title":12,"slug":48},{"slug":79,"title":80,"logo":81,"baseline":82,"categories":83},"whimsical","Whimsical","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fwhimsical-ejzz342s.png","The hub for visual collaboration",[84,88],{"id":85,"title":86,"slug":87},8,"Design","design",{"id":89,"title":90,"slug":91},23,"Collaboration","collaboration",{"uuid":93,"title":94,"description":95,"canonical_path":96,"image":97,"width":98,"height":99,"image_alt":100,"kind":45,"categories":101,"app":103},"7ddb5d71-e2eb-47b0-b73d-d23cc487d123","Inline editing list","A list of account details where the first item is actively being edited inline.","\u002Fexamples\u002Fapps\u002Fincrease\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F0f7cfff9-18cc-4a07-ae18-7fb575c3cc6d.png",2708,492,"Inline editing list from Increase",[102],{"id":11,"title":12,"slug":48},{"slug":104,"title":105,"logo":106,"baseline":107,"categories":108},"increase","Increase","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fincrease-284a5bb9.png","Bare-metal banking APIs",[109,113,117,121],{"id":110,"title":111,"slug":112},36,"Finance","finance",{"id":114,"title":115,"slug":116},48,"Developer Tools","developer-tools",{"id":118,"title":119,"slug":120},37,"Developer APIs","developer-apis",{"id":122,"title":123,"slug":124},39,"Payments","payments",{"uuid":126,"title":127,"description":128,"canonical_path":129,"image":130,"width":131,"height":132,"image_alt":133,"kind":45,"categories":134,"app":136},"c65e5a3b-e0f7-4619-869e-275d5cbeeaea","File card with inline editing","A file card displaying a 3D cube icon placeholder for a thumbnail, with the file name below it currently selected for inline editing.","\u002Fexamples\u002Fapps\u002Fspline\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fde9585a6-67c4-4c16-8ca3-ac60fb0d86bd.png",672,603,"File card with inline editing from Spline",[135],{"id":11,"title":12,"slug":48},{"slug":137,"title":138,"logo":139,"baseline":140,"categories":141},"spline","Spline","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fspline-9d66cc4c.png","Design tool for 3D web experiences",[142,143,147],{"id":85,"title":86,"slug":87},{"id":144,"title":145,"slug":146},7,"Web Development","web-development",{"id":89,"title":90,"slug":91},{"uuid":149,"title":150,"description":151,"canonical_path":152,"image":153,"width":154,"height":155,"image_alt":156,"kind":45,"categories":157,"app":159},"cfddd064-74d6-4e36-b341-da13bfa57196","Folder Name Input","An inline text input field for naming a new folder, accompanied by a folder icon.","\u002Fexamples\u002Fapps\u002Fattio\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fcfddd064-74d6-4e36-b341-da13bfa57196.png",375,192,"Folder Name Input from Attio",[158],{"id":11,"title":12,"slug":48},{"slug":160,"title":161,"logo":162,"baseline":163,"categories":164},"attio","Attio","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fattio-nqag2fca.png","Customer relationship magic",[165,169],{"id":166,"title":167,"slug":168},53,"CRM","crm",{"id":170,"title":171,"slug":172},80,"Artificial Intelligence","artificial-intelligence",[],[175,178,181,184,187,190,193,196,199],{"label":176,"to":177},"Edit","\u002Fexamples\u002Fscreens\u002Fedit",{"label":179,"to":180},"Files","\u002Fexamples\u002Fscreens\u002Ffiles",{"label":182,"to":183},"Table","\u002Fexamples\u002Fscreens\u002Ftable",{"label":185,"to":186},"Account Settings","\u002Fexamples\u002Fscreens\u002Faccount-settings",{"label":188,"to":189},"Kitemaker design examples","\u002Fexamples\u002Fapps\u002Fkitemaker",{"label":191,"to":192},"Whimsical design examples","\u002Fexamples\u002Fapps\u002Fwhimsical",{"label":194,"to":195},"Increase design examples","\u002Fexamples\u002Fapps\u002Fincrease",{"label":197,"to":198},"Spline design examples","\u002Fexamples\u002Fapps\u002Fspline",{"label":200,"to":201},"Attio design examples","\u002Fexamples\u002Fapps\u002Fattio",{"published_at":203,"updated_at":204},"2022-08-21T20:07:35.000Z","2026-09-17T10:44:16.000Z"]