In simple English
When a new user visits your website, you want to show them how it works. This library highlights different buttons and menus one by one with helpful text boxes. You mark your HTML tags with simple data attributes and call one JavaScript function to start. The software is free for open source projects, but commercial use requires a paid licence. It has been maintained for over a decade and runs in any web browser.
What it is
Intro.js is a client-side JavaScript library for building guided product tours and interface hints. It uses CSS overlays to dim the rest of the page while drawing attention to specific elements.
What it is good for
Solo builders who want to reduce user churn by showing new visitors around their web application without writing custom tour code from scratch.
- Very small file size that loads quickly in any modern browser.
- Simple setup using standard HTML attributes without complex configuration files.
- Supports right-to-left languages out of the box for international audiences.
- Requires purchasing a commercial licence if you use it in a closed-source product.
- Custom styling requires overriding the default CSS rules manually.
- Updates to your web page layout can break step positions if you do not keep selectors updated.
Writing custom tooltip overlays and tour state machines from scratch
React or Vue web applications
- nilbuild/driver.js27k stars
Driver.js is another popular walkthrough library with a permissive open-source licence.
- 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 intro.js --save