Make any element text changeable with contenteditable

I found the contenteditable attribute a while back when I was trying to find a way to build a WYSIWYG.

Simply put, adding the contenteditable attribute to any HTML element allows you to edit the content of that element. Within the limits of what the browser and the element support. Editing a button, for example, is buggy at best.

By doing this, you can allow advanced editing features, context menus and more where a simple input element will only allow you to style or interact with the entire text content as one element.

I came across this whilst trying out TipTap which is a modern WYSIWYG editor. I wanted to be able to inline edit <ruby> tags for my Japanese app.

With the contenteditable attribute, I did not even need to use TipTap, just plain old HTML did the trick.

The other day, I wanted to generate some quick prompts for a video I made, and I resorted to this attribute again.

Editing styled text with contenteditable

You can find the complete (tiny) source code on GitHub or try it here.

Any other tips on what you can use this for? Have you ever used it? Let me know in the comments.

Thank you for reading.