Dennis Dam

Posted on Mar 3

I built a config-driven graph editor for Angular — here's what I learned

#angular #webdev #typescript #opensource

I needed a graph editor for an Angular project. Not a complex diagramming tool, just something clean to visualize and edit node-based workflows. I looked at the options: heavy canvas-based libraries, React-centric solutions, or massive D3.js setups that needed weeks of wrangling.

Nothing fit. So I built one.

The Problem with Existing Tools

Most graph libraries fall into two camps. Either they are powerful but complex, requiring you to learn a whole new rendering paradigm, or they are simple but opinionated, forcing your data into their structure.

What I wanted was something that felt native to Angular. Something that understood signals, templates, and change detection. Something where the visual representation stayed separate from my domain logic.

Introducing @utisha/graph-editor

@utisha/graph-editor is a visual graph editor built specifically for Angular 19+. It renders with SVG, handles layout with dagre, and keeps everything reactive with signals. No RxJS, no canvas, no fuss.

The core idea is simple: you define what your nodes and edges look like through configuration, not code. The library handles panning, zooming, selection, and rendering. You focus on your data.

Quick Start

Install the package:

npm install @utisha/graph-editor

Import the component and configure your graph:

import { Component, signal } from '@angular/core';
import { GraphEditorComponent, Graph, GraphEditorConfig } from '@utisha/graph-editor';

@Component({
  selector: 'app-editor',
  standalone: true,
  imports: [GraphEditorComponent],
  template: `
    <graph-editor
      [config]="config"
      [graph]="graph()"
      (graphChange)="graph.set($event)"
    />
  `
})
export class EditorComponent {
  config: GraphEditorConfig = {
    nodes: {
      types: [
        { type: 'task', label: 'Task', icon: '⚙️', component: null,
          defaultData: { name: 'New Task' }, size: { width: 180, height: 80 } }
      ]
    },
    edges: { component: null, style: { stroke: '#94a3b8', strokeWidth: 2, markerEnd: 'arrow' } },
    canvas: { grid: { enabled: true, size: 20, snap: true }, zoom: { enabled: true, min: 0.25, max: 2, wheelEnabled: true } }
  };

  graph = signal<Graph>({
    nodes: [
      { id: '1', type: 'task', data: { name: 'Start' }, position: { x: 100, y: 100 } },
      { id: '2', type: 'task', data: { name: 'End' }, position: { x: 350, y: 100 } }
    ],
    edges: [{ id: 'e1', source: '1', target: '2' }]
  });
}

That's it. You now have a draggable, zoomable graph that responds to your signal changes.

What Makes It Different

Configuration-driven architecture means you define node types, edge strategies, and themes in a single config object. Your components stay clean. Your graph logic stays testable. Your domain model stays untouched.

Built for Angular 19+, the library uses signals for state management and change detection. No RxJS subscriptions to manage, no memory leaks to worry about, no async pipes cluttering your templates.

SVG rendering keeps everything crisp at any zoom level. Text stays selectable. CSS styling just works. You can even use your own Angular components for custom node rendering via ngComponentOutlet.

Four theme presets ship out of the box:

Default: Clean white background for documentation and diagrams
Compact: Cool blue-gray with dot grid for dense workflows
Detailed: Warm amber tones for process maps and charts
Dark: Charcoal background with cyan accents for developer tools

But: you can completely restyle according to your heart's content. Example in a proprietary app I built:

Features That Matter

[x] Custom node rendering with ng-template or ngComponentOutlet
[x] Edge path strategies: straight, bezier, step
[x] Undo/redo with full state history
[x] Multi-select with Shift+click or box selection
[x] Node resize handles
[x] Auto-layout with dagre
[x] Keyboard shortcuts (Delete, Ctrl+Z, Ctrl+Shift+Z)
[x] Lightweight — only Angular and dagre as dependencies

Try It Out

The fastest way to experiment is the live demo:

Live Demo: https://fidesit.github.io/graph-editor

Or jump straight into code on StackBlitz:

StackBlitz: https://stackblitz.com/github/fidesit/graph-editor

Ready to add it to your project?

npm: https://www.npmjs.com/package/@utisha/graph-editor

GitHub: https://github.com/fidesit/graph-editor

What I Learned

Building this reinforced something I already suspected: Angular's signal-based reactivity is genuinely pleasant to work with. Building a complex interactive component without RxJS felt almost too simple. No BehaviorSubject, no distinctUntilChanged, no manual subscription cleanup. Just signals and effects, and the framework handles the rest.

The configuration-driven approach paid off too. Early on I tried embedding node rendering logic directly in the component. It got messy fast. Moving to a config object with render strategies made the library flexible enough for my use case while staying simple for quick prototypes.

What's Next

The library is stable at v1.0.7 and ready for production use. I'm working on better documentation, more layout algorithms beyond dagre, and possibly a plugin system for custom edge types.

If you're building workflow tools, process designers, or any app that needs visual graph editing in Angular, give it a try. I built this because I needed it. Maybe you do too.

Star the repo if you find it useful. Open an issue if something breaks. Pull requests welcome.

DEV Community