About a year ago I shared a small side project: a call center flow editor built on top of Foblex Flow.
The idea was simple — give users a way to design call flows visually by dragging nodes and connecting them, instead of writing configuration manually.
Since then, Angular has evolved, and so has this project. I wanted to take advantage of Angular 20 and its new Signals API, so I decided to give the editor a proper refresh.
🔥 What’s New
Here’s what changed in this update:
- Migrated the whole project to Angular 20
- Rewritten state management on Signals → no external store, simpler and more reactive
- Added a Light/Dark theme switch for a nicer editing experience
- Added Undo/Redo (finally you can experiment without fear)
- Improved overall UX (zooming, dragging and reconnecting nodes feels smoother)
- Using Angular Material components for the interface
Demo & Source
Reflections
Moving everything to Signals simplified the state logic a lot. Undo/redo was much easier to wire up, and persisting state in localStorage became almost trivial.
This was a good reminder that Angular’s ecosystem is evolving quickly — and Signals are already powerful enough to drive fairly complex interactive UIs.
Closing Thoughts
This project started as a small experiment, but it keeps evolving together with Angular. Signals made the code simpler and the editor itself more responsive.
I’m planning to keep polishing it, so feedback is always welcome 🙌
👉 Try the demo: https://foblex.github.io/f-flow-example
And if you find this project useful, consider leaving a ⭐ on GitHub — it really helps!
Top comments (0)