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

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.

So I created two parts:

Guide Engine (Library)

This is the core library that highlights elements and guides the user step by step.

It creates a dark overlay with a spotlight effect that highlights the target component (button, input, section, etc.).

Repo:
https://github.com/EBPkobli/rotaguide-spotlight

How it works

The library highlights elements and guides the user step-by-step using a spotlight overlay.

You mark guide targets using a helper:

<button {...guideTarget("open-create")}>New Booking</button>

Then you can trigger guides with markdown content:

<MarkdownGuideTrigger content={guideMarkdown} triggerOn={["hover", "focus"]} as="div">
  <section className="tour-card">
    Hover or focus this card to start
  </section>
</MarkdownGuideTrigger>

Or control it manually:

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

Guide Editor

To make guides easier to create, I also built an editor.

You can visually select elements and write guide steps instead of manually configuring everything.

Repo:
https://github.com/EBPkobli/rotaguide-spotlight-editor

Online editor:
https://rotaguide-spotlight-editor.vercel.app

Landing page:
https://rotaguide-commercial.vercel.app

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 thinking about building a browser extension that can export guides as markdown files which can then be used directly by the library.

I would love 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 🙌