How to make a page editable in the browser

You can make any web page editable right in the browser by setting document.designMode to 'on'. The whole page then behaves like a text document: click anywhere and start typing.

This is a special and pretty secret mode in browsers, called design mode, and it’s very handy in practice. You can test how a new headline looks in the real layout, check if a longer paragraph breaks the design, or fix the content of a page before taking a screenshot. No editor, no deploy, no waiting.

How do you enable it?

Open the DevTools console, and type:

document.designMode = 'on'

Press enter, then click anywhere on the page. 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'

Notice the property takes the strings 'on' and 'off', not booleans. If you toggle it often, this one-liner flips it each time you run it:

document.designMode = document.designMode === 'on' ? 'off' : 'on'

The contentEditable alternative

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

document.body.contentEditable = true

The difference is scope. designMode works on the whole document, while contentEditable works on a single element, so you can make just one part of the page editable:

document.querySelector('.pricing-table').contentEditable = true

One edge case: designMode belongs to a document, and an iframe has its own. Turning it on for the page does not make embedded iframes editable. For a same-origin iframe, set it on iframe.contentDocument instead.

Your edits are not saved

Be careful with one thing: everything you change lives only in the browser’s memory. You’re editing the DOM of the loaded page, not the file on the server. Reload the page and every edit is gone.

So if you produced something worth keeping, copy the text out (or take the screenshot) before refreshing.

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