We are live on DevHunt: tool of the week contest
The purpose of this tool is to improve efficiency when developing plugins or projects using this framework.
It offers the following features:
npm i -g rete-kit
Or, you can specify the options
rete-kit app --name <name> --stack <stack> --stack-version <version> --features <features> --deps-alias <deps-alias>
<stack>option lets you choose
<features>is a comma-separated list of the Rete.js editor features
<deps-alias>is a JSON file that maps dependencies. By default, it installs the latest version from npmjs, but you can specify a different version using the format
name@versionor a path to the tarball
Additionally, re-executing the command with the same
stack-version options enables you to apply supplementary features without having to recreate the application.
After completion, you will have a directory with an application that can usually be started using the command
npm run start (depending on the stack). When opening the application, you can to specifying a query parameter
template in the URL with the following values:
default: default, a classic graph with dataflow example
perf: a graph with a large number of nodes, which can be adjusted using
customization: custom nodes and connections specific for each render plugin
3d: three.js-based scene with an integrated editor using
For instance, an Angular customization template can be available at http://localhost:4200/?template=customization.
You can easily create a plugin within your codebase by following the example of other plugins and extending
Scope, without the need to build it as a separate package.
In case you want to develop a plugin as a separate package, use this command:
rete-kit plugin --name <plugin name>
<plugin name> is a string that will be transformed into different formats and used in the templates, such as
rete.config.ts and the
The generated plugin includes all the essential configs, allowing you to start working with the source code immediately.
Developing modules that are separated into different packages is a challenging process. In contrast to a single codebase where the build system can detect changes in the directory and apply hot reload, developers need to manually set up the build of each dependency they work on and insert the changes into the project.
npm link and a bash scripts can be used to build required modules in watch mode. However,
npm link has certain limitations that might not be immediately noticeable. These limitations can stem from the shared dependencies of the project and the dependencies we're working on.
rete-kit build command was created to address such issues. It has two modes:
retedependency. In the watch mode, it directly builds them into the
node_modulesdirectory where they are used
rete-kit build --for ./my-project
--foldersoption. Similar to the first mode, the resulting build will be inserted into the
node_modulesdirectory of the target
rete-kit build --folders my-plugin-1,my-plugin-1,my-project
Please note that to use the hot reload feature to its fullest, you will need to disable the cache for the relevant dependencies. Otherwise, any changes made will not be applied on the fly. To accomplish this in Webpack, you can specify
snapshot.managedPaths. If the project still doesn't update, it may be necessary to manually clear the cache of compiled modules.