Nodes
Everything on the canvas is a node.
Try it
title: "Node hierarchy"
description: "A frame containing shapes — children inherit parent transforms"
nodes:
- type: FRAME, name: "Container", x: 150, y: 150, w: 200, h: 200, fill: "#ECF0F1", cornerRadius: 8
- type: ELLIPSE, name: "Circle", x: 50, y: 50, w: 60, h: 60, fill: "#E74C3C", parent: "Container"
- type: RECT, name: "Square", x: 120, y: 100, w: 50, h: 50, fill: "#3498DB", parent: "Container"
- type: STAR, name: "Star", x: 60, y: 140, w: 50, h: 50, fill: "#F39C12", points: 5, parent: "Container"
tools_visible: [select, vector-edit]
ui_visible: [properties, layers]What is a node
A node is any object in the scene — a rectangle, a circle, a star, a frame, a freeform vector path. Nodes form a tree: children are positioned relative to their parent.
Node types
| Type | Description | Create with |
|---|---|---|
RECT | Rectangle with optional corner radius | Rectangle tool |
ELLIPSE | Ellipse with arc system and 6 geometry modes | Ellipse tool |
STAR | Star with configurable points and inner radius | Star tool |
POLYGON | Regular polygon with adjustable vertex count | Polygon tool |
VECTOR | Freeform vector path drawn with Pen tool | Pen tool |
MIRRORED_VECTOR | Vector with Cn/Dn/bilateral symmetry | Pen tool + symmetry |
FRAME | Clipping container with background fill | Frame tool |
GROUP | Container without clipping | Group selection |
Properties common to all nodes
| Property | Type | Default | Description |
|---|---|---|---|
x | number | 0 | Horizontal position (local space) |
y | number | 0 | Vertical position (local space) |
width | number | 100 | Width |
height | number | 100 | Height |
rotation | angle | 0 | Rotation in degrees |
opacity | ratio | 1 | Opacity (0 = invisible, 1 = fully visible) |
fills | paint[] | [] | Array of fill paints |
strokes | paint[] | [] | Array of stroke paints |
blendMode | blendMode | "normal" | Compositing blend mode |
tags | string[] | [] | User-defined labels |
Node API
Accessing in formulas
Reference any node by name:
Ball.x // read Ball's x positionBall.width // read Ball's widthparent.rotation // read parent's rotationthis.opacity // read this node's opacity
Methods
| Method | Description |
|---|---|
node.destroy() | Remove the node from the scene |
node.is(typeOrTag) | Check type ("RECT") or tag ("brick") |
node.setTags(tags) | Set the node's tags array |
Special references
| Reference | Resolves to |
|---|---|
this | The node that owns the current formula/event |
parent | The parent node in the scene tree |
Tag.name | Array of all nodes with that tag |
Node lifecycle
- Created — added to the scene tree, appears on canvas
- Active — properties can be set, formulas evaluate, events fire
- Destroyed —
node.destroy()called, marked with_destroyedflag - Cleaned up — removed from scene tree, tags unregistered, formulas/events cleared
Destroyed nodes are cleaned up in the play loop's cleanupDestroyed pass. Destruction is deferred — the node still exists for the remainder of the current frame.
The scene tree
Nodes form a tree. The document root contains top-level nodes. Frames and groups contain children.
Document├── Background (RECT)├── Player (FRAME)│ ├── Body (RECT)│ ├── Head (ELLIPSE)│ └── Hat (STAR)├── Platform (RECT)└── Ball (ELLIPSE)
Children inherit parent transforms. Move the Player frame — Body, Head, and Hat move with it. Rotate the frame — children rotate. Scale — children scale.
Coordinate spaces
| Space | Origin | Used by |
|---|---|---|
| Local | Parent's origin | Node properties (x, y) |
| World | Canvas origin (0, 0) | Physics, mouse position |
| Screen | Viewport top-left | Camera, hit testing |
A node's x and y are in local space — relative to its parent. The Mat class transforms between spaces.