contenteditable

Contenteditable is an HTML global attribute that makes the contents of an element editable by the user in the browser. When enabled, users can insert, delete, and modify text and simple formatting directly within the element, enabling in-page editing without separate form controls. This capability is commonly used to create lightweight rich text areas or in-place editors.

The attribute can take values such as true, false, or inherit. Setting contenteditable to true enables editing for the element. Setting it to false disables editing. Using inherit makes the element adopt the editable state of its parent. If no value is explicitly set, the element follows the value of its nearest editable ancestor, or remains non-editable if none exists.

In practice, browsers provide built-in editing commands for common formatting (for example, bold, italics, lists) through the browser’s editing surface. Historically, the document.execCommand API was used to implement these commands, but it is deprecated and not uniformly supported across browsers. Modern implementations often rely on direct DOM manipulation of the edited content or on higher-level editors built on top of contenteditable that expose their own command interfaces.

Common considerations include inconsistencies across browsers, performance with large editable regions, and the need to sanitize and validate content before saving or rendering it elsewhere to prevent security risks such as cross-site scripting. Contenteditable also interacts with styling, layout, and accessibility; developers should ensure proper focus management, keyboard navigation, and ARIA labeling when using editable regions.

Typical uses include lightweight in-page editors, content management prototypes, and scenarios where a full-featured editor would be excessive. For feature-rich editing, dedicated libraries and editors may be preferred.