JavaScript Document execCommand() Method

What You’ll Learn

document.execCommand() is a deprecated, non-standard instance method that runs editing and clipboard commands (see MDN Document: execCommand()). Learn the three parameters, common commands like bold and insertText, return-value pitfalls, undo notes, modern alternatives, and five try-it labs.

Introduction

Before today’s editor libraries and Clipboard API, browsers exposed a single switchboard: document.execCommand(commandName, showDefaultUI, valueArgument). One call could bold selected text, insert HTML, or try to copy to the clipboard.

MDN: commands mainly affect the current selection inside an active editable control — a contenteditable region, a form field, or a document in designMode. Some commands (like copy) can work without an editable element.

Related tutorials: designMode, queryCommandEnabled(), evaluate().

Understanding document.execCommand()

An instance method on the page’s document object that dispatches a named editing or clipboard command (MDN).

• commandName — string name such as "bold", "insertText", or "copy" (MDN).
• showDefaultUI — boolean; whether to show a default UI (not implemented in Mozilla) (MDN).
• valueArgument — string (or null) for commands that need input, e.g. a URL for createLink (MDN).
• Return value — false if unsupported or disabled; otherwise often true when run from a user gesture (MDN).
• Undo buffer — MDN: unlike some direct DOM edits, execCommand can preserve edit history.
• Clipboard — MDN recommends the Clipboard API over clipboard-related commands.

📝 Syntax

General form of Document.execCommand (MDN):

execCommand(commandName, showDefaultUI, valueArgument)

Parameters

• commandName — string specifying the command to run (MDN). Common beginner ones: bold, italic, underline, insertText, undo, redo, copy.
• showDefaultUI — boolean; show a default UI if the browser has one. MDN: not implemented in Mozilla. Pass false in tutorials.
• valueArgument — extra string for commands that need data (font name, color, HTML, URL, …). Pass null when none is needed (MDN).

Return value

A boolean that is false if the command is unsupported or disabled (MDN). Important: MDN notes execCommand only returns true when invoked as part of a user interaction — you cannot rely on a cold call to prove browser support.

Beginner-friendly commands (subset of MDN list)

MDN-style insertText call

textarea.focus();
const ok = document.execCommand("insertText", false, "");
if (!ok) {
  console.error("insertText failed or unsupported");
}

⚖️ execCommand vs Clipboard API vs DOM edits

Examples Gallery

Examples follow MDN Document: execCommand() and practical beginner patterns. Always treat this API as legacy.

const editor = document.getElementById("editor");
editor.focus();

const ok = document.execCommand("bold", false, null);
console.log(ok ? "bold toggled" : "bold failed / unsupported");

bold toggled
(selected text becomes bold / unbold)

const box = document.querySelector("textarea");
box.focus();

let pasted = true;
try {
  if (!document.execCommand("insertText", false, "Hello")) {
    pasted = false;
  }
} catch (e) {
  console.error(e);
  pasted = false;
}

console.log(pasted ? "inserted" : "insertText failed");

inserted
(textarea gains "Hello" at the caret)

const commands = ["bold", "insertText", "copy", "paste"];
const report = commands.map((name) => {
  const supported =
    typeof document.queryCommandSupported === "function"
      ? document.queryCommandSupported(name)
      : false;
  return name + ": " + (supported ? "yes" : "no");
});
console.log(report.join("\n"));

bold: yes
insertText: yes
copy: yes
paste: no
(exact results vary by browser)

const box = document.querySelector("#note");
box.focus();
document.execCommand("insertText", false, " TEMP");
document.execCommand("undo", false, null);
console.log(box.value);

Draft
(insert undone; original text restored)

async function copyModern(text) {
  if (!navigator.clipboard || !navigator.clipboard.writeText) {
    console.log("Clipboard API unavailable");
    return;
  }
  await navigator.clipboard.writeText(text);
  console.log("copied with Clipboard API");
}

copyModern("Hello from CodeToFun");

copied with Clipboard API
(requires a secure context + permission in many browsers)

🚀 Common Use Cases

• Legacy rich-text toolbars — bold / italic / underline on contenteditable.
• Undo-preserving inserts — MDN’s noted niche for insertText.
• Maintaining old editors — understanding commands still shipping in production.
• Interview / history knowledge — how browsers once exposed designMode editing.
• Not new clipboard UX — use the Clipboard API instead (MDN).
• Not a full modern editor — prefer dedicated libraries for new products.

📝 Notes

• MDN: Deprecated and Non-standard; not part of any current specification.
• MDN: Clipboard API is preferred over clipboard-related execCommand usage.
• MDN: return true only in a user-interaction context — not a cold support probe.
• MDN: beforeinput / input may or may not fire; nested calls can fail (e.g. Firefox).
• MDN: insertHTML is an injection sink — treat untrusted markup as an XSS risk.
• Related: designMode, evaluate(), parseHTML().

💡 Best Practices