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.
EditContext
Custom text editors with IME composition
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)
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
More tools
Algorithm Visualizer
Watch sorting and searching animate step by step
Alt Text Helper
Write better image alt text with live feedback
ARIA Reference
Searchable ARIA roles and attributes guide
Array Visualizer
Step through map, filter, reduce like a debugger
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