DOCSEARCHbyAlgolia
Submit Docs

Rete.js Framework

website·Indexed 33 days ago

https://retejs.org/

A framework for creating visual interfaces and workflows. It features a plugin system, a node editor, and a processing engine supporting dataflow and control flow. Rete.js is UI-agnostic and provides official plugins for React, Vue, Angular, Svelte, and Lit.

Tokens
36.7K
Snippets
223
Records
302
Agent score
68%

What's inside Rete.js

  1. Overview of Rete.js testing strategy

    Rete.js employs two types of testing:

    1. Unit Tests: Used for testing individual modules within a package for speed.
    2. E2E Tests: Used for comprehensive product testing from the user's perspective, powered by Playwright and integrated into the rete-qa package.

    Guidelines for writing tests include keeping them simple, testing one thing at a time, covering edge cases, and using code coverage metrics as a reference rather than a primary conclusion.

  2. Overview of Rete.js Scopes Plugin

    The rete-scopes-plugin allows for the creation of nested nodes, also known as subgraphs. In this setup, nodes can act as parent elements for other nodes. Moving a parent node automatically moves all its child nodes, and moving child nodes can dynamically adjust the size of their parent nodes. Nesting can be multiple levels deep.

  3. Overview of Rete.js v2 capabilities

    Rete.js is a framework used to create visual interfaces and workflows. It separates the visual representation of a graph from its processing logic:

    • Visualization: Supports multiple frontend frameworks including React.js, Vue.js, Angular, Svelte, and Lit. These frameworks can be used to visualize nodes, sockets, controls, and connections, and can coexist within a single editor.
    • Processing: Provides engines for processing diagrams based on dataflow and control flow approaches, which can be combined within the same graph.

  4. Overview of the Rete.js Dock Menu

    The Dock menu is a UI component in Rete.js that provides a list of nodes users can add to the editor via clicking or dragging. By default, the menu is positioned at the bottom of the editor, but it supports custom presets for styling. The menu is dynamic, allowing developers to add or remove nodes, configure their properties, and define their display order.

  5. Generate AI instructions for Rete.js using Rete Kit AI

    Rete Kit AI generates context-aware instruction files for AI-powered code editors (Cursor, GitHub Copilot, Windsurf, etc.). These instructions help AI assistants provide more accurate and relevant help based on your current development stage. Note: This feature is currently experimental and the API may change.

  6. Use the Rete.js Minimap plugin for canvas navigation

    The Minimap plugin provides a small-scale representation of the editor canvas, typically positioned in the bottom-right corner. It displays rectangles representing node positions and the current viewport. The minimap dynamically updates as nodes are added to ensure all elements remain within its boundaries. Users can navigate the main editor by dragging the mini-viewport within the minimap.

  7. Use Rete CLI for plugin development

    Rete CLI is a development tool designed for building Rete.js plugins without manual environment setup. It provides a pre-configured toolchain including TypeScript, ESLint, and Jest for testing, and uses Rollup with Babel presets for the build process.

  8. Integrate Rete.js with Angular using rete-angular-plugin

    To render Rete.js nodes and connections within an Angular application, use the rete-angular-plugin. This plugin enables seamless integration, allowing for the creation of editors where nodes (such as those with input fields) and connections are rendered using Angular components. The plugin is available on GitHub at https://github.com/retejs/angular-render-plugin.

  9. Use the Rete.js comments plugin for node grouping and annotation

    The Rete.js comments plugin provides two distinct types of comments for organizing and annotating editors:

    1. Frame Comments: Used for grouping multiple nodes together. Users can add nodes to a frame comment via drag-and-drop.
    2. Inline Comments: Used for annotating individual nodes. These are attached by dragging and dropping the inline comment onto a specific node.

  10. Implement input and custom controls in Rete.js using Lit

    Rete.js supports the use of built-in input controls and the implementation of custom controls using the Lit library. Custom controls can be designed to interact with other node elements, such as buttons that modify input values or progress indicators that synchronize with input field states.

  11. Integrate Rete.js documentation with AI coding assistants

    Rete.js provides specialized documentation endpoints designed for AI consumption. These resources help AI tools understand node-based architecture, dataflow vs control flow, plugin composition, multi-framework rendering, and graph processing. There are two primary endpoints:

    • https://retejs.org/llms.txt: Essential node editor concepts, core APIs, and quick reference patterns.
    • https://retejs.org/llms-full.txt: Complete knowledge base including advanced patterns, plugin architecture, and processing engines.

  12. Use Rete.js documentation with Model Context Protocol (MCP)

    MCP-compatible tools (e.g., Claude Desktop, Context7) can be configured to use Rete.js LLMs.txt endpoints as resources. This provides the AI model with persistent access to node editor patterns and plugin architecture. Add https://retejs.org/llms.txt or https://retejs.org/llms-full.txt as resources in your MCP tool's configuration.