node_program_editor #

A high-performance node graph engine for Flutter — React Flow, for Flutter.

Build LabVIEW / Simulink style dataflow tools, n8n style automation builders or machine-vision pipeline editors (Basler pylon like) on desktop, tablet and the web. The package gives you the engine — canvas, nodes, ports, links, interactions, panels, undo/redo and serialization — and you decide what the nodes look like and what they do.

• Zero dependencies (Flutter SDK only).
• Built for big graphs: spatial index culling, a node layer that pans and zooms with a single layer transform (no rebuild, no relayout), and a level-of-detail renderer that draws tens of thousands of nodes in one drawVertices call.
• GPU fragment shaders for the infinite grid and animated "data flowing" links, with CPU fallbacks.
• Everything is customizable: node bodies, port shapes and placement, edge routing, colors, menus, toolbar, palette.

Features #

Install #

dependencies:
  node_program_editor: ^3.0.0

Requires Flutter ≥ 3.47 / Dart ≥ 3.13.

Quick start #

import 'package:flutter/material.dart';
import 'package:node_program_editor/node_program_editor.dart';

final registry = NodeRegistry(definitions: [
  NodeDefinition(
    type: 'math.add',
    title: 'Add',
    category: 'Math',
    icon: Icons.add,
    variant: NodeVariant.dynamic,
    ports: const [
      PortSpec.input('a', label: 'a', type: PortType.number),
      PortSpec.input('b', label: 'b', type: PortType.number),
      PortSpec.output('sum', label: 'sum', type: PortType.number),
    ],
    params: const [
      ParamSpec('bias', DoubleParam(min: -10, max: 10, slider: true), showInNode: true),
    ],
  ),
]);

class EditorPage extends StatefulWidget {
  const EditorPage({super.key});
  @override
  State<EditorPage> createState() => _EditorPageState();
}

class _EditorPageState extends State<EditorPage> {
  final controller = NodeEditorController(registry: registry);

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) => Scaffold(
        body: NodeEditor(
          controller: controller,
          onSave: (c) {
            final logic = c.exportLogic().toJsonString();   // send to your engine
            final design = c.exportDesign().toJsonString(); // keep for the UI
          },
        ),
      );
}

NodeEditor = palette + canvas + toolbar + minimap. Each piece is also a standalone widget (NodePalette, NodeCanvas, NodeToolbar, NodeMiniMap, SuperNodeBreadcrumb) bound to the same controller.

Showcase #

The example app is a web-first showcase with three complete builders and a stress test:

• Workflow automation (n8n like) with a simulated run that animates the execution path.
• Scientific & control (Simulink / LabVIEW like): generators, filters, PID loop, FFT, live oscilloscopes, CSV export.
• Computer vision (pylon like): camera with AOI, filters, threshold, morphology, blob analysis, PASS / FAIL verdict, live previews in nodes.
• Stress test: up to 50 000 nodes with an FPS meter.

cd example
flutter run -d chrome
flutter build web --wasm --release --no-web-resources-cdn   # deploy build/web

See web deployment on Cloudflare.

Documentation #

Start with Getting started, then:

• Architecture — controller, commands, layers, LOD
• Nodes and ports
• Parameters
• Edges
• Canvas, grid and viewport
• Palette · Minimap · Toolbar
• Menus and edit dialogs
• Selection, clipboard and undo
• Super nodes
• Serialization: design and logic files
• Connecting an execution engine
• Theming and customization
• Keyboard shortcuts
• Performance guide
• Web deployment (Cloudflare)
• Migrating from 2.x

The full API reference is generated by dart doc (every public member is documented).

License #

See LICENSE.