[opensourcedex]

wireflow is a free, open source collaboration & communication project written in JavaScript and released under MIT. It has 4,166 GitHub stars, 395 forks and 25 open issues, and was last pushed 10 hours ago. On this registry it ranks #24 of 60 tracked projects in Collaboration & Communication, with 5 head-to-head comparisons available.

What is wireflow?

Wireflow is a free, open-source, browser-only diagramming tool for sketching user flows, aimed at designers, developers and product teams who want to map interface journeys without an account or a backend.

What it is

Wireflow is a JavaScript application released under the MIT licence by the Vanila Team and Automatio AI, living in the Business Software / Collaboration & Communication category of this registry. It presents a canvas into which wireframe screens are dragged from a template sidebar, connected with labelled edges, edited through a properties panel, and exported as an image. It runs entirely in the browser with no account, no backend, no analytics, and nothing sent to a server.

The concrete problem it addresses is that drafting a user flow normally means either adopting a heavyweight diagramming suite or signing into a hosted tool before any work can begin. Wireflow replaces that step by shipping more than 100 ready-made screen templates, a zoomable canvas with a minimap, and automatic persistence to the browser's localStorage under the key data, so a flow can be laid out, revised and exported in a single sitting with no credentials, no installation of a server component, and no server-side storage to provision.

Key capabilities

  • More than 100 screen templates in ten categories (Article, Blog, E-Commerce, Features, Gallery, Header, Misc, Multimedia, Sign in, Socials), with search in the sidebar.
  • Drag and drop of templates onto a zoomable canvas, with zoom in, zoom out, fit to screen, actual size and a minimap for navigation.
  • Screen connections where each edge carries its own label, shape (smooth, polyline, rounded polyline), width and colour.
  • Node and layout editing: renaming nodes, showing or hiding a node header with Ctrl + H and Ctrl + K, multi-select, group and ungroup, and bring to front or send to back.
  • Editing history through undo, redo, copy, paste and delete, plus autosave of every change to the browser's localStorage under the key data.
  • One-click export of the canvas to a JPEG named wireflow.jpg, downloaded from the round button in the top-left corner of the canvas.
  • A Vite-based codebase with pnpm lint, Vitest unit tests matching src/**/*.test.{js,jsx} and Playwright end-to-end specs in e2e/ configured through playwright.config.js.

Who uses it and how

  • Product designers and UX practitioners drafting journeys such as sign-in, e-commerce and social flows from the template categories, then exporting wireflow.jpg to hand off.
  • Developers and small product teams sketching flows locally against the Vite dev server at http://localhost:5173 without provisioning accounts or infrastructure.
  • Teams self-hosting the built application with docker compose, which builds a Node 24 stage and serves the static build/ output with nginx on port 8083.
  • Open-source contributors, since the project is MIT-licensed JavaScript tagged collaboration, flowchart and hacktoberfest, with 4166 stars, 395 forks and 25 open issues.
  • Users who require local-only diagramming, since diagrams persist in localStorage and are never transmitted to a server.

Getting started

Clone https://github.com/vanila-io/wireflow.git, run corepack enable, pnpm install and pnpm dev on Node.js 20.19+ or 22.12+ (Node 24 LTS recommended), then open http://localhost:5173 — or run docker compose up -d --build and open http://localhost:8083.

How it compares

The facts provided list no paid products this project replaces and name no similar tools alongside it, so Wireflow stands alone in this registry.

When to use it — and when not

A self-hoster operates very little here: either a Node toolchain for pnpm dev or the nginx container from docker compose, with no database, storage bucket or SMTP service to run. It is the wrong choice for anyone who needs the editable diagram to move between browsers or survive cleared site data, since the diagram exists only in the browser where it was made and the JPEG export is an image rather than an editable file, and the tagline's real-time collaboration claim sits awkwardly beside a design with no backend at all. The README's tech stack section also cuts off mid-sentence, and the toolbar icon font is loaded from Alibaba's iconfont CDN at.alicdn.com, which is worth knowing before deploying on a restricted network.

project readme (upstream, from github) — read inline

Netlify status License: MIT OpenCollective backers OpenCollective sponsors

Website · Live demo · Product Hunt

Wireflow is a free, open-source tool for sketching user flows. Drag wireframe screens onto a canvas, connect them, and export the result as an image. It runs entirely in the browser: no account, no backend.

Made by The Vanila Team and Automatio AI.

The Wireflow editor: template sidebar on the left, flow canvas in the middle, properties panel and minimap on the right

Features

  • 100+ screen templates in ten categories (Article, Blog, E-Commerce, Features, Gallery, Header, Misc, Multimedia, Sign in, Socials), with search in the sidebar.
  • Drag and drop templates onto a zoomable canvas.
  • Connect screens with edges. Each edge has its own label, shape (smooth, polyline, rounded polyline), width, and color.
  • Edit nodes: rename them, and show or hide the header with a shortcut.
  • Organize: multi-select, group and ungroup, bring to front and send to back.
  • Edit history: undo, redo, copy, paste, and delete.
  • Navigate: zoom in and out, fit to screen, actual size, and a minimap.
  • Export the canvas to a JPEG with one click.
  • Autosave: every change is saved to your browser's localStorage.

