Rete.js — Visual Programming Framework for Node-Based Editors

Introduction

Rete.js is a TypeScript framework for building node-based visual editors in the browser. It lets developers create interfaces where users connect nodes with wires to define data flows, automation workflows, or visual programming logic, similar to Unreal Blueprints or Blender shader nodes.

What Rete.js Does

• Provides a core engine for creating, connecting, and processing nodes in a visual graph
• Renders node editors using React, Vue, Angular, or Svelte through dedicated render plugins
• Supports dataflow and control flow processing engines for executing node graphs
• Enables drag-and-drop node creation, connection drawing, and canvas panning/zooming
• Offers a plugin architecture for extending functionality with custom behaviors

Architecture Overview

Rete.js v2 follows a modular architecture with a core editor package and separate plugins for rendering, connections, areas, and processing. The core NodeEditor manages the graph data model (nodes, connections, inputs, outputs). The AreaPlugin handles the 2D canvas with pan and zoom. Render plugins translate the graph model into framework-specific components. The dataflow engine traverses the graph and executes each node's processing function based on input connections.

Self-Hosting & Configuration

• Install the core package and plugins for your rendering framework (React, Vue, Angular, or Svelte)
• Create a NodeEditor instance and attach plugins for area management, connections, and rendering
• Define custom node classes with typed inputs, outputs, and controls (text fields, dropdowns, sliders)
• Register node components with the render plugin to control how each node type appears visually
• Use the dataflow or control flow engine to process the graph and produce outputs

Key Features

• Framework-agnostic core with official render plugins for React, Vue, Angular, and Svelte
• Dataflow and control flow engines for executing visual programs at runtime
• Built-in minimap, reroute points, and auto-arrange plugins for complex graph editing
• TypeScript-first design with full type safety for node inputs, outputs, and connections
• Undo/redo history plugin for editor state management

Comparison with Similar Tools

• React Flow — focused on flowchart and diagram rendering with React; Rete.js adds a processing engine for executing node graphs as programs
• Litegraph.js — lightweight node editor used in ComfyUI; Rete.js offers stronger typing and multi-framework support
• Node-RED — complete IoT automation platform with its own runtime; Rete.js is a library for building custom editors, not a standalone application
• Baklava.js — Vue-focused node editor; Rete.js supports multiple frameworks and has a larger plugin ecosystem
• Flume — React-based node editor; Rete.js provides more advanced features like dataflow processing and a richer plugin system

FAQ

Q: Can I use Rete.js to build something like Unreal Blueprints? A: Yes. Rete.js provides the primitives for node-based visual scripting. You define node types, their inputs/outputs, and processing logic. The control flow engine supports sequential execution similar to Blueprints.

Q: Does Rete.js work with vanilla JavaScript (no framework)? A: The core editor and processing engine work without a framework, but the visual rendering requires a render plugin. You can use the vanilla JS renderer or build a custom one.

Q: How does Rete.js handle large graphs with hundreds of nodes? A: The area plugin supports viewport culling to only render visible nodes. For very large graphs, use the minimap plugin for navigation and the auto-arrange plugin to organize layout.

Q: Can I serialize and save node graphs? A: Yes. The editor provides export/import methods that serialize the graph to a JSON structure containing all nodes, connections, and control values. Store this JSON in your database or filesystem.

Sources

• https://github.com/retejs/rete
• https://rete.js.org/