If you've been following my recent tweets, you might have noticed that I am currently coding along with Wes Bos' JavaScript30 challenge.

While a lot of the challenges served as a refresher for my JavaScript knowledge, there were times when I had to pause the tutorial and shouted internally, "Woah, why didn't I learn about this earlier?!"

I had that moment again when approaching the challenge of creating moveable text shadows.

As it turns out, there is an HTML global attribute called contenteditable that allows the user to edit targeted text on the browser.

According to the MDN documentation, contenteditable is an enumerated attribute (meaning it has a list of possible values, as opposed to a boolean value), where true or an empty string indicates that the text is editable, and false otherwise.

If the attribute is not given any value, the value is treated as an empty string, which makes the text editable, like so:

<div>
  <h1 contenteditable>🔥WOAH!</h1>
</div>

And just like that, you can type any text you want on your browser.

No CSS, no JavaScript, and no need for an input field. Just a plain little HTML attribute. (For security-related information, feel free to check out this Stack Overflow discussion.)

Have you used contenteditable at work or for your projects? Is there any other front-end magic that you wish you found out sooner? Please share your experience in the comments, I'd love to see some practical use cases! 🙌