whatisgithub

What is intro.js?

usablica/intro.js — explained in plain English

Analysis updated 2026-06-21

★ 23,478TypeScriptAudience · developerComplexity · 2/5Setup · easy

In one sentence

Intro.js adds interactive step-by-step guided tours and onboarding tooltips to any web page by attaching simple HTML tags to your existing elements, no complex setup, works via CDN or npm.

Mindmap

mindmap
  root((repo))
    What it does
      Guided page tours
      Step-by-step tooltips
      Onboarding overlays
    How to Use
      HTML data attributes
      npm package
      CDN no build step
    Features
      Spotlight overlays
      Contextual hints
      Right-to-left support
    Use Cases
      SaaS onboarding
      Admin panel tours
      Feature introductions
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

What do people build with it?

USE CASE 1

Add an interactive feature tour to a SaaS product so new users know where to click without reading a manual.

USE CASE 2

Create an onboarding walkthrough for an admin panel by adding data-intro and data-step attributes to existing HTML elements.

USE CASE 3

Add contextual hint icons to a dashboard that users can click for on-demand tips without forcing a full guided tour.

What is it built with?

TypeScriptJavaScript

How does it compare?

usablica/intro.jsreduxjs/react-reduxdubinc/dub
Stars23,47823,48323,486
LanguageTypeScriptTypeScriptTypeScript
Setup difficultyeasymoderatehard
Complexity2/53/54/5
Audiencedeveloperdeveloperpm founder

Figures from each repo's GitHub metadata at analysis time.

How do you get it running?

Difficulty · easy Time to first run · 5min

So what is it?

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.

Copy-paste prompts

Prompt 1
I have an existing HTML admin panel. Show me how to add an Intro.js onboarding tour to three elements, a nav menu, a data table, and a settings button, using data attributes and one JavaScript call to start the tour.
Prompt 2
Using Intro.js with React, create a tour that highlights the header, sidebar, and main content area in order, with custom tooltip text for each step.
Prompt 3
I want my Intro.js tour to open automatically the first time a user visits and never again after that. Show me how to use localStorage to track whether the tour has been shown.
Prompt 4
My app supports Arabic, show me how to enable Intro.js right-to-left mode so the tooltip navigation buttons appear in the correct order.

Frequently asked questions

What is intro.js?

Intro.js adds interactive step-by-step guided tours and onboarding tooltips to any web page by attaching simple HTML tags to your existing elements, no complex setup, works via CDN or npm.

What language is intro.js written in?

Mainly TypeScript. The stack also includes TypeScript, JavaScript.

How hard is intro.js to set up?

Setup difficulty is rated easy, with roughly 5min to a first successful run.

Who is intro.js for?

Mainly developer.

Open on GitHub → Ask about another repo

This repo across BitVibe Labs

Verify against the repo before relying on details.

What are similar repos?