DEV Community

Siarhei Huzarevich
Siarhei Huzarevich

Posted on • Originally published at Medium

Foblex Flow 17.7 — Smarter Grouping, Copy/Paste, and Undo/Redo in Angular

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

Grouping Example GIF

⚠️ 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:

Undo Redo GIF

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

❤️ 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)