Edit your Live Website using document.designMode
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
Image Index
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"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"Final thoughts
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
Further Reading
- MDN Docs: document.designMode (developer.mozilla.org)
About Dave A.K.A. 'barrd'
