usablica/intro.js

Intro.js is a lightweight JavaScript library for building step-by-step guided tours and onboarding experiences on web pages. The problem it solves is the "blank page" confusion new users face when they first open an application, there's no one to show them around. Intro.js lets you add interactive tooltips and highlights to specific elements on the page, walking users through features one at a time. Using it is straightforward: you attach special tags (called data attributes) to your existing HTML elements, for example "data-intro" contains the text to show, and "data-step" defines the order. Then you call a single JavaScript function to start the tour. Intro.js handles drawing the spotlight overlays, positioning the tooltip bubbles, and providing the Next and Back navigation. It also supports hints, which are small icons users can click to get contextual tips on demand rather than as a forced walkthrough. Right-to-left language support is included. You would use this when launching a new web product or feature and wanting to help users understand what they're looking at without writing a manual. It's popular for SaaS dashboards, admin panels, and any application with multiple features that benefit from a quick orientation. The library is written in TypeScript, available via npm, and also works by including it directly from a CDN, no build step required for basic use.