STET / IN CONTEXT

Guided UI Tutorial with Hand-Drawn Annotations

A lesson should move attention without resetting someone’s work. This deployment form keeps its branch and environment state while the application changes the active annotation.

Developer · Documentation · Education

Teach a release workflow

Progressive emphasis, ordinary controls.

Teaching intent
Teach a teammate to select a branch, choose an environment and queue a deployment.
LIVE APPLICATION · TRY THE CONTROLS
F
Fieldnotes DeployPipeline / New deployment
Local demo

From branch to release.

Choose your revision and destination, then queue the deployment.

Environment

Staging lets teammates verify a release before it reaches production.

No deployment queued.
WHAT THIS MAKES EASIER

Advance the lesson without losing typed values. Your application owns progression; Stet adds emphasis and cleans up each step.

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": "Select a source branch.",
  "annotations": [
    {
      "id": "branch",
      "primitive": "underline",
      "targets": [
        {
          "strategy": "ref",
          "file": "website/src/showcase/Deployment.tsx",
          "locator": "branch",
          "description": "Source branch selector"
        }
      ],
      "options": {
        "seed": 81,
        "description": "Select the branch to deploy.",
        "stroke": "#416ba0"
      }
    }
  ]
}

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

Annotate Live UI for Interactive Documentation ·