I built a simple guide/spotlight tool for complex web apps (open source)

Source: Dev.to

Hi everyone 👋

I recently built a small open‑source tool called RotaGuide Spotlight to help guide users through complex web interfaces. In many internal tools or enterprise dashboards, users can get lost because there are too many buttons, forms, and sections. I wanted a simple way to create step‑by‑step UI guides without adding a lot of manual code.

Guide Engine (Library)

The core library highlights elements and guides the user step‑by‑step using a dark overlay with a spotlight effect.

Repository:

How it works

Mark guide targets with the guideTarget helper:

New Booking

Trigger guides with markdown content:

<GuideProvider>
  <Guide
    steps={[
      {
        target: "#booking-card",
        content: "Hover or focus this card to start",
      },
    ]}
  />
</GuideProvider>

Or control the guide manually:

<GuideProvider>
  {({ startGuide, triggerProps }) => (
    <button
      {...triggerProps}
      onClick={() => {
        console.log("custom logic");
        startGuide();
      }}
    >
      Start Guide
    </button>
  )}
</GuideProvider>

Guide Editor

To make guide creation easier, I built a visual editor that lets you select elements and write steps without manually configuring everything.

Repository:

Online editor:

Landing page:

My Goal

My long‑term goal is to make it easier for teams to build product onboarding / feature guides for complex apps without needing heavy tools like Appcues or Intro.js integrations. I’m also considering a browser extension that can export guides as markdown files for direct use with the library.

Feedback

• Does something like this already exist that I should study?
• What features would make this more useful?
• Would you use something like this in your projects?

Thanks 🙌