Seamless In-Page Editing with HTML5 contentEditable

Traditionally there are just two ways to interact with web pages: form elements and links. For many sites, those methods will continue to work fine… but in some cases, you may want to blur or eliminate the line between page content and user input. To achieve that, we can use the simplest - and longest - HTML5 attribute you’ll ever see: contenteditable.

contenteditable is a “boolean” HTML5 attribute: only the attribute needs to be present in order for the feature to work. For the example at the top of this article, the code is:

<h1 contentEditable>Everything changes.</h1>

contenteditable can also be set on container elements, such as <figure> and <div>, which allows their content to be edited.

contentEditable can also be set to true (the same as the attribute being used by itself), false (turns off inline editing for the element or its content) and inherit. Images can also be contentEditable, but this only means they can be removed: inserting images onto the page would typically be achieved with the file input and / or the HTML5 Drag and Drop API.

contentEditable owes its existence to Microsoft: a variation of the attribute has been in Internet Explorer since version 5.5. It’s therefore doubly ironic that it has some serious bug issues in IE 10 and 11.

Halfway There

As with most HTML5 inputs, the contentEditable attribute is only half the story: any change the user makes to editable content will only be retained so long as the browser tab remains open. Closing the tab, or refreshing the page, will revert the content to its default value.

A “seamless” interface like this would typically save the information using JavaScript: saving the content as JSON data to localStorage with each keypress, for example. That process is complex enough to leave for another article.

Context is Everything

contenteditable is cool, so it might be tempting to use it in place of every text form element. Broadly speaking, that would be a mistake: users are accustomed to form elements, which have far greater accessibility affordances than contenteditable, and they remain appropriate in most circumstances for gathering user input.

So where can you use contenteditable? Currently the best showcase might be Squarespace, which uses the attribute to allow site owners to edit text on their web pages. This is instinctive and (for Squarespace users) straightforward: most people don’t need a fully fledged text editor for their web pages; they just want to edit content in context. That’s where contenteditable is likely to be most applicable: allowing the user to edit default content on a page.

You can also use contenteditable - or a variation on it - to help test your web pages during development. The exact length of site content is often unknown during the design phase, leaving front-end developers unsure if shorter or longer measures of text will “break” the page at different viewport sizes. Rather than changing the content in the CMS or HTML and then reloading the page, open the console while viewing the page and type:

document.designMode = "on"

This makes every element on the page effectively contentEditable, meaning that you can type temporary changes to content directly in the browser for testing purposes.

SVG & contentEditable

Being an HTML attribute, contentEditable cannot be used directly on SVG. However, if the SVG is inline in the document, you can add contentEditable to an HTML element around it:

<div contenteditable="true">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 60">
        <text>CONTENT</text>
    </svg>
</div>

For example, the code above will allow the text content CONTENT to be edited by the user.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.