FlowLite – User Flow Builder
FlowLite is an interactive web application designed to build user flows.
With FlowLite you can visualize user journeys or plan a website for a client using a various wireframes and customizable shapes.
Try it out (version 1.2)
FlowLite Demo
Features
- Wireframe templates: Include commonly used user flow templates (e.g., landing page, call to action, website, register).
- Interactive Connections: Enable users to draw and rearrange connections between nodes with arrows indicating flow direction.
- Drag-and-Drop Editor: Allow users to easily create and connect elements in the flow.
- Annotations: Allow users to add comments or notes to areas of the flow.
- Edge customization: Support for changing colors and styles of connectors.
- Social media: Include commonly used social media platform icons.
- Custom shapes: Include custom shapes (e.g., rectangles, circles, diamonds) for common user flow components like decision points or actions.
- Preview mode: Provide an interactive preview where users can view the flow.
Technology Stack
FlowLite is built with the following stack.
- Build process: Vite is used to setup development environment and build process.
- Frontend: React, ReactRouter and ReactFlow are the main frameworks for user interface.
- State Management: Custom hooks are used for local state management.
- Database: LocalStorage or Node.js + Sqlite is used to store data.
- Styling: TailwindCSS is used for whole application’s styles.
* All libraries used in FlowLite project are release under MIT license.
Changelog
February 18, 2025 – Version 1.2.0
Version 1.2.0 - (February 18, 2025) -------------------------------- * New: Auto layout option * New: Two wireframes for AI page * Improvement: Truncate large url in browser * Improvement: Hide Toolbox on outside click * Improvement: Remove passing id to the nodes for handlers (not necessary) * Fix: Share, actions, groups, keyboard - click outside ref * Fix: Stop propagation on key down in label and url in node edit * Fix: Name update in localStorage version * Fix: Orange stroke color for edges
February 4, 2025 – Version 1.1.0
Version 1.1.0 - (February 4, 2025) -------------------------------- * New: 17 new wireframes * New: 13 new social nodes * New: Reverse animation option for edges * New: Url in wireframes nodes * New: Export to image option * New: Project with Node.js backend and database * Improvement: Keyboard shortcuts - copy and paste * Improvement: Separate api calls for easy database integration * Fix: Small improvements and bug fixes
December 15, 2024 – Version 1.0.0
* Initial Release
