PowerPoint

The PowerPoint gallery reads a .pptx package, resolves theme → master → layout → slide, and paints the result through EVG. It is also a published JavaScript API: a program can open a deck, change it and write it back without constructing the editor.

presentation.pptx
      │
      ▼
 ZIP / OPC package          gallery/ooxml
      │
      ▼
 PresentationML / DrawingML PptxParser
      │
      ▼
 PptxModel
      │
      ▼
 PptxResolver               theme + master + layout + placeholders
      │
      ▼
 PptxToEvg  →  EVGDisplayList  →  WebGL / PNG / PDF

EVG never sees relationship ids, masters, schemeClr or placeholder rules — only resolved geometry, sRGB, fonts and image bytes.

Try it here

The JavaScript is the published API. Press Run and the viewer below opens the .pptx those bytes produced — not a preview of the model in memory. Edit the code and run it again. ‹ / › page the stack.

Three slides from Pptx.create and addSlideRun ▶Ctrl+Enter runs. The viewer opens the .pptx the code produced.Open in the playground

const deck = Pptx.create(); ["Problem", "Approach", "Result"].forEach((word, i) => { const slide = deck.addSlide().background("FFFFFF"); slide.addTextBox(80, 90, 800, 90, word) .run(0, 0).font("Calibri", 40).bold().color("#1F3864"); slide.addShape("rect", 80, 200, 60 + i * 260, 26).fill("4472C4").noLine(); slide.addTextBox(80, 250, 800, 60, "Slide " + (i + 1) + " of 3") .run(0, 0).font("Calibri", 18).color("#7A8AA0"); }); return deck;

The published API

Install the package:

import { Pptx } from "@ranger/pptx";

const deck = Pptx.open(bytes);
deck.slide(0).shapeNamed("Title").setText("Q3 review");
const out = deck.save();

Pptx.create() is the other door — a deck from nothing. The editor below runs that call in the page:

Pptx.create — a title slideRun ▶Ctrl+Enter runs. The viewer opens the .pptx the code produced.Open in the playground

const deck = Pptx.create(); const slide = deck.addSlide().background("FFFFFF"); slide.addTextBox(70, 150, 820, 110, "Quarterly review") .setName("Title") .run(0, 0).font("Calibri", 44).bold().color("#1F3864"); slide.addTextBox(70, 265, 820, 60, "Sales, by region") .run(0, 0).font("Calibri", 22).color("#5B6B84"); slide.addShape("rect", 70, 340, 300, 8).fill("4472C4").noLine(); return deck;

Three entry points, because in Ranger an import is not lazy. The one you import decides what you carry:

Import	Bundle	What it is for
@ranger/pptx	ZIP, XML, model, writer	Headless edit. No canvas and no fonts.
@ranger/pptx/render	+ rasterizer, fonts, PDF	PNG and PDF.
@ranger/pptx/chart	+ Vela	A Vega specification onto a slide as DrawingML shapes.

save() writes over the package the deck was opened from. Every part the API does not model is copied through byte for byte. saveNew() builds a package from the model alone. Use save() on a deck you opened and saveNew() on a deck you created.

The full method list is the PowerPoint API reference. It is generated from gallery/pptx/api/PptxApi.rgr, PptxRenderApi.rgr and PptxChartApi.rgr.

A shorter walkthrough lives in gallery/pptx/api/js/README.md.

Demos

Demo	URL or command	What it is
Editor, JavaScript	/pptx/	Parse a deck in the page, draw it with WebGL, edit it. No server.
Editor, WebAssembly	/pptx-wasm/	The same editor, compiled Ranger → C++ → WASM.
API playground	/office/	Code on the left writes a deck. The editor on the right opens the bytes.

The playground is the check that the writer and the reader agree. A unit test on either alone does not prove that.

npm run pptx:web              # build gallery/pptx/web/standalone/dist
npm run pptx:web:serve        # serve it on :8001
npm run pptx:web:test         # open it in headless Chrome

Charts on a slide

@ranger/pptx/chart compiles a Vega or Vega-Lite specification and puts it on the slide as ordinary DrawingML shapes — not as a picture. Bars are rectangles, labels are text boxes, areas are custom geometry. They scale without blurring, and the numbers are in slide.text.

That API is documented with the rest of the PowerPoint surface, and the Charts guide describes Vela, which compiles the specification.

Source

Path	Role
gallery/pptx/api/	The published facades and the JavaScript wrapper
gallery/pptx/src/	Parser, model, resolver, writer, editor, painter
gallery/pptx/web/	Browser hosts: standalone editor, API playground, WASM
gallery/office/	Fonts, metrics, preset geometry, history

npm run pptx:test             # Ranger tests
npm run pptx:web:test         # the standalone page in headless Chrome