Nodes & Attributes
Learn how to declare and style the various visual elements in Spayse.
Declaration Syntax
All nodes follow a consistent declaration pattern. A label in double quotes declares the element — the ID is auto-derived from the label. Inline attributes go inside square brackets [ ]:
"Label" [attributeKey: value, ...]
The 8 Node Types
1. Shape (default)
Every quoted label defaults to a standard geometric shape. Use the [db], [process], [dec] (diamond), [term] (terminal), [data] (parallelogram), or [doc] shorthands inside [ ] to pick a variant.
123"Customer Records" [db, color: blue]"Process Order" [process, color: green]"Valid?" [dec, color: purple]2. Text (`text`)
Renders plain text or paragraphs. Takes an ID and a content string, with optional styling attributes.
1text "title-1" "System Architecture v2" [color: blue]3. Image (`image`)
Renders external images. Specify a URL and optional sizing attributes.
1image "logo" "https://spayse.app/logo.png" [color: blue]4. Equation (`equation`)
Renders native LaTeX mathematical equations. Takes an ID and a LaTeX string.
1equation "loss" "\\mathcal{L} = \\sum_{i=1}^N (y_i - \\hat{y}_i)^2" [color: red]5. Code (`code`)
Renders syntax-highlighted code blocks on the canvas. Specify an ID, a language tag, and the code body inside curly braces.
12345code "handler" "lang=typescript" { async function handleRequest(req: Request) { return process(req); }}6. Icon (`icon`)
Renders an icon from the built-in library. Use the [icon: name] attribute on any quoted label, or declare with the explicit icon keyword. Spayscript supports the entire Lucide Icon library — any Lucide icon name in kebab-case.
1"Globe Icon" [icon: globe, color: green]7. Callout (`callout`)
Renders a callout note card with an arrow pointer. Takes an ID, content text, and optional attributes.
1callout "note" "Important configuration step" [pointerSide: left, color: orange]8. ML Layer (`ml`)
Renders specialized 3D-like blocks representing machine learning layers. Use the [ml: type] attribute on any label, where type is attention, mlp, layernorm, softmax, conv2d, maxpool, dense, flatten, or crossattention.
12"Conv2D Layer" [ml: conv2d, color: purple]"Attention Block" [ml: attention, color: purple]Visual Preview
Common Styling & Sizing Attributes
These attributes can be defined inside the attribute block [ ] of any node type to customize its appearance and layout:
| Attribute | Type | Default | Description |
|---|---|---|---|
| x | number | undefined | Explicit X coordinate. Opts the node out of auto-layout. |
| y | number | undefined | Explicit Y coordinate. Opts the node out of auto-layout. |
| width | number | undefined | Explicit width in pixels. |
| height | number | undefined | Explicit height in pixels. |
| fill | string (Hex/RGBA) | theme default | Background fill color. |
| fillOpacity | number (0.0 to 1.0) | 1.0 | Opacity of the background fill. |
| fillStyle | string | "solid" | Fill pattern style: "solid", "hachure", or "cross-hatch". |
| stroke | string (Hex/RGBA) | theme default | Border stroke color. |
| strokeWidth | number | 1.5 | Border stroke width in pixels. |
| dash | string | "solid" | Border stroke style: "solid", "dashed", "dotted", or "longdash". |
| fontSize | number | 13 | Font size in pixels for labels/text. |
| fontFamily | string | Geist Sans | Font family name. |
| fontWeight | string / number | normal | Font weight: "normal", "medium", "semibold", "bold", or numeric values. |
| color | string (Hex/RGBA) | theme default | Text label color. |
| opacity | number (0.0 to 1.0) | 1.0 | Overall element opacity. |
| locked | boolean | false | If true, locks the node position on the visual canvas. |