Examples

This page collects the strongest Foblex Flow examples for Angular so you can evaluate the library by concrete interaction patterns, not only by API reference. The examples cover node editors, workflow builders, interactive diagrams, layout helpers, and richer production-style demos.

Most teams should start with a small example, not the largest reference app. The point is to learn the core flow primitives first and add advanced features only when you actually need them.

Use this section when you want to answer one of these questions quickly:

• Can I build custom nodes and connectors with Angular templates?
• How does drag-to-connect or connection reassignment work?
• Which examples cover workflow builders, minimaps, undo/redo, and auto layout plugins?
• What should I start from if I need a production-style editor rather than a tiny demo?

For lower-level APIs, combine these pages with the documentation. For full source code, open the GitHub repository.

How to use this section

• Start with Custom Nodes, Drag to Connect, or Get Started if you want the fastest path into the library.
• Open Reference Apps after the basics if you want complete, product-like editors.
• Open Connections and Extensions if you are comparing specific interaction features on the canvas.
• Open Plugins when you want Dagre or ELK-based layout examples, including auto-layout flows.
• Use Advanced when you need history, drag lifecycle events, larger-scene performance tools, or more complex editor behavior.

Reference Apps

Production-ready examples that show the full power of Foblex Flow.

Reference Apps

All Examples

Nodes

Connectors

Connections - Editing

Connections - Appearance

Connections - Routing

Viewport

Editor Helpers

Layout Engines

Reflow

Editor State

Events

Performance