STET / IN CONTEXT

Product Demo Annotations on Live UI

A product demo works better when people can try the thing being explained. Stet adds three focal marks to a release form without replacing its inputs or submit behavior.

Agent · Engineering · Product

Showcase three features

Let the working product do the talking.

Prompt
Annotate the three most important features of this screen for a product demo.
LIVE APPLICATION · TRY THE CONTROLS
F
FieldnotesReleases / New preview
Local demo

Something worth sharing.

Prepare a release preview for your team.

Private previews let your team review changes before a public release.

Nothing published yet. Changes stay in this browser session.
WHAT THIS MAKES EASIER

Name a release, choose its audience, then publish a local preview. The annotations explain value while the application stays usable.

Inspect plan, source & verification

Actual schema-valid React plan. Targets refer to source refs; this JSON is never executed by the drawing runtime. After installing @funsaized/stet, copy to annotation-plan.json and run ./node_modules/.bin/stet validate annotation-plan.json --json.

{
  "version": 1,
  "framework": "react",
  "intent": "Show the three features of the release form in a restrained product demonstration.",
  "annotations": [
    {
      "id": "name",
      "primitive": "underline",
      "targets": [
        {
          "strategy": "ref",
          "file": "website/src/showcase/Release.tsx",
          "locator": "titleLabel",
          "description": "Release name label"
        }
      ],
      "options": {
        "seed": 71,
        "description": "Name the release so your team can recognize it.",
        "stroke": "#416ba0"
      }
    },
    {
      "id": "audience",
      "primitive": "highlight",
      "targets": [
        {
          "strategy": "ref",
          "file": "website/src/showcase/Release.tsx",
          "locator": "audienceLabel",
          "description": "Private preview label"
        }
      ],
      "options": {
        "seed": 72,
        "description": "Choose a private preview before a public launch.",
        "fill": "#e3b937"
      }
    },
    {
      "id": "publish",
      "primitive": "circle",
      "targets": [
        {
          "strategy": "ref",
          "file": "website/src/showcase/Release.tsx",
          "locator": "submit",
          "description": "Publish preview button"
        }
      ],
      "options": {
        "seed": 73,
        "description": "Publish updates the local preview status.",
        "stroke": "#b33e2b"
      }
    }
  ]
}

Make this example your own

Inspect the plan and source above, then adapt the marks to your existing controls. Stet supplies emphasis; your application owns validation, progression, and behavior.

Attach annotations with React refs · Explore the six annotation primitives · Follow the coding-agent workflow

Explain Dangerous UI Actions · Coding-Agent Visual Implementation Handoff ·