React Flow alternative for Angular

React Flow is the benchmark for node-based UIs — and it is React-only, by design. If your app is Angular, your choices are wrapping a React runtime inside it or using something native. Grafloria is the native option that keeps React Flow's mental model: nodes and edges as data, custom nodes as templates, one component to mount.

Why not just wrap React Flow?

You can — createRoot inside an Angular host, props bridged by hand. Teams that try it hit the same three walls:

• Two frameworks in the bundle. React + ReactDOM ride along inside your Angular app, and every upgrade of either side is now your integration problem.
• Your nodes stop being Angular. Custom nodes are the whole point of a flow builder, and inside the wrapper they are React components — no Angular templates, no DI, no pipes, no signals.
• Change detection at the seam. State lives on both sides of the boundary, and the bugs live exactly on it.

The React Flow mental model, native in Angular

If you know React Flow, you already know this API. The concepts map one-to-one:

The same flow, both ways

React Flow in React:

import { ReactFlow, useNodesState, useEdgesState } from '@xyflow/react';

const initialNodes = [
  { id: 'a', position: { x: 60, y: 80 },  data: { label: 'Ingest' } },
  { id: 'b', position: { x: 380, y: 80 }, data: { label: 'Publish' } },
];
const initialEdges = [{ id: 'e1', source: 'a', target: 'b' }];

export default function App() {
  const [nodes, , onNodesChange] = useNodesState(initialNodes);
  const [edges, , onEdgesChange] = useEdgesState(initialEdges);
  return (
    <div style={{ height: '100vh' }}>
      <ReactFlow nodes={nodes} edges={edges}
        onNodesChange={onNodesChange} onEdgesChange={onEdgesChange} />
    </div>
  );
}

Grafloria in Angular:

import { Component } from '@angular/core';
import { DiagramCanvasComponent } from '@grafloria/angular';

@Component({
  selector: 'app-flow',
  imports: [DiagramCanvasComponent],
  template: `
    <grafloria-diagram-canvas [(nodes)]="nodes" [(edges)]="edges"
      [plugins]="true" style="display:block; height:100vh" />
  `,
})
export class FlowComponent {
  nodes = [
    { id: 'a', position: { x: 60, y: 80 },  size: { width: 180, height: 80 }, data: { label: 'Ingest' } },
    { id: 'b', position: { x: 380, y: 80 }, size: { width: 180, height: 80 }, data: { label: 'Publish' } },
  ];
  edges = [{ id: 'e1', source: 'a', target: 'b' }];
}

What you get past the basics

The features an automation builder or workflow editor needs next are in the box, and each link below is a running demo (every demo on the site is also a CI test):

• An n8n-style workflow editor, end to end
• Connection validation — only valid connections land, typed ports included
• Edges that route around nodes and animate while running
• Undo/redo with zero wiring, and JSON save/restore
• Auto-layout (ELK, dagre, tree, force) — one call, lazily loaded
• Real-time collaboration over a per-property CRDT, transport-agnostic

What React Flow has that we don't pretend to match

The ecosystem. React Flow has the largest community in this space, years of examples, integrations and answered questions — if your app is React and its model fits, it is a great choice and you should use it. This page exists for the Angular case, where that ecosystem cannot follow you anyway.

Start in five minutes

npm install @grafloria/angular @grafloria/element @grafloria/renderer @grafloria/engine

Then the component above is the whole mount. The 10-minute Angular tutorial takes it from there — custom nodes as ng-templates, events, layout — or open the Angular starter on StackBlitz without installing anything.

Feature statements about React Flow reflect its public docs and pricing pages as of August 2026 — confirm on the vendor's site. Corrections welcome on GitHub; this page aims to stay honest, not to win.