In simple English
When a new user visits your website, you want to show them where everything is. This tool draws a dark curtain over the page and shines a bright spotlight on one button or box at a time. It adds a small information bubble next to each highlighted piece so you can explain what it does. Users can click through a sequence of steps to learn your interface. It is free to use and runs entirely inside the web browser.
What it is
Reactour is a set of TypeScript (a programming language that adds strict rules to JavaScript) packages for building guided product tours in React (a JavaScript library for building user interfaces) applications. It darkens the background and puts a floating information box next to any target element you choose.
What it is good for
This is good for solo builders who want to create an onboarding walkthrough for their web app without writing layout code from scratch. It saves time by handling the background overlay and the floating speech bubble positioning automatically.
- Highlights specific elements on your page with a customizable dark background curtain.
- Shows floating popover boxes with next and back buttons for your tour steps.
- Built in modular packages so you can use only the parts you need in your project.
- Requires existing knowledge of React and component state management.
- Only works for web applications built with React, not mobile apps or other frameworks.
- Some styling adjustments require writing custom CSS to match your brand colours.
Writing a custom modal overlay and tooltip system from scratch
React (a JavaScript library for building user interfaces)
- gilbarbara/react-joyride7.9k stars
React-joyride creates guided tours for React apps too, using Joyride styling and built-in lifecycle management.
- SVG-Edit/svgedit7.8k stars
A vector drawing editor that runs in a browser and can be embedded in a web page.
- viliusle/miniPaint3.5k stars
A layered image editor that runs in a browser, with no upload and nothing installed.
- johanmattssonm/birdfont561 stars
A free desktop editor for drawing a typeface and exporting it as an installable font file.
npm install @reactour/tour