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

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

via Dev.to WebdevFurkan Kubilay

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"> <

Continue reading on Dev.to Webdev

Opens in a new tab

Read Full Article
2 views

Related Articles