Licensing: AGPL-3.0 or commercial vs MIT
Intro.js is published under AGPL-3.0, and its license file asks commercial projects to buy a commercial license. AGPL-3.0 requires you to release the source of the application that uses it, including over a network, so most closed-source products end up on the paid license.
GlowTour.js is MIT-licensed: free for commercial and closed-source products, with no attribution requirement and no paid tier. If licensing is why you are looking for an Intro.js alternative, this is the main difference.
Framework integration: generic JavaScript API vs native adapters
Intro.js is a vanilla JavaScript library. In a framework app you callintroJs.tour() from an effect or lifecycle hook, and it renders its own tooltip DOM outside your components. React users often add intro.js-react, a community wrapper; Vue and Angular have no official adapter.
GlowTour.js ships a native integration for each framework: React components, Vue components and Angular standalone components, plus Solid components and vanilla custom elements, all driven by the same core engine. Popover content is ordinary component content, so it can use your own components, state and translations.
Server rendering: client-only vs verified SSR
Importing Intro.js 8.6.0 without a DOM throws document is not defined, from both its CommonJS and ESM entries. In Next.js, Nuxt, SolidStart or Angular SSR it has to be imported dynamically on the client.
GlowTour.js packages import safely on the server, and its adapters are tested against real server rendering and hydration in Next.js, Nuxt, SolidStart and Angular SSR applications.
UI customization: themes and CSS classes vs composable components
Intro.js customizes through options and CSS: built-in themes, registerTheme for your own, tooltipClass and highlightClass per tour or step, and HTML content inside each step. The tooltip layout itself stays the one Intro.js renders.
GlowTour.js assembles the popover from primitives such as Root, Popover, Header, Content, Footer and trigger components, so a custom layout is ordinary component code. Theming goes through the CSS custom properties prefixed --glow-tour-*.
Defining tours: steps option vs builder API
Intro.js tours are a steps array passed through setOptions(), with callbacks such as onbeforechange. It also ships hints, small hotspots that are separate from tours, and a built-in "don't show again" checkbox backed by a cookie.
GlowTour.js uses a chainable builder (tour.create().step().do().wait().build()) that can also sequence work between steps, such as waiting for an element or a condition. The same tour can come from a JSON config. Persisting progress is left to your application, with a documented recipe for resuming a tour.
Accessibility
Intro.js gives its tooltip a dialog role and supports keyboard navigation with the arrow keys and Escape; we found no focus trap in 8.6.0. Its tests include jest-axe checks on the markup.
GlowTour.js renders the same dialog semantics, keyboard shortcuts, focus containment and focus restoration in every adapter, and runs VoiceOver and NVDA against each adapter in CI.
Should you choose GlowTour.js or Intro.js?
- Choose Intro.js if you want a long-established vanilla JavaScript library with hints and ready-made themes, and AGPL-3.0 or its commercial license fits your project.
- Choose GlowTour.js if you need an MIT license, native React, Vue or Angular components, server rendering, or a popover you compose from components.
GlowTour.js is newer than Intro.js and ships as ESM only. Server rendering is verified for its React, Vue, Solid and Angular adapters; check the compatibility page for the exact versions before adopting it. For every library side by side, see the best open-source product tour libraries.
Sources
- GlowTour.js
- CompatibilityBuilder APIAccessibility guideSSR guideGitHub
- Intro.js
- WebsiteGitHubLicense
