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.

Wow! I had no idea you could use the property "document.designMode" to make your whole document editable! ✍️

Great to test different texts!! ✨ pic.twitter.com/G7CmTHyPtY

— Álvaro Trigo 🐦🔥 (@IMAC2) June 4, 2019

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

document.body.contentEditable = true will also do the trick.

— Bangash💉💉 (@DevotionGeo) June 4, 2019

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 do have a bookmark that do this.
just create an address bar bookmark with the link: `javascript:document.body.contentEditable = 'true'; document.designMode='on'; void 0` and you are all set, every time you want to edit a page click on the bookmark :)

— Mohamed Ez-zarghili (@ezzarghili) June 4, 2019

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.

Dereck