Making Web Content Editable In The Browser

Sometimes you just want to try out some text changes to see how they would look on a web page without a lot of work. The below tweeted tip from Álvaro Trigo is brilliant for doing just that. Just set document.designMode = ‘on’ using the javascript console of your web browser.

In addition to document.designMode, Bangash pointed out that document.body.contentEditable = true will also work!

And then Mohamed Ez-zarghili shared that you could create a javascript bookmark to run the commands without having to bring up the console!

I wasn’t able to get the tweeted bookmark code code to run as written, but I was able to get the following javascript to work for me on Firefox by placing the code in the location field of a new bookmark:

javascript:(function(){document.body.contentEditable = 'true';document.designMode = 'on';})();

Thanks to Álvaro Trigo, Bangash, and Mohamed Ez-zarghili for sharing these great tips!

I hope you found them useful too.


comments powered by Disqus