Node-based editors are becoming a standard for automation, AI workflows, and low-code platforms. With Foblex Flow, we bring this power natively to Angular.
The new release, v17.7.0, introduces smarter grouping, copy/paste, and undo/redo — all features that make visual editors feel much closer to production-ready tools.
✨ Smarter Grouping
Working with groups is now more powerful and intuitive:
- Auto-resize groups with fAutoSizeToFitChildren.
- Auto-expand groups dynamically with fAutoExpandOnChildHit when children no longer fit inside.
- Refactored and improved examples:
- Grouping Example
⚠️ Breaking Change
- CSS class .f-parent-for-drop → renamed to .f-grouping-over-boundary.
- Added .f-grouping-drop-active for valid grouping targets.
👉 If you use custom CSS for grouping, make sure to update your styles!
📋 Copy / Paste Example
We all use copy, cut, and paste every day. Now your node-based editors can too.
- New Copy-Paste Example.
- Duplicate nodes (with their connections).
- Remove selected elements.
- Paste them back while maintaining consistent IDs and connections.
- This example shows how easy it is to implement clipboard functionality directly with Foblex Flow.
⏪ Undo / Redo Example
No editor feels complete without Undo/Redo. With v17.7, you now have a reference implementation:
- New Undo-Redo V2 Example.
- Powered by @foblex/mutator.
- Tracks state changes, snapshots, and history.
- Enables true time-travel editing for your diagrams.
Undo/Redo creates a smoother and more interactive editing experience, and is often a must-have for production tools.
📚 Documentation Updates
We’ve refreshed the docs to reflect these improvements:
Why This Matters
With these features, Foblex Flow becomes even more practical for real-world editors:
- Grouping makes complex diagrams easier to manage.
- Copy/Paste is expected by every user.
- Undo/Redo provides the safety net people need when building flows.
Together, they bring Angular-based visual editors closer to the standard set by professional design tools.
🔗 Links
- GitHub repo: https://github.com/foblex/flow
- Live examples: https://flow.foblex.com/examples
❤️ Support the Project
This release moves Foblex Flow another step closer to being a full-fledged framework for building low-code and AI editors in Angular.
If you find it useful, please ⭐ the repo on GitHub — it’s the best way to support the project and help it grow.
Top comments (0)