Playground

Acme is a small dashboard with four pages, a long feed and an export that takes a moment. Shape the tour in the Customise panel, play it, then copy the theme into your app.

Tour as JSON

Validated against this site's targets as you type

✓ Valid tour · 3 steps

heroStartHome: the button that starts the site tour

ladderHome: the four ways a step finds its target

navPlaygroundHeader: the Playground link, on every page

navDocsHeader: the Docs link, on every page

controlsPlayground: path, theme and language switches

revenuePlayground dashboard: the revenue card

oldestActivityPlayground dashboard: the oldest item, far down the activity feed

exportButtonPlayground dashboard: the Export report button

chartReports: the weekly sign-ups chart

inviteTeam: the Invite teammate button

jsonEditorJSON tour: the editor

The same check runs on a server or in CI with hintbeam/core.

Customise

Changes apply to the tour right away.

Style

Brand colour

Card colour

Guide orb

Line style

Glow0.65Dim the page0.44Corners16px

Language

Step card

Your theme, as code

theme.ts

import { createTourTheme } from "hintbeam";

const theme = createTourTheme({
  brand: "#8B6CFF",
  mode: "dark",
  style: "aurora",
});

<TourProvider theme={theme} … />