# How to make a page editable in the browser

> Learn how to make any web page editable right in the browser using document.designMode set to on, or by enabling contentEditable on the body element.

Author: Flavio Copes | Published: 2019-12-13 | Canonical: https://flaviocopes.com/designmode/

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](https://flaviocopes.com/browser-dev-tools/), and type:

```js
document.designMode = 'on'
```

The same result can be triggered by enabling `contentEditable` on the `body` element, like this:

```js
document.body.contentEditable = true
```

You can edit text, delete it, and also drag images around to reposition them.

![designMode in action](https://flaviocopes.com/images/designmode/lOdTrDtrx9.gif)

You can turn off the mode by using

```js
document.designMode = 'off'
```

This feature is supported by almost every browser, IE included. It's pretty old, but quite unknown.