npm install @xyflow/react

import '@xyflow/react/dist/style.css'

import { CanvasRenderer } from '@01.software/sdk/ui/canvas'
import '@xyflow/react/dist/style.css'

function CanvasViewer({ canvas }) {
  return (
    <div style={{ width: '100%', height: 600 }}>
      <CanvasRenderer data={canvas.canvas} />
    </div>
  )
}

import { useCanvas, CanvasRenderer } from '@01.software/sdk/ui/canvas'

function CanvasPage({ slug }) {
  const { data, nodeTypeDefs, edgeTypeDefs, isLoading, error } = useCanvas({
    client,
    slug,
    enabled: true,
  })

  if (isLoading) return <div>Loading...</div>
  if (!data) return null

  return (
    <div style={{ width: '100%', height: 600 }}>
      <CanvasRenderer data={data} nodeTypeDefs={nodeTypeDefs} />
    </div>
  )
}

import {
  CanvasRenderer,
  type DynamicNodeSlotProps,
} from '@01.software/sdk/ui/canvas'

function ProductCard({ id, label, fields, nodeTypeDef }: DynamicNodeSlotProps) {
  return (
    <div className="product-card">
      <h3>{label}</h3>
      {fields.image && <img src={String(fields.image)} alt={label} />}
      <p>{String(fields.price)}</p>
    </div>
  )
}

<CanvasRenderer
  data={canvasData}
  nodeTypeDefs={nodeTypeDefs}
  nodeRenderers={{
    'product-card': ProductCard,
  }}
/>

import { compileTemplate, clearTemplateCache } from '@01.software/sdk/ui/canvas'

// Manually compile a template
const Component = compileTemplate(templateCode, 'my-slug')

// Clear all cached compiled templates
clearTemplateCache()

import { Handle, Position } from '@xyflow/react'
import {
  CanvasRenderer,
  type NodeWrapperSlotProps,
} from '@01.software/sdk/ui/canvas'

function NodeCard({ label, children }: NodeWrapperSlotProps) {
  return (
    <div className="rounded-lg border bg-white p-3 shadow-sm">
      <Handle type="target" position={Position.Top} />
      <div className="text-sm font-semibold">{label}</div>
      {children}
      <Handle type="source" position={Position.Bottom} />
    </div>
  )
}

<CanvasRenderer data={canvas} nodeWrapper={NodeCard} />

import { CanvasRenderer, type FrameNodeSlotProps } from '@01.software/sdk/ui/canvas'

function CustomFrame({
  id,
  label,
  color,
  padding,
  borderStyle,
  opacity,
}: FrameNodeSlotProps) {
  return (
    <div style={{ backgroundColor: color, padding, opacity, borderStyle }}>
      <span>{label}</span>
    </div>
  )
}

<CanvasRenderer data={canvas} frameRenderer={CustomFrame} />

import { useCanvas, CanvasRenderer, getFrameData } from '@01.software/sdk/ui/canvas'
import '@xyflow/react/dist/style.css'

const FRAME_ID = '54ed896d-...'

function FrameViewer({ slug }) {
  const { data, nodeTypeDefs, edgeTypeDefs } = useCanvas({ client, slug })

  const frameData = useMemo(
    () => (data ? getFrameData(data, FRAME_ID) : undefined),
    [data],
  )

  if (!frameData) return null

  return (
    <div style={{ width: '100%', height: 600 }}>
      <CanvasRenderer
        data={frameData.data}
        nodeTypeDefs={nodeTypeDefs}
        edgeTypeDefs={edgeTypeDefs}
        bounds={frameData.fitBounds}
        clampBounds={frameData.clampBounds}
        interactive
        frameRenderer={() => null}
      />
    </div>
  )
}

import { CanvasRenderer, type EdgeSlotProps } from '@01.software/sdk/ui/canvas'

function CustomEdge({ id, source, target, edgeTypeDef, style }: EdgeSlotProps) {
  return (
    <g>
      <line
        x1={0}
        y1={0}
        x2={100}
        y2={100}
        stroke={edgeTypeDef?.color ?? '#888'}
        strokeWidth={edgeTypeDef?.strokeWidth ?? 2}
      />
    </g>
  )
}

<CanvasRenderer
  data={canvas}
  edgeTypeDefs={edgeTypeDefs}
  edgeRenderers={{ 'custom-edge': CustomEdge }}
/>

import { useCanvasData } from '@01.software/sdk/ui/canvas'

function CanvasAnalytics({ canvas, nodeTypeDefs, edgeTypeDefs }) {
  const { nodes, edges, nodeTypeDefsMap, edgeTypeDefsMap } = useCanvasData({
    data: canvas,
    nodeTypeDefs,
    edgeTypeDefs,
  })

  return (
    <div>
      <p>Nodes: {nodes.length}</p>
      <p>Edges: {edges.length}</p>
      <p>Node types: {nodeTypeDefsMap.size}</p>
    </div>
  )
}

interface NodeTypeDef {
  slug: string
  name: string
  color: string
  defaultSize: { width: number; height: number }
  fields: NodeTypeFieldDef[]
  transparentBackground?: boolean
  template?: string | null
  customCSS?: string | null
}

interface NodeTypeFieldDef {
  name: string
  label: string
  fieldType:
    | 'text'
    | 'textarea'
    | 'number'
    | 'url'
    | 'color'
    | 'image'
    | 'select'
    | 'toggle'
  options?: { label: string; value: string }[]
  defaultValue?: string
  required?: boolean
}

interface EdgeTypeDef {
  slug: string
  name: string
  color: string
  strokeWidth: number
  animated: boolean
  lineStyle: string
  markerStart: string
  markerEnd: string
  fields: NodeTypeFieldDef[]
}