Call Center Flow Editor — now updated with Angular 20 & Signals 🚀

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

Call Center Flow

Demo & Source

👉 Live Demo

👉 Source Code

⭐ Library: Foblex Flow

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!