shipshapecode/shepherd

Shepherd is a JavaScript library that lets you add guided tours to a website or web app. A guided tour is a series of highlighted steps that walk new users through features one at a time: a tooltip or popup appears over a button or section, explains what it does, and then the user moves on to the next step. This kind of onboarding is common in software-as-a-service products where users need to discover features on their own. You define a sequence of steps in code, each specifying which element to highlight, what text to show, and what buttons to include (such as Back, Next, or Done). Shepherd handles positioning the popups relative to the target elements, keeping them on screen, and advancing through the steps. The styling is minimal by default so you can apply your own CSS to match the look of your product. The library works with plain JavaScript and includes ready-made integrations for popular front-end frameworks: React, Angular, Vue, and Ember each have their own wrapper package. This means you can drop Shepherd into projects built on any of those frameworks without extra configuration work. Real-world users listed in the README include the Drupal content management system, LogSeq, and SimplePlanner. The Drupal project uses Shepherd to power its built-in module tours. Licensing is dual-track. Open-source and non-commercial projects can use Shepherd for free under the AGPL-3.0 license. Companies building commercial products or revenue-generating services need a separate commercial license, available at the project website. The distinction matters if you are building something you plan to charge for. The project is maintained by Shipshape Code and has a Discord community for questions and discussion.