stet

Hand-sketched annotations for live UI, built for coding agents and developers. Add circles, highlights, arrows, notes, and proofreader marks while your application keeps its controls and layout.

Live showcase · Agent workflow · Agent setup

Developer: circle(button) adds emphasis while your button keeps working. Agent: “Annotate what changed and explain the risky parts.” A coding agent can turn that request into a validated plan, framework code and a visual handoff.

Try a dangerous settings action, an implementation handoff, or a reproducible form review. Each has a working interface, annotation toggle, actual plan/source and explicit verification scope. Tutorials and live documentation work without an agent.

Distinct live examples show Product billing intent, UX search recovery and QE import checks. Stet supplies the annotation layer; your existing tools own requirements, design and tests. No collaboration backend, accounts or model API required.

The API is under active development and may change before 1.0. Pin an exact version if you need predictable upgrades.

The library is called stet; its npm package is @funsaized/stet. Use @funsaized/stet in installation commands and imports.

npm install @funsaized/stet@0.1.0

Start with an agent or the API

With your coding agent

Stet ships four Agent Skills, installed-version capability inspection, validated annotation plans, recoverable skill installation, project discovery, and framework/lifecycle examples.

After installing @funsaized/stet, install project skills for your coding agent:

npx stet agent init --tool codex
# Also supports claude, cursor and opencode.

For deterministic automation, use the installed binary directly:

./node_modules/.bin/stet inspect --project . --json
./node_modules/.bin/stet snippet --pattern lifecycle --framework react
./node_modules/.bin/stet validate annotation-plan.json --json

The agent decides what deserves annotation, validates a source-target plan, adapts a framework-correct snippet, then checks the application. Plans are build-time tools and never replace your controls or become runtime selectors. The CLI requires Node.js 20+; browser imports do not load agent infrastructure. See the agent guide for setup, targeting and verification, and actual evaluation results for measured outcomes, retained failures and limitations.

Write the annotations yourself

import { circle } from "@funsaized/stet";
import "@funsaized/stet/style.css";

const save = document.querySelector("#save");
const annotation = circle(save);

The real #save element still owns focus, clicks, semantics, and layout.

import { underline, highlight, arrow, sticky, mark } from "@funsaized/stet";

underline(heading);
highlight(phrase); // follows wrapped text, including paragraphs
arrow(source, destination, { label: "start here" });
sticky(save, { text: "Ready to ship." });
mark(answer, "right", { description: "Correct answer" });

annotation.refresh();  // follow a layout change, keep the same sketch
annotation.resketch(); // draw a new variation
annotation.destroy(); // remove the annotation and its subscriptions

Still by default. Seeded when you need repeatability. Optional hover resketching and stroke boil honor reduced-motion preferences.

To explore this checkout locally, run npm ci, npm --prefix website ci, then npm --prefix website run dev. Open /use-cases or /agent-workflow. The playground exposes real options and copyable code; framework integration lives in Docs. See website setup for production builds and tests. Hosted links show the deployed site; this checkout's additions appear after deployment. The fixed visual specimens remain the regression matrix.

Dependencies and framework support

Zero-dependency core, with optional framework adapters. The core uses browser DOM, SVG, and CSS APIs, with its own sketch geometry and seeded randomness.

React components, Angular directives, Vue directives, and Svelte actions wrap the same core functions, handling attachment, updates, and cleanup through their framework's lifecycle. Import the adapter you need from @funsaized/stet/react, @funsaized/stet/angular, @funsaized/stet/vue, or @funsaized/stet/svelte. Importing @funsaized/stet alone does not load any framework adapter.

React, Angular, and Vue are optional peer dependencies supplied by your app; installing stet does not install those frameworks. React and Angular adapters use their frameworks at runtime. The Vue adapter imports only Vue types, and the Svelte adapter has no Svelte runtime import. Build and test tools are development dependencies and are not installed as dependencies in your app.

Documentation

• Tutorial: annotate your first live interface
• Explanation: how stet marks live UI
• API reference
• Framework examples
• Use cases and visual handoff
• Agent usage and architecture
• GitHub Packages and release process

Supports vanilla JavaScript, React, Vue, Svelte, and Angular. MIT licensed.