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/rota... 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: New Booking Then you can trigger guides with markdown content: Hover or focus this card to start Or control it manually: {({ startGuide, triggerProps }) => ( { console.log("custom logic"); startGuide(); }} > Start Guide )} 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/rota... Online editor: https://rotaguide-spotlight-edit... Landing page: https://rotaguide-commercial.ver... 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 🙌

RotaGuide Spotlight

Opensource, reactjs, guiding tool

Opensource, reactjs, guiding tool