OnboardJS

OnboardJS vs Driver.js

Driver.js Alternative: Why Devs Switch to OnboardJS

Driver.js is impressively lightweight and has great highlighting, but its popover-only approach limits what you can build. OnboardJS lets you render anything—modals, drawers, inline hints, or custom components.

At a Glance

Feature Comparison

FeatureDriver.jsOnboardJS
ArchitectureHighlight + popoverHeadless/native
Step TypesPopovers onlyModals, tooltips, inline, custom
TypeScriptGood typesNative TypeScript
AnalyticsNoneBuilt-in tracking
Design SystemFixed popover styleYour components (Tailwind/Shadcn)
MaintenanceActiveActive, React-first

Why Switch?

The Architectural Differences

Driver.js is Popovers Only

Driver.js excels at one thing: highlighting elements with popovers. But modern onboarding often needs modals for welcome screens, inline hints, or multi-step wizards. Driver.js can't do that.

Driver.js

Every step is a popover attached to an element

OnboardJS

Steps can be popovers, modals, drawers, or completely custom

No React State Integration

Driver.js doesn't integrate with React state. Your tour runs separately from your app, making conditional logic and dynamic steps awkward.

Driver.js

driver.highlight() is imperative, not reactive

OnboardJS

Steps can depend on React state and update dynamically

Limited Customization

While Driver.js allows CSS customization, you can't change the fundamental structure of how content is displayed. OnboardJS lets you render any component.

Driver.js

Popover with title, description, buttons—that's it

OnboardJS

Render a video player, interactive form, or animated illustration

Migration

Before & After

See the difference in code. OnboardJS lets you use your own components while keeping the API simple.

BeforeDriver.js: Popover-only, CSS required
typescript
17 lines
import { driver } from 'driver.js';
import 'driver.js/dist/driver.css';

const driverObj = driver({
  showProgress: true,
  steps: [
    {
      element: '#element',
      popover: {
        title: 'Welcome',
        description: 'Let me show you around',
      },
    },
  ],
});

driverObj.drive();
AfterOnboardJS: Mix modals, tooltips, and more
tsx
31 lines
import { OnboardingProvider } from '@onboardjs/react';

const steps = [
  {
    id: 'welcome',
    // No target = modal/fullscreen step
    component: ({ onNext }) => (
      <Dialog open>
        <DialogContent>
          <h2>Welcome</h2>
          <p>Let me show you around</p>
          <Button onClick={onNext}>Get Started</Button>
        </DialogContent>
      </Dialog>
    ),
  },
  {
    id: 'feature',
    target: '#element',
    component: ({ onNext }) => (
      <Tooltip>
        <p>This is the feature</p>
        <Button onClick={onNext}>Next</Button>
      </Tooltip>
    ),
  },
];

<OnboardingProvider steps={steps}>
  <App />
</OnboardingProvider>

Ready to drop the overlays?

Start building onboarding that feels native to your app.

Terminal
1 lines
npm install @onboardjs/core @onboardjs/react
View on GitHub