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.
Navigation & Quickmarks
Navigating large graphs can be tedious. Quickmarks system allows to save and instantly recall exact viewport position and subnet depth.
- Save a quickmark: press Ctrl + 1-9 to save your current view.
- Recall a quickmark: press corresponding number key 1-9 to instantly snap back to that view.
You can also use standard navigation:
- Pan: MMB drag.
- Zoom: mouse Wheel scroll.
- Fit view: press Shift + F to fit all nodes, or F to fit only selected nodes.
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'.
Node search
Node search menu is your primary tool for adding new nodes to the workspace.
- Access: press CTRL+F anywhere on the nodegraph to open the search menu.
- Filtering: start typing to instantly filter available nodes and your custom group presets.
- Adaptive UI: desktop users get a fast, contextual popup menu, while mobile and tablet users get a touch-friendly drill-down bottom sheet.
Auto wiring
Abuse auto wiring feature as much as possible as it's the fastest way to connect nodes.
- Select a node.
- Click 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 addkey 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.
Auto-layout
If your graph becomes messy and tangled, you can automatically untangle and align nodes into a structured top-to-bottom hierarchy.
- Select the nodes you want to organize (or select nothing to organize the entire graph).
- In the Nodegraph menubar, click Layout → Auto-layout → Vertical.
Subnet navigation
When using Subnet nodes to encapsulate logic, you can seamlessly traverse in and out of them.
- Dive in: double-click a Subnet node.
- Navigate out: use interactive breadcrumbs in top-left corner of the nodegraph to jump back to the parent graph or the root level.
Node list view
When your nodegraph grows large, finding specific nodes or changing render targets can become difficult.
List view solves this by providing a flat, searchable table of all nodes in your graph, including those nested deep inside subnets.
- Access: open via the Nodegraph menubar
View→List view - Navigation: click any row to instantly jump to that node. The graph will automatically dive into the correct subnet, select the node, and pan/zoom to fit it.
- Quick Flags: use the eye and monitor icons on the right side of the list to set the node as a Preview or Render target without needing to locate it visually on the canvas.
Node find bar
For rapid navigation via keyboard, use the Find bar to spotlight specific nodes already present in your scene.
- Use your configured find shortcut (typically Ctrl + F or Cmd + F) to open the Find bar.
- Type part of a node's label or ID.
- Use Arrow Up or Arrow Down to navigate results.
- Press Enter to instantly jump to the selected node.
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"
}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": [] }
}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" }
]
}
]
}
}JSON payload schema
To instruct an AI (LLM) to generate valid nodegraph without structural errors, provide it with the following JSON interface.
{
"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": "attributeCopy",
"position": {
"x": "number",
"y": "number"
},
"data": {
"label?": "string",
"group?": "string",
"attributeClass?": "any",
"attributeName?": "string",
"newName?": "string"
}
},
{
"id": "string",
"type": "attributeCreate",
"position": {
"x": "number",
"y": "number"
},
"data": {
"label?": "string",
"group?": "string",
"attributeClass?": "any",
"attributeName?": "string",
"attributeType?": "any",
"numberValue?": "number | string",
"stringValue?": "string",
"colorValue?": "string",
"booleanValue?": "boolean"
}
},
{
"id": "string",
"type": "attributeDelete",
"position": {
"x": "number",
"y": "number"
},
"data": {
"label?": "string",
"group?": "string",
"attributeClass?": "any",
"attributeName?": "string",
"deleteMode?": "any"
}
},
{
"id": "string",
"type": "attributePromote",
"position": {
"x": "number",
"y": "number"
},
"data": {
"label?": "string",
"group?": "string",
"originalClass?": "any",
"newClass?": "any",
"originalName?": "string",
"newName?": "string",
"promotionMethod?": "any",
"deleteOriginal?": "boolean"
}
},
{
"id": "string",
"type": "attributeRandomize",
"position": {
"x": "number",
"y": "number"
},
"data": {
"label?": "string",
"mode?": "any",
"targetParam?": "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": "attributeRemap",
"position": {
"x": "number",
"y": "number"
},
"data": {
"label?": "string",
"group?": "string",
"attributeClass?": "any",
"attributeName?": "string",
"newName?": "string",
"deleteOriginal?": "boolean",
"inputMin?": "number | string",
"inputMax?": "number | string",
"useCurve?": "boolean",
"outputMin?": "number | string",
"outputMax?": "number | string",
"ramp?": "number | [object Object]"
}
},
{
"id": "string",
"type": "attributeRename",
"position": {
"x": "number",
"y": "number"
},
"data": {
"label?": "string",
"group?": "string",
"attributeClass?": "any",
"oldName?": "string",
"newName?": "string",
"deleteOriginal?": "boolean"
}
},
{
"id": "string",
"type": "attributeTransfer",
"position": {
"x": "number",
"y": "number"
},
"data": {
"label?": "string",
"group?": "string",
"attributeClass?": "any",
"attributeName?": "string",
"distanceThreshold?": "number | string",
"blendWidth?": "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": "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",
"rangeMode?": "any",
"rangeDriver?": "number | string",
"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": "falloff",
"position": {
"x": "number",
"y": "number"
},
"data": {
"label?": "string",
"position?": {
"x?": "number | string",
"y?": "number | string"
},
"shape?": "any",
"innerRadius?": "number | string",
"outerRadius?": "number | string",
"angle?": "number | string",
"attributeName?": "string",
"ramp?": "number | [object Object]"
}
},
{
"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": "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",
"isCsv?": "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": "line",
"position": {
"x": "number",
"y": "number"
},
"data": {
"label?": "string",
"position?": {
"x?": "number | string",
"y?": "number | string"
},
"length?": "number | string",
"points?": "number | string",
"scale?": "number | string",
"rotation?": "number | string",
"blur?": "number | string",
"layers?": [
"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"
},
"interpolation?": "any",
"colorSpace?": "any",
"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",
"operateOn?": "any",
"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",
"interpolation?": "any",
"colorSpace?": "any",
"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"
},
"applyTo?": "any"
}
},
{
"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": {
"label?": "string",
"group?": "string",
"mode?": "any",
"operateOn?": "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"
}
},
{
"id": "string",
"type": "wrap",
"position": {
"x": "number",
"y": "number"
},
"data": {
"paramError?": "string",
"label?": "string",
"group?": "string",
"targetFace?": "any",
"mapOffset?": {
"x?": "number | string",
"y?": "number | string"
},
"mapScale?": {
"x?": "number | string",
"y?": "number | string"
},
"mapFlipX?": "boolean",
"mapFlipY?": "boolean",
"mapRotation?": "number | string",
"resample?": "number | string",
"hideTarget?": "boolean"
}
}
],
"edges": [
{
"id": "string",
"source": "string (node id)",
"target": "string (node id)",
"sourceHandle?": "string",
"targetHandle?": "string"
}
],
"renderTargetId?": "string (node id)"
}