Article · 5 min read

Guide to Creating User Onboarding Flows Through Open-Source Libraries

Open-source user onboarding libraries such as Shepherd and Intro.js let your developers build product tours and tooltips in code. The library draws the steps; your team builds everything around them: who sees a tour, who has finished it, analytics, and edits without a deploy. Choose one when developers own onboarding and the flows rarely change.

By Renk MertReviewed by Yağmur ÇiftçiUpdated October 22, 2026

In short

A library handles the tooltip, not the onboarding system around it. This guide lists what you'll still build (targeting, saved progress, analytics, editing and translation), how to judge a library's maintenance and licence, and the point at which a no-code onboarding tool becomes the cheaper option.

Lists of open-source onboarding libraries compare features (Shepherd, Intro.js, React Joyride and others), and each library's own page shows how few lines a first tour takes. What they leave out is the work around the tour: deciding who sees it, remembering who finished it and measuring where people quit. That work, not the library, is most of the cost of open source user onboarding, so this guide starts there.

What is an open-source user onboarding library?

An open-source user onboarding library is a JavaScript package that draws tours, tooltips, highlights and modals over your web app, with every step defined in code. You install it, point each step at an element on the page and style it to match your product.

The appeal is real: no per-user fee for most uses, full control of the look and behaviour, and no outside vendor's service running in your product. The cost is developer time, both to build the first flow and to keep it working as your interface changes. Read each library's licence before you ship it in a paid product, since open source doesn't always mean free for commercial use.

Which open-source libraries can you build onboarding flows with?

Four libraries from the original version of this guide are below. Check each one's current release history before you adopt it; libraries are maintained, forked and abandoned faster than lists are updated.

1. Shepherd

Shepherd is a JavaScript library for step-by-step guides with tooltips, modals and popovers that you can style to match your product. It can be used with frameworks such as React and Angular as well as plain JavaScript.

2. Intro.js

Intro.js is a JavaScript library for step-by-step tours and hints, with tooltips and modals you can customise. Its site has listed separate terms for commercial projects, so check the current licence first.

3. Joyride

The original Joyride is a jQuery plugin for product tours with tooltips, modals and popovers, built with responsive layouts in mind. React Joyride is a separate library for React apps, so check which one a tutorial refers to.

4. Bootstrap Tour

Bootstrap Tour is a jQuery plugin that builds product tours on Bootstrap's popovers, with options for colours, animations and fonts.

Joyride and Bootstrap Tour both depend on jQuery, which many modern front ends no longer load. Since this guide was first written, newer open-source projects have also appeared: headless libraries that leave all the interface to you, and self-hostable onboarding platforms with a visual builder, which sit between a library and a paid tool.

What does an onboarding library leave you to build?

A library draws steps over elements and lets you run your own code when a tour starts, changes step or ends. Everything that makes onboarding targeted, persistent and measurable is yours to build:

What onboarding needs	What you build around the library
Show the tour only to the right users	Targeting rules in your code: new users, a plan, a role
Don't show it again once finished or dismissed	A per-user flag stored in your backend, so it holds across devices
Start at the right moment	Triggers on events, and waiting for elements to render in single-page apps
Change the copy	A code change and a deploy for every edit, unless you load steps from a CMS
Know whether it works	Events (started, step viewed, completed, dismissed) sent to your analytics
Reach users in other languages	Translations for every step
Keep working after a redesign	Updated selectors whenever the interface changes

If the first two rows already feel like a sprint, a no-code tool's free plan may cost less than building them; our list of free user onboarding software covers those.

How do you choose the right library?

Judge a library on fit with your product first, then on whether it will still be maintained when you need a fix. Check:

Functionality: tours only, or hints, highlights and modals too, and whether steps can wait for dynamic content.
Fit with your front end: plain JavaScript or a framework wrapper, and whether it pulls in jQuery or another dependency.
Customisability: themes, CSS hooks and control over colours, fonts and animations, so the flow matches your design language.
Ease of integration: how much setup and configuration it needs before the first step shows.
Accessibility: keyboard navigation, focus handling and screen-reader labels.
Maintenance and community: the date of the last release, open issues and how quickly they get answers. An active community means bug fixes, tutorials and documentation.
Licence: whether commercial use is allowed, and on what terms.

How do you implement an onboarding flow with a library?

Build the smallest flow that gets a new user to their first result, then add the plumbing a library doesn't provide. In order:

Set up the library. Include its CSS and JavaScript, or install the package, and initialise it.
Create the onboarding steps. Use its tooltips, popovers or modals, one idea per step, and keep the flow short so it doesn't overwhelm users.
Add navigation. Next, back and skip buttons, plus a way to reopen the tour later.
Save progress per user. Store completed and dismissed states so returning users don't see the tour again.
Send events. Record starts, step views, completions and exits in your analytics tool.
Test and refine. Watch real users try it, A/B test variants if you have the traffic, and adjust from what you see.

Offering the tour instead of forcing it is one option: at the time of the screenshot, Upwork's quick tour opened with a modal asking whether you wanted one, then ran just three steps.

How do you make a library-built flow feel like your product?

A library's default theme looks like everyone else's, so the customisation is where your flow becomes yours. Three things matter most:

Your branding: your colours, fonts and logo in every step, so the tour reads as part of the product.
Your product's voice: the same tone as the rest of your interface; if your product has a distinct voice, the tour should sound like it.
Your users' feedback: what people say and do in the flow should change it. Adding social proof to onboarding is one change worth testing once the basics work.

Which metrics show whether the flow works?

Measure the flow with the events you send in step 5 of the implementation; the library won't measure anything for you. Our guide to customer onboarding analytics covers the analysis in more depth.

Completion rate: the share of users who finish the flow. A low rate suggests it's too long or asks too much.
Drop-off by step: where people quit, which tells you which step to fix first.
Time to completion: a long time suggests too many steps or a confusing one.
User feedback: surveys and user testing show what the numbers can't, namely why people left.

When should you switch from a library to a no-code onboarding tool?

Switch when the people who own onboarding aren't the people who write code. If product or marketing needs to change tour copy more often than you ship releases, or you need targeting and completion analytics you haven't built yet, the library has become the bottleneck. Our comparison of user onboarding software covers what the paid tools' entry plans include as of October 2026.

About the author

Renk Mert

Renk is a creative content writer and a SaaS enthusiast, willing to learn and write about everything SaaS.