Build a production-grade Call Flow editor with the most flexible and extensible diagram library
Custom IVR nodes, automated call routing logic, and seamless telephony integration — everything your contact center product needs, without building it from scratch.
VisuallyJs offers a fully featured Call Flow builder as a starter app for React, Angular, Vue or Svelte, with out of the box support for IVR nodes, menu branching, voice prompts, and a simple API for adding your own custom telephony actions.
Get the code
Grab the source code from Github and start working on your new app right now.
- React
- Angular
- Vue
- Svelte
npx degit [email protected]:visuallyjs-react/callflow callflow
npx degit [email protected]:visuallyjs-angular/callflow callflow
npx degit [email protected]:visuallyjs-vue/callflow callflow
npx degit [email protected]:visuallyjs-svelte/callflow callflow
Who builds telephony UIs with VisuallyJs
Any product for designing automated voice interactions is a diagramming app at its core. VisuallyJs is what CPaaS providers and contact center ISVs choose for a visualization layer that's embedded, branded, and production-ready.
IVR Designers
Visual editors where administrators design Interactive Voice Response menus, defining how calls are greeted, branched, and routed based on user input or time of day. VisuallyJs handles complex logic paths and nested flows with ease.
Contact Center Orchestration
Dashboards for orchestrating complex omni-channel workflows, where voice, chat, and email routing rules are visualized as an interactive diagram. VisuallyJs provides the performance needed for large-scale enterprise deployments.
Real-time Call Monitoring
Live views of active calls as they progress through a flow, allowing supervisors to see bottlenecks or drop-off points in real time. VisuallyJs supports live state updates across thousands of concurrent paths.
Telephony Configuration Tools
Internal tools for telecom engineers to map out SIP trunking, internal extensions, and failover routes. VisuallyJs provides custom symbol libraries, snapping, and reliable undo/redo for precise configuration.
What VisuallyJs gives you out of the box
Domain-specific telephony nodes
From VXML-inspired states to custom proprietary actions, VisuallyJs lets you build custom shapes for any telephony symbol set and reuse them everywhere.
Automated layout engines
Call flows can get messy. VisuallyJs includes powerful layout engines that can automatically organize complex branching logic into clean, readable diagrams.
Live workflow binding
Bind UI elements to your backend orchestration engine so active calls can be visualized in real-time, highlighting current states and paths taken.
Validation and error checking
Attach validation logic to connections to ensure flows are complete and logical before deployment, surfacing issues directly on the canvas.
Extensive plugin library
Accelerate development with 15+ pre-built plugins for common workflow needs: miniviews, snaplines, undo/redo, automatic edge routing, and more.
Interactive property inspectors
Telephony actions require precise configuration. VisuallyJs supports integrated property inspectors for editing prompts, timeouts, and routing variables directly within the UI.
Framework-agnostic
VisuallyJs works with React, Angular, Vue, Svelte and TypeScript. Integrates cleanly into your existing application architecture without constraints - but offers a range of tightly integrated components to help you build professional applications for your target library with ease.
Start building your Call Flow editor today
The VisuallyJs Call Flow demo gives you a working starting point with custom telephony symbols, automated routing logic, and a clean extensible architecture. Talk to us today and have a working app in days.