Guide · Open source
How to use Flowy: add a flowchart editor to your web app
Updated · written with AI from the project's own documentation and checked against our catalogue data
Flowy is an open-source JavaScript library for web apps that need a flowchart editor, where users drag blocks onto a canvas and snap them together. It is aimed at developers building things like automation builders or mind-mapping tools. This guide shows how to load Flowy, set up a canvas and draggable blocks, use its callbacks, and save or restore a flowchart.
Flowyalyssaxuu/flowy · ★ 12.1k · MIT Install options & downloads Quick start
- 1Link the files. Add the jsDelivr stylesheet link and script tag to your HTML page.
- 2Add a canvas. Create a container element, such as a div with id canvas, to hold the flowchart.
- 3Mark draggable blocks. Give each draggable element the class create-flowy.
- 4Initialize Flowy. Call flowy() with the canvas element and any optional callbacks and spacing values.
- 5Handle snapping. Use onsnap and return true or false to allow or block each attachment.
- 6Save the chart. Call flowy.output() and JSON.stringify it to store the flowchart.
Install Flowy in your web app
Flowy is loaded in the browser through a stylesheet and a script. The README points to jsDelivr CDN links, and it does not document an npm install, which is still an unchecked item on its feature list.
- Add the stylesheet link and the script tag to your HTML page.
- Serve the page as you normally would; no build step or other dependencies are listed.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/alyssaxuu/flowy/flowy.min.css">
<script src="https://cdn.jsdelivr.net/gh/alyssaxuu/flowy/flowy.min.js"></script>Create the canvas and draggable blocks
Flowy needs two parts in your HTML: a canvas element that will hold the flowchart, and the blocks users can drag. Any element with the class create-flowy becomes draggable.
- Create a container, for example <div id="canvas"></div>.
- Add blocks with the create-flowy class, for example <div class="create-flowy">Grab me</div>.
<div class="create-flowy">The block to be dragged</div>
<div id="canvas"></div>Initialize Flowy with callbacks and spacing
Call flowy() with the canvas element and, optionally, four callback functions and two spacing values. The callbacks are all optional. Spacing defaults to 20px horizontally and 80px vertically.
- canvas: the DOM element that will contain the blocks (required).
- ongrab: runs when a block is dragged.
- onrelease: runs when a block is released, whether or not it attaches.
- onsnap: runs when a block snaps to another; return true to allow the attachment or prevent it.
- onrearrange: runs when blocks are rearranged; return true to allow deletion or prevent it so the block reattaches to its previous parent.
- spacing_x and spacing_y: integer spacing between blocks.
var spacing_x = 40;
var spacing_y = 100;
// Initialize Flowy
flowy(document.getElementById("canvas"), onGrab, onRelease, onSnap, onRearrange, spacing_x, spacing_y);
function onGrab(block){
// When the user grabs a block
}
function onRelease(){
// When the user releases a block
}
function onSnap(block, first, parent){
// When a block snaps with another one
}
function onRearrange(block, parent){
// When a block is rearranged
}Save and restore a flowchart
flowy.output() returns the flowchart as an object, and JSON.stringify can turn that into a string you can store. Each entry in the blocks array has an id, a parent id (-1 means no parent), and the data inputs inside the block. flowy.import() loads a flowchart previously exported with flowy.output().
The README warns that flowy.import() accepts raw HTML and does not sanitize it, so it is vulnerable to XSS. Only import data you fully trust.
- Export: flowy.output() or JSON.stringify(flowy.output()).
- Import: flowy.import(output), using data from flowy.output().
- Only use import with input you absolutely trust.
// As an object
flowy.output();
// As a JSON string
JSON.stringify(flowy.output());Clear the canvas
To remove every block at once, call flowy.deleteBlocks(). The README says there is currently no method to remove a single block; the only workaround it describes is splitting branches manually.
flowy.deleteBlocks()What people use it for
- Automation or workflow builder interfaces where users connect steps visually.
- Mind-mapping tools built into a web app.
- Simple programming platforms where blocks snap into a sequence.
- Mobile-friendly drag and drop of connected blocks, as the feature list notes mobile support.
Frequently asked questions
Is Flowy free to use?
Flowy is released under the MIT licence, according to the project summary. The README does not describe pricing, so the MIT licence is the relevant terms to check.
Does Flowy have any dependencies?
No. The README lists Flowy as vanilla JavaScript with no dependencies. You load it with one stylesheet and one script from jsDelivr.
Can I install Flowy with npm?
The README does not document an npm install. npm install appears as an unchecked item on the feature list, and the documented method is the jsDelivr CDN links.
Can I use Flowy without writing code?
No. Flowy is a library for developers and the README does not describe a ready-made editor app. You need to add it to a web page and write JavaScript to use it.
How do I delete a single block in Flowy?
The README says there is currently no method to remove individual blocks. It only suggests splitting branches manually, and offers flowy.deleteBlocks() to remove all blocks at once.
Is it safe to import saved flowcharts?
Only if the data is trusted. The README states that flowy.import() does not sanitize raw HTML and can be vulnerable to XSS, so untrusted input should never be imported.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Flowy suits web developers who want to add a flowchart-style, drag-and-drop editor to an existing app without writing the drag logic themselves, especially for automation builders or mind-mapping tools. It is a poor fit if you want a ready-made diagramming app, an npm-based install, or the ability to delete individual blocks, since the README says none of these are available.
Install options & downloads