Ano

QA and testers report bugs visually — developers and AI get structured context to fix them fast.

Highlight broken text, pin problem elements, draw on the page, record video. Ano exports everything as structured JSON that you paste into a ticket, a Slack thread, or an AI chat. One script, zero dependencies.

Get Started GitHub

Set Up in Minutes

Give your QA team one of these — they report bugs visually, you get structured JSON with selectors, environment, and video.

1

Chrome Extension

One click to start reporting. Testers click the icon to activate Ano on any tab, click again to remove it. Badge shows when active.

Ano for Chrome

Toggle bug reporting on any tab. No setup needed — works instantly on every page.

Add to Chrome View on GitHub

Or install from source

  1. Clone the repo and open chrome://extensions
  2. Enable Developer mode (top-right toggle)
  3. Click Load unpacked and select the extension/ folder
  4. Click the extension icon on any page to toggle Ano on/off
2

Bookmarklet

No code changes needed. Give this to any tester — they drag it to their bookmarks bar or paste the code in the browser console.

Ano Drag this to your bookmarks bar

How it works

  1. Drag the Ano button to your bookmarks bar, or copy the code above
  2. Visit the page with the bug and click the bookmarklet (or paste in DevTools console)
  3. Report the issue — highlight broken text, pin elements, draw, record video
  4. Hit Get Link or Export JSON and share with your developer or paste into AI
  5. Click the bookmarklet again to remove Ano from the page
3

Embed in Your Website

Ship Ano in your site behind a secret URL parameter. End users never see it — your QA team activates it by appending ?ano=1 to any page.

Add this snippet to your layout

<script>
if (new URLSearchParams(location.search).has('ano')) {
  var s = document.createElement('script');
  s.src = 'https://ano.phpless.digitalno.de/dist/ano.min.js';
  s.onload = function () { Ano.init(); };
  document.head.appendChild(s);
}
</script>

How it works

  1. The snippet checks for ?ano=1 in the URL — if absent, nothing loads
  2. Share a link like https://yoursite.com/page?ano=1 with your QA team
  3. They report the bug visually and share the structured output with devs or AI
  4. Use a different param name for extra obscurity, e.g. ?debug or ?feedback

Or always-on (for internal/staging sites)

<script src="https://ano.phpless.digitalno.de/dist/ano.min.js"></script>
<script>Ano.init();</script>

Options

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)

API Reference

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 report dialog.
Ano.getAll() Return all annotations as an array.
Ano.toJSON() Return structured export object — paste into an LLM or save to a file.
Ano.export() Download annotations as JSON + video files.
Ano.share() Upload annotations and video to a shareable link.
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.

What Testers Capture, What Devs Receive

Testers point at the problem. Ano captures the structured context — selectors, DOM info, viewport, environment — so a developer or AI has everything needed to reproduce and fix it.

Highlights

Select the exact text that's wrong. Export includes the quote, text-position selectors, and surrounding context.

Pins

Pin any element with a note. Captures the CSS selector and DOM metadata so a dev or LLM can locate it.

Drawings

Circle areas or draw arrows. Stroke data and viewport dimensions are included in the export.

Video Recording

Record the issue as a video. Upload it alongside the JSON when sharing, or export as a separate .webm file.

Sessions

Group annotations into timed sessions that track clicks, navigation, console errors, and page transitions.

Environment

Browser, OS, screen resolution, viewport size, timezone, language, connection speed — captured automatically.

Keyboard Shortcuts

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