How to make a page editable in the browser

There is a special and very secret mode in the browser, called the design mode.

There is a special and very secret mode in the browser calledDesign Patterns.

When the page is set to design mode, you can edit the content of the page directly in the browser page. For example, this is very convenient for testing certain prototypes or checking the appearance of new titles.

How to enable it? turn onDevTools consoleAnd enter:

document.designMode = 'on'

The same result can be triggered by enablingcontentEditableinbodyThe elements are as follows:

document.body.contentEditable = true

You can edit the text, delete it, or drag the images to reposition them.

designMode in action

You can turn off the mode by using

document.designMode = 'off'

Almost all browsers including IE support this feature. It is very old, but it is still unknown.

Download mine for freeJavaScript beginner's manual

More browser tutorials: