References

Beginner-friendly references for web development, with live, editable examples.

The HTML contenteditable attribute

Global attribute Works on every element All modern browsers Updated
Quick answer

The HTML contenteditable attribute makes an element's content directly editable in the browser. Use contenteditable="true" (or just contenteditable) to enable editing, "false" to disable it, or "plaintext-only" to allow text without rich formatting. It is a global attribute.

Overview

Add contenteditable to an element and the browser lets the user edit its content directly, the foundation of in-page rich-text editors. The value can be true (editable), false (not editable) or plaintext-only (text edits without rich formatting). Omitting the attribute leaves the element inheriting its parent's editability.

Edits fire input events you can listen to, and the current content is read from element.innerHTML or innerText. Building a robust editor on top of it is non-trivial (selection handling, pasted markup and cross-browser quirks all need care), so always sanitize the content before storing or rendering it elsewhere.

Syntax

<div contenteditable="true">You can edit this text.</div>

Values

Value
true (or empty) | false | plaintext-only

Example

Live example 
<div contenteditable="true" style="border:1px solid #cbd5e1; padding:10px; border-radius:8px;">Click here and start typing. This box is editable.</div>

Best practices

  • Always sanitize edited content before saving or re-rendering it to prevent XSS.
  • Add a role="textbox", aria-multiline and an accessible label so assistive tech understands the field.
  • Use plaintext-only when you do not need rich formatting.
  • Listen to the input event rather than polling, and consider a maintained editor library for complex needs.

Accessibility

An editable region is not automatically announced as an input. Give it an accessible name and role (typically role="textbox", aria-multiline="true" and an aria-label or associated label) and make sure all editing actions work from the keyboard. Test the experience with a screen reader before shipping.

Frequently asked questions

What is contenteditable?
A global attribute that makes an element's content editable directly in the browser, used to build rich-text editors.
How do I detect edits?
Listen for the input event on the editable element and read its innerHTML or innerText.
What does plaintext-only do?
It allows the user to edit the text but strips rich formatting, which is handy for simple single-style fields.
Is contenteditable accessible?
It can be, but you should add a role and label (e.g. role="textbox", aria-multiline, aria-label) and test with the keyboard and a screen reader.
class data (attr)