In simple English
When a new user signs up for your app, they often do not know where to click. This library lets you show step-by-step boxes that point to buttons and explain your features. You can write the steps in code and style them to match your pages. It works with React, Vue, Angular, and plain JavaScript. You need to write the tour steps yourself.
What it is
Shepherd (a JavaScript library for creating step-by-step user onboarding tours and floating message bubbles inside a web browser) helps developers build guided walkthroughs. It attaches message boxes to specific page elements and steps users through them.
What it is good for
Solo builders who want to reduce churn by showing new users how their web app works without building an onboarding system from scratch.
- Supports React, Vue, Angular, Ember, and plain JavaScript.
- Highly customisable styles so the popups match your design.
- Lightweight package that does not slow down your app.
- Requires coding your tour steps manually in JavaScript.
- AGPL-3.0 licence means commercial products may need a paid commercial licence.
- Tour steps can break if your HTML element IDs or classes change.
building a custom modal tooltip system from scratch
React
- HypothesisWorks/hypothesis9.1k stars
A Python library that generates test inputs and reduces any failure to the smallest example that still fails.
- wntrblm/nox1.6k stars
Runs your tests and other jobs in fresh isolated environments, described in an ordinary Python file.
npm install shepherd.js