Zero-Dependency Vanilla Tour & Spotlight Engine

Spotlight.js

The modern, zero-dependency JavaScript engine for delightful product tours, multi-element spotlights, Web Audio sound feedback, and onboarding checklists.

Get Started →

Spotlight.js Studio

Vanilla TypeScript 5.0+0 Dependencies • 5KB Min

Red Hat

Alibaba

MIT

Ethereum

GitKraken

Apache

Intel

Fiverr

Built for universal compatibility with zero external dependencies.

Live Playground & Examples

Click an interactive example below to see Spotlight.js in action, or discover full guides in the documentation.

Explore all guides →

Applications

Versatile Use Cases

With its flexible and extensible API, Spotlight.js powers every stage of user education and interactive product guidance.

Onboard Users

Explain how to use your product and answer common questions.

Interactive Tutorials

Walk users through tasks step by step, letting them act as they learn.

Feature Adoption

Spotlight new features so your users don't miss them.

Contextual Help

Provide in-context guidance right where your users need it.

Form Guidance

Guide users field by field and point straight to inputs that need fixing.

Remove Distractions

Highlight what matters and focus your users' attention.

Developer Experience

Your first tour in seconds 🚀

Import Spotlight.js, declare your tour steps, and call drive(). Hints, checklists, and the tour builder follow the same effortless API.

import { spotlight } from "spotlight.js";
import "spotlight.js/dist/spotlight.css";

const tour = spotlight({
  showProgress: true,
  sound: true,
  celebrateOnDone: true,
  theme: "dark",
  steps: [
    {
      element: "#search",
      popover: { title: "Search", description: "Find anything in seconds." },
    },
    {
      element: "#notifications",
      popover: { title: "Stay updated", description: "All your alerts live here." },
    },
    {
      element: "#profile",
      popover: { title: "Your account", description: "Manage settings and billing." },
    },
  ],
});

tour.drive();

import { spotlight } from "spotlight.js";
import "spotlight.js/dist/spotlight.css";

const tour = spotlight();

tour.highlight({
  element: "#new-feature",
  popover: {
    title: "New: Spotlight 2.0 🌟",
    description: "Multi-element spotlights, Web Audio chimes, and confetti celebration.",
  },
});

import { hints } from "spotlight.js/hints";
import "spotlight.js/dist/hints.css";

const productHints = hints({
  hints: [
    {
      element: "#export-btn",
      popover: { title: "New: Export", description: "Download reports as CSV or PDF." },
    },
    {
      element: "#filters",
      popover: { title: "Filters", description: "Narrow results by date or owner." },
    },
  ],
});

productHints.show();

import { checklist } from "spotlight.js/checklist";
import "spotlight.js/dist/spotlight.css";
import "spotlight.js/dist/checklist.css";

const onboarding = checklist({
  id: "onboarding",
  items: [
    { id: "tour", title: "Take the tour", tour: steps },
    { id: "invite", title: "Invite a teammate", action: openInviteModal },
    { id: "github", title: "Connect GitHub", completeWhen: () => user.githubConnected },
  ],
});

onboarding.show();

import { spotlight } from "spotlight.js";
import "spotlight.js/dist/spotlight.css";

const tour = spotlight();

// Launch interactive point-and-click step recorder
tour.startTourBuilder();