SDK · Input

Scene Graph Studio

Load a DeckJson directly, convert from HTML, or start from a built-in template.

SDK Rendering Pipeline
DeckJson
.json file or paste
Scene Graph
slides → elements
element-factory
→ Fabric objects
Canvas
1280 × 720 px
Alternate path: HTML template parseSceneGraphHtml() → DeckJson → above pipeline
DeckJson Input
DeckJson Schema Referencesrc/sdk/core/types.ts
{
  "version": "1.0",               // required
  "title": "My Presentation",     // required
  "theme": {
    "primaryColor": "#a78bfa",
    "backgroundColor": "#0f0c29",
    "headingFont": "Inter",  "bodyFont": "Inter"
  },
  "slides": [                     // required — array of SlideJson
    {
      "id": "slide-1",
      "name": "Cover",
      "elements": [               // AnyElement[]  sorted by zIndex
        { "id": "bg", "type": "background", "zIndex": 0,
          "position": { "x": 0, "y": 0, "width": 1280, "height": 720 },
          "fill": "#0f0c29" },
        { "id": "t1", "type": "text", "zIndex": 1,
          "position": { "x": 80, "y": 280, "width": 900, "height": 120 },
          "content": "Hello World",
          "textStyle": { "fontSize": 72, "fontWeight": 700, "color": "#ffffff" } }
      ]
    }
  ],
  "metadata": { "createdAt": "...", "updatedAt": "..." }
}