Guided onboarding tours that automatically run as Playwright CI tests — so broken steps get caught before users do. Plus completion analytics and structured feedback to understand what to fix next.
Free runtime forever. 14-day Pro trial — $49/month.
p.s. the confetti at the end is a built-in step type. One line of JSON.
Most teams pay for a product tour tool, an E2E testing platform, an analytics dashboard, and a feedback collector separately — and none of them talk to each other.
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.
Every product team runs this cycle — ship a feature, guide users through it, verify it doesn't break, learn what to fix next. Trailguide is designed around that loop.
Define tours as JSON in your repo — or record them visually by clicking through your app. Flows live next to the features they document, reviewed in PRs alongside code.
The trail plays as an interactive onboarding sequence. Tooltips, announcements, checklists, nudges, celebrations, feedback prompts — all step types, in any order.
The same JSON file runs as a Playwright regression test on every deploy. If a button moves or a selector breaks, CI fails before any user is affected.
Completion funnels show exactly where users drop off. Product Signals reveal word themes and sentiment. The data tells you what to fix in the next cycle.
↩ Then loop back to Build — fix what you found and ship the next version.
Stop guessing. See real completion data for every trail — with trend comparisons, step-by-step funnels, and word themes from your feedback.
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. Trend arrows compare the current period to the previous one so you know instantly if things are getting better or worse.
A dual-line chart shows starts vs. completions every day. The gap between the two lines tells you how many users are still not making it through.
Product Signals connects any app to send structured feedback via API key. Automatic sentiment detection, categorical breakdowns, and word-frequency themes — no schema required.
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.
Draw attention without explaining. A pulse, glow, sparkle, or badge on any element. Advances when the user clicks it — no tooltip, no interruption.
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.
A lot of companies prefer guiding users to their own discoveries over reading a series of cards. The "New" badge that surfaces a buried feature. The pulsing ring on an empty workspace. These work because they respect what the user was already doing.
Trailguide Nudges are built for that instinct. A Nudge step places a visual highlight on any element in your flow — no tooltip card, no progress bar, no next button to read past. The user clicks the highlighted element and the tour advances automatically, invisibly.
It fits seamlessly into a linear tour sequence alongside tooltips and announcements, or stands alone as a one-step spotlight on a feature users keep missing. Four effects, any color, zero friction.
// No tooltip — just draw the eye and let the user click
{
"id": "nudge-create",
"stepType": "nudge",
"target": "[data-trail-id='create-btn']",
"nudge": { "effect": "pulse", "color": "#1a91a2" }
}
// Badge nudge — surface a feature users keep overlooking
{
"id": "nudge-reports",
"stepType": "nudge",
"target": "[data-trail-id='reports-nav']",
"nudge": {
"effect": "badge",
"color": "#10b981",
"label": "New"
}
}An expanding ring radiates outward from the element and fades, matching its border-radius.
A colored box-shadow bloom applied directly to the element, pulsing on loop.
Eight ✦ particles burst outward from the element center and loop continuously.
A pill label anchored to the top-right corner of the element. Set any text and color.
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