ExamplesRete KitCodesandboxCodepen
There are two easy ways to begin working with the framework: forking the examples on Codesandbox or creating a local application using Rete Kit. The first option allows for experimentation with functionality, which not always covered in the guides. Alternatively, the second option enables the creation of a local application with specific node editor features for a chosen version of React.js, Vue.js, Angular or Svelte. Afterward, following the guides will help familiarize yourself with the framework's features and capabilities.
Before diving into Rete.js, it's important to have an understanding of JavaScript or TypeScript fundamentals. The framework is primarily designed with TypeScript in mind, with examples and guides showcasing code in this language. However, for newcomers to TypeScript or those looking to quickly prototype, it's still possible to use Rete.js directly in JavaScript code.
If TypeScript is your preferred choice, make sure you have TypeScript version 4.7 or higher installed.
Use Rete Kit to quickly set up a Rete.js application. It lets you select a stack (React.js, Vue.js, Angular or Svelte) and the set of features.
Framework packages are available on NPM and support common formats like ES (.esm.js), CommonJS (.common.js), and UMD (.min.js).
The command below provides an example of how to install the framework packages for the latest version.
npm i rete rete-area-plugin rete-connection-plugin rete-render-utils rete-react-plugin react react-dom
For specific information on the required packages, refer one of the guides
Framework packages are also available on numerous CDNs that serve npm packages. To add them to an HTML page, use the following example:
<script src="https://cdn.jsdelivr.net/npm/rete/rete.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/rete-area-plugin/rete-area-plugin.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/rete-connection-plugin/rete-connection-plugin.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/rete-render-utils/rete-render-utils.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/rete-react-plugin/rete-react-plugin.min.js"></script>
Use these packages by accessing their namespace, which can be found in the name field of rete.config.ts file for each package. Make sure to add the required peer dependencies
Rete
ReteAreaPlugin
ReteConnectionPlugin
ReteReactPlugin
Furthermore, you can integrate them on platforms like Codepen using esm.sh.