Declarative Slides: CSS Flexbox Layout for PowerPoint

#webdev #api #design #tutorial

Build PowerPoint slides from JSON specs using CSS Flexbox layout and 24 composable components. Deterministic rendering in <1s. Like React for slides, but the output is an editable .pptx.

The Idea

Instead of "describe what you want" (unpredictable AI), declare the exact structure:

{
  "spec": {
    "chrome": {"title": "Q1 Dashboard"},
    "body": {
      "display": "flex",
      "direction": "column",
      "gap": 20,
      "children": [
        {"component": "Metric", "params": {"metrics": [
          {"value": "$12.4M", "label": "Revenue", "trend": "+18%", "trend_dir": "up"}
        ]}},
        {"component": "BarList", "params": {"items": [
          {"name": "Enterprise", "value": 64},
          {"name": "Mid-Market", "value": 28}
        ]}}
      ]
    }
  }
}

24 Components

Category	Components
Metrics	Metric, KPIGrid, ScoreCard, Gauge
Charts	BarList, BarChart, StackedBar, DonutChart, Sparkline
Layouts	Card, Grid, Columns, SplitPane
Content	TextBlock, BulletList, Quote, Callout
Diagrams	Steps, Timeline, Funnel, FlowChart
Status	Tracker, RAGStatus, ProgressBar