What is Wireflow?

Updated

Wireflow is a free, browser-based, open-source tool for creating user flow and wireflow prototypes. It is aimed at people who need to map how users move through a product—screens, decisions, and interactions—without installing design software or learning a complex graphics editor. According to the site, it requires no sign-up and is "free forever," and it runs entirely in the browser.

What Wireflow is used for

Wireflow focuses on user flows and wireframes combined—mapping the path a user takes through an interface rather than producing polished visual designs. The site describes it as a way to "map a flow" and build "beautiful user flow prototypes."

Typical uses include:

  • Sketching the steps in a sign-up, checkout, or onboarding journey
  • Showing how screens connect and where users branch or drop off
  • Sharing a flow with teammates for feedback before visual design begins

It is not a high-fidelity UI design tool. The emphasis is on structure and flow, not pixel-perfect visuals.

Key features

Feature What it does
100+ graphics/cards Pre-built elements covering most web elements, interactions, and use cases
Real-time collaboration Invite a co-worker and design the flow together live
Project permissions Control who can access a project and whether it is public or private
Built-in live chat Talk with teammates while collaborating in real time
Simple interface Minimal, easy-to-use design environment
No Photoshop required No install and no prior experience with complex software needed

The site also notes a library of 102 flows across 10 categories, including Article, Blog, E-Commerce, Features, Gallery, Header, Misc, Multimedia, Sign in, and Socials.

Open source and licensing

Wireflow is MIT licensed and developed in the open. You can fork it, self-host it, or contribute. The project lives on GitHub. It is built on Node.js, Next.js, and React.js, and is supported by sponsors and backers.

Who it is for

Wireflow suits:

  • Product and UX teams who need a quick way to map flows before committing to design
  • Developers who want to sketch an interaction model without design tooling
  • Anyone who wants to self-host or modify the tool, since the source is open

It is less suited to producing final, high-fidelity visual designs or detailed design systems.

Getting started

  1. Open the site in your browser—no sign-up is stated as required to begin.
  2. Start a new project and pick graphics from the built-in library to represent screens and elements.
  3. Connect the elements to show the flow between steps.
  4. Invite collaborators if you want to work in real time, and set project permissions to public or private.

Because the tool runs in the browser with no install, the main prerequisite is simply a modern browser.