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!
Written by Peter Thomas
Related protips
6 Responses
Oh sweet, I did not know that - awesome tip! :)
Great example showing this here: http://html5demos.com/contenteditable
The best thing: it's supported even by IE6..
nice!
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
@drawluap brilliant, just added this, works great!
@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 :)
Have a fresh tip? Share with Coderwall community!
