Tool
Rough Notation
Library to create and animate hand-drawn web annotations
About
Rough Notation uses RoughJS to create a hand-drawn look and feel. Elements can be annotated in a number of different styles. Animation duration and delay can be configured, or just turned off.
Rough Notation is 3.8kb in size when gzipped, and the code is available on GitHub.
Following are the different styles of annotations. Hit the annotate button in each section to see the animated annotation
Create a hand-drawn bracket around a block (like a paragraph of text) on one or multiple sides of the block.
Features
- animated hand-drawn annotations
- Pricing
- Open Source
- Pricing detail
- MIT
- Platforms
- Web
Alternatives from our catalog
Tools on the same shelves as Rough Notation, ordered by shared tags and our own comparisons. Not vendor endorsements.
- React SpringOpen Source · React / web
Best-in-class interruptible spring motion; pairs with R3F
same tags
- MotiOpen Source · React Native + Web
Universal RN+web interaction library
same tags
- use-gestureOpen Source · React + Vanilla
Standard gesture layer under react-spring
same tags
- AOSOpen Source · Web
Zero-config scroll reveals
same tags
- View Transition APIFree · Web
Native platform direction for page UI transitions in 2026
same tags
- Web Animations APIFree · Web
Zero-dependency foundation libraries build atop
same tags
Add a badge to your site
Makers listed on isthereanytool.app can embed this badge. It links to Rough Notation’s page on our catalog — no scripts, just HTML.
<a href="https://www.isthereanytool.app/tool/rough-notation" target="_blank" rel="noopener"><img src="https://www.isthereanytool.app/badge/listed.svg?theme=paper" alt="Featured on isthereanytool.app" width="250" height="54"></a>