Editor

NodeEditor presents an area with nodes and connections beetween their sockets:

• Available interaction with the working area (moving around, zoom) and managing nodes (move, add, delete)
• Each node can have inputs and outputs through which connections to other nodes are created
• Handle editor events
• All editor data can be exported and imported from JSON format

Create the instance of NodeEditor:

var editor = new Rete.NodeEditor('demo@0.1.0', container);

The demo@0.1.0 parameter is the identifier of your app/editor

The container is a simple HTMLelement (div, usually)

Identifier

Identifier consists of the app name and a version. Version is needed to control the import of data into your editor, since data from previous versions can be incompatible with the current version of your editor (where the main role is played by the Node builders, see below). The same rule exists for the Engine, which allows to prevent incompatibility of data with implementations in node workers

Export/import data

To save the added nodes in the editor and all connections to them simply call the toJSON method of the object NodeEditor

var data = editor.toJSON()

Tht data have about the following structure:

{
   "id":"demo@0.1.0",
   "nodes":{
      "1":{
         "id":1,
         "data":{"num":1},
         "inputs":[],
         "outputs":[
            {"connections":[
                  {"node":3, "input":0 }
            ]}
         ],
         "position":[ 80, 200 ],
         "name":"Number"
      }
   }
}

With the same success you can restore the contents of the editor using this data (provided that the versions of your data and the editor are the same)

await editor.fromJSON(data);

In the case of different identifiers in data and the editor, the method fromJSON throws an exception. You must catch it and notify the user or try to fit the data to a new version of your editor