How to make a page editable in the browser
New Course Coming Soon:
Get Really Good at Git
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.
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.
Here is how can I help you:
- COURSES where I teach everything I know
- THE VALLEY OF CODE your web development manual
- BOOTCAMP 2024 cohort in progress, next edition in 2025
- BOOKS 16 coding ebooks you can download for free on JS Python C PHP and lots more
- SOLO LAB everything I know about running a lifestyle business as a solopreneur
- Interesting links collection
- Follow me on X