neat-annotations
neat-annotations.syabro.com- Category
- Developer Tools
- Rank
- No. 1036Tools index
Previous survey · No. 1053 ·
- Pricing
- Open Source
- Type
- TOOL
- Use case
- Design & Media
- GitHub
- 1.2k stars
- Date
About
neat-annotations is a pure-CSS library (no JavaScript) that draws hand-drawn-style arrows and handwritten labels around any inline element on a webpage. It supports eight directions, five preset colors plus custom CSS colors, stacked annotations pointing at one target from multiple sides, and a highlight-only mode for text markers.
What it does
A single stylesheet that turns a wrapped span into a sketch-style callout: a drawn arrow points at the word, and a slightly tilted handwritten note sits at the arrow's tail. You pick where the arrow points with one of eight compass classes and type the note into an HTML attribute. The arrow and the note are both drawn by the browser from CSS alone, so there is no script to load and nothing to build. Leave off the note and you get a soft marker-pen highlight instead.
Why it's ranked here
A narrow tool that does its one job with almost no surface area. The whole library is one MIT-licensed stylesheet, served from jsDelivr or copied into a project, with no JavaScript and no build step. Every spacing value, the label width and the tilt are exposed as CSS custom properties with documented defaults, and the color classes adapt to light and dark themes on their own. It also respects reduced-motion and high-contrast settings. What keeps it modest is scope: it decorates inline text, it does not lay anything out, and it leans on recent CSS color features.
What's good
Theming is handled properly rather than bolted on. Each of the six built-in colors carries separate light and dark values, and a custom color can be any CSS color, including one that switches with the theme. The rainbow color only animates when the visitor has not asked for reduced motion, and in Windows high-contrast mode the arrow repaints in the system text color so it stays visible. Arrows and notes ignore pointer events, so they never block clicks on the page underneath. The README's accessibility section is honest about the limits instead of overselling.
Tradeoffs
Annotations sit outside their target and reserve no space, so the README tells you to leave margin yourself; on a tight line the arrow and note will overlap neighbouring text. Arrows are a fixed 46 by 38 pixel drawing, and notes wrap at 150 pixels by default. The note text lives in an attribute rendered by CSS, which the README says must not be the only place important information appears. The stylesheet relies on newer color functions and a registered custom property, so older browsers will degrade. The default handwriting font is a separate Google Fonts load, otherwise it falls back to a generic cursive.
How to use it well
Good fit for landing pages, docs and changelogs where you want to point at a word or a badge with a casual, hand-marked feel, and you control the surrounding spacing. Load the handwriting font if you want it to match the demo. Nest annotations to point at one target from several sides, and tune gaps and offsets per element with the variables. Treat every note as decoration: repeat anything that matters in visible text or a proper accessible description. It is not a diagramming tool, a tooltip system or a way to annotate content you do not own.
Technical notes+
neat-annotations.css is the entire library. The base .ann rule makes the target inline-block and position:relative, paints the highlight with --ann-mark (background plus two horizontal box-shadows extending it 0.3em each side), and defines every tunable as a custom property. The note is ::after with content: attr(data-note), absolutely positioned, rotated by --ann-rotate, capped at --ann-label-max-width with overflow-wrap:anywhere. The arrow is ::before, a 46x38px box filled with --ann-color and shaped by a mask of an inline SVG data URI; each direction class (.ann-n through .ann-nw) sets its own private --_ann-arrow-mask and offsets. Empty or missing data-note hides both pseudo-elements, which is how highlight-only mode works. Colors use light-dark(), color-mix(in oklch) and relative oklch(from ...) syntax; .ann-rainbow animates a hue registered via @property --ann-rainbow-hue inside a prefers-reduced-motion: no-preference query; a forced-colors: active block sets the arrow to CanvasText. index.html is the demo site, which loads the same stylesheet plus the Shantell Sans font. README.md documents the class API and variable defaults; LICENSE is MIT, copyright Maxim Syabro.
Observed
- License
- MIT
- Language
- CSS only, no JavaScript
- Distribution
- Single stylesheet via jsDelivr or local copy, no build step
- Interface
- CSS classes on a wrapping element, note text from the data-note attribute
- Directions
- Eight compass classes
- Built-in colors
- Six (amber, blue, green, red, purple, rainbow) plus any custom CSS color
- Theme support
- Light and dark values via light-dark()
- Accessibility handling
- Honors prefers-reduced-motion and forced-colors; README warns notes are decorative
- Layout
- Annotations are absolutely positioned and reserve no space
- Optional dependency
- Shantell Sans web font, falls back to cursive
Read from README.md, index.html, neat-annotations.css, LICENSE.
Tags
Media
Comments (0)
No comments yet
Editorially curated, with community endorsements as a secondary signal. Corrections welcome.