Limited supportUse with care and provide a fallback when broad support matters.
Other Limited support

EditContext

The EditContext API allows you to build rich text editors that support advanced text input, such as Input Method Editor (IME) composition, an emoji picker, or other platform-specific editing UI. It is most useful when native HTML semantics or browser capabilities can replace custom implementation work.

Other

Overview

The EditContext API allows you to build rich text editors that support advanced text input, such as Input Method Editor (IME) composition, an emoji picker, or other platform-specific editing UI. It is most useful when native HTML semantics or browser capabilities can replace custom implementation work.

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
CharacterBoundsUpdateEvent
Experimental
121
121
121
CharacterBoundsUpdateEvent
Experimental

The CharacterBoundsUpdateEvent() constructor returns a new CharacterBoundsUpdateEvent object.
121
121
121
rangeEnd
Experimental

The CharacterBoundsUpdateEvent.rangeEnd read-only property represents the offset of the last character within the editable text region for which the operating system needs the bounds.
121
121
121
rangeStart
Experimental

The CharacterBoundsUpdateEvent.rangeStart read-only property represents the offset of the first character within the editable text region for which the operating system needs the bounds.
121
121
121
EditContext
Experimental

The EditContext interface represents the text edit context of an element that was made editable by using the EditContext API.
121
121
121
attachedElements
Experimental

The attachedElements() method of the EditContext interface returns an Array that contains only one item. This item is the element that's associated with the EditContext object.
121
121
121
characterBounds
Experimental

The characterBounds() method of the EditContext interface returns an Array containing the list of bounding rectangles for the characters in the EditContext object.
121
121
121
characterBoundsRangeStart
Experimental

The characterBoundsRangeStart read-only property of the EditContext interface indicates the index of the character, within the editable text content, that corresponds to the first item in the EditContext.characterBounds() array.
121
121
121
characterboundsupdate_event
Experimental

The characterboundsupdate event fires when the operating system needs to know the bounds of certain characters within editable text region of the EditContext object.
121
121
121
compositionend_event
Experimental

The compositionend event of the EditContext interface fires when composition using an Input Method Editor (IME) window ends.
121
121
121
compositionstart_event
Experimental

The compositionstart event of the EditContext interface fires when composition using an Input Method Editor (IME) window starts.
121
121
121
EditContext
Experimental

The EditContext() constructor returns a new EditContext object.
121
121
121
selectionEnd
Experimental

The selectionEnd read-only property of the EditContext refers to the offset, within the editable text content, of the end of the current selection.
121
121
121
selectionStart
Experimental

The selectionStart read-only property of the EditContext refers to the offset, within the editable text content, of the start of the current selection.
121
121
121
text
Experimental

The text read-only property of the EditContext interface represents the editable content of the element.
121
121
121
textformatupdate_event
Experimental

The textformatupdate event of the EditContext interface fires when composition using an Input Method Editor (IME) window is happening.
121
121
121
textupdate_event
Experimental

The textupdate event of the EditContext interface fires when the user has made changes to the text or selection of an editable region that's attached to an EditContext instance.
121
121
121
updateCharacterBounds
Experimental

The EditContext.updateCharacterBounds() method of the EditContext interface should be called as response to a EditContext.characterboundsupdate_event event to inform the operating system about the position and size of the characters in the EditContext object.
121
121
121
updateControlBounds
Experimental

The EditContext.updateControlBounds() method of the EditContext interface is used to inform the operating system about the position and size of the editable text region of the EditContext object.
121
121
121
updateSelection
Experimental

The updateSelection() method of the EditContext interface updates the internal state of the selection within the editable text context. This method is used to update the selection state when the user interacts with the text rendering in the EditContext's associated element, such as by clicking or dragging the mouse, or by using the keyboard.
121
121
121
updateSelectionBounds
Experimental

The EditContext.updateSelectionBounds() method of the EditContext interface is used to inform the operating system about the bounds of the text selection within the editable region that's associated with the EditContext object.
121
121
121
updateText
Experimental

