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