Declarative Slides: CSS Flexbox Layout for PowerPoint

SlideForge lets you build PowerPoint slides from a JSON spec using CSS Flexbox layout and composable components — like building a React UI, but the output is an editable .pptx. 24 design system components (Metric, BarList, Table, Steps, Tracker, etc.), Flexbox containers for layout, deterministic rendering in under 1 second. $0.05 per slide.

The problem with AI-generated slides

AI slide generation is powerful but unpredictable. Same brief, different layout. The AI picks fonts, spacing, and component placement every time. For dashboards, status reports, and data-heavy slides where you need exact control over the visual structure, “describe what you want” is the wrong interface.

What you want is: “put a 4-metric KPI grid on top, a bar chart below, 20px gap, use the consulting_blue theme.” Declarative, reproducible, fast.

Spec-based rendering

POST /v1/render/spec accepts a JSON spec that describes the slide structure. The spec uses CSS Flexbox semantics — display, direction, gap, flex — with design system components as leaf nodes.

{
  "spec": {
    "chrome": {
      "title": "Q1 2026 Dashboard",
      "subtitle": "Executive Summary",
      "footer": "Confidential"
    },
    "body": {
      "display": "flex",
      "direction": "column",
      "gap": 20,
      "children": [
        {
          "component": "Metric",
          "flex": 1,
          "params": {
            "metrics": [
              {"value": "$12.4M", "label": "Revenue", "trend": "+18%", "trend_dir": "up"},
              {"value": "847", "label": "New Clients", "trend": "+23%", "trend_dir": "up"},
              {"value": "71%", "label": "Margin", "trend": "-2pp", "trend_dir": "down"},
              {"value": "4.6", "label": "NPS", "trend": "+0.3", "trend_dir": "up"}
            ]
          }
        },
        {
          "display": "flex",
          "direction": "row",
          "gap": 16,
          "flex": 2,
          "children": [
            {
              "component": "BarList",
              "flex": 1,
              "params": {
                "title": "Revenue by Segment",
                "items": [
                  {"name": "Enterprise", "value": 64},
                  {"name": "Mid-Market", "value": 28},
                  {"name": "SMB", "value": 8}
                ]
              }
            },
            {
              "component": "Steps",
              "flex": 1,
              "params": {
                "title": "Q2 Priorities",
                "steps": [
                  {"label": "Launch APAC expansion", "status": "complete"},
                  {"label": "Hire 3 senior AEs", "status": "current"},
                  {"label": "Ship enterprise SSO", "status": "upcoming"}
                ]
              }
            }
          ]
        }
      ]
    },
    "takeaway": "Revenue growth accelerating. Client acquisition strong. Margin compression from APAC launch — expected to normalize Q3."
  },
  "theme_id": "consulting_blue"
}

The render call

curl -X POST https://api.slideforge.dev/v1/render/spec \
  -H "Authorization: Bearer sf_live_YOUR_KEY" \
  -H "Content-Type: application/json" \
  -d @spec.json

# Response (200, synchronous):
# {
#   "job_id": "spec-a1b2c3",
#   "status": "complete",
#   "pptx_url": "https://...",
#   "preview_url": "https://...",
#   "cost_charged": 0.05,
#   "latency_ms": 340
# }

Synchronous 200 response. No polling. Same spec = same output, every time.

Available components

24 components across 6 categories. Names follow Tremor-inspired conventions — if you've built dashboards in React, these names will feel familiar.

Browse the full catalog with parameter schemas at GET /v1/components.

Let the LLM write the spec

Don't want to hand-write JSON? POST /v1/suggest-layout takes a natural language brief and returns a complete spec ready for render/spec. Free — no charge for suggestions.

curl -X POST https://api.slideforge.dev/v1/suggest-layout \
  -H "Authorization: Bearer sf_live_YOUR_KEY" \
  -H "Content-Type: application/json" \
  -d '{"brief": "Q1 dashboard with 4 KPIs on top and a segmented bar chart below"}'

# Returns a full JSON spec — modify it, then POST to /v1/render/spec

This gives you the best of both: AI-assisted spec generation for the initial layout, then deterministic rendering for consistency. Edit the spec, re-render, always get the same result.

When to use specs vs templates vs AI generation

Specs sit between templates and AI generation. More flexible than templates (you compose your own layout), more predictable than AI generation (deterministic output, sub-second rendering).

Get started

Browse the 24 components, read the spec render docs, or sign up for $3 free credit.