EditContext - Interactive Lab | IconVault

Build a real custom text editor on the EditContext API: IME composition events, bounds updates, caret model. Free, in your browser.

All tools

EditContext

Custom text editors with IME composition

5 of 5 free uses left

EditContext is not supported in this browser.

It needs Chrome or Edge 121 and later. The editor below is a read-only preview of what the wiring looks like.

Editor controls

attached: no

composing: no

selection: [80, 80]

chars: 80

5 of 5 free sessions left.

What EditContext does: it separates text input from the DOM. You keep your own text model and caret, and the browser routes keyboards, IMEs and autocorrect through textupdate events instead of mutating your DOM.

That is how canvas-based editors (docs apps, code editors, design tools) get native IME and mobile keyboard support without a hidden textarea.

Custom editor (wired to the real EditContext)

Edit me. Try an IME (e.g. Japanese or emoji picker) to watch composition events.

Type, use Backspace and arrow keys, or open an IME / the emoji picker (Win + . or Cmd + Ctrl + Space) to fire real composition events.

EditContext event log

Focus the editor and type: every EditContext event lands here.

About this tool

IconVault's EditContext playground wires a working custom text editor to the real `EditContext` API: type with your physical keyboard, open an IME or the emoji picker to fire genuine composition events, and watch every textupdate, characterboundsupdate and composition event land in the log with its exact payload. It is free and runs fully in your browser.

You will learn the core idea (the browser routes text input to your model instead of mutating your DOM), the event protocol for applying remote edits, why character bounds matter for IME candidate windows, and the keyboard handling a real canvas editor still owns itself. Where EditContext is missing, the tool says so instead of pretending.

Frequently asked questions

Popular searches

editcontexteditcontext apiedit context javascriptcustom text editor webime web apicomposition eventstextupdate eventcharacterboundsupdatevirtual keyboard webcanvas text editorhidden textarea alternativeeditcontext exampleeditcontext tutorialeditcontext browser supportcaniuse editcontexteditcontext chrome 121ime composition javascriptcompositionstart compositionendinput method editor webemoji picker web appupdatecharacterboundsupdatetext editcontextupdateselectioncontrol bounds imeselection boundscustom editor ime supportcode editor webcanvas editor text inputmobile keyboard custom editorautocorrect webdictation web apitextformatupdateeditcontext reacteditcontext typescriptmdn editcontexttest editcontext onlineeditcontext demochromium editcontexteditcontext specrich text custom editorslate editor imeprosemirror imemonaco editcontextvscode editcontexteditcontext vs contenteditablecontenteditable problemseditcontext performanceime candidate window positioneditcontext androideditcontext ios

More tools

Coming soon

CLI

Coming soon

Figma plugin

Coming soon

VS Code extension

Coming soon

Chrome extension

Coming soon

AI icon generator

Coming soon

Team workspaces

Coming soon

View all 10+ tools →