What is contenteditable?

The contenteditable Attribute in HTML

The contenteditable attribute in HTML makes an element editable directly by the user in the browser. When applied, the user can click inside the element and modify its text or content without needing a form field. This feature is often used in WYSIWYG editors, note-taking apps, or anywhere inline editing is needed.

Example of Using contenteditable

Key Points About contenteditable

1
contenteditable="true": Makes the element editable.
2
contenteditable="false": Ensures the element is not editable (even if its parent is).
3
By default, if the attribute is present without a value, it is considered true.
4
Useful for inline editing without using form inputs.

Difficulty: 6/10

Topics: rich-text-editing, browser-compatibility, accessibility

Scenario Questions

0-2 years experience

1
How would you make a div editable so users can type in it directly?
2
What happens when a user pastes formatted text from Word into a contenteditable element?
3
How do you retrieve the plain text a user typed into a contenteditable div, ignoring any HTML tags?

2-5 years experience

1
You're building an inline comment editor using contenteditable. Users report that pressing Enter creates nested divs in Chrome but <br> tags in Firefox. How do you normalize this behavior?
2
A PM wants a 'bold' button for your contenteditable editor. execCommand('bold') is deprecated. What's your approach?
3
Your contenteditable field submits raw HTML to the backend, and you're seeing XSS attempts in logs. How do you sanitize the output before storage?

5-8 years experience

1
Design a reusable React component for a rich text editor using contenteditable. How do you handle cursor position restoration when the component re-renders due to parent state changes?
2
Your team is seeing 200ms+ input latency in a large contenteditable document (10k+ nodes). Walk me through profiling and fixing this.
3
You need to support real-time collaborative editing with multiple visible cursors on a contenteditable surface. What are the core architectural challenges you'd anticipate?

8+ years experience

1
Your org has 12 different contenteditable-based editors across products, each with custom hacks. Propose a migration strategy to a shared editing foundation without halting feature work.
2
A legacy CMS uses contenteditable for page building. Leadership wants to move to a block-based editor (like Gutenberg). How do you evaluate the rewrite vs. incremental migration tradeoff?
3
You're defining the frontend platform strategy for rich text editing across a 200-engineer org. Build vs. buy vs. adopt open source — what's your decision framework?

Follow-up Questions

❓How does contenteditable differ from <textarea> for plain text input?
❓What's the current status of execCommand and what replaces it?
❓How would you make a contenteditable region accessible to screen readers?