# Rete.js ## Documentation Sets - [Rete.js Full](https://retejs.org/llms-full.txt) ## Documentation - [Introduction](https://retejs.org/docs): Rete.js is a framework for creating visual interfaces and workflows. It provides out-of-the-box solutions for visualization using various libraries and frameworks, as well as solutions for processing graphs based on dataflow and control flow approaches - [Getting started](https://retejs.org/docs/getting-started): Rete.js offers two easy ways to get started: forking our examples on Codesandbox or creating a local application with Rete Kit. Follow our guides to familiarize yourself with our features and capabilities - [LLMs.txt](https://retejs.org/docs/llms): Supercharge your visual programming workflow with AI - Learn how to integrate Rete.js documentation with AI coding assistants for smarter node editor development - [Plugin system](https://retejs.org/docs/concepts/plugin-system): Explore our plugin system and see how it can improve your project's functionality. Our code example shows how signals are passed between parent and child plugins - [Presets](https://retejs.org/docs/concepts/presets): Discover how presets can simplify the process of building an editor. Explore our classic editor preset, which provides pre-built functionality for nodes, connections, inputs, outputs, and sockets - [Editor](https://retejs.org/docs/concepts/editor): Explore the core of the node editor and learn how it can facilitate graph management, including adding and removing nodes and connections. Additionally, learn how to visualize the editor and initialize interaction with connections - [Engine](https://retejs.org/docs/concepts/engine): Learn how to implement dataflow and control flow graph processing in your project with Rete.js' rete-engine package - [Integration](https://retejs.org/docs/concepts/integration): Learn how to integrate Rete.js with your favorite UI framework, such as Angular, Svelte, Lit, Vue.js, or React.js, using the available rendering packages - [Basic editor](https://retejs.org/docs/guides/basic): Discover how to create a basic node editor in your web application. This guide provides an overview of the basic plugins and their functionalities, with instructions for integrating with your stack - [React.js](https://retejs.org/docs/guides/renderers/react): Discover how to use React.js components and create custom components with rete-react-plugin. This guide provides step-by-step instructions for using the plugin, along with helpful references and examples to get you started - [Vue.js](https://retejs.org/docs/guides/renderers/vue): Discover how to use Vue.js components and create custom components with rete-vue-plugin. This guide provides step-by-step instructions for using the plugin, along with helpful references and examples to get you started - [Angular](https://retejs.org/docs/guides/renderers/angular): Discover how to use Angular components and create custom components with rete-angular-plugin. This guide provides step-by-step instructions for using the plugin, along with helpful references and examples to get you started - [Svelte](https://retejs.org/docs/guides/renderers/svelte): Discover how to use Svelte components and create custom components with rete-svelte-plugin. This guide provides step-by-step instructions for using the plugin, along with helpful references and examples to get you started - [Lit](https://retejs.org/docs/guides/renderers/lit): Discover how to use Lit components and create custom components with @retejs/lit-plugin. This guide provides step-by-step instructions for using the plugin, along with helpful references and examples to get you started - [Dataflow](https://retejs.org/docs/guides/processing/dataflow): Learn how to integrate Dataflow into your node editor with this guide. Follow step-by-step instructions to use the Dataflow approach, configure node classes to process incoming data, and comprehend how the engine resolves data - [Control flow](https://retejs.org/docs/guides/processing/control-flow): Learn how to use Control flow in your node editor with this guide. Follow step-by-step instructions to prepare nodes, and comprehend how the engine manages control flow - [Hybrid Engine](https://retejs.org/docs/guides/processing/hybrid): Learn how to combine Dataflow and Control flow with this guide. Follow step-by-step instructions to assign certain sockets as data sources and others for control flow approaches - [Codegen](https://retejs.org/docs/guides/processing/codegen): Learn how to setup code generation for your node editor - [3D](https://retejs.org/docs/guides/3d): Enhance your 3D scene with the node editor using this guide. Discover how to use the rete-area-3d-plugin to create a scene powered by Three.js. Render 3D objects and native HTML elements together in a single viewport for full interactivity - [Data structures](https://retejs.org/docs/guides/data-structures): Discover how to use the NodeEditor instance to store and manage its nodes and connections. This guide provides an overview of the data structures used by the editor, including advanced methods provided by rete-structures package - [Arrange nodes](https://retejs.org/docs/guides/arrange): Learn how to arrange nodes using the rete-auto-arrange-plugin. This guide provides step-by-step instructions on how to install the plugin and its peer dependencies - [Selectable](https://retejs.org/docs/guides/selectable): Discover how to implement selection of any kind of element in your node editor. The framework provides built-in support for selecting nodes, but you can also extend and customize the selector to support other types of elements - [Selectable connections](https://retejs.org/docs/guides/selectable/connections): Learn how to create selectable connections with this comprehensive guide. Follow step-by-step instructions and code snippets to modify your connection type to include an optional 'selected' field and programmatically select connections - [Connections](https://retejs.org/docs/guides/connections): This guide provides a detailed exploration of the functionalities offered by the rete-connection-plugin, enabling user interaction with connections in your web application - [Context menu](https://retejs.org/docs/guides/context-menu): Learn how to install rete-context-menu-pluin in your node editor. With this plugin, a user can add nodes to node editor through a context menu, making it easier to create and manage your application's workflow - [Readonly](https://retejs.org/docs/guides/readonly): Learn how to connect rete-readonly-plugin in node editor in order to make its nodes and connections read-only with this comprehensive guide - [Modules](https://retejs.org/docs/guides/modules): Learn how to build Module nodes that process nested graphs in your node editor. This guide provides a comprehensive overview of building Module nodes that process nested graphs based on Input/Output nodes powered by dataflow approach - [Scopes](https://retejs.org/docs/guides/scopes): Discover how to use rete-scopes-plugin to create a subgraph in your node editor. It enables parent-child relationships between nodes, allowing for grouping of nodes in content of parent node - [Import/export](https://retejs.org/docs/guides/import-export): Enhance your node editor's capabilities with this guide on import/export functionality, and gain insight into the challenges of serializing nodes/connections to JSON - [Validation](https://retejs.org/docs/guides/validation): Learn how to validate nodes and connections in your node editor with Rete.js' flexible plugin system, and ensure the integrity of your nodes and connections with this informative guide - [Minimap](https://retejs.org/docs/guides/minimap): Learn how to add a minimap to your node editor with rete-minimap-plugin, and improve your users' experience with this step-by-step guide - [Dock menu](https://retejs.org/docs/guides/dock-menu): Learn how to create a customizable dock menu for your node editor with rete-dock-plugin, and improve your users' experience with this step-by-step guide - [Connection path](https://retejs.org/docs/guides/connection-path): Learn how to enhance your node editor's appearance with rete-connection-path-plugin and d3-shape packages, and create custom connection paths with ease using this informative guide - [Reroute](https://retejs.org/docs/guides/reroute): Learn how to implement connection rerouting in your project with rete-connection-reroute-plugin package, and improve your users' experience - [Undo/Redo](https://retejs.org/docs/guides/undo-redo): Learn how to implement undo/redo functionality in node editor with rete-history-plugin, and improve your users' experience - [Comments](https://retejs.org/docs/guides/comments): Learn how to integrate the rete-comment-plugin package into your Rete.js project, and use comments to provide additional information and context to your nodes - [Performance](https://retejs.org/docs/best-practices/performance): Discover how to optimize performance in client applications. Learn about minimizing the impact of synchronous operations and direct rendering of elements by the browser - [Quality assurance](https://retejs.org/docs/quality-assurance): Learn about our quality assurance practices, including unit and E2E testing. We rely on Playwright for comprehensive testing from the user's perspective - [Development](https://retejs.org/docs/development): Looking to enhance your plugin building skills? This documentation provides resources for improving existing plugins or developing new ones. Explore our Rete CLI and Rete Kit tools for streamlined development - [Rete CLI](https://retejs.org/docs/development/rete-cli): Learn about our Rete CLI tool for building plugins with ease. With built-in support for TypeScript, ESLint, and Jest, you can start building without having to set up your own environment for building, linting, and testing - [Rete Kit](https://retejs.org/docs/development/rete-kit): Simplify your plugin and project development with Rete Kit. Create basic plugin structures instantly and setup an application from a variety of templates to get started quickly - [Troubleshooting](https://retejs.org/docs/troubleshooting): Our troubleshooting guide provides helpful tips for resolving common issues with our framework. Check the documentation, explore community resources, and ensure you're using the latest package versions to troubleshoot effectively - [Licensing](https://retejs.org/docs/licensing): Our licensing options provide flexibility in using our packages and plugins. The MIT license applies to most packages, while some plugins are currently available for non-commercial use only - [Code of Conduct](https://retejs.org/docs/code-of-conduct): Rete.js is dedicated to creating a safe and supportive space for all contributors and maintainers. Read our code of conduct to learn more about our values and expectations - [Contribution](https://retejs.org/docs/contribution): Discover the contribution guide for Rete.js. Follow the code contribution process,testing practices, bug reporting and other valuable contribution tips - [API](https://retejs.org/docs/api/overview): Learn more about Rete.js' packages and their API documentation. Explore the packages to learn more about their capabilities and features - [](https://retejs.org/docs/api) - [FAQ](https://retejs.org/docs/faq): Discover answers to frequently asked questions about Rete.js with this FAQ document. Learn about developing plugins, server-side processing, licensing, and more - [Migration](https://retejs.org/docs/migration): Learn how to migrate from Rete.js v1 to v2 with this guide. The framework contains numerous breaking changes, including a TypeScript-first approach and new plugin system ## Examples - [Examples overview](https://retejs.org/examples): This page provides a comprehensive list of examples and previews showcasing various types of node editors or visual workflows that have been created using Rete.js - [React.js](https://retejs.org/examples/basic/react): Learn how to create a basic editor with two connected nodes using integration with React.js. This example features a rendering using rete-react-plugin - [Vue.js](https://retejs.org/examples/basic/vue): Learn how to create a basic editor with two connected nodes using integration with Vue.js. This example features a rendering using rete-vue-plugin - [Angular](https://retejs.org/examples/basic/angular): Learn how to create a basic editor with two connected nodes using integration with Angular. This example features a rendering using rete-angular-plugin - [Svelte](https://retejs.org/examples/basic/svelte): Learn how to create a basic editor with two connected nodes using integration with Svelte. This example features a rendering using rete-svelte-plugin - [Lit](https://retejs.org/examples/basic/lit): Learn how to create a basic editor with two connected nodes using integration with Lit. This example features a rendering using @retejs/lit-plugin - [Basic](https://retejs.org/examples/basic): Explore examples of basic editor setups for various UI libraries and frameworks - [Controls for React.js](https://retejs.org/examples/controls/react): Explore the use of built-in and custom controls for React.js. This example features a button and radial progress indicator that randomly set and synchronize with an input field's valuefield's value - [Controls for Vue.js](https://retejs.org/examples/controls/vue): Explore the use of built-in and custom controls for Vue.js. This example features a button and radial progress indicator that randomly set and synchronize with an input field's valuefield's value - [Controls for Angular](https://retejs.org/examples/controls/angular): Explore the use of built-in and custom controls for Angular. This example features a button and radial progress indicator that randomly set and synchronize with an input field's valuefield's value - [Controls for Svelte](https://retejs.org/examples/controls/svelte): Explore the use of built-in and custom controls for Svelte. This example features a button and radial progress indicator that randomly set and synchronize with an input field's valuefield's value - [Controls for Lit](https://retejs.org/examples/controls/lit): Explore the use of built-in and custom controls for Lit. This example features a button and radial progress indicator that randomly set and synchronize with an input field's valuefield's value - [Controls](https://retejs.org/examples/controls): Explore examples of custom controls for various UI libraries and frameworks - [Customization for React.js](https://retejs.org/examples/customization/react): Learn how to customize the node editor with custom components using React.js. This example provides resources to help you create a custom editor that is tailored to your specific needs - [Customization for Vue.js](https://retejs.org/examples/customization/vue): Learn how to customize the node editor with custom components using Vue.js. This example provides resources to help you create a custom editor that is tailored to your specific needs - [Customization for Angular](https://retejs.org/examples/customization/angular): Learn how to customize the node editor with custom components using Angular. This example provides resources to help you create a custom editor that is tailored to your specific needs - [Customization for Svelte](https://retejs.org/examples/customization/svelte): Learn how to customize the node editor with custom components using Svelte. This example provides resources to help you create a custom editor that is tailored to your specific needs - [Customization for Lit](https://retejs.org/examples/customization/lit): Learn how to customize the node editor with custom components using Lit. This example provides resources to help you create a custom editor that is tailored to your specific needs - [Customization](https://retejs.org/examples/customization): Explore examples of custom nodes for various UI libraries and frameworks - [Performance](https://retejs.org/examples/performance): Learn how to assess the performance of rendering a large number of nodes on a page and explore specialized approaches to mitigate performance issues with examples such as LOD and LOD GPU - [Vertical flow](https://retejs.org/examples/vertical-flow): Learn how to create a vertically oriented editor by making subtle changes to nodes and connections, including using a custom node component, adjusting connection junction points, changing the connection path, and modifying port placement points - [Area extensions](https://retejs.org/examples/area-extensions): Learn how to use built-in extensions provided by rete-area-plugin, including selectableNodes for selecting nodes, restrictor for restricting zoom and pan areas, and snapGrid for snapping node positions to a grid - [Dataflow](https://retejs.org/examples/processing/dataflow): Learn how to create a data processing pipeline using rete-engine. This example showcases a dataflow approach where data flows through nodes from left to right - [Control flow](https://retejs.org/examples/processing/control-flow): Learn how to execute a schema via control flow using rete-engine. This example showcases how each node dynamically decides which of its outgoing nodes will receive control - [Hybrid Engine](https://retejs.org/examples/processing/hybrid-engine): Learn how to integrate dataflow and control flow with rete-engine. This example showcases how certain nodes serve as data sources, others manage the flow, and a third set incorporates both of these approaches - [Undirected](https://retejs.org/examples/undirected): Learn about the essential features for the undirected graph, including circle nodes, selectable connections, a unified port for connections, removal of connections with a designated button, and connections represented by straight lines and loops with markers at the end - [Arrange nodes](https://retejs.org/examples/arrange): Learn about automated node arrangement (layouting) which enables the positioning of nodes in relation to each other, considering their connections. This is achieved through a specialized plugin that uses elk.js to calculate node positions - [Insert node](https://retejs.org/examples/insert-node): Learn how to insert a node into a connection between other nodes. The implementation replaces the connection with two new connections when the selected node is dropped onto the connection - [Magnetic connection](https://retejs.org/examples/magnetic-connection): Enhance the user experience of your node editor with magnetic connection. This technique enlarges the connection dropping area, making it easier to connect sockets even when they are small or the zoom level is low - [Smooth zoom](https://retejs.org/examples/smooth-zoom): Improve the zooming experience of your node editor with this example of smooth zoom. Enhance the user experience of your editor with a more natural and seamless zooming behavior - [Context menu](https://retejs.org/examples/context-menu): Learn how to create a context menu for your node editor with this example. Use the provided plugin to generate a common context menu with a list of nodes to be created, as well as individual context menus for nodes with options for deletion and copying - [Panning boundary](https://retejs.org/examples/panning-boundary): Learn how to implement a panning boundary in your editor. Discover how the panning speed adjusts based on the distance from the cursor with a dragged node to the editor's boundaries - [Readonly](https://retejs.org/examples/readonly): Learn how to restrict the addition of nodes and connections to your node editor with this example of a simple rete-readonly-plugin. Prevent the translation of nodes within the area and explore the source code to create your own solutions tailored to your specific use case - [Modules](https://retejs.org/examples/modules): Learn how to reuse schemas in your node editor with this example of a dedicated Module node. Use the DataflowEngine to process input data and generate output data. Follow the step-by-step guide to create a nested schema containing Input and Output nodes, and customize the module node to fit your specific use case - [Scopes](https://retejs.org/examples/scopes): Enhance the functionality of your node editor with this example of the rete-scopes-plugin. Use subgraphs or nested nodes to create more complex and modular workflows. Long-press a node to change its parent and enjoy a more intuitive and flexible node editor - [Selectable connections](https://retejs.org/examples/selectable-connections): Learn how to select connections in your node editor with this example of a custom connection and AreaExtensions.selector. Follow the step-by-step guide to create a connection selection feature and enhance the functionality of your editor - [Labeled connections](https://retejs.org/examples/labeled-connections): Learn how to add labels to connections in your node editor with this example of a custom connection component. Calculate the position of the point relative to the path and display a text block at this position - [Lasso/marquee selection](https://retejs.org/examples/lasso-marquee-selection): Enhance the user experience of your node editor with a lasso/marquee selection using this example. Select nodes by drawing a shape. Follow the provided code snippet to customize the highlighting shape and intersecting area - [Minimap](https://retejs.org/examples/minimap): Learn how to add a minimap to your node editor with this example. By default, the minimap displays rectangles that represent the positions of nodes and the viewport, ensuring that all nodes are within the minimap's boundaries. Drag the mini-viewport to change the viewport's position and enjoy a more organized and structured workflow - [Dock menu](https://retejs.org/examples/dock): Enhance the functionality of your node editor with a dock menu using this example. Add a section with a list of nodes that users can add to the editor by clicking or dragging. Dynamically add or remove nodes from this list and configure them with the desired properties and order - [Sankey diagram](https://retejs.org/examples/sankey): Learn how to create a Sankey diagram in your node editor with this example. The diagram relies on the classic preset and includes custom components for nodes, connections, and sockets - [Connection path](https://retejs.org/examples/connection-path): Customize the connection paths in your node editor with this example. The plugin allows you to configure both the paths (linear, step, monotone) and the points they traverse. Additionally, there's an option to include an arrow-shaped marker - [Reroute](https://retejs.org/examples/reroute): Enhance the functionality of your project with a connection rerouting plugin. Allow users to insert rerouting points by clicking on a connection or remove them by right-clicking. Enjoy a more organized and structured workflow with this powerful feature - [Viewport-bound nodes](https://retejs.org/examples/viewport-bound): Learn how to handle area coordinates and restrict node positions. The versatile event system showcased allows for seamless conversions between different coordinate systems, making it a valuable addition to any project - [Comments](https://retejs.org/examples/comments): Learn how to use the comments plugin. Explore the frames and inline comments available and how to add them to your nodes - [History](https://retejs.org/examples/history): This example demonstrates how to use the history plugin to add undo/redo functionality to your editor. Learn how to track changes, group them by time, and use keyboard shortcuts - [LOD](https://retejs.org/examples/lod): Discover how to improve the performance of your editor with LOD. By utilizing level of detail to simplify nodes and exclude those outside the viewport, you can achieve better performance in your node editor - [LOD GPU](https://retejs.org/examples/lod-gpu): This example showcases the LOD GPU technique for visualizing thousands of nodes within a single editor. By rendering simplified versions of nodes and connections on the canvas, the framework leverages the power of Pixi.js to achieve exceptional performance - [3D Configurator](https://retejs.org/examples/3d-configurator): Learn how to use an editor to create custom color blends for a car's body and wheels with this 3D configurator example. The editor uses DataflowEngine for node processing and loads initial nodes from a JSON file through a custom importer - [Chatbot](https://retejs.org/examples/chatbot): Discover how to create a fully customizable chatbot using a visual editor. Rete.js offers enhanced capabilities for customizing the visual appearance and streamlining data processing. The behavior of the chatbot is programmed using a visual editor - [3D](https://retejs.org/examples/3d): Learn how to integrate a node editor into a 3D scene. Seamlessly integrate the native HTML editor into your 3D scene powered by Three.js without compromising interactive capabilities - [Multiple 3D editors](https://retejs.org/examples/3d/multiple-3d): Learn how to integrate multiple node editors into a 3D scene. Seamlessly integrate the native HTML editors into your 3D scene powered by Three.js without compromising interactive capabilities - [3D material authoring tool](https://retejs.org/examples/allmatter): This 3D material authoring tool example demonstrates the use of Rete.js for data processing and showcases the framework's capabilities. The project serves as a reference for migrating projects from v1 - [Code generation](https://retejs.org/examples/codegen): This Rete Studio Playground example showcases how to generate JavaScript code from a graph representation. Input JavaScript code and visualize its graph representation, which can also be transformed into JavaScript code