简体中文
English
Website review
This review may include AI-generated content and is not individually verified. Domain, certificate and other facts come from the observed data on this page.
What is RoughNotation?
RoughNotation is a small JavaScript library for adding hand-drawn, sketch-style annotations to elements on a web page. Instead of polished borders or standard CSS effects, it renders marks that look as if someone drew them by hand, and it can animate them into view.
Its annotation styles cover the common ways you might mark up text or UI:
- Underline: a sketchy line below an element.
- Box: a rough rectangle around the element.
- Circle: an irregular circle around it.
- Highlight: a highlighter-pen effect.
- Strike-Through: a hand-drawn line through the content.
- Crossed-Off: an X-like rejection mark.
- Brackets: hand-drawn brackets on one or more sides of a block, such as a paragraph.
It also supports annotating inline content that spans multiple lines, and lets you group annotations so that calling show animates them in sequence. Styling options include things like color, stroke width and animation duration, and you can skip animation entirely so a mark simply appears. Code and documentation are on GitHub, with project contact via Twitter at @preetster.
Where it fits, and where it doesn't
RoughNotation is best for moments when you want emphasis to feel informal or human: a tutorial that circles the button a reader should click, a landing page that underlines the one sentence that matters, a slide-like explainer that crosses out an outdated claim. Because it is small and focused, it suits developers who want a specific visual effect without pulling in a full drawing or animation framework.
The trade-off is that it is decorative rather than semantic. Screen readers and search engines will not treat a hand-drawn circle as meaningful structure, so important information should still live in real text, headings or labels. Its hand-drawn look also clashes with strict, corporate design systems, and heavy use of animated annotations can distract rather than guide.
A practical next step
Pick one element on a page you are building — a key phrase in an introduction or a primary call-to-action — and annotate only that. Compare RoughNotation with the plain CSS alternative (a solid underline or background highlight) and ask whether the sketch style adds meaning or just novelty. If it adds meaning, use a single annotation; if not, keep the simpler CSS.
How do I add RoughNotation to my project and start annotating elements?
Install RoughNotation in your project, then create an annotation on a target element with a style like underline, box, or circle. Call .show() when you want it to appear. The library is a small JavaScript tool for drawing and animating hand-drawn annotations on a web page.
Basic setup
Add it to your project with your package manager, then import it:
import { annotate } from 'rough-notation';
const element = document.querySelector('#my-text');
const annotation = annotate(element, { type: 'underline', color: '#f00' });
annotation.show();
The page lists these annotation types: underline, box, circle, highlight, strike-through, crossed-off, and brackets. Styling options include color, strokeWidth, and animation duration. If you don't want the animation, the annotation simply appears when show is called.
Practical next steps
- Animate in sequence: Create an annotation group and pass a list of annotations. Calling
showon the group animates them in order. This is useful for onboarding tours, step-by-step explanations, or a landing page that reveals points one at a time. - Style to match your page: Set color and strokeWidth so the sketch effect fits your design instead of clashing with it. A highlight in a soft brand color reads differently from a bright red circle.
- Annotate inline text that wraps: The library supports annotating inline content that spans multiple lines, which matters for highlighting a phrase inside a paragraph rather than a single-line heading.
When this fits, and when it doesn't
| Situation | RoughNotation is a good fit | Consider something else |
|---|---|---|
| Drawing attention to a phrase, stat, or button | Yes — underline, circle, highlight, box | — |
| Showing rejection or correction | Yes — crossed-off, strike-through | — |
| Sequential, guided explanations | Yes — annotation groups animate in order | — |
| Complex diagrams, charts, or freehand drawing | — | A full drawing or charting library |
| Static decorative borders that never animate | — | Plain CSS |
A concrete scenario: a documentation site wants to walk a new user through a settings panel. You annotate the relevant field with a circle, the save button with a box, and group them so the circle draws first, then the box. The user follows the motion instead of reading a wall of text.
For exact syntax, options, and framework-specific examples, check the official documentation and repository at GitHub.
What annotation styles does RoughNotation offer, such as underline, box, circle, highlight, and strike-through?
RoughNotation offers seven annotation styles, plus supporting features for grouping, styling and multi-line content. The styles, as listed on its own page, are:
- Underline — a sketchy underline below an element.
- Box — a hand-drawn box around an element.
- Circle — a hand-drawn circle around an element.
- Highlight — a highlighter-pen effect behind the element.
- Strike-Through — a hand-drawn line through an element.
- Crossed-Off — a crossed-out effect used to signal rejection.
- Brackets — hand-drawn brackets around a block, on one or multiple sides.
Beyond the style list, the page describes three capabilities that matter when choosing between them. Multiple lines lets you annotate inline content that spans more than one line, which is the usual constraint that rules out a simple box or circle. Annotation Group orders the animation: you pass a list of annotations to a group, and calling show animates them in sequence rather than all at once. Annotation Styling exposes properties such as color, stroke width and animation duration, and animation is optional — an annotation can simply appear when show is called.
A practical way to pick: use highlight for emphasis you want readers to absorb without interrupting the sentence, underline for a lighter emphasis on a phrase, and box or circle when the annotated item is short and self-contained. Reserve strike-through and crossed-off for content you are explicitly negating — a deprecated option, a rejected proposal, an outdated price. Brackets suit longer blocks such as a paragraph or a quoted passage, especially when you want the mark on only one or two sides. If your target text wraps across lines, check the multiple-lines support first, since that shapes which styles remain usable.
As a next step, sketch the annotation on the actual page at its real text width before committing. A style that looks right on a short label can crowd a wrapping paragraph, and the multi-line behaviour is easier to judge in place than in the abstract.
How can I animate annotations in sequence using annotation groups?
Create an annotation group by passing your annotations into annotationGroup, then call show() on the group. RoughNotation animates the annotations in the order you list them, so sequence is controlled by array order rather than by calling show() on each annotation separately.
How it works in practice
The page describes RoughNotation as a small JavaScript library for creating and animating hand-drawn annotations, with styles including Underline, Box, Circle, Highlight, Strike-Through, Crossed-Off and Brackets. Its Annotation Group feature exists specifically to order animation: you pass a list of annotations to create a group, and when show is called on the group, the annotations animate in sequence.
A practical reader scenario: you write a tutorial page and want a highlight to appear first, then a circle around a key term, then a bracket around a whole paragraph. Instead of triggering three separate show() calls with your own timers, you create the three annotations, collect them in a group, and call show() once. The group handles the ordering.
Points to plan around
- Order is the list order. Decide the narrative sequence before building the group, because rearranging annotations means rearranging the array.
- Grouping is about sequencing, not styling. Color, stroke width and animation duration remain per-annotation properties, so a group can mix a fast highlight with a slower circle.
- Animation is optional. The page notes that annotations do not have to animate; they simply appear when
showis called. That gives you a fallback for reduced-motion preferences or for static screenshots. - Multi-line content is supported, so a group can include an annotation spanning several lines of inline text without breaking the sequence.
Choosing between a group and individual calls
| Approach | Best for | Trade-off |
|---|---|---|
| Annotation group | A scripted reveal where order matters | Less control over exact gaps between steps |
Individual show() calls |
Precise timing or conditional triggers | You manage the sequencing logic yourself |
If your sequence is fixed and you want the library to handle the pacing, a group is the simpler route. If annotations should appear in response to scrolling, clicks or other events, individual calls give you the trigger points you need.
For setup details and the exact API, the page points to the project's code and documentation on GitHub, and the author, @preetster, is reachable on Twitter for questions.
Can I customize the appearance of annotations, like color, stroke width, and animation duration?
Yes. RoughNotation exposes annotation styling properties, and the page specifically names color, strokeWidth, and animation duration as configurable. Animation is also optional: an annotation can simply appear when show is called rather than being animated.
What you can adjust
- Color — set the annotation's stroke or highlight color.
- Stroke width — control how thick the hand-drawn line is.
- Animation duration — control how long the drawing animation takes.
- Animation on/off — you don't have to animate at all.
- Annotation type — underline, box, circle, highlight, strike-through, crossed-off, and brackets.
- Multiple lines — inline content that spans multiple lines can be annotated.
- Grouping — an annotation group lets you pass a list of annotations so they animate in order when
showis called on the group.
Choosing values in practice
A practical starting point: use a highlight for emphasis in body text, an underline for links or key phrases, and a box or brackets for larger blocks. Keep stroke width modest for small text and increase it for headings or callouts, since a thick stroke around small type can obscure the letters. For duration, short animations (a few hundred milliseconds) feel responsive in reading flow, while longer ones suit a single hero annotation on a landing page. If you need several annotations to build in sequence, put them in an annotation group rather than staggering timings by hand.
Where to go next
Check the library's GitHub repository for the full option list and code examples, since the properties are configured per annotation. If you want to see the styles in action before choosing, the project page at RoughNotation demonstrates each annotation type.
How does RoughNotation handle annotating inline content that spans multiple lines?
RoughNotation handles inline content that spans multiple lines through its "Multiple lines" annotation type. Rather than treating an annotation as a single shape tied to one bounding box, this type is designed for inline elements—such as a phrase inside a paragraph—that can wrap across two or more lines. The annotation is drawn per line so the effect follows the text instead of stretching around the whole block.
What this means in practice
- Use it on inline elements (for example, a
<span>around a sentence fragment), not on block containers like a full paragraph<div>. - The annotation adapts as the text wraps, so the visual stays aligned with the words on each line.
- It is distinct from the "Brackets" style, which is meant to surround a block of content on one or more sides.
Choosing the right approach
| Situation | Appropriate style |
|---|---|
| A short phrase that may wrap across lines | Multiple lines |
| A single word or non-wrapping phrase | Underline, Circle, Highlight, Box |
| A whole paragraph or block | Brackets |
| Indicating removal or rejection | Strike-Through, Crossed-Off |
Practical next step
If you are annotating a sentence that reflows at different screen widths, wrap the inline text in a span and apply the multiple-lines annotation, then verify the result at both narrow and wide viewports. If the annotation should instead frame an entire paragraph, switch to the Brackets style. The library's documentation and examples are available on GitHub via the project page at RoughNotation.
NS1
Netlify
User reviews (0)