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