Last Updated: February 25, 2016
· tuptup

Flexible prototyping using contenteditable

By adding contenteditable="true" to any element containing text allows you to directly manipulate the copy of a page in the browser. This means you can add/remove to test the flexibility of you design with different amounts of copy, see how things wrap for translation and experiment with button copy.

It's also great when producing webtype specimen pages or typography style guides.

Pretty useful!

6 Responses
Add your response


Oh sweet, I did not know that - awesome tip! :)

Great example showing this here: http://html5demos.com/contenteditable

over 1 year ago ·

The best thing: it's supported even by IE6..

over 1 year ago ·


over 1 year ago ·

Add the below snippet as a bookmarklet/favlet an you can make use of contenteditable on any webpage.

javascript:document.body.contentEditable='true'; document.designMode='on'; void 0

over 1 year ago ·

@drawluap brilliant, just added this, works great!

over 1 year ago ·

@drawluap Tried this and its just gained a perma spot on my bookmark bar!

Also thanks to Peter I didn't know about this, this is pretty cool for me to use in the office :)

over 1 year ago ·