iced_nodegraph

A node graph editor widget for iced

crates.io 0.5.0

Guide

A node graph editor widget for the iced GUI framework. Nodes are ordinary iced widgets placed on an infinite zoom/pan canvas and wired together through typed pins; everything on the canvas - node bodies, edges, pins, shadows, background - is drawn by one WGPU pipeline as signed distance fields, so it stays sharp at every zoom level.

Demo: hello_world
The hello_world demo: an email workflow graph with four connected nodes
Stored image of the hello_world scene.

Chapters

  1. 1 Quick Start #[derive(Debug, Clone)] enum Message { EdgeConnected { from: PinRef, to: PinRef }, NodesMoved { delta: Vector, node_ids: Vec<usize> }, }
  2. 2 Ids Nodes, pins, edges and anchors carry your own id types, and a pin can carry a payload.
  3. 3 What the host owns The widget is stateless between frames and never mutates your data model.
  4. 4 Core types Core types
  5. 5 Styling Node, edge and pin styles are flat concrete structs.
  6. 6 Interaction Connections behave like physical plugs: a dragged edge snaps to a compatible pin and on_connect fires immediately; moving away unsnaps and fires on_disconnect.
  7. 7 Nesting A NodeGraph is an ordinary element and can be a node's body.
  8. 8 Coordinates Screen space (pixels from input and the viewport) and world space (the infinite canvas) are distinct euclid types, so mixing them is a compile error:
  9. 9 Platform support Native Windows, macOS and Linux via WGPU, and WebAssembly on WebGPU-capable browsers.