DEV Community

Annie Liao
Annie Liao

Posted on

6 1

A Small, Simple Trick to Make Your Text Editable via HTML

Woah GIF

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>
Enter fullscreen mode Exit fullscreen mode

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.)

Woah GIF


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! 🙌

Image of Datadog

Create and maintain end-to-end frontend tests

Learn best practices on creating frontend tests, testing on-premise apps, integrating tests into your CI/CD pipeline, and using Datadog’s testing tunnel.

Download The Guide

Top comments (0)

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more