Having fun with HTML5 — contenteditable attribute

As I go through the HTML5 spec, I find some use­ful new fea­ture just about every­where, and the new con­tente­d­itable attribute is cer­tain­ly one of those. It’s sup­port­ed by most ele­ments and pro­vides a sim­ple and yet effec­tive way for you to allow the users to edit user con­tents (blog posts for instance) inline as opposed to hav­ing to open up a sep­a­rate form.

It couldn’t be sim­pler to use it, just set the con­tente­d­itable attribute of your ele­ment to true:

<article id="editable" contenteditable="true">
    <p>This area is an article, its border will light up when you click anywhere inside.</p>
    …
</article>

And now when the user can edit the con­tent of the ele­ment them­selves:

image image

Here is a quick demo I’ve put togeth­er which uses two but­tons to save and clear changes to/from the local stor­age, though you can just eas­i­ly save the changes auto­mat­i­cal­ly when the ele­ment los­es the focus.