Your first deck in ten minutes

Set up

Download the first-deck starter, extract it, and run these commands inside the extracted first-deck directory. The install pins the CLI, renderer and PPTX exporter to one compatible release set, plus the font packages the renderer measures text with.

npm install
npm run doctor

opf doctor reports which formats this install can write and prints the one command that installs anything missing. You want Every format is ready.; fix anything else before you export.

The brief

A deck starts as a decision, an audience and facts you trust. This is the brief you would give a colleague or an agent (For agents has a fill-in template). Pasting it into an agent with the OPF skills should return a deck like the one below; keep the facts, and have it validate before it answers.

# Brief: Q3 customer onboarding review

Audience: the customer success leadership team.
Decision wanted: fund two import engineers and a self-serve import checklist.

Facts to keep (do not invent others):

- Median time to first value is 18 days; the target is 12.
- 41% of customers go live within the 12-day target, up 6 points from Q2.
- Median days per stage: kickoff 2, data import 7, security review 5, training 2, go live 2.
- Fixes: self-serve import checklist (Support, saves 3 days), pre-approved security pack (Security, 2 days), two import engineers (Engineering, 2 days).
- A screenshot of the day-one dashboard is in assets/onboarding-dashboard.png.

Shape: five slides: the ask with three bullets, one metric, one chart, one table, one picture.
Return deck.opf.json, then validate it and fix every finding before exporting.

The deck

deck.opf.json is the whole presentation. It has no theme, so the default design applies; you can add one later with design.theme. Each slide is one kind of content:

• Bullets: items is a list of strings. subtitle sits under the title.
• Metric: metric takes a value, a label, and optionally a trend and delta.
• Chart: chart takes a type and data as columns and rows. alt says what the chart shows.
• Table: table takes columns and rows.
• Picture: image.src is a path next to the deck (assets/onboarding-dashboard.png). Give it alt text. The tools never fetch web images.

{
  "name": "Q3 customer onboarding review",
  "language": "en-US",
  "slides": [
    {
      "id": "decision",
      "title": "Cut onboarding time by a third",
      "subtitle": "Q3 review for the customer success leadership team",
      "items": [
        "Median time to first value is 18 days; the target is 12",
        "Most of the delay sits in data import and security review",
        "Ask: fund two import engineers and a self-serve checklist"
      ]
    },
    {
      "id": "metric",
      "title": "Only 41% of customers go live on target",
      "metric": {
        "value": "41%",
        "label": "Customers live within the 12-day target",
        "trend": "up",
        "delta": "+6 points vs Q2"
      }
    },
    {
      "id": "chart",
      "title": "Import and review take most of the time",
      "chart": {
        "type": "column",
        "data": {
          "columns": ["Stage", "Median days"],
          "rows": [
            ["Kickoff", 2],
            ["Data import", 7],
            ["Security review", 5],
            ["Training", 2],
            ["Go live", 2]
          ]
        },
        "alt": "Column chart of median days per onboarding stage: data import 7, security review 5, and 2 for each other stage."
      }
    },
    {
      "id": "fixes",
      "title": "Three fixes, one owner each",
      "table": {
        "columns": ["Fix", "Owner", "Expected saving"],
        "rows": [
          ["Self-serve import checklist", "Support", "3 days"],
          ["Pre-approved security pack", "Security", "2 days"],
          ["Two import engineers", "Engineering", "2 days"]
        ]
      }
    },
    {
      "id": "day-one",
      "title": "What customers see on day one",
      "image": {
        "src": "assets/onboarding-dashboard.png",
        "alt": "Onboarding dashboard: a four-step checklist with two steps done and security review in progress."
      }
    }
  ]
}

A theme also comes in color variants. design.variant picks light1, light2, dark1 or dark2 as the background, the way PowerPoint's Background Styles do, and a slide can set its own. Dark is a variant of every theme, not a theme of its own:

{
  "design": { "theme": "classic", "variant": "dark1" },
  "slides": [
    { "layout": "cover", "title": "Quarterly review" },
    { "title": "Pipeline", "items": ["Three new accounts"], "design": { "variant": "light1" } }
  ]
}

The spec lists every field, and content payloads shows the other slide types.

Validate

Validation checks the format, references, accessibility, content and layout before anything is drawn. Run it after every edit.

npm run validate
# runs: npx opf validate deck.opf.json --format text

A clean deck prints 0 findings. A finding names the slide and the field with a hint; fix it, run validate again, and only then export. Validation estimates layout; the preview below is the measured one.

Preview as PNG

npm run preview
# runs: npx opf convert deck.opf.json output/slide-{n}.png --force

This writes output/slide-1.png to output/slide-5.png at 1280 × 720. Open them and check the title, the bullets, the chart labels and the picture crop. The PNGs come from the OPF renderer, so they show what OPF drew, not what PowerPoint will draw.

Export PPTX

npm run pptx
# runs: npx opf convert deck.opf.json output/deck.pptx --force

output/deck.pptx holds all five slides. The chart is a native chart with its data, the table is a native table and the picture is embedded. npm run build runs validate, preview and export in order.

Open it in PowerPoint or Keynote

Open deck.pptx in PowerPoint (the format it is written for). Keynote opens PPTX files by converting them on import; we do not test Keynote, so compare it with the PNGs and expect small differences. Before you share the file:

• Install the fonts the deck names on the machine that opens it. The PPTX names its fonts but does not embed them.
• Click the chart and the table: both are real objects you can edit, and the chart data opens in PowerPoint's sheet. Table text is presentation-sized (about 19 pt), and the chart's series take the deck's color scheme (accent1 to accent6); set chart.colors to choose your own.
• Compare each slide with its PNG. Line breaks can move a little between the renderer and the application.

For a change to the content or the story, edit deck.opf.json, validate and export again. The JSON stays the source; the PPTX is the handoff.

Known limits

These are true of the default 0.22 export. Plan for them rather than discovering them in front of an audience.

The wider list is in Known limits and what to expect from the PPTX.

Next

• Add a theme and fonts: the default catalog.
• Let an agent do it: For agents installs the skills and gives a task brief.
• Edit it live: paste the deck into the playground.
• Integrate it: website, editor and Node starters.