Skip to: Content or Footer

Edit your Live Website using document.designMode

Created on
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

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

Dave Barr

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, Web Development and eCommerce.

About Dave Barr

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, Web Development and eCommerce.

Read more about Dave

Back to Top

Click to Copy