Edit your Live Website using document.designMode

Created on
May 8th 2022 08/05/22

No updates
…

Approx ~2 minutes reading time for 492 words.

Introduction

I only just heard about this and to be honest is probably more for fun than any real practical use. However if you’d like to try out different text when you’re in “design mode” this is a quick and easy way to visualise the results.

What is Design Mode?

The Design Mode is a browser specific property that allows you to directly edit a websites text contents.

Depending on browser it can also highlight spelling mistakes. This facility seems to work differently in different setups i.e. currently does not seem to work in Firefox.

How to activate it

Example. Be creative in the Chrome Website Frontend 01 Info

Chrome Developer Console — Example. Be creative in the Chrome Website Frontend 01 Info

Skip Image Index Content

Image Index

• Image 01
Chrome Website Frontend
Back to Images

• Image 02
Chrome Developer Console
Back to Images

By default this property is set in the off state. To enable, open the developer console for your browser, select the Console tab and then type the line below.

document.designMode="on"

Note: Remember to hit Return so you see “on” in the next line.

If using Firefox there is an additional security step. It will ask you to type in “allow pasting” before activating the ‘designMode’ property.

You can also target an iFrame

In order to do so, follow the steps above adding the line below.

iframeNode.contentDocument.designMode="on"

In conclusion

It’s a fun tool to play with, but if anyone has found a really practical usage for it please reach out and let me know.

// End of Article

Article Information

Category: Technical
Topic: #Tech-Stack

MDN Documentation: document.designMode (developer.mozilla.org)

About Dave Barr

Bristol based Scottish Expat who has 20+ years experience of Web Development and is continually on the look out to improve his skill sets. Learning new and innovative solutions for current requirements in the world of IT, WebDev and eCommerce.