Annot
Open source · published on npm · MCP server for AI agents

Living product docs
from your Playwright tests.

Annot turns the Playwright tour you already maintain into always-fresh user manuals + Excel screen specifications. Same MDX, dual rendering targets, drift between docs and UI caught as a CI lint step. SVG-first under the hood — annotate one screenshot or a hundred from a fixture.

Read the quickstartTry the editor →
example.spec.ts
import { test, expect, rectForBoundingBox } from "@ingcreators/annot-playwright";

test("login form is reachable", async ({ page, annotator }) => {
  await page.goto("https://example.com/login");

  // Capture, annotate, attach to the HTML report.
  const btn = page.getByRole("button", { name: "Sign in" });
  const box = (await btn.boundingBox())!;

  await annotator.annotateScreenshot(page, {
    annotationsSvg: rectForBoundingBox(box, { stroke: "#ff5252" }),
  });
});
What's in the box

Five entry points, one toolkit.

Each card maps to a published npm package. The same SVG annotation format flows through every one — annotate from a test, an agent, a CLI, or by hand in the editor.

Playwright fixture

npm install --save-dev @ingcreators/annot-playwright. Drop the annotator fixture intotest.extend, attach annotated screenshots to the HTML report from a try/catch in a few lines.

Living product docs

Generate a docs site and an Excel screen-specifications spreadsheet from the same MDX, kept in sync with Playwright snapshots. Drift caught as a CI lint step.

MCP tools for agents

npm install -g @ingcreators/annot-mcp. Nine tools for Claude Desktop / Claude Code / Cursor — annotate URLs, capture aria snapshots, propose drift fixes, translate screen specs.

Headless annotator

npm install @ingcreators/annot-annotator. The same SVG annotation engine as the in-browser editor, callable from any Node script — no browser, no Electron, no tab in CI.

Open source

Apache-2.0 across every package. PWA, Chrome extension, desktop app, headless annotator, Playwright fixture, MCP server, and the living-product-docs trio all live in one monorepo.

Living product docs

Generate the docs site AND the screen
specifications, from the same MDX.

Author one screen spec; the Astro adapter renders it as a docs page, the Excel adapter renders it into a customer template populated via Named Ranges and{var} placeholders. A Playwright tour re-syncs both on every CI run — drift between the MDX and the live UI surfaces as a per-line warning on the PR diff.

Read the overviewSee the recipe →
SC-001-login.mdx
---
annot:
  id: SC-001
  title: Login screen
  xlsx:
    book: Screen specifications
    sheet: SC-001 Login
---

import Screen from "@ingcreators/annot-product-docs-astro/components/Screen.astro";
import Overlay from "@ingcreators/annot-product-docs-astro/components/Overlay.astro";

<Screen id="login" src="./shots/login.png">

  <Overlay match={{ role: "textbox", name: "Email" }} number={1}>
    Email — enter your registered email address.
  </Overlay>

  <Overlay match={{ role: "button", name: "Sign in" }} number={2}>
    Click to send the auth request to the server.
  </Overlay>

</Screen>
Install

Pick the entry point that matches your flow.

Everything publishes under @ingcreators/ on npm. Most users start with annot-playwright; if you're shipping product docs, the annot-product-docstrio is the dedicated path.

annot-playwright

The fixture, plus three pure SVG-fragment helpers.

npm install --save-dev @ingcreators/annot-playwright

annot-mcp

Stdio MCP server with nine tools for Claude / Cursor / Continue.

npm install -g @ingcreators/annot-mcp

annot-product-docs (trio)

Core + Astro adapter + Excel adapter for living product docs.

npm install @ingcreators/annot-product-docs

annot-annotator

The headless annotator. Use directly without Playwright.

npm install @ingcreators/annot-annotator

annot-core

The SVG annotation format + storage types.

npm install @ingcreators/annot-core
Or annotate by hand

Open the editor in your browser.

The same SVG format powers a free in-browser editor atannot.work/app. Capture with the Chrome extension, drop a file in, or paste from the clipboard. Local-first storage; optional sync to GitHub, Google Drive, or Annot Cloud.

Open the editor →