The HTML5 contenteditable attribute

July 2013 ~ January 2020

The contenteditable attribute makes any HTML element editable with the mouse and/or the keyboard.

This attribute is one of the HTML5 global attributes, so it can be applied to all HTML5 elements.
It's also one of those features that existed in browsers for a long time before W3C standardization.
Indeed, we can use this attribute on browsers as old as IE 5 and Firefox 3! Microsoft created it, by the way.

It's easy to use: like id or class, you can use contenteditable="true" on any element, or simply contenteditable.
This attribute is inherited by default by child elements, but it can also be forced using contenteditable="inherit".
On the other hand, if you want to make an element editable, but not its children, these children must have contenteditable="false".

Demo:

click on this paragraph to edit the text inside.


Fun facts about contenteditable:

  • It's generally a good idea to use contenteditable with another attribute: spellcheck=false, to avoid red waves when an element is being focused / edited.
  • Like we saw earlier, we can make an element non-editable if its parent is editable. The non-editable element can still be selected, moved and deleted.
    Example:

    In this editable paragraph, this text in bold can't be edited, but you can select it, move it and delete it with the mouse and/or the DELETE key of your keyboard!

  • Firefox used to have little widgets allowing to resize contenteditable images. It's not the case anymore.
  • Any HTML code can be inserted in an editable element. You can try copy-pasting a Webpage of your choice, or a Word/Excel document below:








  • This attribute allows to make complete WYSIWYG online editors, like CKEditor.
  • You can create a quick notepad by typing data:text/html,<html contenteditable> in the address bar of your browser (DEMO).
    This trick was first documented by Jose Jesus Perez Aguinaga.
    You can find many variations of this notepad in these HN comments!
  • If you force a <style> element to be visible and editable, it becomes a libe CSS editor for your page!
  • Here's an example where you can alter the style of a <style> by writing directly inside it:
  • <script> elements can also be visible and editable! However, the JavaScript code isn't executed when you edit it. It's a simple text block. Here's an example:
    (open your F12 console to see this message)

    If you want to force the execution of a contenteditable script block at each input (which I don't recomment), here's a solution:

    (Firefox used to have a bug where key events couldn't be listened on a <script> tag, but it's fixed now, which makes this hack cross-browser down to IE10)


See ya!
@MaximeEuziere