Make Any Webpage Editable with a Single JavaScript Command (document.designMode)

In everyday work you may need to edit the content of a screenshot page, and while Photoshop can do it, a front‑end developer can achieve the same effect instantly by using a one‑line JavaScript command.

The trick is to enable the document.designMode property, which makes the whole document editable. Open the browser console (F12), paste the following code and press Enter:

document.designMode = "on";

To turn the feature off, run:

document.designMode = "off";

According to MDN, document.designMode controls whether the entire document is editable. Valid values are "on" and "off"; the default is "off" in modern browsers. Older Chrome and IE versions used "inherit" as the default, but this is no longer supported.

All modern browsers support this property, making it a reliable way to edit any page, and it can also be applied to an iframe’s document, for example:

iframeNode.contentDocument.designMode = "on";

Related APIs include contentEditable and the now‑deprecated document.execCommand() . While contentEditable enables editing on specific DOM elements, document.designMode affects the whole page. The table below summarizes the differences:

Feature

contentEditable

document.designMode

Scope

Can make a single element editable

Can make the entire document editable

Enabling method

Set attribute to

true

or

false

Set

document.designMode = "on"

Use case

Apply to specific elements like

<div>

,

<span>

Make the whole page editable

Compatibility

Supported by modern browsers

Supported by modern browsers; older browsers may lack support

The document.execCommand() method can format or manipulate content within editable areas (e.g., bold text, insert links), but it has been deprecated by the W3C and is therefore not covered in detail here.