⬡ Open Source · Zero Dependencies · ES Modules

Build Visual Flow Editors
in Vanilla JavaScript

A production-grade, React Flow–class node-based editor built entirely with modern vanilla JS. State-driven architecture, smooth interactions, fully extensible.

🚀 Live Demo 📖 API Docs
import { FlowEditor } from 'jsflow' ⎘ copy
⚡
0
Dependencies
📦
<30KB
Gzipped
🎯
ES2022
Modern JS
🔌
Plugin API
Extensible
🏎
60fps
RAF Rendering
⌨
Keyboard
Accessible
Node Palette
0 nodes
0 edges
0 selected
100%
normal
🎯
Select a node or edge
Core Features
Everything you need to build
visual flow editors
Built on a solid state-driven foundation with clean separation of concerns.
🎨
State-Driven Rendering
Single source of truth. All rendering is derived from state — no fragile DOM-driven logic. RAF-scheduled updates ensure 60fps animations.
🗺️
Advanced Viewport
Cursor-centered zoom, smooth pan, fitView, centerView, zoomTo, minZoom/maxZoom — exact React Flow viewport behaviour.
🔗
Smart Edge Routing
Bezier, smooth-step, and straight edge types. Animated flowing edges, arrowhead markers, edge labels, and custom path renderers.
📦
Extensible Node System
Register custom node renderers per type, dynamic port/handle layouts, resize handles, badges, and full data binding.
⌨️
Full Keyboard Control
Delete, Escape, Ctrl+A, Ctrl+Z/Y, Ctrl+C/V, Ctrl+D. Left-drag to pan, Shift+drag for box selection, shift/meta multi-select.
⏱️
Undo / Redo History
Snapshot-based history stack. Every structural change is tracked and reversible.
🔌
Plugin Architecture
Install plugins via editor.use(). Full public API access for deep customisation.
💾
Import / Export
Serialise the entire graph — nodes, edges, and viewport — to clean JSON. Import restores exactly.
🗺
Minimap
Live canvas minimap with click-to-navigate. Node types rendered as colour-coded dots.
⊞
Snap to Grid
Optional snap-to-grid during node drag. Configurable grid size. Works with multi-selection.
✅
Connection Validation
Pass an isValidConnection callback to enforce port-type compatibility or custom rules.
📋
Copy / Paste / Duplicate
Ctrl+C/V to clipboard, Ctrl+D to duplicate in-place. Right-click context menu.
API Reference
Clean, intuitive public API
Designed for composability. Simple for basic use, powerful for advanced scenarios.
setup.js 

  







  
Keyboard Shortcuts

  
Productive by keyboard

  

    
Delete selected
Del

    
Deselect all
Esc

    
Select all
CtrlA

    
Undo
CtrlZ

    
Redo
CtrlY

    
Copy
CtrlC

    
Paste
CtrlV

    
Duplicate
CtrlD

    
Zoom in/out
Scroll

    
Pan canvas
Left drag

    
Pan canvas (alt)
Middle drag

    
Box select
ShiftDrag

    
Multi-select
ShiftClick

    
Context menu
Right click

    
Pan (hold)
SpaceDrag