Skip to content

How to make a page editable in the browser

FULL-STACK WEB DEVELOPMENT BOOTCAMP

2024 COHORT SIGNUPS END TOMORROW

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

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.

designMode in action

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.

β†’ Read my DOM Tutorial
β†’ Read my Browser Events Tutorial
β†’ Read my Browser APIs Tutorials
h
  • Learn modern web development in my BOOTCAMP (SIGNUP END TOMORROW FEB 20, 2024)
  • THE VALLEY OF CODE (+ PRO), your web development manual
  • I wrote 15+ coding BOOKS, all available in THE VALLEY OF CODE PRO
  • Indie solopreneur internet business masterclass SOLO LAB (summer 2024)