React Flowcase

React library for creating guided UI flows with animated virtual cursor interactions.

Live Demo · npm

Install

npm install react-flowcase

What it does

• Virtual cursor that clicks, types, and navigates through your UI
• Declarative flow steps with cancellation and error handling
• Dev-mode recorder that watches your interactions and generates code
• Drop-in UI components for editing, visualizing, and previewing flows

See the full API documentation in react-flowcase/README.md.

Repository structure

├── react-flowcase/   # The npm library
│   ├── src/          # Source code
│   └── README.md     # Full API documentation
├── demo/             # Interactive demo site
│   └── src/
└── .github/workflows/
    ├── deploy-demo.yml      # Auto-deploy demo to GitHub Pages
    └── publish-library.yml  # Publish to npm on release

Development

# Install dependencies
npm install

# Start the demo (includes library HMR)
npm run dev -w demo

# Build the library
npm run build -w react-flowcase

# Typecheck everything
npm run typecheck -w react-flowcase
npm run typecheck -w demo

License

MIT