The updateText() method of the EditContext interface updates the internal text content of an EditContext object.
121
121
121
editContext
Experimental

The editContext property of the HTMLElement interface gets and sets an element's associated EditContext object.
121
121
121
TextFormat
Experimental

The TextFormat interface represents specific formatting that should be applied to a range of text in an editable text region that's attached to an EditContext instance. The text formatting is requested by the Input Method Editor (IME) window that the user is composing text with.
121
121
121
rangeEnd
Experimental

The rangeEnd property of the TextFormat interface indicates the end position of the text range that needs to be formatted with the given text format.
121
121
121
rangeStart
Experimental

The rangeStart property of the TextFormat interface indicates the start position of the text range that needs to be formatted with the given text format.
121
121
121
TextFormat
Experimental

The TextFormat() constructor returns a new TextFormat object.
121
121
121
underlineStyle
Experimental

The underlineStyle property of the TextFormat interface indicates the style of the underline that needs to be applied to the text range that is being formatted.
121
121
121
underlineThickness
Experimental

The underlineThickness property of the TextFormat interface indicates the thickness of the underline that needs to be applied to the text range that is being formatted.
121
121
121
TextFormatUpdateEvent
Experimental

The TextFormatUpdateEvent interface is a DOM event that represents a list of text formats that an Input Method Editor (IME) window wants to apply to the text being composed in an editable region that's attached to an EditContext instance.
121
121
121
getTextFormats
Experimental

The getTextFormats() method of the TextFormatUpdateEvent interface returns an Array of TextFormat objects that represent the formats that an Input Method Editor (IME) window wants to apply to the text being composed.
121
121
121
TextFormatUpdateEvent
Experimental

The TextFormatUpdateEvent() constructor returns a new TextFormatUpdateEvent object.
121
121
121
TextUpdateEvent
Experimental

The TextUpdateEvent interface is a DOM event that represents a text or selection update in an editable text region that's attached to an EditContext instance.
121
121
121
selectionEnd
Experimental

The TextUpdateEvent.selectionEnd read-only property indicates the position of the end of the selection (or caret) within the text content of the editable region attached to the EditContext object.
121
121
121
selectionStart
Experimental

The TextUpdateEvent.selectionStart read-only property indicates the position of the start of the selection (or caret) within the text content of the editable region attached to the EditContext object.
121
121
121
text
Experimental

The TextUpdateEvent.text read-only property contains the text that was inserted within the updated range of an EditContext's textupdate event.
121
121
121
TextUpdateEvent
Experimental

The TextUpdateEvent() constructor returns a new TextUpdateEvent object.
121
121
121
updateRangeEnd
Experimental

The TextUpdateEvent.updateRangeEnd read-only property indicates the end position of the text range that is being replaced in the EditContext object.
121
121
121
updateRangeStart
Experimental

The TextUpdateEvent.updateRangeStart read-only property indicates the start position of the text range that is being replaced in the EditContext object.
121
121
121
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

JAVASCRIPT 
const editCtx = new EditContext();
const el = document.getElementById('editor');
el.editContext = editCtx;
editCtx.addEventListener('textupdate', (e) => {
  console.log('Input text:', e.text);
});

Live demo

Edit context role

Describe how EditContext separates text editing services from normal DOM editing.

PreviewFullscreen

Why it exists

Useful for editors that need IME support, custom layout, and full rendering control.

PreviewFullscreen

Adoption note

EditContext is specialized and usually unnecessary for ordinary forms or contenteditable.

PreviewFullscreen

Use cases

  • Use EditContext

    Use EditContext when standard HTML needs a more specific platform feature, semantic signal, or browser capability.

  • Handle edge cases

    Apply EditContext to solve a focused requirement without redesigning the whole page architecture.

Cautions

  • Test EditContext in your target browsers and input environments before depending on it as a primary behavior.
  • Provide a fallback path or acceptable degradation strategy when support is still limited.

Accessibility

  • Make sure EditContext supports the intended task without making the page harder to perceive, understand, or operate.

Related links

Powered by web-features