1) Install Inline Manual Builder (Chrome)
Inline Manual Builder is a Chrome extension for creating guides, walkthroughs, and onboarding content right in your browser.
Screenshot placeholder — Chrome Web Store listing + “Add to Chrome” button
Driver.js Tour Builder (Free, No Login)
Build Driver.js product tours visually — export a ready-to-use JSON config
Driver.js is a lightweight, dependency-free JavaScript library for guiding user focus with highlights, overlays, and step-by-step tours. It’s popular for onboarding, feature announcements, and contextual help because it’s simple and flexible.
Inline Manual Builder solves the authoring part: create tour steps visually in your browser, then export a Driver.js configuration JSON file you can use right away.
This is our way of giving something back to the Driver.js community: free, no login, export-to-JSON, and you keep control of the output.
Screenshot placeholder — hero image
Builder open on a web app: element highlighted + step editor visible
What you can do with Inline Manual Builder + Driver.js
Create Driver.js tours without the busywork.
Point-and-click to select elements on your UI
Write titles and descriptions in a visual editor
Preview while you build
Export a Driver.js config JSON (ready to use)
Free and no login required
Great for
- • New user onboarding tours
- • Feature launch walkthroughs
- • Contextual help overlays
- • “Highlight-only” moments to focus attention
Driver.js has docs and examples for configuration, popovers, overlays, progress, and other common tour patterns—Inline Manual Builder is designed to make creating that configuration dramatically faster.
Why we built this (and why it’s different)
A lot of teams look for open-source product tour libraries because they want something lightweight, no vendor lock-in, and full control in code. Driver.js is often compared with Shepherd.js and Intro.js in those evaluations.
But open-source tours come with a common pain: authoring is manual and iterative, and it rarely stays done after the first release.
So we took the best part of a Digital Adoption Platform—the authoring experience—and made it available to Driver.js users as a free workflow: build visually, export as JSON, and ship under your control.
No login. No gating. Just faster tour creation.
How it works
2) Open your app (local, staging, or production)
Open the environment where you want to build your tour: localhost, staging, or production.
Tip: Build on a stable UI version. If your layout is mid-refactor, you’ll spend extra time updating targets later.
Screenshot placeholder — Your app open + Builder panel docked
3) Select elements and create steps visually
Driver.js tours are made of steps that target an element and show a popover (title, description, buttons, position, and more).
- • Click an element you want to highlight
- • Add step copy
- • Reorder steps
- • Preview the experience immediately
Screenshot placeholder — Step editor: title, description, next/back, position controls
4) Export a Driver.js config JSON (use it right away)
When you’re done, export a Driver.js configuration JSON file.
- • Download the JSON
- • Store it in your repo
- • Load it at runtime
- • Start the tour immediately
Screenshot placeholder — Export panel: “Download Driver.js JSON config”
Using the exported Driver.js JSON
Below is a typical workflow once you have the exported JSON file.
1) Add it to your project
Example path: src/tours/onboarding.driver.json
Screenshot placeholder — Repo tree showing the JSON file in /tours
2) Load it and start Driver.js
Driver.js supports creating an instance with a configuration object and then starting the tour.
import { driver } from "driver.js";
import "driver.js/dist/driver.css";
// Example: load config JSON (your bundler may differ)
import tourConfig from "./tours/onboarding.driver.json";
export function startOnboardingTour() {
const driverObj = driver(tourConfig);
driverObj.drive();
}Common triggers
- • “Take the tour” button in onboarding modal
- • Help menu → “Product tour”
- • First session only (persisted in localStorage)
- • Feature flags / role-based trigger
If your app renders elements conditionally (SPAs), ensure UI state is ready before starting the tour, otherwise the first step target might not exist in the DOM.
Best practices for high-quality Driver.js tours
Keep tours short: 5–8 steps
A tour should get the user to one success moment. If you have more, split into Getting started, Advanced features, or Admin setup.
Write step copy as actions, not descriptions
Use action language like “Invite a teammate so you can collaborate” instead of passive labels like “This is the settings page.”
Use stable targets (avoid fragile selectors)
If possible, add stable attributes like data-tour="billing-connect" and data-tour="nav-search" to reduce future maintenance.
Theme and overlay: match your product
Use Driver.js styling and overlay options to match your UI. Complex UIs often benefit from a stronger overlay, while minimal UIs usually feel better with lighter overlays.
Common Driver.js tour patterns you can build
New user onboarding (first-run)
Goal: help new users reach first value quickly.
Trigger: first session, or a “Start tour” prompt.
- • Main navigation
- • Primary action button
- • Where to find saved work
- • Where to get help
Screenshot placeholder — Onboarding modal with “Start tour”
Feature launch walkthrough
Goal: show what’s new and get users to try it.
Trigger: “What’s new” entry, release modal, or changelog.
- • Here’s the new button
- • Here’s what it changes
- • Try it now
Contextual help (“Teach me this screen”)
Goal: reduce confusion on complex screens.
Trigger: help icon inside the page header.
Troubleshooting and maintenance
A step highlights the wrong element
This usually comes from duplicated IDs, broad selectors, or UI changes over time.
Fix: use stable targets (data-tour) and avoid overly broad selectors.
The tour can’t find an element
This often happens in SPAs when the element isn’t rendered yet.
Fix: start the tour after the UI is ready, or after the user reaches the correct page/state.
For advanced dynamic flows, community patterns around step refresh can help.
When teams outgrow open-source tours
Open-source tours are a great foundation. Then teams often need analytics, targeting, localization, collaboration workflows, and faster iteration without code deployments for every change.
Inline Manual adds platform capabilities
- • Analytics and completion tracking
- • Targeting by role, segment, and lifecycle
- • Localization and versioning
- • Collaboration workflows for Product, Support, and CS
FAQ
Is Inline Manual Builder free for Driver.js tours?
Yes — anyone can create Driver.js tour content using the Builder without logging in.
What is Driver.js used for?
Driver.js is a lightweight JavaScript library for guiding user focus with highlights, overlays, and step-by-step tours.
Do I get code or a file export?
You export a Driver.js configuration JSON file, so you can use it right away in your project.
Can I use this with React / Vue / Angular / plain JS?
Yes. Driver.js is framework-agnostic, and the Builder works by selecting elements in your running UI.
Do I keep control of the final tour output?
Yes — the export is JSON. Store it in your repo, version it, and trigger tours however you want.
Does Driver.js include analytics?
Driver.js focuses on tours and UI highlights. If you need analytics, targeting, localization, and team workflows, Inline Manual is designed for that.
Where do I install Inline Manual Builder?
From the Chrome Web Store.
Inline Manual Builder install: https://chromewebstore.google.com/detail/inline-manual-builder/pnknpbalklkfnjolbmbebkhbaicomnfa