$ show usablica/intro.js
Intro.js is a mature, client-side JavaScript library for creating step-by-step product tours and persistent hints on web pages. It operates entirely in the browser with no server dependencies, using a custom reactive DOM library (similar to VanJS) for state-driven UI rendering. The library exposes two main products: `introJs.tour()` for guided walkthroughs and `introJs.hint()` for annotation tooltips. Tours support dynamic step fetching, keyboard navigation, scroll-to behavior, callback hooks, and a 'don't show again' cookie feature. Hints auto-refresh on scroll/resize and can be triggered via data attributes or programmatic options. The codebase is modular, with separate packages for tour, hint, tooltip, and DOM utilities, and includes comprehensive unit tests (Jest) and visual regression tests (Cypress). While the core architecture is clean and well-tested, the library carries some legacy API surface (deprecated `introJs()` function) and outdated example integrations (Bootstrap v3, jQuery), indicating moderate technical drift. It is actively maintained with recent commits and GitHub Actions CI/CD.
The LLM identified 3 files worth highlighting for reuse:
A lightweight, self-contained reactive DOM library that provides state management (`state`, `derive`), tag creation (`tags`), and DOM binding via functions or state objects. It supports conditional rendering, event handling, hydration, and garbage collection. This module is fully independent and could be extracted as a standalone reactive UI framework, demonstrating non-obvious skill in building a minimal yet powerful reactivity system without external dependencies.
Implements intelligent auto-positioning for tooltips, evaluating available space in all four directions and selecting the optimal placement with fallback logic. The algorithm handles scrollable containers, fixed elements, and viewport boundaries. This module is a reusable pattern for any UI component that needs dynamic positioning based on real-time layout constraints, and it is decoupled from the rest of the tour logic.
Defines a `Package` interface with common methods (`getOption`, `setOption`, `clone`, `isActive`) that both Tour and Hint classes implement. This clean plugin-like architecture allows consistent option management and lifecycle control across different product types. The pattern is reusable for any library that needs to support multiple feature modules with a shared configuration and state interface.