Browser primitive · 0 dependencies
Caret geometry
for the web.
Reliable viewport coordinates for inputs, textareas and editable DOM, with virtual anchors for floating UI.
npm install @nipe-solutions/caret-geometryCaret anchor
Measured live in your browser. Text stays on this page.
01 / Start
One function. One coordinate system.
Every rectangle uses viewport-relative CSS pixels—the same
coordinate space as getBoundingClientRect().
import { getCaretRect } from '@nipe-solutions/caret-geometry'
const rect = getCaretRect(textarea)
if (rect) popup.style.translate = `${rect.left}px ${rect.bottom}px`- Text controls
- UTF-16 positions, backward selection focus, wrapping and internal scroll.
- Editable DOM
- Native Range geometry first, conservative fallback for empty boundaries.
- Floating UI
- Structural virtual elements with meaningful context elements. No runtime coupling.
02 / Compatibility
Specific promises, visible caveats.
| Target | Status | Notes |
|---|---|---|
| input: text, tel, url | Supported | Explicit or current focus position |
| input: search | Caveats | Native decorations vary |
| input: password | Unsupported | Never mirrored |
| textarea | Supported | Wrap, tabs, scroll and RTL tested |
| Range / Selection | Supported | Selection defaults to focus |
| contenteditable | Caveats | Fallback may briefly insert a marker |
| Vertical writing / rotation | Experimental | Not a stable v1 guarantee |
03 / Guarantees
Built to disappear into your stack.
- Source value, focus, selection, scroll and styles stay unchanged.
- No telemetry, network calls, stylesheet or framework dependency.
- Mirror text exists only during synchronous measurement and is cleared.
- Safe Node and SSR import. Lazy DOM work only after a browser call.