Highlighters
<Highlight> draws a marker stroke over text without touching it. Everything below is a prop on options, and every sample is live, so this page is the reference.
123<Highlight options={{ color: { palette: "mild", swatch: "blue" } }}> some text</Highlight>With no options it is the fluorescent yellow: a plain highlight.
Mark type
markType picks what the pen does to the line.
"highlight": a stroke behind the words"underline": a stroke under the words"overline": a stroke over the words"strike-through": a stroke through the words
Color
color takes a { palette, swatch } pair or any CSS color string. palette on its own uses that palette's default swatch.
A raw color: color: "#ff8a5c". A palette alone: palette: "calm".
There are five palettes with six swatches each.
fluorescent: yellow · green · orange · pink · blue · purple
mild: yellow · green · blue · pink · orange · purple
vintage: mustard · olive · rust · rose · teal · plum
neutral: sand · stone · clay · sage · slate · taupe
calm: sky · mint · lavender · blush · seafoam · periwinkle
Gradient
gradient replaces the flat color with a linear gradient: an angle and a list of stops, each with an offset, a color and an optional opacity.
a pink to blue gradient across one line of text
Opacity and blending
opacity is how much ink goes down, 0 to 1. The default is 0.55.
opacity: 0.2 · opacity: 0.55 · opacity: 1
blendMode is how the ink combines with what is under it: "multiply" (the default, like real ink), "normal", "darken", "screen", "overlay" or "color-burn".
multiply · normal · darken · screen · overlay · color-burn
vivid pushes the color harder: true, or "screen" for the glowing variant.
vivid: true · vivid: "screen"
Tip
tip is the nib. type is "chisel", "bullet" or "fine".
chisel, the broad one · bullet, the rounded one · fine, the thin one
The rest of the nib: width (default 16), thickness (4), angle (35), overshoot (2, how far the stroke runs past the text), overshootJitter (1) and angleJitter (0).
width: 28 · thickness: 10 · angle: 70 · overshoot: 12 · overshootJitter: 8 · angleJitter: 20
Ink
ink is how the pen lays down color. Defaults in brackets.
flow: 0.9 (0.45), how freely ink comes out.
viscosity: 0.9 (0.5), thick ink stays where it lands.
feathering: 0.8 (0.2), softness at the edges.
streakiness: 0.9 (0.25), the streaks left as it dries.
dryout: 0.8 (0.1), a pen running out.
startEndBuildup: 0.7 (0.1), ink pooling where the stroke starts and stops.
flowFade: 1 (0.5), how much the flow fades along the line.
Speed
speed simulates the hand moving at different speeds along the line. It is off by default. Set enabled: true, then tune sensitivity (1), slowSpeed (2.5), fastSpeed (10.5), minDeposit (0.4), smoothing (1), resolution (24), dryoutBoost (1), streakBoost (0.08), featherReduce (1) and poolBoost (1).
Edge
edge shapes the outline. waviness (1), frequency (22), roughness (0.2), cap and radius (5).
waviness: 4 · frequency: 60 · roughness: 0.9
cap is "flat", "round" or "square", with radius as the rounding.
flat · round, radius 10 · square
Paper and glow
paper.absorbency (0.3) is how much the page soaks up: absorbency: 0.9.
glow adds a halo. It is off by default. enabled, intensity (0.5), spread (4) and color.
glow enabled · green, intensity 1, spread 12 · a pink glow color
Snap
snap decides where the stroke may start and end. It only shows on text that wraps, so the samples below are long.
"word" (the default) snaps to word boundaries: this stroke starts and ends on whole words, wherever the line breaks fall in the paragraph.
"line" snaps to whole lines: this stroke covers each line it touches from edge to edge, however much of the line the text fills.
"glyph" snaps to single characters: this stroke stops exactly at the character, even partway through a word.
"none" does not snap at all: this stroke follows the text range exactly and nothing else, not rounded to anything.
Animation
The mark draws itself in. animation takes draw (true), duration in ms (420), easing ("ease-out"), direction, stagger (90, the delay between lines), trigger, threshold (0.2), rootMargin and repeat.
direction is "left-to-right", "right-to-left" or "center-out". Reload to see them draw.
left-to-right, 1200ms · right-to-left, 1200ms · center-out, 1200ms
trigger: "in-view" waits until the text scrolls into view. in-view with repeat: scroll away and back
draw: false skips the animation and shows the mark at once: no draw-in
Everything else
seed: a number that fixes the randomness, so a mark looks the same every time. seed: 7 and seed: 8 are the same pen with different luck.renderer:"auto","svg","css"or"highlight-api". Picks how the mark is drawn."auto"chooses by what the browser supports.fadeOnClear: whether the mark fades out instead of vanishing when it is removed. The default is true, and it is skipped for readers who prefer reduced motion.semantic(default false) andcontrastBackground(default null) are accepted and merged into the options, but version 2.0.0 of the library does not read them anywhere yet. They look reserved for later.