The quick brown fox jumps over the lazy dog. Ranges can start inside one text node and end inside another.
Nested bold with italic inside it shows how the common ancestor climbs to the nearest shared element.
- First list item
- Second item with bold
Selection and Range Playground - Interactive Lab | IconVault
Debug the Selection and Range APIs visually: container paths, offsets and rect overlays. Free, runs fully in your browser.
All toolsView all 10+ tools →
Selection & Range Playground
Visual Range debugger with DOM tree offsets
5 of 5 free uses left
How to play
Drag across the sample article to make a selection (try spanning bold and italic text), then press Inspect selection. The tool maps every range to its DOM containers, offsets and screen rects.
Sample article #article
Range debugger
Inspect a selection to see each range's containers, offsets and rects.
Offsets mean different things per node type: a character index inside a text node, or a child index inside an element. The path shows exactly which.
Range API cheat sheet
// Inspect the live selection
const sel = window.getSelection();
for (let i = 0; i < sel.rangeCount; i++) {
const r = sel.getRangeAt(i);
console.log("start:", r.startContainer, r.startOffset);
console.log("end:", r.endContainer, r.endOffset);
console.log("collapsed:", r.collapsed, "text:", r.toString());
console.log("rects:", r.getClientRects().length);
}
// Programmatic selection: select word under the caret
sel.collapseToStart();
sel.modify("extend", "backward", "word");
sel.modify("extend", "forward", "word");
// Select all inside an element
const range = document.createRange();
range.selectNodeContents(document.querySelector("#article"));
sel.removeAllRanges();
sel.addRange(range);5 of 5 free copies left.
About this tool
IconVault's Selection and Range Playground turns text selection into something you can see: select text in the sample article, then inspect the live Selection and every Range with container paths, offsets, the common ancestor and screen rects drawn as overlays. It is free to use and runs fully in your browser with nothing uploaded.
How to use: drag across bold and italic text, press Inspect selection, and read each range's start and end containers. Try select-all, collapse and expand-to-word to see how offsets behave. Perfect for developers building editors, annotations and custom selection UIs.
Frequently asked questions
Popular searches
selection apirange api javascriptwindow.getselectiondocument.createRangerange debuggerselection anchor focusrange startcontainerrange startoffsetgetclientrects rangecommonancestorcontainercollapsed rangeselect text programmaticallyselection.modifyextend selection wordcollapsetostartselectnodecontentsaddrange javascriptremoveallrangesselection rangecountmultiple ranges selectionfirefox multi rangerange tostringrange surroundcontentsextractcontents rangeclonecontentsdeletecontents rangecompareboundarypointsrange intersectsnodeselection directionbackward selection jstext selection javascriptlearn selection apirange api tutorialdom range explainedselection api mdnrange api mdncaret position javascriptget caret offsetselectionchange eventhighlight selected textcustom text selectionselection api browser supportcontenteditable selectionsave restore selectionselection api reactrange api examplestext fragment selectionselection playgrounddom selection labjavascript text range
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