demo · v148

Spell-check Overlay

Type into a real <textarea>. A toy linter scans for "misspelled" tokens and uses OpaqueRange to draw a wavy red underline under each one — without rebuilding the input as a contenteditable div. This was the canonical motivating example in the MSEdge explainer.

Heads up Origin trial. Where OpaqueRange isn't available, the demo falls back to estimating glyph rectangles with a mirror canvas measurement. Either way the underlines render — the badge above the editor tells you which path is active.
API: checking…
0 potential errors
Try misspelling: recieve, seperate, occured

the code

// With OpaqueRange (Chrome 148 OT)
const range = textarea.getOpaqueRange(start, end);
for (const rect of range.getClientRects()) {
  drawSquiggle(rect);
}
// Plus: register the range with CSS.highlights for in-control highlights
CSS.highlights.set("misspelled", new Highlight(range));

see also

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