Purrx

Create your first .pptx file with pptxgenjs

Generate a real PowerPoint file from JavaScript with pptxgenjs: a presentation, a slide and a text box, returned as base64 you can download and open.

10 min+25 XPHands-on

Time for the payoff every later lesson builds on: a file that opens in PowerPoint. We won't write the file format ourselves. A is a zip archive of dozens of XML files, and the open-source library writes all of them for us.

The four steps

every pptxgenjs program
const pptx = new PptxGenJS();          // 1. a presentation
pptx.layout = "LAYOUT_16x9";           //    10 × 5.625 inches

const slide = pptx.addSlide();         // 2. a slide

slide.addText("Hello", {               // 3. things on the slide
  x: 0.75, y: 2, w: 8.5, h: 1.25,      //    inches
  fontSize: 40, bold: true,            //    points
  color: "1F2937",                     //    hex, no #
});

return pptx.write({ outputType: "base64" });  // 4. the file
  • Positions are in inches and font sizes in points, exactly as in the inches and points lesson.
  • Colors are six hex digits without a #. "#1F2937" makes pptxgenjs write a broken color.
  • write() is asynchronous: it zips the files, so it returns a promise.

Why base64?

A .pptx is binary data. Base64 turns bytes into plain text, which is easy to return from a function, send inside JSON to a browser, or turn back into bytes to save. In the playground, when your code returns one, a Download button appears.

Under the hood — What's inside a .pptx file?

Rename a .pptx to .zip and open it. You'll find ppt/slides/slide1.xml describing each slide's shapes, ppt/presentation.xml listing the slides, theme files, and a few files that tell PowerPoint what everything is.

Positions in those files are in EMUs (English Metric Units): 914,400 per inch. pptxgenjs converts your inches for you. Every zip file starts with the bytes "PK", which is why a base64 .pptx always starts with UEsD.

Key takeaways

  • A .pptx file is a zip of XML files; pptxgenjs writes them so you don't have to.
  • The flow is always: new PptxGenJS(), addSlide(), add text and shapes, write().
  • We return the file as base64 text, which is easy to send to a browser or save to disk.

Sign in to run the exercise

Reading is free. Writing code here needs an account so we have somewhere to keep your Gemini key and the +25 XP you are about to earn.