HTML contenteditable Attribute

The HTML contenteditable global attribute controls whether the user can edit the contents of an element directly in the browser. It can enable rich-text editing, restrict editing to plain text, disable editing, or inherit the editing state from a parent element.

Syntax

The contenteditable attribute can be added to an HTML element to control whether its contents can be edited by the user.

<div contenteditable="true">
  This content can be edited.
</div>

The user can place the cursor inside the element and edit its contents directly in the browser.

Attribute Values

The contenteditable attribute is an enumerated attribute. It supports the following values:

Value	Description
`true`	Makes the element editable.
`false`	Makes the element non-editable.
`plaintext-only`	Makes the element editable as plain text while disabling rich-text formatting.
Empty value	Has the same editing state as `true`.
Omitted or invalid value	Inherits the editing state from the parent element.

Global Attribute

The contenteditable attribute is a global attribute, which means it can be specified on HTML elements where its editing behavior is applicable.

<p contenteditable="true">Edit this paragraph.</p>

<div contenteditable="true">Edit this content.</div>

The type of content that can be edited depends on the value assigned to the attribute.

Making Content Editable

Setting contenteditable="true" creates an editable region. The browser provides the basic editing behavior, allowing users to change the element's contents.

<div contenteditable="true">
  <p>Click here and edit this text.</p>
</div>

Changes made by the user affect the document in the browser but are not automatically saved to a server or database. Saving edited content requires additional application logic.

Plain Text Editing

The plaintext-only value creates an editable region where the user can edit raw text but rich-text formatting is disabled.

<div contenteditable="plaintext-only">
  Edit this text without rich-text formatting.
</div>

This can be useful when editable text is needed but formatting such as bold text, links, or other HTML markup should not be retained as rich content.

Inherited Editing

If contenteditable is omitted, the element inherits its editing state from its parent. This allows descendants of an editable element to become editable without specifying the attribute on each one.

<div contenteditable="true">
  <p>This paragraph is editable because its parent is editable.</p>
  <p contenteditable="false">This paragraph is not editable.</p>
</div>

Setting contenteditable="false" can create a non-editable region inside editable content.

contenteditable Is Not a Boolean Attribute

Unlike Boolean attributes such as disabled or checked, contenteditable is an enumerated attribute. The values true and false have different meanings.

<div contenteditable="true">Editable content</div>

<div contenteditable="false">Non-editable content</div>

Therefore, contenteditable="false" actually disables editing. This differs from a Boolean attribute, where the presence of the attribute itself represents the true state.

Common Mistakes

Do not assume that editing content automatically saves the user's changes. The attribute only makes content editable in the browser.

Do not treat contenteditable as a Boolean attribute. It is an enumerated attribute, and contenteditable="false" explicitly makes the element non-editable.

Remember that an element without an explicit contenteditable value can inherit its editing state from an editable parent.

Browser Support

Baseline: Widely available indicates a feature has been supported by core browsers for at least 30 months. At this stage, the feature is considered stable and safe for most websites to use without needing to worry about compatibility issues or fallbacks, as it is supported by the vast majority of users' devices and browser versions.

The contenteditable global attribute is widely supported in current core browsers. Support for individual values, such as plaintext-only, can have a different compatibility history from the attribute itself.

Checking Browser Support

For current browser compatibility information, visit Can I Use? . Search for the HTML element or attribute you want to check. You can also narrow your search by entering an element name and attribute name separated by a colon. Search results can include related HTML features, element attributes, input types, APIs, and other technologies, so select the result that most closely matches the feature you are checking.

Try the contenteditable Attribute

The example contains editable, plain-text editable, and non-editable regions. Click inside the first two areas and change their text to see how the different contenteditable values behave.

Play in Editor

Summary

The HTML contenteditable global attribute controls whether users can edit an element's contents directly in the browser. The true value enables editing, false disables it, and plaintext-only permits plain-text editing without rich formatting. When the attribute is omitted or has an invalid value, the editing state is inherited from the parent element.