Trailguide started as a product tour tool. We made it double as a Playwright regression test in CI. Same JSON file. Zero extra work.
Free forever. No account required.
p.s. the confetti at the end is a built-in step type. One line of JSON.
Most product tour tools charge per user, lock your content in their dashboard, and disappear when they shut down. We think that's broken.
Tours are JSON files in your repo. Review them in PRs. Roll back mistakes. Fork them for experiments. They're yours forever.
The runtime is free for unlimited users. We'll never charge you based on how many people see your tours.
React, Vue, Svelte, vanilla JS. If it runs in a browser, Trailguide works. No framework lock-in either.
Three steps. No account required.
npm install @trailguide/core
// tours/welcome.json
{
"id": "welcome",
"title": "Welcome Tour",
"steps": [
{
"target": "[data-trail-id='create-btn']",
"title": "Start here",
"content": "Click to create your first project.",
"placement": "bottom"
}
]
}import { start } from '@trailguide/core';
import '@trailguide/core/dist/style.css';
fetch('/tours/welcome.json')
.then(res => res.json())
.then(trail => start(trail));Engineers set it up once. Then anyone on the team can build tours.
Tours are JSON files. Review changes in PRs, roll back mistakes, branch for experiments.
You own your tour data. Export, migrate, or self-host forever. We can't hold your tutorials hostage.
The runtime is free. Forever. Show tours to a million users without paying a cent.
TypeScript types, React hooks, clean APIs. Built by developers who've used the clunky alternatives.
CSS custom properties for every color, radius, and shadow. Match your brand with a few lines of CSS. Dark mode included.
Under 13kb gzipped (JS + CSS). No analytics bloat, no tracking scripts, no third-party requests.
Set any trail to Both mode. It shows onboarding tooltips to real users and runs as a Playwright regression test in CI. Automatically.
The same trail file plays as the onboarding tooltip sequence your users see. Nothing changes about how you ship tours.
On every deploy, Playwright walks each step: clicking, filling, asserting. If a button moves or a selector breaks, the test fails before users hit it.
// playwright.config.ts — add once, covers every trail set to test/both mode
import { test } from '@playwright/test';
import { runTrail } from '@trailguide/playwright';
import welcomeTrail from './tours/welcome.json';
test('welcome tour', async ({ page }) => {
await page.goto('https://myapp.com');
await runTrail(page, welcomeTrail);
});No other product tour tool does this.
Codeless testing platforms charge per test, per seat, and per month — often hundreds or thousands of dollars. Trailguide's full test runner is included in Pro at $49/month. Unlimited tests. Unlimited team.
Any trail set to test mode is a Playwright test. No Playwright knowledge required. Click, fill, assert, wait — all defined in a JSON file your whole team can read and edit.
Set a trail to test-only mode and it never shows a tooltip to users. It exists purely as a CI test. Use it to cover login flows, checkout paths, onboarding funnels — anything you'd pay a codeless testing platform to automate.
No vendor dashboard to log into. No proprietary test format. Your tests are JSON files alongside your code, reviewed in PRs, rolled back with git, and owned by you forever.
No per-test limits. No usage tiers. The same flat rate that gets you the visual editor and analytics also gets you a full E2E test runner. $49/month, cancel anytime.
Stop guessing. See real completion data for every trail.
See exactly which step loses users. In this example, "Invite Team" drops 29%. Maybe it needs clearer copy or a skip option.
Ship a change, watch completion rates climb. No more hoping your onboarding works. Now you'll know.
Daily and weekly trends show if your onboarding is getting better or worse. Catch regressions before they hurt.
14-day free trial · Cancel anytime
Pro gives your whole team a dashboard to build, maintain, and update trails as your product evolves, without touching the codebase.
Every trail lives in the dashboard with a screenshot of each step taken at build time. Six months later, when your app has changed, anyone on your team can open the editor, see what each step used to look like, and fix it. No repo access, no developer needed.
Hit Record, click through your app, and every click becomes a trail step. An action quick-pick overlay appears near each element — choose Click, Hover, or Skip before committing. Hold Shift while clicking to capture instantly and keep navigating.
No CSS selectors to write. Just click on any button, input, or element on your site and it's captured automatically.
Change a step title, fix a broken selector, reword an instruction, all from the editor. When you're done, push it back to GitHub or GitLab as a commit or PR. No repo access needed to make the change.
Play through the full trail inside the editor. See every tooltip, highlight, and transition exactly as your users will.
Every captured element is graded Stable, Moderate, or Fragile, with hints to make brittle selectors production-safe.
Reorganize your flow instantly. Insert steps, move them around, delete what you don't need.
Click ✦ Suggest on any step and Claude generates a title, body copy, and tooltip placement from the element's context. Accept everything or cherry-pick individual fields.
Create onboarding flows without waiting for engineering sprints.
Build walkthroughs for tricky features that generate support tickets.
Review trails in PRs. The visual editor outputs clean JSON you can trust.
Exports to JSON you own.
Every trail is built from step types. Drag any of them into your flow from the editor toolbar. No code.
Point at any element. The classic guided step that highlights a button, field, or UI element and walks users through it.
Feature launch modal with image and rich content. Introduce new capabilities with the attention they deserve.
Interactive task list users check off. Drive activation by guiding users to the actions that make them successful.
A confetti moment that fires when users hit a milestone. Reward the action that matters most in your onboarding.
Ask users a question mid-tour. Capture sentiment, NPS, or freeform input at exactly the right moment in the flow.
Navigate users to another URL mid-tour. Chain onboarding flows across multiple pages without breaking the sequence.
Pause before advancing. Wait for animations to finish, pages to load, or async operations to complete.
The runtime is free forever. Pro adds the editor, test runner, analytics, and Git sync.
Full power. Full control. No limits.
A visual editor, full E2E test runner, onboarding analytics, and Git sync — all in one tool, at one price.
No lock-in. Everything Pro produces is still just JSON files in your repo.
Start with the free open source runtime, or try the Pro Editor for visual editing and Git sync with GitHub or GitLab.
14-day free trial · Cancel anytime