01 Software

Canvases

Canvas, node/edge type, and tag collections

Canvases

The canvases feature requires Basic plan or above.

canvases

Stores React Flow-based canvas data. Supports versioning (up to 25 versions, autosave).

FieldTypeDescriptionRequired
titletextTitle
slugtextURL slug (unique within tenant)
descriptiontextareaDescription
canvasjsonReact Flow canvas data (nodes, edges, viewport)
statusselectStatus: draft, published (default: draft)
tagsrelationship[]Tags (canvas-tags, M:N)
metadatajsonCustom metadata

Canvas Structure

{
  nodes: [
    {
      id: 'node-1',
      type: 'dynamic',           // 'dynamic' | 'frame'
      position: { x: 0, y: 0 },
      data: {
        nodeTypeSlug: 'text',    // Node type slug
        label: 'Node Name',
        fields: { body: 'Content' } // Fields defined in node type
      }
    }
  ],
  edges: [
    {
      id: 'edge-1',
      source: 'node-1',
      target: 'node-2',
      edgeTypeSlug: 'default',   // Edge type slug
      fields: {}                 // Fields defined in edge type
    }
  ],
  viewport: { x: 0, y: 0, zoom: 1 }
}

SDK Rendering

To render canvas data, use the SDK's CanvasRenderer component. See CanvasRenderer for details.

canvas-node-types

Defines custom node types for canvases. Managed independently per tenant.

FieldTypeDescriptionRequired
titletextNode type name
slugtextSlug (unique within tenant)
colortextBackground color (hex or named color)
defaultSizegroupDefault size: width (default: 200), height (default: 200)
transparentBackgroundcheckboxTransparent background
fieldsarrayCustom field list

Field Types

Available field types for node fields array (edges support all except image):

TypeDescription
textText
textareaLong text
numberNumber
urlURL
colorColor
imageImage
selectSelect (requires options list)
toggleToggle

Built-in Node Types

SlugColorFields
text#dbeafebody (textarea)
image#fef3c7image (image), alt (text), caption (text)

canvas-edge-types

Defines custom edge types for canvases.

FieldTypeDescriptionRequired
titletextEdge type name
slugtextSlug (unique within tenant)
colortextLine color (hex)
strokeWidthnumberLine width (1-10, default: 2)
animatedcheckboxAnimated (default: true)
lineStyleselectLine style: default, step, smoothstep, bezier
fieldsarrayCustom field list

Built-in Edge Types

SlugWidthAnimatedStyle
default2pxNodefault

canvas-tags

Stores canvas tags.

FieldTypeDescriptionRequired
titletextTag name
slugtextURL slug (auto-generated)
colorcolorBadge color (hex)

All images use the unified images collection. See Image Collections for details.

On this page