PowerPoint Template Wiring Demo

How to wire data into a PowerPoint template

Two practical patterns — from the simplest “a designer hands me a finished .pptx, code just swaps the numbers” to a fully code-built deck. Each has a flow diagram so you can see where the data and the file move. The buttons at the top of the page are working demos of both.

1 Bind web data into a template (placeholder swap)

The template uses double-brace tokens like {{REVENUE}} and {{PIPELINE}}. The pattern is the same whether you do it in the browser (JSZip), Node.js (docxtemplater + pptx module), or Python (python-pptx): load the file, walk every text run, and replace the tokens with values from your data source. The Download from template button above is a working browser-only implementation — on load it looks for template/SalesReview-Template.pptx in this folder and uses it automatically; if it isn’t there, an in-memory built-in template is used instead. Here’s the same idea in Python:

Designer owns the layout; code owns the numbers. Moving shapes in the template doesn’t require a code change.

# Python example using python-pptx — fills {{TOKEN}} placeholders in an existing .pptx
# pip install python-pptx
from pptx import Presentation

# 1. The data you want to inject. Keys MUST match the {{TOKEN}} names in the template.
#    In production this dict would come from your DB / API / form submission.
data = {
    "REVENUE":         "$12.4M",
    "REVENUE_DELTA":   "+8.2% YoY",
    "PLAN_ATTAINMENT": "104%",
    "PIPELINE":        "$18.1M",
    "WIN_RATE":        "36%",
}

# 2. Open the designer-built template (the .pptx that contains the {{TOKEN}} strings).
prs = Presentation("SalesReview-Template.pptx")

# 3. Walk every slide → every shape → every paragraph → every text run, and
#    replace any {{TOKEN}} we recognize. Working at the "run" level preserves
#    the original font, size, color, and bold/italic formatting from the template.
for slide in prs.slides:
    for shape in slide.shapes:
        if not shape.has_text_frame: continue   # skip pictures, charts, lines, etc.
        for para in shape.text_frame.paragraphs:
            for run in para.runs:
                for k, v in data.items():
                    run.text = run.text.replace(f"{{{{{k}}}}}", v)

# 4. Save under a new name so the original template is never overwritten.
prs.save("SalesReview-Q2-2026.pptx")

2 Generate a .pptx straight from the browser (PptxGenJS)

For dashboards where users click a button and download a ready-made deck, you don’t need a template file at all — PptxGenJS builds a fully native PowerPoint file in JavaScript. The Generate a .pptx from this page button above runs exactly this code:

Pure-client generation. Great when there’s no backend — or you don’t want one in the loop.

// JavaScript example using PptxGenJS — builds a .pptx in the browser from data.
// Loaded via <script src="...pptxgen.bundle.js"> — no build step / no server needed.

// 1. Create the deck and pick a slide size. LAYOUT_WIDE = 13.33" x 7.5" (16:9).
//    Other options: "LAYOUT_4x3" (10"x7.5"), "LAYOUT_16x9" (10"x5.625"), or custom inches.
const pptx = new PptxGenJS();
pptx.layout = "LAYOUT_WIDE";

// 2. (Optional) Define a brand theme in one place so every shape reuses it.
//    Colors are 6-digit hex strings WITHOUT the leading "#". Sizes are in points.
const theme = {
  accent:    "005EB8",   // brand blue — swap to your own (e.g. "D71920" for red)
  deep:      "003B71",   // deep navy for table headers
  text:      "1B1F24",   // near-black body text
  muted:     "5C6670",   // secondary / label gray
  green:     "2E7D32",   // positive delta
  fontTitle: "Aptos Display", // big headings (any installed font name works)
  fontBody:  "Aptos"          // body text — try "Calibri", "Segoe UI", "Arial", etc.
};

// 3. Add a slide. You can set a solid background or a hex color.
const slide = pptx.addSlide();
slide.background = { color: "FFFFFF" };   // e.g. "F5F8FC" for soft blue page

// 4. addText() options control color, size, font, alignment, etc.
//    Most-used keys: x, y, w, h (inches), fontSize (pt), fontFace, color (hex),
//    bold, italic, underline, align ("left"|"center"|"right"), valign, charSpacing.
slide.addText("BUSINESS REVIEW", {
  x:0.5, y:0.4, w:5, h:0.3,
  fontSize:10, bold:true,
  color: theme.accent, fontFace: theme.fontBody,
  charSpacing:2                // 0.1pt letter spacing — try 0 to disable
});
slide.addText(sampleData.title, {
  x:0.5, y:0.7, w:9, h:0.6,
  fontSize:28, bold:true,         // bump to 36 for a bigger headline
  color: theme.text, fontFace: theme.fontTitle
});

// 5. KPI tiles — a single addText() call can hold multiple text runs,
//    each with its own font / color / size. Great for label-over-value tiles.
sampleData.kpis.forEach((k, i) => {
  const col = i % 2, row = Math.floor(i/2);
  slide.addText(
    [
      { text:k.label+"\n", options:{ fontSize:9,  bold:true, color: theme.muted } },
      { text:k.value+"\n", options:{ fontSize:22, bold:true, color: theme.text  } }, // raise to 28 for emphasis
      { text:k.delta,        options:{ fontSize:10, bold:true, color: theme.green } }  // red "B23A48" if negative
    ],
    {
      x: 0.5 + col*1.85, y: 2.6 + row*1.15, w:1.75, h:1,
      fill: { color:"FFFFFF" },                              // tile background
      line: { color:"C8D3E0", width:0.5 },                  // border color + thickness (pt)
      fontFace: theme.fontBody, valign:"middle"
    }
  );
});

// 6. addShape() draws a native PowerPoint shape — perfect for accents / dividers.
slide.addShape(pptx.ShapeType.rect, {
  x:0.5, y:1.6, w:0.4, h:0.05,
  fill:{ color: theme.accent }, line:{ color: theme.accent }
});

// 7. Native PowerPoint chart from the same sample data.
//    chartColors[] sets the series colors in order. showLegend / legendPos control the legend.
slide.addChart(pptx.ChartType.bar, [
  { name:"Plan",   labels:sampleData.chart.labels, values:sampleData.chart.plan   },
  { name:"Actual", labels:sampleData.chart.labels, values:sampleData.chart.actual }
], {
  x:5, y:2.2, w:7.5, h:3,
  chartColors:["C8D3E0", theme.accent],   // one color per data series
  showLegend:true, legendPos:"b",           // "b"=bottom, "t"=top, "l"=left, "r"=right
  legendFontSize:9, legendFontFace: theme.fontBody,
  catAxisLabelFontSize:9, valAxisLabelFontSize:9,
  catAxisLabelColor: theme.muted, valAxisLabelColor: theme.muted
});

// 8. Trigger the browser download. Use pptx.write({outputType:"blob"}) instead
//    if you want to email / upload the file rather than download it.
pptx.writeFile({ fileName:"SalesReview.pptx" });

✓ What this demo proves

• The same sampleData object drives the on-page KPIs, the live Chart.js chart, the data table, and the generated .pptx — one source of truth.
• The two methods are interchangeable: hand a designer a template and use method 1, or skip the template entirely and build the slide in code with method 2.
• Swap the in-page sampleData for a fetch() against your real API and the rest of the page (and the generated deck) will just work.