Packages

Interactive node-based flow diagrams for Phoenix LiveView. A library for building visual node editors, workflow builders, and interactive diagrams similar to React Flow, but for LiveView.

Current section

Files

Jump to
live_flow CHANGELOG.md
Raw

CHANGELOG.md

# Changelog
## v0.2.0 (2026-02-20)
### Performance
- **Fully client-side drag with instant edge updates.** Node positions AND edge SVG paths are now recalculated client-side during drag, eliminating all latency. Only the final position is sent to the server when the drag ends. After each LiveView DOM patch, client-side positions and viewport transforms are re-applied so nothing "jumps back" to stale server state. No changes required in your LiveView event handlers.
- **Viewport stability.** The client-side viewport transform is re-applied after every server DOM patch, preventing zoom/pan jumps when clicking nodes or during selection changes.
### Internal
- Edge `<g>` elements now include `data-source`, `data-target`, `data-source-handle`, and `data-target-handle` attributes for client-side path recalculation during drag.
## v0.1.0 (2025-xx-xx)
### Initial Release
- Flow diagram LiveComponent with pan, zoom, and viewport controls
- Node system: drag, select, resize, custom node types (function components + LiveComponents)
- Edge system: bezier, straight, step, smoothstep paths with animated edges and labels
- Handle system: source/target handles with connection validation
- Selection: click, shift-click, selection box (lasso)
- Undo/Redo history with configurable max entries
- Copy/Paste/Cut/Duplicate clipboard
- JSON serialization/deserialization
- Real-time collaboration via PubSub with cursor sharing
- Connection validation: composable validators (no_duplicate_edges, nodes_exist, no_cycles, types_compatible, max_connections)
- ELK auto-layout and tree layout algorithms
- Helper lines (alignment guides) during drag
- 36 built-in themes (12 hand-crafted + 24 auto-generated from daisyUI palettes)
- Tailwind v4 theme plugin
- SVG/PNG export
- Touch/mobile optimization (pinch-to-zoom, long-press selection)
- Keyboard shortcuts panel
- Edge label inline editing