Skip to content
Get packs

Guide · Open source

How to use Rete.js: install, build a node editor and tips

Updated · written with AI from the project's own documentation and checked against our catalogue data

Rete.js is a JavaScript and TypeScript framework for building visual interfaces where users connect nodes on a canvas. It is aimed at developers who want a node-based editor inside their own web application. This guide shows how to start a project with Rete Kit, what the framework covers, and when it is the right fit.

Rete.jsretejs/rete · ★ 12.3k · MIT

Quick start

  1. 1Check Node.js. Confirm Node.js is installed, since it is the listed prerequisite.
  2. 2Run Rete Kit. Run npx rete-kit app in a terminal to create a new Rete.js application.
  3. 3Choose your stack and features. Select React.js, Vue.js, Angular or Svelte, and the feature set you need when Rete Kit prompts you.
  4. 4Read the documentation. Use the introduction, guides and examples on retejs.org to learn the core concepts.
  5. 5Build your node graph. Add nodes and connections in your app using the rendering setup for your chosen UI library.
  6. 6Process the graph. Choose dataflow or control flow processing depending on how your workflow should run.

What Rete.js is and who it is for

Rete.js is a framework for creating visual interfaces and workflows. It provides ready-made solutions for drawing these visualizations with various libraries and frameworks, and it includes solutions for processing graphs based on dataflow and control flow approaches.

It is a framework for developers, not a finished end-user app. Non-developers looking for a ready visual programming tool should look elsewhere, because the project describes itself as a framework.

  • Developers adding a node-based visual editor to a web application
  • Teams building visual workflow or dataflow tools in JavaScript or TypeScript
  • Developers who want to use React, Vue, Angular, or Svelte with a graph editor

Prerequisites: what you need before installing

Rete.js is set up with a package manager, and the listed prerequisite is Node.js. The project is written in TypeScript and is licensed under MIT.

The README only covers JavaScript frameworks. If your project needs a non-JavaScript stack, Rete.js is not described as a fit.

  • Node.js installed on your machine
  • A package manager such as npm (the command below uses npx)

Create a new Rete.js app with Rete Kit

The quickest way to start is Rete Kit. It lets you select a stack (React.js, Vue.js or Angular, Svelte) and the set of features you want. Run the command below in a terminal to begin.

npx rete-kit app

Follow the complete guide if you do not use Rete Kit

If you prefer to set things up by hand, the project publishes a complete getting-started guide on its documentation site at retejs.org. The documentation also has an introduction, a set of guides, and a collection of examples you can read to see how the pieces fit together.

  • Introduction: retejs.org/docs
  • Guides: retejs.org/docs/guides/basic
  • Examples: retejs.org/examples

Understand what Rete.js gives you

Rete.js focuses on two jobs: drawing node graphs with a UI library of your choice, and running those graphs. The README names dataflow and control flow as the two processing approaches it supports.

Because the drawing layer works with several UI libraries, you can keep the framework your team already uses. The README names React.js, Vue.js, Angular and Svelte in its setup options.

  • Visual rendering of nodes and connections with several UI libraries
  • Graph processing based on dataflow
  • Graph processing based on control flow

Compare Rete.js with similar projects

Other open-source projects also help build node-based editors. Four comparable projects are React Flow, Drawflow, LiteGraph.js and Blockly. Pick based on your stack and on whether you need a framework or a finished tool. This guide does not benchmark them against each other.

  • React Flow
  • Drawflow
  • LiteGraph.js
  • Blockly

What people use it for

  • Adding a node-based visual editor to a web application
  • Building a dataflow tool in JavaScript or TypeScript
  • Building a control-flow workflow tool in a web app
  • Using a graph editor inside a React, Vue, Angular or Svelte project

Frequently asked questions

Is Rete.js free to use?

Yes. Rete.js is released under the MIT licence, which is linked from the project's README. You can read the full licence text in the project's LICENSE file on GitHub.

What do I need to install Rete.js?

The listed prerequisite is Node.js. The project is installed with a package manager, and the README shows the Rete Kit command npx rete-kit app to start a new app.

How do I create a Rete.js app quickly?

Run npx rete-kit app in your terminal. Rete Kit lets you pick a stack (React.js, Vue.js or Angular, Svelte) and the features you want.

Which frameworks does Rete.js work with?

The README names React.js, Vue.js, Angular and Svelte as stacks you can select through Rete Kit. The README covers JavaScript frameworks only.

Is Rete.js a finished visual programming app?

No. The README describes it as a framework for building visual interfaces and workflows, not an end-user product. Non-developers wanting a ready app should use a different tool.

How does Rete.js compare to React Flow or Blockly?

Rete.js, React Flow, Drawflow, LiteGraph.js and Blockly are all open-source options for node-based or block-based editors. This guide does not benchmark them, so compare them on your stack and on whether you need a framework or a finished tool.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

Rete.js suits developers who want to add a node-based visual editor and graph processing to a JavaScript or TypeScript web app, especially with React, Vue, Angular or Svelte. It is not a good choice for non-developers who need a finished visual programming app, or for projects that need a non-JavaScript stack.

Install options & downloads