Animated Handdrawn Text Annotation Library – Rough Notation

Rough Notation is a fancy JavaScript library for annotating your text with animated, sketchy/hand-drawn styled graphics using Rough.js.

Full responsive and easy to use. It will automatically re-draw the text annotations when the screen is resized.

Supported Annotation Types:

• Box
• Circle
• Crossed-off
• Highlight
• strike-through
• Underline
• Bracket

How to use it:

1. Install and import the Rough Notation as an ES module. This module exposes 2 modules:

• annotate: annotate a single element
• annotationGroup: annotate a group of elements

# NPM
$ npm install rough-notation --save

import { annotate, annotationGroup } from 'rough-notation';

2. Or directly import the module and register the components in your document.

<script src="https://unpkg.com/rough-notation/lib/rough-notation.iife.js"></script>

const annotate = RoughNotation.annotate;
const annotationGroup = RoughNotation.annotationGroup;

3. Annote a single element and determine the annotation type as follows:

const example = document.querySelector('#example');
const annotation = annotate(e, { 
      type: 'underline' // default: 'highlight'
});
annotation.show();

4. Annote a group of elements.

const e1 = annotate(element1, { type: 'highlight'});
const e2 = annotate(element2, { type: 'box'});
const e3 = annotate(element3, { type: 'underline'});
const ag = annotationGroup([e1, e2, e3]);
ag.show();

5. Possible options to config the text annotation.

annotate(e, { 
  // annotation type
  type: 'highlight',
  // enable/disable/config the animation
  animate: true,
  animationDuration: 300,
  animationDelay: 0,
  // annotation color
  color: "#000",
  // stroke width in pixels
  strokeWidth: 1,
  // space between element and annotation
  padding: 5
  // for Bracket type
  brackets: ['left', 'right']
});

6. API methods.

annotation.show();
annotation.hide();
annotation.remove();
annotation.isShowing();
annotationGroup.show();
annotationGroup.hide();

Changelog:

2020-06-24

• Added new annotation type ‘bracket

2020-06-03

• Fixed demo page