Building Your Learning Module...
Getting things ready for you!
Find videos you like?
Save to resource drawer for future reference!
The contenteditable attribute makes any HTML element's content editable by the user. It's perfect for creating rich text editors, inline editing interfaces, note-taking apps, and collaborative editing tools—all without heavy JavaScript frameworks.
contenteditable="true" to any element to make it instantly editable. Try it with divs, paragraphs, or even table cells!Add contenteditable="true" to any HTML element
User clicks and types directly in the element
Use JavaScript to capture and persist the edited content
When an element has contenteditable="true", the browser automatically:
Simple editable div with styling and focus effects
<!-- Basic editable element -->
<div contenteditable="true" class="editable-box">
<h3>Click to Edit</h3>
<p>Try clicking here and typing some text. You can format it, add new lines, and edit freely!</p>
</div>Loading preview...
WYSIWYG editor with formatting buttons using execCommand
<div class="editor-container">
<!-- Toolbar -->
<div class="toolbar">
<button onclick="document.execCommand('bold')">
<strong>B</strong>
</button>
<button onclick="document.execCommand('italic')">
<em>I</em>
</button>
<button onclick="document.execCommand('underline')">
<u>U</u>
</button>
<button onclick="document.execCommand('insertUnorderedList')">
• List
</button>
</div>
<!-- Editor -->
<div contenteditable="true" class="rich-editor" id="editor">
<p>Try using the toolbar buttons above to format this text!</p>
<p>You can make text <strong>bold</strong>, <em>italic</em>, or <u>underlined</u>.</p>
</div>
</div>Loading preview...
Make table cells editable for inline data entry
<div class="table-container">
<h4>Employee Directory (Click to Edit)</h4>
<table class="editable-table">
<thead>
<tr>
<th>Name</th>
<th>Role</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td contenteditable="true">Alice Johnson</td>
<td contenteditable="true">Designer</td>
<td contenteditable="true">alice@example.com</td>
</tr>
<tr>
<td contenteditable="true">Bob Smith</td>
<td contenteditable="true">Developer</td>
<td contenteditable="true">bob@example.com</td>
</tr>
<tr>
<td contenteditable="true">Carol Davis</td>
<td contenteditable="true">Manager</td>
<td contenteditable="true">carol@example.com</td>
</tr>
</tbody>
</table>
<p class="hint">💡 Click any cell to edit</p>
</div>Loading preview...
Interactive checklist with editable tasks
<div class="todo-container">
<h3>My Tasks</h3>
<div class="todo-list">
<div class="todo-item">
<input type="checkbox" id="task1">
<label for="task1">
<span contenteditable="true" class="task-text">
Complete project documentation
</span>
</label>
</div>
<div class="todo-item">
<input type="checkbox" id="task2">
<label for="task2">
<span contenteditable="true" class="task-text">
Review pull requests
</span>
</label>
</div>
<div class="todo-item">
<input type="checkbox" id="task3" checked>
<label for="task3">
<span contenteditable="true" class="task-text">
Update dependencies
</span>
</label>
</div>
</div>
<button class="add-task">+ Add Task</button>
</div>Loading preview...
Element content is fully editable by the user
<div contenteditable="true">Element content cannot be edited (default behavior)
<div contenteditable="false">Inherits editable state from parent element
<span contenteditable="inherit">spellcheck="true" - Enable spell checkinginputmode="text" - Hint keyboard type on mobileautocorrect="on" - Enable auto-correction (Safari)| Browser | Basic Support | execCommand | Notes |
|---|---|---|---|
| Chrome | 4+ | Full | Excellent support |
| Firefox | 3+ | Full | Excellent support |
| Safari | 3.1+ | Full | Some quirks in older versions |
| Edge | 12+ | Full | Consistent with Chrome |
| Opera | 9+ | Full | Excellent support |
execCommand API is being replaced by the newer Input Events API for better control.Try making any element editable in real-time