What is contenteditable?

Making elements user-editable.

What You'll Learn

Making elements editable
Getting edited content
Use cases

The Attribute

The contenteditable attribute makes any element's content editable by users.

Basic Usage

index.htmlHTML

<!-- Simple editable div -->
<div contenteditable="true">
  Click here and start typing.
</div>

<!-- Editable heading -->
<h1 contenteditable="true">Editable Title</h1>

Getting Content

code.jsJavaScript

const editor = document.getElementById('editor');
const content = editor.innerHTML;
// or
const text = editor.innerText;

Listening for Changes

code.jsJavaScript

editor.addEventListener('input', (e) => {
  console.log('Content changed:', e.target.innerHTML);
});

Use Cases

Rich text editors
Inline editing
Simple WYSIWYG features

Note

For production rich text editors, consider libraries with better formatting controls.

What is the Dialog Element?

What is the Drag and Drop API?