JavaScript Document designMode Property

What You’ll Learn

Document.designMode is a read/write instance property that controls whether the entire document is editable. Learn the "on" / "off" values, the classic iframe editor pattern, how it differs from contenteditable, and five examples with try-it labs.

Introduction

Sometimes you want users to edit HTML the way they type in a word processor. One older but still supported approach is to turn on document design mode: the browser treats the whole document as an editable surface.

MDN: document.designMode controls whether the entire document is editable. Valid values are "on" and "off". The specification defaults to "off" (Firefox follows this; modern Chrome does too).

Related Document tutorials: defaultView, currentScript, Document constructor.

Understanding Document.designMode

An instance property on Document you can both read and write. It stores a string switch for document-wide editing.

• Values — "on" or "off" (MDN / spec).
• Default — meant to be "off"; Firefox and modern Chrome agree.
• Legacy — older Chrome/IE used "inherit"; IE6–10 capitalized values (MDN).
• Effect — when on, the user can type and edit content across the document.
• Common pattern — iframe.contentDocument.designMode = "on" (MDN).

📝 Syntax

// Read
document.designMode

// Write
document.designMode = "on";
document.designMode = "off";

Value

A string: "on" or "off", indicating whether design mode is (or should be) enabled (MDN).

Iframe pattern (MDN)

iframeNode.contentDocument.designMode = "on";

⚖️ designMode vs contenteditable

Examples Gallery

Examples follow MDN Document: designMode. Prefer iframe demos for safe editing. Use View Output or Try It Yourself for each case.

console.log(document.designMode);
// "off" on modern browsers (spec default)

off

document.designMode = "on";
console.log(document.designMode); // "on"

on

function toggleDesignMode() {
  document.designMode =
    document.designMode.toLowerCase() === "on" ? "off" : "on";
  console.log("Now:", document.designMode);
}

toggleDesignMode();

Now: on

const iframe = document.querySelector("iframe");
iframe.addEventListener("load", () => {
  iframe.contentDocument.designMode = "on";
  console.log(
    "iframe designMode:",
    iframe.contentDocument.designMode
  );
});

iframe designMode: on

const box = document.getElementById("editor");
box.contentEditable = "true";
console.log("document.designMode still:", document.designMode); // "off"
console.log("box editable:", box.isContentEditable); // true

document.designMode still: off
box editable: true

🚀 Common Use Cases

• Classic WYSIWYG — editable iframe document with a formatting toolbar.
• HTML mail composers — legacy clients sometimes used designMode iframes.
• Teaching / demos — show how browsers expose document-wide editing.
• Quick prototyping — turn on designMode to tweak live markup (local only).
• Prefer contenteditable — for modern in-page editors scoped to one element.
• Not for production CMS by default — evaluate accessibility, sanitization, and modern editor libraries.

📝 Notes

• MDN does not mark this property Deprecated, Experimental, or Non-standard — no status banner above.
• Valid values: "on" and "off"; spec default "off".
• Prefer enabling on an iframe document rather than the whole site chrome.
• Sanitize any HTML you persist from an editable document (XSS risk).
• For one editable box, prefer contenteditable.
• Related: defaultView, customElementRegistry, Document constructor.

💡 Best Practices