DEV Community

👨‍💻Ioannis Diamantidis
👨‍💻Ioannis Diamantidis

Posted on • Originally published at diamantidis.github.io

Turn your browser into an WYSIWYG editor with "document.designMode"

TLDR;

  • Open the browser's Javascript console.
  • Execute document.designMode = 'on';.
  • Click on any text in the screen and start typing!

Isn't it crazy! 🤓

designMode is a not so well known feature that allows us to make the entire webpage editable.
By default, its value is off, but once we set the value to on, it makes the entire page editable and allows us to change the content as we wish.

If you want to disable it, you simply set its value back to off (document.designMode = 'off';).

It's also worth mentioning that the vast majority of modern browsers support this feature.

Hope you find this little tip helpful! 🚀

Top comments (0)