Show people around your app with tours that keep working when things scroll, move, or live on another page. Open source, for React, Next.js and React Native.
Works with
Tours are often glued to CSS selectors and page layouts, so a renamed class or a moved button breaks them. Hintbeam tours point at names in a contract your app keeps, so the app can change underneath them.
defineTargets lists what tours may point at. Any component opts in with one ref, wherever it lives. Restyle it, rename its classes or move it to another page: the tour still finds it.
const targets = defineTargets({
exportButton: { screen: "/reports" },
});
// anywhere in your app
<Button ref={useTarget("exportButton")}>Export</Button>Tours don't know about pages, layouts or devices; targets do. One tour crosses routes, tabs and layouts, and the same tour runs on the web and in React Native (preview). Adapters for Next.js, React Router, Expo Router and React Navigation, or your own router in a few lines.
Point a step at a name that isn't in the contract and TypeScript stops you as you type. Tours that arrive as JSON, from a CMS or your API, get the same check at runtime, with a "did you mean…?". Ship a new tour without a deploy.
Use the built-in card and theme it to your brand, render your own card, or go fully headless. Every decision lives in a core with zero dependencies and no React, so new platforms and renderers sit on the same engine.
<TourProvider theme={createTourTheme({ brand })} />
<TourProvider renderStep={(step) => <MyCard step={step} />} />
const step = useTourStep(); // headlessHintbeam checks where the element is right now — when a step appears, when the page scrolls, and when the element itself mounts late. Wherever it turns out to be, the tour knows what to do.
The tour points straight at it, wherever your layout happens to put it.
The tour shows which way to scroll, and Show me takes you to it.
The tour lights up the link, and Take me there goes to that page.
The tour says so plainly and lets you move on. It never points at empty space.
Steps that wait for the user, a look that matches your product, events for your analytics, and care for every user.
A step can wait for a real tap, for a page to open, or for your app to finish something. A timeout makes sure nobody gets stuck.
Pick how much is going on and use your brand colour. Every tour on this site changes as you choose — the demo above too.
Every start, step, skip and finish is an event you can send to your analytics. Plugins add more — audiences, tours loaded from your server, new line styles.
Copy, paste, adjust. The getting-started guide covers every router and option.
npm install hintbeam
# That's all. No CSS to import, no config file.Paste this into Claude Code, Cursor, Copilot or any coding agent. It reads the full docs from llms-full.txt and does the four steps in your app.
Add a product tour to this app with Hintbeam (https://hintbeam.js.org). First download https://hintbeam.js.org/llms-full.txt and read all of it (for example with curl; a summarised fetch leaves out details you need). It is the complete documentation. Then:
1. Detect the framework (Next.js App Router, React Router, Expo Router, React Navigation or plain React) and install `hintbeam`.
2. Follow "Getting started" for that framework: list the targets with `defineTargets` in `tours.ts`, add the `declare module "hintbeam"` Register block, and wrap the app in `TourProvider` with the matching router adapter and storage (`browserTourStorage()` on the web, `createTourStorage(AsyncStorage)` on React Native).
3. Ask me which flow to guide, or propose a 3–5 step first-run tour of the main screens.
4. Attach `useTarget("name")` to those elements. Never use CSS selectors. In the Next.js App Router, keep pages as Server Components and put the tagged elements in small "use client" components; import `tours.ts` only from client files.
5. Write the tour with `defineTour`, and start it with `useTour().startOnce(tour)` from a client component rendered inside `TourProvider`.
6. Run the type check, the build and the tests (say so if the project has none), then show me the diff.backdrop: 0.useRouterAdapter. No router at all is fine too."use client". Put the provider in a client component, as in the Next.js example above, and keep the rest of your layout on the server.createTourTheme sets your brand colour and one of four styles, from Aurora to Minimal. Every colour, corner and effect can be changed on its own. For a completely different look, render your own card with renderStep or the headless useTourStep hook.parseTour checks them before they play, with clear messages for mistakes. A hosted visual editor is on the roadmap but isn't available yet.localStorage, React Native's AsyncStorage, or your own server.labels, and the step text is your own content. The playground has Spanish and Hindi examples.MIT, with no keys, no telemetry and nothing that phones home. Versioned with care, so upgrading is never a gamble.
The promises behind every release.
TOUR_PLUGIN_API_VERSION lets add-ons say what they were built for.What exists, what is next, and what may come later.
A four-page dashboard with a long feed and a tour editor. Pick a style and your brand colour, then copy the theme.