Nograph is the primary place where you create and connect nodes to build your illustrations, designs. It provides a visual representation of entire data flow like creating a start then bending it. Nodegraph allows to create complex system that layers can’t offer in a organized manner.
Inputs and outputs
Generic Node
Source (Input)
The primary shape input. Most nodes that modify shapes have this.
Target (Input)
A secondary input, often used for cutters in Boolean operations or targets in Match Size.
Mask (Input)
A tertiary input, typically used for masking operations in nodes like Blend.
Output
The output of the node, which can be connected to other nodes' inputs.
- Inputs (Top): Receive shape or properties from other nodes.
- Outputs (Bottom): Send the processed shape or properties to other nodes.
Node wings
When hovered over a node, colored “wings” appear on left and right sides. These are quick-access toggles for important node states.
| Wing | Description | Visual Example |
|---|---|---|
| Disable | Temporarily bypasses the node's operation, as if it wasn't there. | Node |
| Preview | Similar to render target but previews results as a ghosted shape in the viewport. | Node |
| Render target | Marks this node as the final output in the viewport. Only one node can be the render target at a time. | Node |
Tip: use shortcuts to quickly set render flag 'R', preview node 'E' or disable node 'Q'.
Auto wiring
Abuse auto wiring feature as much as possible as it’s the fastest way to connect nodes.
- Select a node.
- Use TAB or RMB to search node.
- Add node and it will auto wire to selected node.
Tip: auto wiring supports multi-input nodes as well. First selected node will be first input, second selected node will be second input.
Quick add hotkeys
The fastest way to build graph is by using Quick add hotkeys. This allows to add common utility and shape nodes without opening the search menu.
- Add in empty space: Hold a mapped key (e.g., R for Rectangle, T for Transform) and click anywhere in the nodegraph.
- Insert on a wire: Hold a Quick add key and click directly on an existing wire to instantly insert and auto-wire new node between two existing nodes.
Info: Quick add keys are mapped to the left side of the keyboard by default to keep your right hand on the mouse. You can switch to a left-handed layout (right side of keyboard) in Settings -> General -> Node Hotkeys.
AI-generated workflows
AnimGraphLab’s architecture relies on a open JSON format. This means you can use AI tools, chatbots to generate complex node networks for you.
You can prompt an LLM to generate an AnimGraphLab-compatible JSON payload representing a specific procedural effect, copy the resulting code block, and simply press Ctrl + V (or Cmd + V) directly on in Nodegraph to paste the entire network.
Below are three examples showcasing static, animation, and state machine scene.
1. Static scene payload
It creates a base Star, scatters points using the Scatter node, and uses copyToPoints to instance Circle dots along the edge of the star.
Copy this block and press Ctrl+V in Nodegraph:
{
"nodes": [
{
"id": "star2",
"type": "star",
"position": { "x": 490, "y": 726 },
"data": {
"label": "Base Star 2",
"points": 8,
"outerRadius": 200,
"innerRadius": 100,
"layers": [
{ "id": "f1", "type": "fill", "color": "#2f65be", "visible": true, "opacity": 1 }
]
}
},
{
"id": "ellipse2",
"type": "ellipse",
"position": { "x": 809, "y": 736 },
"data": {
"label": "Dot 2",
"radiusX": 8,
"radiusY": 8,
"layers": [
{ "id": "f2", "type": "fill", "color": "#ef4444", "visible": true, "opacity": 1 }
]
}
},
{
"id": "scatter1",
"type": "scatter",
"position": { "x": 639, "y": 871 },
"data": {
"label": "Outline Scatter 1",
"method": "outline",
"distribution": "count",
"count": 40
}
},
{
"id": "copyToPoints1",
"type": "copyToPoints",
"position": { "x": 847, "y": 982 },
"data": { "label": "Instance Dots 1", "alignToNormal": true }
},
{
"id": "merge2",
"type": "merge",
"position": { "x": 494, "y": 1072 },
"data": { "label": "Merge 2", "inputOrder": ["copyToPoints1", "star2"] }
}
],
"edges": [
{ "id": "e1", "source": "star2", "target": "scatter1" },
{ "id": "e2", "source": "ellipse2", "target": "copyToPoints1", "targetHandle": "target" },
{ "id": "e3", "source": "scatter1", "target": "copyToPoints1", "targetHandle": "secondaryTarget" },
{ "id": "e4", "source": "star2", "target": "merge2" },
{ "id": "e5", "source": "copyToPoints1", "target": "merge2" }
],
"renderTargetId": "merge2"
}{
"nodes": [
{
"id": "star2",
"type": "star",
"position": { "x": 490, "y": 726 },
"data": {
"label": "Base Star 2",
"points": 8,
"outerRadius": 200,
"innerRadius": 100,
"layers": [
{ "id": "f1", "type": "fill", "color": "#2f65be", "visible": true, "opacity": 1 }
]
}
},
{
"id": "ellipse2",
"type": "ellipse",
"position": { "x": 809, "y": 736 },
"data": {
"label": "Dot 2",
"radiusX": 8,
"radiusY": 8,
"layers": [
{ "id": "f2", "type": "fill", "color": "#ef4444", "visible": true, "opacity": 1 }
]
}
},
{
"id": "scatter1",
"type": "scatter",
"position": { "x": 639, "y": 871 },
"data": {
"label": "Outline Scatter 1",
"method": "outline",
"distribution": "count",
"count": 40
}
},
{
"id": "copyToPoints1",
"type": "copyToPoints",
"position": { "x": 847, "y": 982 },
"data": { "label": "Instance Dots 1", "alignToNormal": true }
},
{
"id": "merge2",
"type": "merge",
"position": { "x": 494, "y": 1072 },
"data": { "label": "Merge 2", "inputOrder": ["copyToPoints1", "star2"] }
}
],
"edges": [
{ "id": "e1", "source": "star2", "target": "scatter1" },
{ "id": "e2", "source": "ellipse2", "target": "copyToPoints1", "targetHandle": "target" },
{ "id": "e3", "source": "scatter1", "target": "copyToPoints1", "targetHandle": "secondaryTarget" },
{ "id": "e4", "source": "star2", "target": "merge2" },
{ "id": "e5", "source": "copyToPoints1", "target": "merge2" }
],
"renderTargetId": "merge2"
}2. Animation payload
Includes an animations object mapped to node parameters, along with basic timeline configuration. It will auto-play a rotation loop.
Copy this block and press Ctrl+V in Nodegraph:
{
"nodes": [
{
"id": "rect1",
"type": "rectangle",
"position": { "x": 100, "y": 100 },
"data": {
"label": "Spinning Box",
"width": 100,
"height": 100,
"layers": [{ "id": "f1", "type": "fill", "color": "#3b82f6", "visible": true, "opacity": 1 }]
},
"animations": {
"rotation": {
"keys": [
{ "frame": 0, "value": 0, "type": "linear" },
{ "frame": 60, "value": 360, "type": "linear" }
]
}
}
}
],
"edges": [],
"renderTargetId": "rect1",
"animation": { "fps": 24, "start": 0, "end": 60, "exposure": 1, "clips": [] }
}{
"nodes": [
{
"id": "rect1",
"type": "rectangle",
"position": { "x": 100, "y": 100 },
"data": {
"label": "Spinning Box",
"width": 100,
"height": 100,
"layers": [{ "id": "f1", "type": "fill", "color": "#3b82f6", "visible": true, "opacity": 1 }]
},
"animations": {
"rotation": {
"keys": [
{ "frame": 0, "value": 0, "type": "linear" },
{ "frame": 60, "value": 360, "type": "linear" }
]
}
}
}
],
"edges": [],
"renderTargetId": "rect1",
"animation": { "fps": 24, "start": 0, "end": 60, "exposure": 1, "clips": [] }
}3. State Machine payload
Defines a fully interactive component to react to native interactions like hover, triggering transitions between animation clips.
Copy this block and press Ctrl+V in Nodegraph:
{
"nodes": [
{
"id": "rect1",
"type": "rectangle",
"position": { "x": 300, "y": 100 },
"data": {
"label": "Hover Button",
"width": 150,
"height": 50,
"layers": [{ "id": "f1", "type": "fill", "color": "#8b5cf6", "visible": true, "opacity": 1 }]
},
"animations": {
"scale": {
"keys": [
{ "frame": 0, "value": 1, "type": "linear" },
{ "frame": 1, "value": 1, "type": "bezier", "outHandle": { "x": 5, "y": 0 } },
{ "frame": 11, "value": 1.2, "type": "bezier", "inHandle": { "x": -5, "y": 0 }, "outHandle": { "x": 5, "y": 0 } },
{ "frame": 21, "value": 1, "type": "bezier", "inHandle": { "x": -5, "y": 0 } }
]
}
}
}
],
"edges": [],
"renderTargetId": "rect1",
"animation": {
"fps": 24, "start": 0, "end": 60, "exposure": 1,
"clips": [
{ "id": "clip-idle", "name": "Idle", "start": 0, "end": 1, "color": "#888888" },
{ "id": "clip-hover-in", "name": "Hover In", "start": 1, "end": 11, "color": "#22c55e" },
{ "id": "clip-hover-out", "name": "Hover Out", "start": 11, "end": 21, "color": "#ef4444" }
]
},
"stateMachine": {
"variables": [
{ "id": "var-hover", "name": "hover", "type": "string", "value": "", "active": false }
],
"nodes": [
{ "id": "state-entry", "type": "entry", "x": 100, "y": 0, "label": "Entry" },
{ "id": "state-idle", "type": "state", "x": 100, "y": 150, "label": "Idle", "clipId": "clip-idle" },
{ "id": "state-hover-in", "type": "state", "x": 100, "y": 300, "label": "Hover In", "clipId": "clip-hover-in", "loop": false },
{ "id": "state-hover-out", "type": "state", "x": 100, "y": 450, "label": "Hover Out", "clipId": "clip-hover-out", "loop": false }
],
"edges": [
{ "id": "edge1", "source": "state-entry", "target": "state-idle" },
{
"id": "edge2",
"source": "state-idle",
"target": "state-hover-in",
"conditions": [
{ "id": "cond1", "variableId": "var-hover", "operator": "==", "compareValue": "rect1" }
]
},
{
"id": "edge3",
"source": "state-hover-in",
"target": "state-hover-out",
"conditions": [
{ "id": "cond2", "variableId": "var-hover", "operator": "!=", "compareValue": "rect1" }
]
},
{
"id": "edge4",
"source": "state-hover-out",
"target": "state-idle",
"hasExitTime": true
},
{
"id": "edge5",
"source": "state-hover-out",
"target": "state-hover-in",
"conditions": [
{ "id": "cond3", "variableId": "var-hover", "operator": "==", "compareValue": "rect1" }
]
}
]
}
}{
"nodes": [
{
"id": "rect1",
"type": "rectangle",
"position": { "x": 300, "y": 100 },
"data": {
"label": "Hover Button",
"width": 150,
"height": 50,
"layers": [{ "id": "f1", "type": "fill", "color": "#8b5cf6", "visible": true, "opacity": 1 }]
},
"animations": {
"scale": {
"keys": [
{ "frame": 0, "value": 1, "type": "linear" },
{ "frame": 1, "value": 1, "type": "bezier", "outHandle": { "x": 5, "y": 0 } },
{ "frame": 11, "value": 1.2, "type": "bezier", "inHandle": { "x": -5, "y": 0 }, "outHandle": { "x": 5, "y": 0 } },
{ "frame": 21, "value": 1, "type": "bezier", "inHandle": { "x": -5, "y": 0 } }
]
}
}
}
],
"edges": [],
"renderTargetId": "rect1",
"animation": {
"fps": 24, "start": 0, "end": 60, "exposure": 1,
"clips": [
{ "id": "clip-idle", "name": "Idle", "start": 0, "end": 1, "color": "#888888" },
{ "id": "clip-hover-in", "name": "Hover In", "start": 1, "end": 11, "color": "#22c55e" },
{ "id": "clip-hover-out", "name": "Hover Out", "start": 11, "end": 21, "color": "#ef4444" }
]
},
"stateMachine": {
"variables": [
{ "id": "var-hover", "name": "hover", "type": "string", "value": "", "active": false }
],
"nodes": [
{ "id": "state-entry", "type": "entry", "x": 100, "y": 0, "label": "Entry" },
{ "id": "state-idle", "type": "state", "x": 100, "y": 150, "label": "Idle", "clipId": "clip-idle" },
{ "id": "state-hover-in", "type": "state", "x": 100, "y": 300, "label": "Hover In", "clipId": "clip-hover-in", "loop": false },
{ "id": "state-hover-out", "type": "state", "x": 100, "y": 450, "label": "Hover Out", "clipId": "clip-hover-out", "loop": false }
],
"edges": [
{ "id": "edge1", "source": "state-entry", "target": "state-idle" },
{
"id": "edge2",
"source": "state-idle",
"target": "state-hover-in",
"conditions": [
{ "id": "cond1", "variableId": "var-hover", "operator": "==", "compareValue": "rect1" }
]
},
{
"id": "edge3",
"source": "state-hover-in",
"target": "state-hover-out",
"conditions": [
{ "id": "cond2", "variableId": "var-hover", "operator": "!=", "compareValue": "rect1" }
]
},
{
"id": "edge4",
"source": "state-hover-out",
"target": "state-idle",
"hasExitTime": true
},
{
"id": "edge5",
"source": "state-hover-out",
"target": "state-hover-in",
"conditions": [
{ "id": "cond3", "variableId": "var-hover", "operator": "==", "compareValue": "rect1" }
]
}
]
}
}JSON payload schema
To instruct an AI (LLM) to generate valid nodegraph without structural errors, provide it with the following JSON interface block.
{
"nodes": [
{
"id": "string",
"type": "arrow",
"position": {
"x": "number",
"y": "number"
},
"data": {
"label?": "string",
"position?": {
"x?": "number | string",
"y?": "number | string"
},
"shaftLength?": "number | string",
"shaftWidth?": "number | string",
"headLength?": "number | string",
"headWidth?": "number | string",
"scale?": "number | string",
"rotation?": "number | string",
"blur?": "number | string",
"layers?": [
"any"
]
}
},
{
"id": "string",
"type": "artboard",
"position": {
"x": "number",
"y": "number"
},
"data": {
"label?": "string",
"position?": {
"x?": "number | string",
"y?": "number | string"
},
"size?": {
"width?": "number | string",
"height?": "number | string",
"proportional?": "boolean"
},
"scaleContent?": "boolean",
"referenceSize?": {
"width?": "number | string",
"height?": "number | string",
"proportional?": "boolean"
},
"backgroundVisible?": "boolean",
"backgroundType?": "any",
"backgroundColor?": "string",
"gradientStops?": [
{
"color": "string",
"offset": "number"
}
],
"gradientStart?": {
"x?": "number | string",
"y?": "number | string"
},
"gradientEnd?": {
"x?": "number | string",
"y?": "number | string"
},
"gradientCenter?": {
"x?": "number | string",
"y?": "number | string"
},
"gradientRadius?": "number | string",
"centerContent?": "boolean",
"resizeToFit?": "boolean",
"padding?": "number | string",
"fitOffset?": {
"x?": "number | string",
"y?": "number | string"
},
"watermarkEnabled?": "boolean",
"watermarkSrc?": "any",
"watermarkPlacement?": "any",
"watermarkOpacity?": "number | string",
"watermarkScale?": "number | string",
"watermarkPadding?": "number | string",
"watermarkFileName?": "string",
"watermarkIsSvg?": "boolean",
"watermarkIsSvgZ?": "boolean",
"watermarkOriginalWidth?": "number",
"watermarkOriginalHeight?": "number"
}
},
{
"id": "string",
"type": "artboardMerge",
"position": {
"x": "number",
"y": "number"
},
"data": {
"label?": "string",
"columns?": "number | string",
"rows?": "number | string",
"paddingX?": "number | string",
"paddingY?": "number | string",
"backgroundColor?": "string",
"backgroundVisible?": "boolean"
}
},
{
"id": "string",
"type": "attributeRandomize",
"position": {
"x": "number",
"y": "number"
},
"data": {
"label?": "string",
"mode?": "any",
"group?": "string",
"attributeName?": "string",
"attributeSettings?": [
{
"name": "string",
"min": "any",
"max": "any",
"colors?": [
"string"
],
"seed": "any",
"probability?": "any",
"distribution?": "continuous | integer | binary | stepped",
"step?": "any",
"outlierPercent?": "any",
"outlierRange?": "any",
"outlierMode?": "additive | multiplicative",
"outlierDirection?": "max | min | both",
"outlierSeed?": "any"
}
],
"operation?": "any",
"distribution?": "any",
"minFloat?": "number | string",
"maxFloat?": "number | string",
"minRotation?": "number | string",
"maxRotation?": "number | string",
"minColor?": "string",
"maxColor?": "string",
"frequency?": "number | string",
"offset?": {
"x?": "number | string",
"y?": "number | string"
},
"seed?": "number | string"
}
},
{
"id": "string",
"type": "bend",
"position": {
"x": "number",
"y": "number"
},
"data": {
"label?": "string",
"group?": "string",
"composition?": "any",
"mode?": "any",
"bendAngle?": "number | string",
"captureOrigin?": {
"x?": "number | string",
"y?": "number | string"
},
"captureDirection?": "number | string",
"captureLength?": "number | string",
"deformInBothDirections?": "boolean",
"preservePoints?": "boolean",
"resampleLength?": "number | string"
}
},
{
"id": "string",
"type": "bevel",
"position": {
"x": "number",
"y": "number"
},
"data": {
"label?": "string",
"group?": "string",
"mode?": "any",
"amount?": "number | string"
}
},
{
"id": "string",
"type": "blend",
"position": {
"x": "number",
"y": "number"
},
"data": {
"label?": "string",
"mode?": "any",
"opacity?": "number | string",
"swapInputs?": "boolean",
"groupBlur?": "number | string",
"enableThreshold?": "boolean",
"alphaThreshold?": "number | string"
}
},
{
"id": "string",
"type": "blur",
"position": {
"x": "number",
"y": "number"
},
"data": {
"label?": "string",
"group?": "string",
"applyTo?": "any",
"type?": "any",
"blurAmount?": "number | string",
"angle?": "number | string",
"start?": {
"x?": "number | string",
"y?": "number | string"
},
"end?": {
"x?": "number | string",
"y?": "number | string"
}
}
},
{
"id": "string",
"type": "boolean",
"position": {
"x": "number",
"y": "number"
},
"data": {
"label?": "string",
"operation?": "any",
"outputGroups?": {
"createSeamGroups?": "boolean",
"abSeamGroupName?": "string",
"baSeamGroupName?": "string"
}
}
},
{
"id": "string",
"type": "bounds",
"position": {
"x": "number",
"y": "number"
},
"data": {
"label?": "string",
"group?": "string",
"mode?": "any",
"boundsType?": "any",
"padding?": "number | string",
"keepHoles?": "boolean"
}
},
{
"id": "string",
"type": "centralLine",
"position": {
"x": "number",
"y": "number"
},
"data": {
"label?": "string",
"group?": "string",
"resampleLength?": "number | string",
"pruningThreshold?": "number | string",
"smoothness?": "number | string",
"outputRadius?": "boolean"
}
},
{
"id": "string",
"type": "clip",
"position": {
"x": "number",
"y": "number"
},
"data": {
"label?": "string",
"group?": "string",
"keep?": "any",
"origin?": {
"x?": "number | string",
"y?": "number | string"
},
"direction?": "number | string",
"distance?": "number | string",
"resample?": "number | string",
"createSeamGroup?": "boolean",
"seamGroupName?": "string"
}
},
{
"id": "string",
"type": "color",
"position": {
"x": "number",
"y": "number"
},
"data": {
"label?": "string",
"group?": "string",
"colorMode?": "any",
"reverseRange?": "boolean",
"applyFill?": "boolean",
"fillColor?": "string",
"fillColorStops?": [
{
"color": "string",
"offset": "number"
}
],
"applyStroke?": "boolean",
"strokeColor?": "string",
"strokeColorStops?": [
{
"color": "string",
"offset": "number"
}
],
"blendMode?": "any"
}
},
{
"id": "string",
"type": "controller",
"position": {
"x": "number",
"y": "number"
},
"data": {
"label?": "string",
"_controls?": [
{
"key": "string",
"label": "string",
"type": "number | color | boolean | text | dropdown | attrRange | folder | ramp",
"min?": "number",
"max?": "number",
"step?": "number",
"defaultValue?": "any",
"options?": [
{
"label": "string",
"value": "any"
}
],
"controls?": "any",
"collapsed?": "boolean"
}
]
}
},
{
"id": "string",
"type": "copyAndTransform",
"position": {
"x": "number",
"y": "number"
},
"data": {
"label?": "string",
"outputMode?": "any",
"distribution?": "any",
"totalNumber?": "number | string",
"columns?": "number | string",
"translate?": {
"x?": "number | string",
"y?": "number | string"
},
"rowTranslate?": {
"x?": "number | string",
"y?": "number | string"
},
"radius?": "number | string",
"startAngle?": "number | string",
"totalAngle?": "number | string",
"alignRotation?": "boolean",
"rotate?": "number | string",
"scale?": {
"x?": "number | string",
"y?": "number | string"
},
"uniformScale?": "number | [object Object]",
"pivot?": {
"x?": "number | string",
"y?": "number | string"
},
"accumulateScale?": "boolean"
}
},
{
"id": "string",
"type": "copyToPoints",
"position": {
"x": "number",
"y": "number"
},
"data": {
"label?": "string",
"group?": "string",
"mode?": "any",
"seed?": "number | string",
"transformUsingPointAttributes?": "boolean",
"attributeTargets?": [
{
"label": "string",
"params": "string"
}
],
"outputMode?": "any"
}
},
{
"id": "string",
"type": "delete",
"position": {
"x": "number",
"y": "number"
},
"data": {
"label?": "string",
"group?": "string",
"groupType?": "any",
"invert?": "boolean",
"heal?": "boolean"
}
},
{
"id": "string",
"type": "donut",
"position": {
"x": "number",
"y": "number"
},
"data": {
"label?": "string",
"position?": {
"x?": "number | string",
"y?": "number | string"
},
"outerRadius?": "number | string",
"innerRadius?": "number | string",
"scale?": "number | string",
"rotation?": "number | string",
"blur?": "number | string",
"layers?": [
"any"
]
}
},
{
"id": "string",
"type": "ellipse",
"position": {
"x": "number",
"y": "number"
},
"data": {
"label?": "string",
"position?": {
"x?": "number | string",
"y?": "number | string"
},
"radiusX?": "number | string",
"radiusY?": "number | string",
"scale?": "number | string",
"rotation?": "number | string",
"blur?": "number | string",
"layers?": [
"any"
]
}
},
{
"id": "string",
"type": "export",
"position": {
"x": "number",
"y": "number"
},
"data": {
"label?": "string",
"fileName?": "string",
"_hasAnimation?": "boolean",
"format?": "any",
"formatAnimated?": "any",
"quality?": "number | string",
"withWatermark?": "boolean",
"limitResolution?": "boolean",
"paramError?": "string"
}
},
{
"id": "string",
"type": "extractCenter",
"position": {
"x": "number",
"y": "number"
},
"data": {
"label?": "string",
"group?": "string",
"placement?": "any",
"offset?": {
"x?": "number | string",
"y?": "number | string"
}
}
},
{
"id": "string",
"type": "extrude",
"position": {
"x": "number",
"y": "number"
},
"data": {
"label?": "string",
"group?": "string",
"preset?": "any",
"depth?": "number | string",
"rotateX?": "number | string",
"rotateY?": "number | string",
"rotateZ?": "number | string",
"perspective?": "number | string",
"fidelity?": "number | string",
"lightAzimuth?": "number | string",
"lightElevation?": "number | string",
"outputGroups?": {
"createFaceGroups?": "boolean",
"frontGroupName?": "string",
"backGroupName?": "string",
"sideGroupName?": "string",
"topGroupName?": "string",
"bottomGroupName?": "string",
"leftGroupName?": "string",
"rightGroupName?": "string"
}
}
},
{
"id": "string",
"type": "freeformGradient",
"position": {
"x": "number",
"y": "number"
},
"data": {
"label?": "string",
"group?": "string",
"targetLayer?": "any",
"baseColor?": "string",
"gradientPoints?": [
{
"x": "number",
"y": "number",
"color": "string",
"radius?": "number"
}
],
"smoothing?": "number | string",
"blendMode?": "any"
}
},
{
"id": "string",
"type": "fuse",
"position": {
"x": "number",
"y": "number"
},
"data": {
"label?": "string",
"group?": "string",
"mode?": "any",
"target?": "any",
"distance?": "number | string",
"removeInternalEdges?": "boolean"
}
},
{
"id": "string",
"type": "group",
"position": {
"x": "number",
"y": "number"
},
"data": {
"label?": "string",
"groupName?": "string",
"baseGroup?": "string",
"mergeOp?": "any",
"group?": "any"
}
},
{
"id": "string",
"type": "groupExpand",
"position": {
"x": "number",
"y": "number"
},
"data": {
"label?": "string",
"group?": "string",
"replaceOriginal?": "boolean",
"groupName?": "string",
"type?": "any",
"steps?": "number | string"
}
},
{
"id": "string",
"type": "groupInvert",
"position": {
"x": "number",
"y": "number"
},
"data": {
"label?": "string",
"group?": "string",
"replaceOriginal?": "boolean",
"groupName?": "string",
"selectMode?": "any"
}
},
{
"id": "string",
"type": "hatch",
"position": {
"x": "number",
"y": "number"
},
"data": {
"label?": "string",
"group?": "string",
"outputMode?": "any",
"hatchType?": "any",
"angle?": "number | string",
"spacingMode?": "any",
"spacing?": "number | string",
"maxSpacing?": "number | string",
"gradientStart?": {
"x?": "number | string",
"y?": "number | string"
},
"gradientEnd?": {
"x?": "number | string",
"y?": "number | string"
},
"dashLength?": "number | string",
"offset?": "number | string",
"thickness?": "number | string",
"color?": "string",
"useShapeColor?": "boolean",
"keepOriginal?": "boolean",
"angleJitter?": "number | string",
"spacingJitter?": "number | string",
"dashLengthJitter?": "number | string",
"waviness?": "number | string",
"waveFrequency?": "number | string",
"resample?": "number | string",
"seed?": "number | string"
}
},
{
"id": "string",
"type": "import",
"position": {
"x": "number",
"y": "number"
},
"data": {
"label?": "string",
"sourceFile?": "any",
"sourceUrl?": "string",
"position?": {
"x?": "number | string",
"y?": "number | string"
},
"size?": {
"width?": "number | string",
"height?": "number | string"
},
"sizeLinked?": "boolean",
"scale?": {
"x?": "number | string",
"y?": "number | string"
},
"rotation?": "number | string",
"opacity?": "number | string",
"blur?": "number | string",
"fileName?": "string",
"isSvg?": "boolean",
"originalWidth?": "number",
"originalHeight?": "number"
}
},
{
"id": "string",
"type": "interpolate",
"position": {
"x": "number",
"y": "number"
},
"data": {
"label?": "string",
"inputOrder?": [
"string"
],
"steps?": "number | string",
"easing?": "any",
"includeEnds?": "boolean"
}
},
{
"id": "string",
"type": "light",
"position": {
"x": "number",
"y": "number"
},
"data": {
"label?": "string",
"group?": "string",
"pattern?": "string",
"lightType?": "any",
"applyTo?": "any",
"shadowOnly?": "boolean",
"shadowOffset?": {
"x?": "number | string",
"y?": "number | string"
},
"shadowBlur?": "number | string",
"shadowColor?": "string",
"shadowOpacity?": "number | string",
"preset?": "any",
"projectionAngle?": "number | string",
"projectionScale?": "number | string",
"projectionAxisAngle?": "number | string",
"shadowPivotOffset?": {
"x?": "number | string",
"y?": "number | string"
},
"lightColor?": "string",
"intensity?": "number | string",
"softness?": "number | string",
"surfaceScale?": "number | string",
"enableSpecular?": "boolean",
"specularExponent?": "number | string",
"specularConstant?": "number | string",
"azimuth?": "number | string",
"elevation?": "number | string",
"position?": {
"x?": "number | string",
"y?": "number | string",
"z?": "number | string"
},
"blendMode?": "any"
}
},
{
"id": "string",
"type": "linearGradient",
"position": {
"x": "number",
"y": "number"
},
"data": {
"label?": "string",
"group?": "string",
"applyTo?": "any",
"targetLayer?": "any",
"start?": {
"x?": "number | string",
"y?": "number | string"
},
"end?": {
"x?": "number | string",
"y?": "number | string"
},
"halftone?": "boolean",
"halftoneSize?": "number | string",
"invertHalftone?": "boolean",
"stops?": [
{
"color": "string",
"offset": "number"
}
],
"blendMode?": "any"
}
},
{
"id": "string",
"type": "mask",
"position": {
"x": "number",
"y": "number"
},
"data": {
"label?": "string",
"mode?": "any",
"opacity?": "number | string",
"swapInputs?": "boolean",
"invertMask?": "boolean",
"bake?": "boolean",
"hardEdge?": "boolean",
"offset?": "number | string"
}
},
{
"id": "string",
"type": "matchSize",
"position": {
"x": "number",
"y": "number"
},
"data": {
"label?": "string",
"group?": "string",
"alignment?": "any",
"offset?": {
"x?": "number | string",
"y?": "number | string"
},
"scaleToFit?": "boolean",
"uniformScale?": "boolean"
}
},
{
"id": "string",
"type": "merge",
"position": {
"x": "number",
"y": "number"
},
"data": {
"label?": "string",
"inputOrder?": [
"string"
]
}
},
{
"id": "string",
"type": "metadata",
"position": {
"x": "number",
"y": "number"
},
"data": {
"title?": "string",
"description?": "string",
"author?": "string",
"license?": "string",
"version?": "string",
"link?": "string",
"customFields?": [
{
"key": "string",
"value": "string"
}
]
}
},
{
"id": "string",
"type": "mirror",
"position": {
"x": "number",
"y": "number"
},
"data": {
"label?": "string",
"direction?": "any",
"axisOffset?": "number | string",
"mirrorOnly?": "boolean",
"weld?": "boolean"
}
},
{
"id": "string",
"type": "morph",
"position": {
"x": "number",
"y": "number"
},
"data": {
"label?": "string",
"amount?": "number | string",
"density?": "number | string"
}
},
{
"id": "string",
"type": "noise",
"position": {
"x": "number",
"y": "number"
},
"data": {
"label?": "string",
"group?": "string",
"resample?": "number | string",
"noiseType?": "any",
"amplitude?": "number | string",
"frequency?": "number | string",
"offset?": {
"x?": "number | string",
"y?": "number | string"
}
}
},
{
"id": "string",
"type": "null",
"position": {
"x": "number",
"y": "number"
},
"data": {
"label?": "string"
}
},
{
"id": "string",
"type": "packShapes",
"position": {
"x": "number",
"y": "number"
},
"data": {
"label?": "string",
"iterations?": "number | string",
"rotationStep?": "number | string",
"spacing?": "number | string",
"invertMask?": "boolean"
}
},
{
"id": "string",
"type": "parentConstraint",
"position": {
"x": "number",
"y": "number"
},
"data": {
"label?": "string",
"translate?": "boolean",
"maintainOffset?": "boolean",
"offsetPos?": {
"x?": "number | string",
"y?": "number | string"
},
"rotate?": "boolean",
"offsetRot?": "number | string",
"scale?": "boolean",
"offsetScale?": {
"x?": "number | string",
"y?": "number | string"
}
}
},
{
"id": "string",
"type": "path",
"position": {
"x": "number",
"y": "number"
},
"data": {
"label?": "string",
"position?": {
"x?": "number | string",
"y?": "number | string"
},
"scale?": "number | string",
"rotation?": "number | string",
"blur?": "number | string",
"isClosed?": "boolean",
"points?": [
{
"x": "number",
"y": "number",
"h1x": "number",
"h1y": "number",
"h2x": "number",
"h2y": "number",
"handleType?": "mirrored | aligned | asymmetric",
"join?": "miter | round | bevel",
"break?": "boolean"
}
],
"selectedPointIds?": [
"string"
],
"d?": "string",
"layers?": [
"any"
],
"markers?": [
{
"position?": "start | mid | end",
"shape?": "arrow | circle | rect",
"size?": "number",
"color?": "string"
}
]
}
},
{
"id": "string",
"type": "pattern",
"position": {
"x": "number",
"y": "number"
},
"data": {
"label?": "string",
"layout?": "any",
"spacing?": "number | string",
"stagger?": "number | string",
"rowOffset?": "number | string",
"colOffset?": "number | string",
"waveAmplitude?": "number | string",
"waveFrequency?": "number | string",
"rings?": "number | string",
"rotation?": "number | string",
"jitterPos?": "number | string",
"jitterRot?": "number | string",
"jitterScale?": "number | string",
"nthStep?": "number | string",
"nthOffset?": "number | string",
"nthRotation?": "number | string",
"nthScale?": "number | string",
"nthTranslateX?": "number | string",
"nthTranslateY?": "number | string",
"seed?": "number | string",
"outputMode?": "any"
}
},
{
"id": "string",
"type": "pencil",
"position": {
"x": "number",
"y": "number"
},
"data": {
"label?": "string",
"points?": [
[
{
"x": "number",
"y": "number",
"pressure?": "number"
}
]
],
"size?": "number | string",
"eraseSize?": "number | string",
"thinning?": "number | string",
"smoothing?": "number | string",
"streamline?": "number | string",
"easing?": "any",
"taperStart?": "number | string",
"capStart?": "boolean",
"taperEnd?": "number | string",
"capEnd?": "boolean",
"layers?": [
"any"
]
}
},
{
"id": "string",
"type": "perspective",
"position": {
"x": "number",
"y": "number"
},
"data": {
"label?": "string",
"group?": "string",
"preset?": "any",
"rotateX?": "number | string",
"rotateY?": "number | string",
"rotateZ?": "number | string",
"topLeft?": {
"x?": "number | string",
"y?": "number | string"
},
"topRight?": {
"x?": "number | string",
"y?": "number | string"
},
"bottomRight?": {
"x?": "number | string",
"y?": "number | string"
},
"bottomLeft?": {
"x?": "number | string",
"y?": "number | string"
}
}
},
{
"id": "string",
"type": "pixelate",
"position": {
"x": "number",
"y": "number"
},
"data": {
"label?": "string",
"group?": "string",
"mode?": "any",
"pixelSize?": "number | string",
"gap?": "number | string"
}
},
{
"id": "string",
"type": "polygon",
"position": {
"x": "number",
"y": "number"
},
"data": {
"label?": "string",
"position?": {
"x?": "number | string",
"y?": "number | string"
},
"sides?": "number | string",
"radius?": "number | string",
"scale?": "number | string",
"rotation?": "number | string",
"blur?": "number | string",
"layers?": [
"any"
]
}
},
{
"id": "string",
"type": "portal",
"position": {
"x": "number",
"y": "number"
},
"data": {
"label?": "string",
"targets?": [
{
"targetNodeId": "string",
"group?": "string"
}
]
}
},
{
"id": "string",
"type": "radialGradient",
"position": {
"x": "number",
"y": "number"
},
"data": {
"label?": "string",
"group?": "string",
"applyTo?": "any",
"targetLayer?": "any",
"center?": {
"x?": "number | string",
"y?": "number | string"
},
"radius?": "number | string",
"halftone?": "boolean",
"halftoneSize?": "number | string",
"invertHalftone?": "boolean",
"stops?": [
{
"color": "string",
"offset": "number"
}
],
"blendMode?": "any"
}
},
{
"id": "string",
"type": "rectangle",
"position": {
"x": "number",
"y": "number"
},
"data": {
"label?": "string",
"position?": {
"x?": "number | string",
"y?": "number | string"
},
"width?": "number | string",
"height?": "number | string",
"scale?": "number | string",
"rotation?": "number | string",
"cornerRadius?": {
"tl?": "number | string",
"tr?": "number | string",
"bl?": "number | string",
"br?": "number | string"
},
"cornerRadiusLinked?": "boolean",
"blur?": "number | string",
"layers?": [
"any"
]
}
},
{
"id": "string",
"type": "resample",
"position": {
"x": "number",
"y": "number"
},
"data": {
"label?": "string",
"group?": "string",
"mode?": "any",
"length?": "number | string",
"count?": "number | string",
"useSimplify?": "boolean",
"tolerance?": "number | string"
}
},
{
"id": "string",
"type": "retime",
"position": {
"x": "number",
"y": "number"
},
"data": {
"label?": "string",
"triggerBake?": "any",
"mode?": "any",
"speed?": "number | string",
"offset?": "number | string",
"customFrame?": "number | string",
"outOfBounds?": "any",
"useCustomRange?": "boolean",
"frameRange?": {
"start?": "number | string",
"end?": "number | string"
},
"smooth?": "boolean",
"_isBaking?": "boolean",
"_bakeProgress?": "number",
"_isBaked?": "boolean",
"_bakedUpstreamHash?": "string",
"_isDirty?": "boolean"
}
},
{
"id": "string",
"type": "scatter",
"position": {
"x": "number",
"y": "number"
},
"data": {
"label?": "string",
"method?": "any",
"arrangement?": "any",
"distribution?": "any",
"density?": "number | string",
"count?": "number | string",
"spacing?": "number | string",
"invertMask?": "boolean",
"seed?": "number | string",
"relaxIterations?": "number | string",
"jitter?": "number | string",
"scaleMode?": "any",
"minScale?": "number | string",
"maxScale?": "number | string",
"outlierPercent?": "number | string",
"outlierRange?": "number | string",
"outlierMode?": "any",
"outlierDirection?": "any",
"outlierSeed?": "number | string",
"gradientStart?": {
"x?": "number | string",
"y?": "number | string"
},
"gradientEnd?": {
"x?": "number | string",
"y?": "number | string"
},
"noiseFrequency?": "number | string",
"noiseOffset?": {
"x?": "number | string",
"y?": "number | string"
},
"alignToNormal?": "boolean",
"minRotation?": "number | string",
"maxRotation?": "number | string",
"blendVector?": {
"x?": "number | string",
"y?": "number | string"
},
"blendAmount?": "number | string",
"transferAttributes?": "string"
}
},
{
"id": "string",
"type": "separateShapes",
"position": {
"x": "number",
"y": "number"
},
"data": {
"label?": "string",
"group?": "string"
}
},
{
"id": "string",
"type": "shapeAlongPath",
"position": {
"x": "number",
"y": "number"
},
"data": {
"label?": "string",
"mode?": "any",
"composition?": "any",
"itemOrder?": "any",
"seed?": "number | string",
"deform?": "boolean",
"count?": "number | string",
"spacing?": "number | string",
"offset?": "number | string",
"normalOffset?": "number | string",
"alignY?": "any",
"scale?": "number | string",
"reverse?": "boolean"
}
},
{
"id": "string",
"type": "shapeMixer",
"position": {
"x": "number",
"y": "number"
},
"data": {
"label?": "string",
"mode?": "any",
"pieces?": [
{
"originalId": "string",
"name": "string",
"weight": "number"
}
],
"seed?": "number | string"
}
},
{
"id": "string",
"type": "smooth",
"position": {
"x": "number",
"y": "number"
},
"data": {
"label?": "string",
"group?": "string",
"iterations?": "number | string",
"strength?": "number | string"
}
},
{
"id": "string",
"type": "snippet",
"position": {
"x": "number",
"y": "number"
},
"data": {
"label?": "string",
"code?": "string",
"_controls?": [
{
"key": "string",
"label": "string",
"type": "number | color | boolean | text | dropdown | attrRange | folder | ramp",
"min?": "number",
"max?": "number",
"step?": "number",
"defaultValue?": "any",
"options?": [
{
"label": "string",
"value": "any"
}
],
"controls?": "any",
"collapsed?": "boolean"
}
]
}
},
{
"id": "string",
"type": "spiral",
"position": {
"x": "number",
"y": "number"
},
"data": {
"label?": "string",
"spiralType?": "any",
"position?": {
"x?": "number | string",
"y?": "number | string"
},
"startRadius?": "number | string",
"endRadius?": "number | string",
"arms?": "number | string",
"height?": "number | string",
"perspectiveTilt?": "number | string",
"revolutions?": "number | string",
"points?": "number | string",
"divergence?": "number | string",
"scale?": "number | string",
"rotation?": "number | string",
"blur?": "number | string",
"layers?": [
"any"
]
}
},
{
"id": "string",
"type": "split",
"position": {
"x": "number",
"y": "number"
},
"data": {
"label?": "string",
"group?": "string",
"groupType?": "any",
"invert?": "boolean",
"discardGeometry?": "boolean",
"deleteUnusedGroups?": "boolean"
}
},
{
"id": "string",
"type": "star",
"position": {
"x": "number",
"y": "number"
},
"data": {
"label?": "string",
"position?": {
"x?": "number | string",
"y?": "number | string"
},
"points?": "number | string",
"outerRadius?": "number | string",
"innerRadius?": "number | string",
"scale?": "number | string",
"rotation?": "number | string",
"blur?": "number | string",
"layers?": [
"any"
]
}
},
{
"id": "string",
"type": "subnet",
"position": {
"x": "number",
"y": "number"
},
"data": {
"label?": "string",
"nodes?": [
"any"
],
"edges?": [
"any"
],
"renderTargetId?": "string",
"previewNodeId?": "string"
}
},
{
"id": "string",
"type": "subnetInput",
"position": {
"x": "number",
"y": "number"
},
"data": {
"label?": "string"
}
},
{
"id": "string",
"type": "subnetOutput",
"position": {
"x": "number",
"y": "number"
},
"data": {
"label?": "string"
}
},
{
"id": "string",
"type": "switch",
"position": {
"x": "number",
"y": "number"
},
"data": {
"label?": "string",
"group?": "string",
"combineRule?": "any",
"conditions?": [
"any"
]
}
},
{
"id": "string",
"type": "text",
"position": {
"x": "number",
"y": "number"
},
"data": {
"label?": "string",
"content?": "string",
"align?": "any",
"orientation?": "any",
"position?": {
"x?": "number | string",
"y?": "number | string"
},
"scale?": "number | string",
"rotation?": "number | string",
"blur?": "number | string",
"fontFamily?": "string",
"fontSize?": "number | string",
"fontVariant?": "string",
"obliqueAngle?": "number | string",
"letterSpacing?": "number | string",
"lineHeight?": "number | string",
"layers?": [
"any"
]
}
},
{
"id": "string",
"type": "textPath",
"position": {
"x": "number",
"y": "number"
},
"data": {
"label?": "string",
"startOffset?": "number | string",
"side?": "any"
}
},
{
"id": "string",
"type": "transform",
"position": {
"x": "number",
"y": "number"
},
"data": {
"label?": "string",
"group?": "string",
"position?": {
"x?": "number | string",
"y?": "number | string"
},
"pivotPlacement?": "any",
"pivot?": {
"x?": "number | string",
"y?": "number | string"
},
"scale": "any",
"rotation?": "number | string",
"skew?": {
"x?": "number | string",
"y?": "number | string"
}
}
},
{
"id": "string",
"type": "trapezoid",
"position": {
"x": "number",
"y": "number"
},
"data": {
"label?": "string",
"position?": {
"x?": "number | string",
"y?": "number | string"
},
"topWidth?": "number | string",
"bottomWidth?": "number | string",
"height?": "number | string",
"scale?": "number | string",
"rotation?": "number | string",
"blur?": "number | string",
"layers?": [
"any"
]
}
},
{
"id": "string",
"type": "triangulate",
"position": {
"x": "number",
"y": "number"
},
"data": {
"label?": "string",
"group?": "string",
"mode?": "any",
"resample?": "number | string",
"maxArea?": "number | string",
"autoScatter?": "number | string",
"seed?": "number | string",
"showLines?": "boolean",
"lineColor?": "string",
"lineWidth?": "number | string",
"outputGroups?": {
"steinerGroupName?": "string"
}
}
},
{
"id": "string",
"type": "trimPath",
"position": {
"x": "number",
"y": "number"
},
"data": {
"label?": "string",
"group?": "string",
"start?": "number | string",
"end?": "number | string",
"offset?": "number | string",
"reverse?": "boolean",
"preservePoints?": "boolean",
"mode?": "any"
}
},
{
"id": "string",
"type": "variations",
"position": {
"x": "number",
"y": "number"
},
"data": {
"label?": "string",
"amount?": "number | string",
"seed?": "number | string",
"targets?": [
{
"label": "string",
"param": "string",
"type": "number | color",
"min?": "number",
"max?": "number",
"colors?": [
"string"
]
}
],
"layoutMode?": "any",
"columns?": "number | string",
"padding?": "number | string",
"outputMode?": "any"
}
},
{
"id": "string",
"type": "vectorize",
"position": {
"x": "number",
"y": "number"
},
"data": {
"label?": "string",
"colorMode?": "color | binary",
"hierarchical?": "stacked | cutout",
"mode?": "spline | polygon | pixel",
"filterSpeckle?": "number",
"colorPrecision?": "number",
"gradientStep?": "number",
"cornerThreshold?": "number",
"segmentLength?": "number",
"spliceThreshold?": "number",
"pathPrecision?": "number",
"resample?": "number",
"simplify?": "number",
"smoothness?": "number",
"vectorizeGroups?": [
{
"name?": "string",
"selection": "any",
"simplify?": "number",
"smoothness?": "number",
"resample?": "number"
}
]
}
},
{
"id": "string",
"type": "warp",
"position": {
"x": "number",
"y": "number"
},
"data": {
"paramError?": "string",
"label?": "string",
"group?": "string",
"mode?": "any",
"amount?": {
"x?": "number | string",
"y?": "number | string"
},
"frequency?": "number | string",
"noiseOffset?": {
"x?": "number | string",
"y?": "number | string"
},
"center?": {
"x?": "number | string",
"y?": "number | string"
},
"radial?": "boolean",
"resample?": "number | string",
"targetFace?": "any",
"mapOffset?": {
"x?": "number | string",
"y?": "number | string"
},
"mapScale?": {
"x?": "number | string",
"y?": "number | string"
},
"mapFlipX?": "boolean",
"mapFlipY?": "boolean",
"mapRotation?": "number | string"
}
}
],
"edges": [
{
"id": "string",
"source": "string (node id)",
"target": "string (node id)",
"sourceHandle?": "string",
"targetHandle?": "string"
}
],
"renderTargetId?": "string (node id)"
}