Your first little mark.

Built for coding agents and developers. Install Stet, then use project skills with your agent or attach annotations directly through the typed API. Your existing UI keeps its controls and layout.

Install Stet

Stet is ESM only. The core has no runtime dependencies; install your chosen framework separately. Version 0.1.0 is an early release, so the examples pin the version.

With your coding agent

Install Stet’s project skills from your app directory. The CLI requires Node.js 20 or newer.

Choose codex, claude, cursor, or opencode for your tool. The skills cover implementation, UI review, educational feedback, and feature emphasis.

Try a request like:

Use Stet to annotate this settings screen. Draw attention to the fields that need review, preserve the existing layout and controls, and check the result in the browser.

The agent inspects your project and installed capabilities, validates an annotation plan, and adapts a framework example. Review the source and live result together: a valid plan cannot prove that a mark points to the right control or leaves text readable.

With the API

Attach a mark to a real element. Choose your framework for an example with setup and cleanup.

• React annotation guide: installation and lifecycle
• Vue annotation guide: installation and lifecycle
• Svelte annotation guide: installation and lifecycle
• Angular annotation guide: installation and lifecycle
• JavaScript annotation guide: installation and lifecycle

"use client";
// Adapt these sample elements to existing source; retain their semantics and handlers.
import { useRef } from "react";
import { Circle } from "@funsaized/stet/react";
import "@funsaized/stet/style.css";

export function AnnotatedAction({ enabled = true }: { enabled?: boolean }) {
  const target = useRef<HTMLButtonElement>(null);
  return <>
    <button ref={target} type="button">Review action</button>
    {enabled && <Circle target={target} seed={42} description={"Review this action before continuing."} />}
  </>;
}

Always import the stylesheet. In React, annotation components render nothing and attach to a DOM ref after mount. The other adapters fit their framework’s native patterns.

Your UI is still your UI.

Stet measures a target and adds a pointer-transparent SVG overlay. Your element keeps its layout, clicks, keyboard focus, and semantics. Notes use real HTML for readable text.

Marks update on target and parent resize, viewport resize, and nested scrolling. With the vanilla API, call refresh() after application-driven movement that doesn’t resize the element, and destroy() before removing the target. Framework adapters handle cleanup for you.

Meet the marks.

Make the ink your own.

Set defaults with CSS custom properties such as --stet-stroke, --stet-fill, and --stet-paper. Framework option changes reattach the annotation. In vanilla, destroy and reattach to change options.

A thoughtful kind of playful.

Stet is still by default. Set boil: 0.3 for subtle living ink, or enable resketchOnHover. Both honor reduced-motion preferences, including changes while the page is open.

Decorative marks don’t create tab stops or intercept pointer events. When a mark communicates meaning, give it a description; don’t rely on color alone. Sticky text and arrow labels describe their targets automatically.

Stet requires modern browser DOM APIs, including ResizeObserver. Arbitrary transforms, top-layer dialogs, and cross-document targets have placement limits. Read the complete reference before adding marks to complex layouts.