Home

Highlighters Wiki

Realistic, deeply customizable highlighter-pen marks for web text. From a single word to a whole page with surgical exclusions: multiline, deterministic, SSR-safe. This wiki documents the @highlighters package family in depth.

A flat <mark> background looks like a CSS rectangle, not ink. highlighters draws a real highlighter-pen mark over any text: wet-ink colour, frayed edges, lengthwise streaking, and true multiplicative optics, all anchored to an absolute pixel grid so a mark looks hand-made yet never stretches or swims. It never touches your text, so selection and find-in-page keep working.

New here? Start with Getting-Started, then Which-API-Should-I-Use.

Getting Started

• Getting-Started: Installation and quick start for vanilla JS, React, Vue, and Svelte
• Which-API-Should-I-Use: Element vs selection vs page, component vs hook/composable/action, and which renderer tier

The Mark

• Mark-Types-and-Shapes: highlight, underline, overline, and strike-through, and how one band primitive makes them all
• Tips-and-Edges: Chisel/bullet/fine nibs, chisel slant, end caps, corner radius, and the wavy frayed edge
• Ink-and-Optics: Flow, viscosity, feathering, streaking, dry-out, end build-up, opacity, blend modes, and additive glow
• Color-and-Palettes: The curated palette families, swatch references, solid colours, and gradients
• Snapping-and-Overshoot: Clamp marks to word, line, or glyph, and tune leading/trailing overshoot
• Animation: The draw-on swipe, per-line stagger, in-view scroll trigger, and reduced-motion behaviour

Targeting

• Page-Highlighting: Whole-page and sub-tree marking with data-highlight, include/exclude, and a live mutation watcher
• Selection-Highlighting: Painting the user's live selection in real time, plus beta speed-aware ink

Reference

• Recipes: Common patterns (key sentence, color-coded notes, scroll-reveal, grouped choreography) in every framework
• API-Reference: All exported functions, the MarkHandle/GroupHandle contracts, and framework bindings
• Options-Reference: Every HighlightOptions field, its default, and what it does
• How-It-Works: The anchored-grid method, the targeting-to-geometry pipeline, and the three renderer tiers

Production

• Performance: Build cost, the three tiers' runtime budgets, idle cost, and the auto-degrade threshold
• SSR-Support: The DOM-free @highlighters/core/path entry and byte-identical server/client marks
• Accessibility-and-Reflow: Why text is never altered, how overlays stay inert, and how marks reposition on reflow
• Limitations: What is out of scope and why
• FAQ: Common questions and answers