Getting started

Start by creating a product board. StateBoard 2026.10.0 opens its readiness workspace, where features describe what should work and checks record what was observed.

Use the release readiness guide to review a candidate, record check results, and make a release decision. AI, screenshots, and architecture records are optional. The steps below also show how to add visual anchors and share a visual board.

Use the language button in the header to choose English or Deutsch. StateBoard saves this preference in your browser. Switching language preserves open forms and the current view. Names, evidence, and other entered content keep their original language; these guides and API diagnostics remain in English.

1. Run StateBoard

For a local spin-up, the repo ships a docker-compose.yaml with Postgres and a pre-seeded Keycloak (test users alice / bob, password = username):

cp .env.example .env
docker compose up -d        # Postgres + Keycloak
pnpm install
pnpm migrate                # create the tables
pnpm dev

Open http://localhost:3000 and click Open workspace. You'll be sent to sign in: choose Continue with company account and log in as alice — the first sign-in becomes the workspace owner.

For a real deployment (your own Keycloak, via Docker Compose or Helm), see Self-hosting.

2. Create a board

On /boards, click New board. Give it the product's name, for example StateBoard. The description is optional.

StateBoard opens the product Overview after creation. Add features and follow the release workflow. Release reviews holds candidate reviews. Choose Screens to open the product gallery, then select an image to inspect or annotate it. Existing boards need no conversion.

Already have a visual board that's close to what you need? Click Duplicate on its card to deep-copy every screen and region into a new board, then swap only the screens that changed — faster than starting over.

Each board has an internal ID used in its workspace URLs. Public visual links use revocable tokens at /share/{token}; curated release links use separate tokens at /share/releases/{token}. Keep internal assessment URLs for workspace members and publish the public summary deliberately.

Edit a board and move between pages

Choose Edit board beside the product name or on its row in the board list. Update the name and description under Board settings, then choose Save changes. Discard changes restores the last saved values. These actions require editing permission. Switching settings sections keeps the draft. Leaving settings closes the form, so save or discard first.

Use the header breadcrumbs to return to a parent page. The named board returns to its product overview. Release reviews returns from a candidate to that board's review list. On narrow screens, the header shows the immediate parent link. Product section tabs move between Overview, Screens, Features, and Release reviews. Choose History beside Edit board in the product heading to see board activity.

From the visual editor, open More board options → Edit board. The empty editor also has an Edit board action. The board title returns to the overview. The editor's Screens breadcrumb returns to the gallery. When editing from a review, Back to release review restores that review and its selected feature.

Browser Back and Forward restore assessment views, selected checks, categories, capabilities, and components. Search, result, and needs-attention filters stay local to each view. The board ID and existing share links stay the same after a rename.

3. Upload a screen

Choose Screens → Add screen in the product workspace. Drop a screenshot onto the upload area or click to browse. You can also reuse an existing workspace image. Allowed formats: PNG, JPEG, WebP, GIF. Max 25 MB per file.

Upload additional screens as needed. They appear in the screen sidebar. Use its screen actions to reorder them. This order carries through to the share view and Present mode.

On narrow screens, choose Expand screens to open the collapsed screen rail. The screen toolbar keeps Find, Filter, Present, and Share screens beside the full screen name. These controls wrap when space is limited.

4. Mark your first region

With a screen open, click and drag anywhere on the image to draw a rectangle. When you release, the region details open. Name the region, set its visual state, and link existing features under Features shown here. Add notes or source context when useful. A feature link describes what the region shows. It does not verify a release check.

Three states only, by design:

• Shipped · live, real data, fully wired up.
• Mock · UI is in place but data is hardcoded or fake.
• Missing · not built yet.

With the canvas focused, press Esc to discard a draft region.

5. Share it

Choose Share screens → Copy share link in the screen toolbar. The same menu offers Open share view and Manage links. It stays in the toolbar at narrow widths.

This visual link shows every screen and region on the board. A release review also needs features and check results; publish a curated recorded decision when sharing release readiness.

What's next

• Review a release: features, checks, results, and an owner decision.
• Annotate like you mean it: when to use each state, label conventions, notes that actually help.
• Use Present mode: go fullscreen for a stakeholder review.
• Self-host on your cluster: Helm, Docker, airgap configurations.