neat-annotations — neat hand-drawn CSS annotations

Neat hand-drawn annotations for your page: arrows and handwritten labels.Pure CSS, no JavaScript, one small file.

Scroll down for more info

In the wild

Wrap any inline element — the arrow and the note are drawn around it.

docs/specs/cli.md

- [ ] CLI-042 Add export command #cli !high @blocked_by:CLI-041

Write task output as JSON for scripts and agents

Example from mdtask.dev.

Installation

1. Get the CSS

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/syabro/neat-annotations/neat-annotations.css">

Or download neat-annotations.css and link it locally.

2. Optional: handwritten font

<link href="https://fonts.googleapis.com/css2?family=Shantell+Sans:wght@400;500;600&display=swap" rel="stylesheet">

Skip this and labels fall back to cursive.

Directions

target

Follow compass directions for arrows.

target

<span
  class="ann ann-n"
  data-note=".ann-n"
>
  target
</span>

Colors

Five colors and an animated rainbow, plus a warm-gray default.

plain

amber

blue

green

red

purple

rainbow

<span
  class="ann ann-n ann-red"
  data-note="ann-red"
>
  red
</span>

Custom colors

Set any CSS color directly with --ann-color.

<span
  class="ann ann-n"
  data-note="..."
  style="--ann-color: #00c2d7"
>
  cyan
</span>

Target highlight

Default stable

No mark stable

<span
  class="ann ann-n ann-red ann-no-mark"
  data-note="keeps its own fill"
>
  <span class="badge">stable</span>
</span>

Highlight only

Use it as a text marker: omit data-note to hide the arrow and label.

Ship when the migration guide is ready.

<p>
  Ship when the
  <span class="ann ann-amber">
    migration guide
  </span>
  is ready.
</p>

Stack annotations

Nest two annotations to point at one target from different sides.

<span
  class="ann ann-w ann-blue ann-no-mark"
  data-note="assigned to Alice"
>
  <span class="ann ann-e ann-red" data-note="P2 bug">login flow</span>
</span>

Long notes

Notes wrap naturally; set --ann-label-max-width to choose the line length.

The release candidate is ready for review.

<span
  class="ann ann-n ann-blue"
  data-note="Confirm the release notes, migration guide, and rollback steps before publishing."
  style="--ann-label-max-width: 220px"
>
  ...
</span>