How it works

  1. Drag a screen. Pick a template from the left sidebar and drop it on the canvas.
  2. Connect the flow. Hover a screen to show its anchor points, then drag from an anchor to another screen. Select a node, edge, or group to edit it in the right-hand panel.
  3. Export. Click the round button in the top-left corner of the canvas to download wireflow.jpg. You don't need to save; the diagram is stored in your browser as you work.

Quick start

Requirements:

  • Node.js 20.19+ or 22.12+. Node 24 LTS is recommended.
  • pnpm. The version is pinned in package.json. Run corepack enable (Corepack ships with Node 24) to use it automatically, or follow the pnpm installation guide.
git clone https://github.com/vanila-io/wireflow.git
cd wireflow
corepack enable
pnpm install
pnpm dev

Then open http://localhost:5173.

Scripts

Command What it does
pnpm dev Start the Vite dev server at http://localhost:5173
pnpm build Create a production build in build/
pnpm preview Serve the production build at http://localhost:4173
pnpm lint Lint the project with ESLint
pnpm test Run the Vitest unit tests (src/**/*.test.{js,jsx})
pnpm test:e2e Run the Playwright end-to-end tests in e2e/

Testing

pnpm test                                  # unit tests (Vitest)

pnpm exec playwright install chromium      # first run only: download the test browser
pnpm test:e2e                              # end-to-end tests (Playwright, Chromium)

Unit tests are *.test.js / *.test.jsx files under src/. The end-to-end specs live in e2e/ and are configured in playwright.config.js. pnpm test:e2e builds the app and serves it on port 4179 by itself, so you don't need a running dev server (the port must be free).

Docker

docker compose up -d --build

Then open http://localhost:8083. The image builds the app in a Node 24 stage and serves the static build/ output with nginx. Stop it with docker compose down.

Keyboard shortcuts

Shortcut Action
Ctrl + = Zoom in
Ctrl + - Zoom out
Ctrl + H Hide the header of the selected node
Ctrl + K Show the header of the selected node
Delete / Backspace Delete the selection

Data and privacy

  • Your diagram is saved automatically to your browser's localStorage (key data) on every change. Nothing is sent to a server, and there are no accounts or analytics.
  • The diagram only exists in the browser where you made it. Clearing site data deletes it, and you can't move the editable diagram to another browser yet. JPEG export saves an image of the canvas, not an editable file.
  • The toolbar icon font is loaded from Alibaba's iconfont CDN (at.alicdn.com).

Tech stack

React 19 · Vite 8 · Ant Design 6 · GGEditor 2 (built on G6) · html-to-image · react-colorful · Vitest · Playwright · ESLint

Project structure

.
├── docs/                 README images (animated SVGs, screenshot)
├── e2e/                  Playwright end-to-end specs
├── public/               static files copied as-is (icons, manifest, Netlify _redirects)
├── src/
│   ├── assets/images/    wireframe screen templates (SVG), one folder per category
│   ├── components/       canvas, sidebar, toolbar, detail panel, minimap, export button
│   ├── containers/       app layout and custom node shapes
│   └── utils/            localStorage persistence helpers
├── index.html            Vite entry page
├── vite.config.js        Vite + Vitest config (build output: build/)
├── playwright.config.js  Playwright config
├── eslint.config.js      ESLint flat config
├── Dockerfile            Node 24 build stage + nginx runtime
└── docker-compose.yml    serves the app on port 8083

Contributing

Contributions are welcome. Bug reports and ideas go in GitHub issues.

  1. Fork the repository and create a branch for your change.

  2. Install dependencies with pnpm install and make your change.

  3. Run the checks locally:

    pnpm lint && pnpm test && pnpm test:e2e

  4. Open a pull request that explains what changed and why. Include a screenshot for UI changes.

Around the web

Credits

Contributors

This project exists thanks to everyone who contributes.

Contributors

Backers

Thank you to all our backers! Become a backer

Backers

Sponsors

Support this project by becoming a sponsor. Your logo will show up here with a link to your website. Become a sponsor

Sponsor Sponsor Sponsor

License

MIT

Frequently asked questions

Is wireflow free to use?

wireflow is open source under the MIT licence. There is no licence fee and no seat count — you can self-host it or, where the project offers one, pay a vendor for a managed version instead.

What does wireflow do?

Wireflow - user flow chart real-time collaborative tool

What is wireflow written in?

wireflow is primarily written in JavaScript. Its source is publicly available at https://github.com/vanila-io/wireflow, and it has 4,166 GitHub stars.