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

FlowLite - User Flow Builder