Skip to content

How to make a page editable in the browser

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.

β†’ Download my free JavaScript Handbook!



You might be interested in those things I do:

  • Learn to code in THE VALLEY OF CODE, your your web development manual
  • Find a ton of Web Development projects to learn modern tech stacks in practice in THE VALLEY OF CODE PRO
  • I wrote 16 books for beginner software developers, DOWNLOAD THEM NOW
  • Every year I organize a hands-on cohort course coding BOOTCAMP to teach you how to build a complex, modern Web Application in practice (next edition February-March-April-May 2024)
  • Learn how to start a solopreneur business on the Internet with SOLO LAB (next edition in 2024)
  • Find me on X

Related posts that talk about browser: