Ano — Web Annotation Library

Features

🖍

Select text to highlight with customizable colors. Highlights persist and re-anchor on page reload.

📌

Click anywhere to drop a pin with a comment. Pins attach to DOM elements and reposition on scroll.

✏️

Draw directly on the page with a full-screen SVG canvas overlay. Configurable color and stroke width.

⏱

Group annotations into timed sessions. Track actions, pages visited, and optionally record video.

📤

Export all annotations as JSON. Import them back on any page to restore highlights, pins, and drawings.

📦

~39 KB minified. No frameworks, no build steps required. Just a single script tag to get started.

<script src="https://ano.phpless.digitalno.de/dist/ano.min.js"></script>

Ano.init({
  highlightColor: '#fde047',
  pinColor: '#3b82f6',
  drawColor: '#ef4444',
  drawWidth: 3,
  shortcuts: true,
});

Option	Default	Description
`highlightColor`	`#fde047`	Default highlight color
`pinColor`	`#3b82f6`	Default pin color
`drawColor`	`#ef4444`	Drawing stroke color
`drawWidth`	`3`	Drawing stroke width in pixels
`shortcuts`	`true`	Enable keyboard shortcuts
`videoRecording`	`false`	Enable video recording during sessions
`sessionMaxDuration`	`300000`	Max session duration in ms (5 min)

Method	Description
`Ano.init(options)`	Initialize Ano with optional config. Returns the API object.
`Ano.destroy()`	Remove Ano entirely from the page and clean up all listeners.
`Ano.setMode(mode)`	Switch mode: `'highlight'`, `'pin'`, `'draw'`, or `'navigate'`.
`Ano.startSession()`	Start a new annotation session.
`Ano.endSession()`	End the current session and show the summary dialog.
`Ano.getAll()`	Return all annotations as an array.
`Ano.toJSON()`	Return annotations as a JSON-serializable export object.
`Ano.export()`	Download annotations as a JSON file.
`Ano.import(data)`	Import annotations from a JSON object.
`Ano.importFile()`	Open a file picker to import a JSON file.
`Ano.clear()`	Remove all annotations from the current page.

Use Ano on any website without embedding. Drag the button below to your bookmarks bar.

ano.min.js URL

Ano Drag this to your bookmarks bar

Or copy the bookmarklet code

Optionally change the URL above if you self-host ano.min.js
Drag the Ano button to your bookmarks bar, or copy the code and paste it as a new bookmark URL
Visit any page and click the bookmarklet to start annotating
Click it again to remove Ano from the page

Shortcut	Action
`Alt + H`	Highlight mode
`Alt + P`	Pin mode
`Alt + D`	Drawing mode
`Alt + N`	Navigate mode (deselect tool)
`Alt + S`	Start / end session
`Alt + E`	Export annotations
`Esc`	Close popover / end session / dismiss dialog