Purrx

From SlideML to a real PowerPoint file

Connect the parser, layout engine and pptxgenjs into one compile step: SlideML text in, a render plan and a downloadable .pptx out.

9 min+25 XPHands-on

You now have every stage: a parser, a layout engine and a PowerPoint writer. They don't know about each other, which is good. This lesson adds the one file that runs them in order.

SlideML text

parseXml

src/xml.js

layoutSlide

src/layout.js

planToPptx

src/pptx.js

compile.js is short on purpose: all the real work lives in the stages it calls.

Two functions

  1. compileSlide(xml) parses and lays out, returning the for one slide. If the root isn't a <slide>, it throws a message that says what it found instead.
  2. slideToPptx(xml) wraps that plan in a deck, writes the file, and returns both the plan and the file.
examples/slide.xml, compiled by the engine you've built so far. Every box was positioned by code; the model never saw a coordinate.

That is the example from lesson 3.1 compiled by the engine you've built. Download the file from your exercise and open it in PowerPoint, Keynote or Google Slides: it's real, editable text.

Your project so far

10 files · 1 new or changed in this lesson

src/compile.js

// compile.js ties the stages together: text in, finished slides out.

import { parseXml } from "./xml.js";
import { layoutSlide } from "./layout.js";
import { planToPptx } from "./pptx.js";

/** SlideML text → a render plan for one slide. */
export function compileSlide(xml) {
  const tree = parseXml(xml);
  if (tree.tag !== "slide") throw new Error(`Expected a <slide>, found <${tree.tag}>`);
  return layoutSlide(tree);
}

/** SlideML text → the plan (to preview) and the .pptx file (base64, to download). */
export async function slideToPptx(xml) {
  const plan = { slides: [compileSlide(xml)] };
  const file = await planToPptx(plan);
  return { plan, file };
}

Key takeaways

  • compile.js connects the stages: parse, lay out, draw.
  • Return the plan as well as the file, so it can be previewed without PowerPoint.
  • Check the root element early, and say what was found when it's wrong.

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.

Continue with Google