Skip to content
tourlightfor React
THE OPEN-SOURCE GUIDE STUDIO

A little guidance.
A lot of possibility.

Make your product easier to find your way around. Build beautiful React tours with your team, your code, and your favorite agent.

Make your first guide Free to build. Yours to keep. MIT licensed.
A guide, in the making.LIVE DEMO
YOUR GUIDE 3 STEPS
Pick a step.
Make the words yours.
Then give it a try.
AL
YOUR SPACE TO MAKE THINGS

Good things start here.

A little more room for your next big idea.

Projects2 in your workspace
The next chapterBrand exploration
A brighter tomorrowProduct ideas
MAKE YOURSELF AT HOME
A working sample app. Click around.
EDIT STEP 01
Target connected

These are real edits. Preview plays your words using the Tourlight runtime.

Runs in your browserThis little demo is just the beginning. Open the full Studio ↗
React 18 + 19Visual editor includedLocal drafts · JSON exportHeadless when you want it
01 / ONE SHARED LANGUAGE

Great guides happen
between disciplines.

Product knows the journey. Engineering knows the application. Your agent helps connect the dots. Everyone works on the same guide document.

01FOR PRODUCT PEOPLE

See it. Shape it.

Pick an element in your app, give it a little context, and preview the journey. Edit the words and order without rewriting the integration.

Meet the editor
02FOR DEVELOPERS

Your app. Your rules.

Keep guides beside your code. Bring your own components, routes, and application logic. Import the editor only where you need it.

Explore tour documents
03FOR YOUR AGENT

Make the handoff tiny.

Give your agent a schema, a skill, and useful validation errors. Draft a guide, review it visually, and keep iterating together.

Build with an agent
Visual editortour.jsonYour code & agents
02 / SMALL DETAILS. REAL DIFFERENCE.

Made for the
actual application.

A guide should work where your users work: through navigation, late-loading elements, and the moment they click the real button.

See what’s inside
01

Let people do the thing.

Interactive steps let users click, type, and learn in your real UI. Advance on an event, or connect the guide to your application logic.

Interactive steps
02

Follow the whole journey.

Continue across routes. Wait for an element to be ready. Persist progress and give people a way back into the guide.

Multi-page tours
03

Look like you belong.

Start with the included tooltip, adapt the theme, or bring your design system with custom rendering and the headless core.

Make it yours
04

Check before you ship.

Validate guide documents and inspect targets. Add real browser checks for the routes, roles, and states your users encounter.

Testing & diagnostics
05

Help people find their own way.

Offer an onboarding checklist and a searchable guide library. Let people choose what helps, and keep task completion connected to your app.

Try the companion components
03 / TAKE IT WITH YOU

A package.
An editor.
Entirely yours.

Use the React API directly, or add Studio to an app you control. Save the document, review it in Git, and serve it from your own infrastructure.

Start building How Studio fits in
YOUR TERMINAL
$ npm install react-tourlight \
 @floating-ui/react-dom
YOUR APP.TSX
// The code-first path is always here.
import { SpotlightProvider,
  SpotlightTour, useSpotlight }
 from 'react-tourlight'

import 'react-tourlight/styles.css'

<SpotlightProvider>
  <SpotlightTour
    id="welcome"
    steps={yourSteps}
  />
  <YourApp />
</SpotlightProvider>
Call useSpotlight().start('welcome') from your app.
A FEW GOOD QUESTIONS

Before you
jump in.

Is the visual editor really free?

Yes. Studio and the library are part of the MIT-licensed project. There is no Tourlight account or usage-based bill required to create and run your guides.

Does a product person need to write code?

A developer integrates Tourlight and makes Studio available in the application. After that, product teammates can edit supported guide content visually and export a document. Application-specific behavior still belongs to your application.

Can I use it with my coding agent?

Yes. The document schema, CLI, and skill give agents a concrete format to work with. You can inspect their output in Studio and validate it before integration. See the agent guide for setup and client-specific boundaries.

Can Studio edit any website from a URL?

The live element picker works in an application where Studio is integrated. The standalone playground demonstrates the workflow; it does not bypass browser security or inspect unrelated websites.

Do I have to use Studio?

No. Keep using React components, refs, custom content, and lifecycle hooks directly. Documents and Studio are an additional way to author guides. The headless entry is available when you want to build your own UI.

A BETTER WAY TO SHOW THE WAY

Let’s make
something clear.

Open Tourlight Studio

No account. No credit card. Just a guide waiting to happen.