syabro GitHub avatar

neat-annotations

syabro

A CSS-only library for adding hand-drawn arrows and handwritten labels to any webpage using a single self-contained stylesheet, no JavaScript or build tools required.

Stars

378

7-day growth

+308

Forks

8

Open issues

0

License

MIT

Last updated

2026-07-22

Why it is worth attention

It provides a unique, hand-drawn aesthetic for annotations with zero JavaScript overhead, making it extremely lightweight and easy to integrate into any project.

Who it is for

  • Front-end web developers who want lightweight visual annotations
  • Designers looking for a hand-drawn, sketch-like note style
  • Technical writers and educators creating interactive documentation or tutorials
  • Developers building no‑JS or low‑overhead websites

Use cases

  • Annotating UI elements or code snippets in documentation
  • Adding explanatory labels to diagrams or screenshots
  • Highlighting and marking up specific text passages in tutorials
  • Creating interactive, styled callouts without JavaScript

Strengths

  • Pure CSS with zero JavaScript and no build step — one file to include
  • Eight directional arrow classes and six built-in colors plus custom color via CSS variable
  • Extensive fine‑tuning variables for arrow position, label gap, max width, rotation, and more
  • Accessibility guidance: warns against using data‑note as sole source of essential info

Considerations

  • Annotations do not reserve space and require manual margin adjustments around annotated content
  • The hand‑drawn look depends on the optional Shantell Sans font for best appearance
  • Only visual annotation; does not provide semantic structure or interactive behavior

README quick start

Quick start

Description

Hand-drawn CSS annotations for inline content

Related repositories

Similar projects matched by category, topics, and programming language.

osama-fawad
osama-fawad GitHub avatar

Pekingman

Pekingman is a multimodal agent system that integrates perception, long-term memory, human-like reasoning, emotional consistency, and real-time action to create believable NPC behavior.

HTML
933
thebuggeddev
thebuggeddev GitHub avatar

football-stadium

StadiView is a procedural 3D football stadium concept demo that lets users explore a fully generated stadium, select seats, and preview the view from each seat.

HTML
349
xiaohuailabs
xiaohuailabs GitHub avatar

xiaohu-ip-studio

Xiaohu IP Studio is an open-source Agent Skill that provides a Chinese article illustration methodology with 31 hand-drawn original IP characters, enabling AI agents to automatically generate consistent, character-driven illustrations for articles.

HTML
254