There is a little-known mode in browsers called design mode.

When you enable design mode, you can edit the page content directly in the browser, which is useful for testing prototypes or trying out a new headline.

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, including IE. It is long-standing but little-known.

Lessons in this unit:

0:	Introduction
1:	Clipboard API
2:	Scrolling
3:	Console API
4:	Speech Synthesis API
5:	How to get the scroll position of an element in JavaScript
6:	▶︎ How to make a page editable in the browser
7:	Safari, warn before quitting