I got the idea creating a custom div element that can be edited by a client, and naively spent about an hour in React trying to make a component that swapped between a div and an input (or textarea, when I realized inputs couldn’t be multiline), with middling success. It worked, but it was pretty ugly; turns out matching fonts between inputs and divs is more complicated than simply matching CSS properties.

Realizing my idea wasn’t super original, I searched for how others have done editable divs. Turns out there’s an HTML attribute specifically for it!

The contentEditable attribute exists for most HTML elements, and allows the end-user to change the element’s text. A little JavaScript makes editing toggle-able, and with very little effort you have something much nicer than my FrankenDiv.