rough-stuff/rough-notation

Health v2 · maintenance only

Flags: no_releases

Adoption not part of the score

9680 stars · 236 forks observed · 2026-08-28

What it is AI-extracted, prompt v1, taxonomy v1, 2026-08-29, confidence not recorded

A small (3.8kb gzipped) JavaScript library for creating and animating hand-drawn style annotations on web page elements, built on RoughJS. It supports multiple annotation styles like underline, box, circle, highlight, strike-through, crossed-off, and brackets, with configurable animation and grouping.

Use cases

• add hand-drawn underline or highlight effects to text on a webpage
• animate annotations on page elements for tutorials or demos
• draw sketchy circles and boxes around UI elements to draw attention
• create sequenced annotation animations with annotation groups
• add highlighter and strike-through effects to inline content
• annotate multi-line inline content with hand-drawn marks

When to choose

• you want a lightweight, dependency-light way to add sketchy annotation effects to web pages
• you need animated, hand-drawn visual emphasis for tutorials, onboarding, or presentations
• you want multiple annotation styles (underline, box, circle, highlight, brackets) with sequencing support

When to avoid

• you need precise, non-sketchy geometric overlays or complex diagramming
• you are not working in a browser/DOM environment
• you need annotations that persist as editable document content rather than visual overlays

Facets

library · maturity stable

animation ui-components graphics frontend web-development web-design browser hand-drawn annotations roughjs svg typescript sketchy-styles lightweight javascript web

Member repositories

For agents

markdown · JSON · MCP: product_card(name="rough-stuff/rough-notation")