How to make a page editable in the browser

By Flavio Copes

Learn how to make any web page editable right in the browser using document.designMode set to on, or by enabling contentEditable on the body element.

There is a special and pretty secret mode in browsers, called design mode.

When you set a page into design mode, you can edit the content of the page directly inside the browser page, which is very handy to test some prototype or check out how a new headline would look, for example.

How do you enable it? Open the DevTools console, and type:

document.designMode = 'on'

The same result can be triggered by enabling contentEditable on the body element, like this:

document.body.contentEditable = true

You can edit text, delete it, and also drag images around to reposition them.

You can turn off the mode by using

document.designMode = 'off'

This feature is supported by almost every browser, IE included. It’s pretty old, but quite unknown.

Related posts about platform: