# retejs/rete

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/retejs-rete).**

11,863 stars · 742 forks · TypeScript · mit

## Links

- GitHub: https://github.com/retejs/rete
- Homepage: https://retejs.org
- awesome-repositories: https://awesome-repositories.com/repository/retejs-rete.md

## Topics

`dataflow-programming` `flow-based-programming` `graph-editor` `node-editor` `standwithukraine` `visual-programming`

## Description

Rete is a framework for building interactive, node-based visual interfaces and dataflow programming environments. It provides a core engine that processes directed graphs, allowing developers to define modular logic where nodes represent operations and connections represent the flow of data or control. By decoupling the graph logic from the user interface, the framework enables the creation of custom visual editors that can be integrated into various frontend component libraries.

The project distinguishes itself through a highly extensible, signal-driven architecture that supports complex requirements like hierarchical graph nesting, where sub-graphs are encapsulated within individual nodes. It includes built-in support for real-time collaborative editing, allowing multiple users to synchronize state and track presence within the same workspace. Furthermore, the engine offers a hybrid execution model that combines data-driven propagation with explicit control-flow triggers, making it suitable for both simple data pipelines and complex procedural logic.

The platform covers a broad capability surface, including advanced viewport management, automated node layout algorithms, and performance optimizations such as result caching and level-of-detail rendering for large-scale graphs. It also provides comprehensive tools for state serialization, allowing workflows to be saved, imported, and transformed into executable code. The ecosystem is supported by a suite of development utilities that automate project scaffolding, plugin bundling, and AI-assisted documentation integration.

## Tags

### User Interface & Experience

- [Visual Node Editors](https://awesome-repositories.com/f/user-interface-experience/visual-node-editors.md) — Provides a framework-agnostic engine for building interactive, node-based visual programming interfaces and dataflow environments. ([source](https://retejs.org/examples))
- [Framework Agnostic UI Logic](https://awesome-repositories.com/f/user-interface-experience/framework-agnostic-ui-logic.md) — Decouples core graph logic from the user interface by delegating rendering to external frontend frameworks.
- [Node Editors](https://awesome-repositories.com/f/user-interface-experience/ui-components/text-editors/node-editors.md) — Provides a core framework for building interactive, browser-based node graph editors. ([source](https://retejs.org/docs/concepts/editor))
- [Nested Graph Encapsulation](https://awesome-repositories.com/f/user-interface-experience/visual-node-editors/nested-graph-encapsulation.md) — Encapsulates sub-graphs within individual nodes to allow for modular organization and the creation of reusable workflow components. ([source](https://retejs.org/examples/modules))
- [Interactive Connection Managers](https://awesome-repositories.com/f/user-interface-experience/interactive-connection-managers.md) — Manages dynamic connections between node ports through a visual interface. ([source](https://retejs.org/docs/guides/basic))
- [Component-Based UI Integrations](https://awesome-repositories.com/f/user-interface-experience/node-based-ui-components/component-based-ui-integrations.md) — Renders custom node-based interfaces within web applications by leveraging native framework components for seamless UI state management.
- [Component-Based Rendering](https://awesome-repositories.com/f/user-interface-experience/node-based-ui-components/component-based-ui-integrations/component-based-rendering.md) — Integrates with frontend frameworks to render nodes and controls as native components. ([source](https://retejs.org/docs/concepts/editor))
- [Interface Renderers](https://awesome-repositories.com/f/user-interface-experience/node-based-ui-components/interface-renderers.md) — Integrates node-based editors into applications by providing visual components for nodes, connections, and input controls. ([source](https://retejs.org/docs/guides/renderers/vue))
- [Viewport Management](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/css-layout-systems/grid-layout-systems/node-snapping/viewport-management.md) — The project positions nodes programmatically, adjusts the viewport to fit content, and enables user-driven selection and ordering of nodes within the workspace. ([source](https://retejs.org/docs/guides/basic))
- [Interaction Controls](https://awesome-repositories.com/f/user-interface-experience/form-and-input-management/interaction-and-event-handling/interaction-logic-hooks/interaction-controls/interaction-controls.md) — Provides essential interaction tools like panning, zooming, and context menus for graph manipulation. ([source](https://retejs.org/examples))
- [Node-Based UI Editors](https://awesome-repositories.com/f/user-interface-experience/node-based-ui-editors.md) — Integrates external UI components into the visual editor to define the appearance and behavior of nodes, sockets, and connections. ([source](https://retejs.org/examples/customization/react))
- [Node Components](https://awesome-repositories.com/f/user-interface-experience/visual-customization-tools/node-components.md) — The project defines custom nodes, sockets, and connections to adapt the visual interface to unique data structures and specific user requirements. ([source](https://retejs.org/examples/customization/lit))
- [Framework-Agnostic Rendering](https://awesome-repositories.com/f/user-interface-experience/visual-node-editors/framework-agnostic-rendering.md) — Integrates with various frontend frameworks to render node-based editors, allowing developers to choose their preferred UI library. ([source](https://retejs.org/docs/concepts/integration))
- [Node Palettes](https://awesome-repositories.com/f/user-interface-experience/visual-node-editors/node-palettes.md) — Includes a visual palette for easily adding new nodes to the workflow. ([source](https://retejs.org/docs/guides/dock-menu))
- [Multi-Framework Component Integrations](https://awesome-repositories.com/f/user-interface-experience/component-utilities/ui-frameworks/component-libraries/multi-framework-component-integrations.md) — Renders nodes and connections using specific frontend framework components for consistent state management. ([source](https://retejs.org/examples/basic/svelte))
- [Component Overrides](https://awesome-repositories.com/f/user-interface-experience/editor-customization-tools/editor-component-replacements/component-overrides.md) — Overrides default visual representations of nodes, connections, and sockets with custom implementations. ([source](https://retejs.org/docs/guides/renderers/vue))
- [Socket Compatibility Rules](https://awesome-repositories.com/f/user-interface-experience/form-and-input-management/form-validation/input-validation-rules/socket-compatibility-rules.md) — Enforces rules for linking nodes by checking socket types and preventing invalid connections. ([source](https://retejs.org/examples/chatbot))
- [Graphical Rendering Components](https://awesome-repositories.com/f/user-interface-experience/graphical-rendering-components.md) — Applies rendering presets to map data structures to specific user interface frameworks for node and menu display. ([source](https://retejs.org/docs/concepts/presets))
- [Interaction Handling](https://awesome-repositories.com/f/user-interface-experience/interaction-handling.md) — Manages complex user interaction events including drag-and-drop, undo-redo history, and read-only state enforcement. ([source](https://retejs.org/docs/api/overview))
- [Node Input Controls](https://awesome-repositories.com/f/user-interface-experience/ui-components/form-input-components/node-input-controls.md) — Allows embedding interactive form elements like text and number inputs directly into nodes. ([source](https://retejs.org/docs/guides/renderers/svelte))
- [Viewport Navigation Controls](https://awesome-repositories.com/f/user-interface-experience/viewport-navigation-controls.md) — Controls the visual canvas area, including panning, zooming, and rendering node layouts. ([source](https://retejs.org/docs/api/overview))
- [Visual Editor Templates](https://awesome-repositories.com/f/user-interface-experience/visual-editor-templates.md) — Generates pre-configured project structures for various frontend frameworks with integrated node-based editor features. ([source](https://retejs.org/docs/development/rete-kit))
- [Initialization Boilerplates](https://awesome-repositories.com/f/user-interface-experience/visual-node-editors/initialization-boilerplates.md) — Generates a boilerplate application with a chosen frontend framework to accelerate the development of node-based visual interfaces. ([source](https://retejs.org/docs/getting-started))
- [Node Execution Logic](https://awesome-repositories.com/f/user-interface-experience/visual-node-editors/node-execution-logic.md) — Executes logic defined by connected nodes to transform inputs into outputs for real-time updates. ([source](https://retejs.org/examples/3d-configurator))
- [Selection Menus](https://awesome-repositories.com/f/user-interface-experience/visual-node-editors/selection-menus.md) — Provides a menu for selecting and adding nodes to the visual workspace. ([source](https://retejs.org/examples/dock))
- [Node Component Defaults](https://awesome-repositories.com/f/user-interface-experience/component-configuration-defaults/node-component-defaults.md) — Provides default implementations for nodes, connections, and input controls while allowing developers to swap or customize these components. ([source](https://retejs.org/docs/concepts/integration))
- [Angular UI Libraries](https://awesome-repositories.com/f/user-interface-experience/component-libraries/angular-ui-libraries.md) — Provides native Angular components for rendering nodes and connections within an application. ([source](https://retejs.org/examples/basic/angular))
- [Component-Based UI Libraries](https://awesome-repositories.com/f/user-interface-experience/component-libraries/component-based-ui-libraries.md) — Enables building user interfaces from small, reusable components that update automatically based on state changes.
- [Custom UI Components](https://awesome-repositories.com/f/user-interface-experience/custom-ui-components.md) — Overrides default visual elements including nodes, connections, and sockets to match specific design requirements. ([source](https://retejs.org/docs/guides/renderers/react))
- [Connection Styling](https://awesome-repositories.com/f/user-interface-experience/editor-customization-tools/editor-appearance-customization/connection-styling.md) — Defines visual styles for links between nodes, including straight lines, markers, and embedded elements. ([source](https://retejs.org/examples/undirected))
- [Editor Plugins](https://awesome-repositories.com/f/user-interface-experience/editor-plugins.md) — Extends editor functionality with modular features like context menus, minimaps, and connection rerouting. ([source](https://retejs.org/docs/guides/renderers/lit))
- [Connection Endpoints](https://awesome-repositories.com/f/user-interface-experience/layout-positioning/connection-endpoints.md) — Calculates and adjusts the visual start and end coordinates of connections relative to sockets. ([source](https://retejs.org/docs/guides/connections))
- [Multi-Select Components](https://awesome-repositories.com/f/user-interface-experience/multi-select-components.md) — Supports multi-selection of nodes within the visual editor using keyboard modifiers. ([source](https://retejs.org/docs/guides/selectable))
- [Connection Insertion](https://awesome-repositories.com/f/user-interface-experience/ui-components/text-editors/node-editors/connection-insertion.md) — Enables dynamic graph modification by allowing nodes to be inserted directly into existing connection paths. ([source](https://retejs.org/examples/insert-node))
- [Editor Data Architectures](https://awesome-repositories.com/f/user-interface-experience/ui-components/text-editors/node-editors/editor-data-architectures.md) — Organizes visual node-based editors using predefined classes for nodes, connections, inputs, outputs, and sockets. ([source](https://retejs.org/docs/concepts/presets))
- [Node Control Embeddings](https://awesome-repositories.com/f/user-interface-experience/ui-customization-frameworks/node-control-embeddings.md) — Embeds interactive elements like input fields, buttons, and progress indicators directly into nodes. ([source](https://retejs.org/examples/controls/react))
- [3D Scene Node Integration](https://awesome-repositories.com/f/user-interface-experience/visual-node-editors/3d-scene-node-integration.md) — Embeds node-based interfaces directly into 3D environments while maintaining full interactivity. ([source](https://retejs.org/examples/3d))
- [Connection Rerouting](https://awesome-repositories.com/f/user-interface-experience/visual-node-editors/connection-rerouting.md) — Provides tools for shaping and rerouting connection lines between nodes to improve diagram clarity. ([source](https://retejs.org/docs/guides/reroute))
- [Editor Overviews](https://awesome-repositories.com/f/user-interface-experience/visual-node-editors/editor-overviews.md) — Provides a minimap-style overview for navigating complex node-based workflows. ([source](https://retejs.org/docs/guides/minimap))
- [Boundary Constraints](https://awesome-repositories.com/f/user-interface-experience/visual-node-editors/interaction-restrictions/boundary-constraints.md) — The project constrains the positioning of nodes within a defined boundary by monitoring coordinates to prevent elements from leaving the visible viewport. ([source](https://retejs.org/examples/viewport-bound))
- [Layout Management](https://awesome-repositories.com/f/user-interface-experience/visual-node-editors/layout-management.md) — Offers tools for managing and organizing node layouts within the workspace. ([source](https://retejs.org/examples))
- [Minimap Navigation](https://awesome-repositories.com/f/user-interface-experience/visual-node-editors/minimap-navigation.md) — Includes a minimap for visual navigation and viewport control within the editor. ([source](https://retejs.org/examples/minimap))
- [Visual Connection Rerouting](https://awesome-repositories.com/f/user-interface-experience/visual-node-editors/visual-connection-rerouting.md) — Enables users to manually shape and reroute connection lines for better visual organization. ([source](https://retejs.org/examples/reroute))

### Business & Productivity Software

- [Collaborative Editors](https://awesome-repositories.com/f/business-productivity-software/team-collaboration-events/collaboration-communication-tools/collaboration-software/collaborative-editors.md) — Enables multiple users to synchronize and collaborate on shared node-based workspaces in real time. ([source](https://retejs.org/examples/collaborative))
- [Real-time Collaborative Editors](https://awesome-repositories.com/f/business-productivity-software/team-collaboration-events/collaboration-communication-tools/collaboration-tools/real-time-collaboration/real-time-collaborative-editors.md) — Provides built-in support for real-time collaborative editing, allowing multiple users to synchronize state and track presence within the same workspace.

### Software Engineering & Architecture

- [Graph-Based Processing Engines](https://awesome-repositories.com/f/software-engineering-architecture/architectural-design-patterns/graph-based-processing-engines.md) — Processes logic by traversing directed node graphs and propagating data values between connected input and output sockets.
- [Graph-Based Workflow Models](https://awesome-repositories.com/f/software-engineering-architecture/graph-based-workflow-models.md) — Constructs and traverses hierarchical node structures to visualize, manipulate, and execute programmatic logic or system architectures.
- [Extensible Plugin Architectures](https://awesome-repositories.com/f/software-engineering-architecture/extensible-plugin-architectures.md) — Uses a signal-driven architecture that allows modular features to intercept, modify, or block data flow between components.
- [Logic Encapsulation Interfaces](https://awesome-repositories.com/f/software-engineering-architecture/module-encapsulation-patterns/logic-encapsulation-interfaces.md) — Encapsulates complex node-based logic into reusable modules that can be embedded as single nodes within larger graphs. ([source](https://retejs.org/docs/guides/modules))
- [Hierarchical Nesting](https://awesome-repositories.com/f/software-engineering-architecture/workflow-nodes/hierarchical-nesting.md) — Supports hierarchical graph nesting by allowing nodes to contain sub-graphs for modular organization. ([source](https://retejs.org/examples/scopes))
- [State Serialization](https://awesome-repositories.com/f/software-engineering-architecture/architectural-design-patterns/state-management/persistence-and-serialization/state-serialization.md) — Converts complex node and connection structures into structured data formats to enable saving, loading, and collaborative synchronization.
- [Data Serialization Formats](https://awesome-repositories.com/f/software-engineering-architecture/data-serialization-formats.md) — Converts the current state of nodes and connections into a structured format for storage or transmission. ([source](https://retejs.org/docs/guides/import-export))
- [Event Interception](https://awesome-repositories.com/f/software-engineering-architecture/event-interception.md) — Hooks into connection lifecycle events to validate, restrict, or trigger custom logic during user interactions. ([source](https://retejs.org/docs/guides/connections))
- [Modular Extension Architectures](https://awesome-repositories.com/f/software-engineering-architecture/modular-extension-architectures.md) — Integrates modular features through a signal-based architecture that allows plugins to intercept, modify, or block data flow. ([source](https://retejs.org/docs/concepts/plugin-system))
- [Orchestrators](https://awesome-repositories.com/f/software-engineering-architecture/workflow-nodes/orchestrators.md) — Triggers sequences of node operations by passing control between connected nodes in a defined order. ([source](https://retejs.org/docs/guides/processing/control-flow))
- [Rendering Optimizations](https://awesome-repositories.com/f/software-engineering-architecture/performance-reliability/performance-optimization/frontend-rendering-loading/rendering-optimizations.md) — Adjusts element visibility and rendering methods dynamically to maintain responsiveness with large graphs. ([source](https://retejs.org/examples/performance))
- [Level-of-Detail Renderers](https://awesome-repositories.com/f/software-engineering-architecture/performance-reliability/performance-optimization/frontend-rendering-loading/rendering-optimizations/level-of-detail-renderers.md) — Replaces complex node graphics with simplified representations based on zoom level to reduce rendering overhead. ([source](https://retejs.org/docs/best-practices/performance))
- [Visual](https://awesome-repositories.com/f/software-engineering-architecture/workflow-triggers/visual.md) — Enables nodes to dynamically determine the next step in a process based on defined control flow rules. ([source](https://retejs.org/examples/processing/control-flow))

### Data & Databases

- [Hybrid](https://awesome-repositories.com/f/data-databases/dataflow-engines/hybrid.md) — Offers a hybrid execution model that combines data-driven propagation with explicit control-flow triggers for complex procedural logic.
- [Execution Engines](https://awesome-repositories.com/f/data-databases/data-processing-configurations/execution-engines.md) — Provides hybrid execution models for processing data and control flow through node graphs. ([source](https://retejs.org/examples))
- [Automated Layout Algorithms](https://awesome-repositories.com/f/data-databases/automated-graph-layouts/automated-layout-algorithms.md) — Automates the positioning of nodes to maintain clean and readable graph structures. ([source](https://retejs.org/examples/arrange))
- [Node Result Caches](https://awesome-repositories.com/f/data-databases/data-engineering-infrastructure/caching-performance/caching-strategies/query-result-caching/method-result-caches/node-result-caches.md) — Stores computed output values for nodes to prevent redundant execution during graph operations. ([source](https://retejs.org/docs/guides/processing/dataflow))
- [Socket Validation](https://awesome-repositories.com/f/data-databases/data-processing-pipelines/data-serialization/schema-compatibility-validators/socket-validation.md) — Ensures only valid data flows between nodes by checking socket compatibility before connection creation. ([source](https://retejs.org/docs/guides/validation))

### Development Tools & Productivity

- [Dataflow Engines](https://awesome-repositories.com/f/development-tools-productivity/pipeline-execution-engines/dataflow-engines.md) — Implements a core engine that recursively triggers node execution and propagates data through directed graphs. ([source](https://retejs.org/examples/processing/dataflow))
- [Visual Workflow Engines](https://awesome-repositories.com/f/development-tools-productivity/visual-workflow-engines.md) — Translates graphical node connections into executable logic or code through a hybrid execution model.
- [Programming & Logic Libraries](https://awesome-repositories.com/f/development-tools-productivity/developer-utilities-libraries/programming-logic-libraries.md) — Implements a dataflow engine where nodes represent modular logic and connections define the flow of data or control.
- [Code Generation](https://awesome-repositories.com/f/development-tools-productivity/project-scaffolding-config-code-generation/code-generation.md) — Translates visual node-based graphs into executable code by traversing the node structure and mapping connections to programming syntax. ([source](https://retejs.org/docs/guides/processing/codegen))
- [Workflow-to-Code Generators](https://awesome-repositories.com/f/development-tools-productivity/project-scaffolding-config-code-generation/code-generation/workflow-to-code-generators.md) — Transforms visual node-based workflows into executable JavaScript code to bridge the gap between graphical design and implementation. ([source](https://retejs.org/examples/codegen))
- [Workflow State Reconstructors](https://awesome-repositories.com/f/development-tools-productivity/state-debugging-tools/state-restoration-utilities/workflow-state-reconstructors.md) — Reconstructs node instances, connections, and associated controls from saved data to recreate a visual workflow. ([source](https://retejs.org/docs/guides/import-export))
- [Topology Definition Interfaces](https://awesome-repositories.com/f/development-tools-productivity/node-management-interfaces/topology-definition-interfaces.md) — Constructs and retrieves nodes and connections to define the structure of a visual workflow or node-based interface. ([source](https://retejs.org/docs/guides/data-structures))
- [Workspace Initializers](https://awesome-repositories.com/f/development-tools-productivity/project-imports/workspace-initializers.md) — Loads pre-defined node configurations from external data files to initialize the workspace with existing structures. ([source](https://retejs.org/examples/3d-configurator))

### Web Development

- [Presence Tracking](https://awesome-repositories.com/f/web-development/presence-tracking.md) — Displays live cursors and presence indicators to show the activity and location of other connected users. ([source](https://retejs.org/examples/collaborative))
- [Frontend Framework Integrations](https://awesome-repositories.com/f/web-development/frontend-framework-integrations.md) — Renders node editors inside component-based web interfaces using specialized bindings for seamless UI state management. ([source](https://retejs.org/docs/api/overview))
- [Visual Editor History](https://awesome-repositories.com/f/web-development/history-management/visual-editor-history.md) — Tracks user actions within the visual interface to support undo, redo, and intelligent grouping of operations. ([source](https://retejs.org/docs/guides/undo-redo))

### Networking & Communication

- [Dynamic Port Synchronization](https://awesome-repositories.com/f/networking-communication/network-port-configuration/dynamic-port-synchronization.md) — The project combines multiple input and output ports into a single socket interface to simplify node connectivity and improve the visual layout. ([source](https://retejs.org/examples/undirected))
- [Connection Lifecycle Management](https://awesome-repositories.com/f/networking-communication/network-reliability-diagnostics/connection-session-management/connection-management/connection-lifecycle-management.md) — Manages the lifecycle of connections between nodes, including creation and deletion logic. ([source](https://retejs.org/docs/concepts/editor))

### Programming Languages & Runtimes

- [Hierarchical Tree Structures](https://awesome-repositories.com/f/programming-languages-runtimes/programming-utilities/data-structure-type-helpers/data-structures/hierarchical-tree-structures.md) — Organizes nodes into parent-child relationships to track descendants, ancestors, and siblings within nested structures. ([source](https://retejs.org/docs/guides/data-structures))

### Education & Learning Resources

- [Graph Collection Managers](https://awesome-repositories.com/f/education-learning-resources/educational-resources/algorithms-theory-academics/algorithm-data-structure-guides/graph-data-structures/graph-collection-managers.md) — Maintains a collection of nodes and connections, allowing for programmatic addition, removal, and retrieval of graph data. ([source](https://retejs.org/docs/concepts/editor))

### Graphics & Multimedia

- [Canvas Node Manipulation](https://awesome-repositories.com/f/graphics-multimedia/immersive-interactive-systems/user-interaction/canvas-node-manipulation.md) — The project enables users to select, reposition, and manipulate nodes within a canvas, including automatic layering to bring active elements to the foreground. ([source](https://retejs.org/examples/basic/react))

### Security & Cryptography

- [Graph Modification Validation](https://awesome-repositories.com/f/security-cryptography/field-level-read-restrictions/input-modification-restrictions/graph-modification-validation.md) — Intercepts attempts to add or remove nodes and connections, allowing the application to validate state and block unauthorized changes. ([source](https://retejs.org/docs/guides/validation))