@jvmr/pptx-to-html

pptx-to-html

Convert PowerPoint (.pptx) files into HTML slides using TypeScript. The library parses the OOXML structures inside a presentation and renders each slide as a self-contained HTML snippet with absolutely positioned elements.

• Zero-runtime CSS required; styles are inlined.
• Theme colors, basic table styling, and common chart rendering are supported.
• Works in modern browsers. Node is supported via an injectable DOM parser.

Based on the ISO/IEC 29500:2012 "Office Open XML File Formats - Fundamentals And Markup Language Reference".

Live demo

Getting Started

With npm:

npm install @jvmr/pptx-to-html

Import library:

import { pptxToHtml } from "@jvmr/pptx-to-html";

Quick Start (Browser)

import { pptxToHtml } from "@jvmr/pptx-to-html";

async function handleFile(file: File) {
  const arrayBuffer = await file.arrayBuffer();
  const slidesHtml = await pptxToHtml(arrayBuffer, {
    width: 960,
    height: 540,
    scaleToFit: true,
    letterbox: true,
  });

  const container = document.getElementById("slides")!;
  container.innerHTML = slidesHtml.join("\n");
}

document.getElementById("file")!.addEventListener("change", (event) => {
  const input = event.target as HTMLInputElement;
  if (input.files?.[0]) {
    void handleFile(input.files[0]);
  }
});

Quick Start (Node)

In Node, there is no built-in DOMParser. Provide one via domParserFactory or install a DOM parser in your app such as @xmldom/xmldom.

npm install @xmldom/xmldom

import { readFile } from "node:fs/promises";
import { DOMParser } from "@xmldom/xmldom";
import { pptxToHtml } from "@jvmr/pptx-to-html";

async function main() {
  const file = await readFile("./example.pptx");
  const slidesHtml = await pptxToHtml(file.buffer, {
    width: 960,
    height: 540,
    scaleToFit: true,
    domParserFactory: () => new DOMParser(),
  });

  console.log(slidesHtml.join("\n\n"));
}

void main();

API

pptxToHtml(buffer, config?) => Promise<string[]>

• buffer: ArrayBuffer containing the .pptx file contents.
• Returns an array of HTML strings, one per slide.

Options

Option	Type	Default	Description
width	number	PPT base width or 960	Target container width in pixels
height	number	PPT base height or 540	Target container height in pixels
scaleToFit	boolean	false	Scales the slide viewport into the target container
letterbox	boolean	true when scaleToFit is true	Preserves aspect ratio with bars instead of stretching
domParserFactory	() => { parseFromString(xml: string, mime: string): Document }	undefined	Optional parser factory for Node environments

Notes:

• The library reads the slide base size from ppt/presentation.xml (sldSz). When unavailable, it defaults to 960x540.
• All coordinates and sizes are normalized from EMUs to pixels (EMU / 9525).

What It Renders

• Text boxes, including basic paragraphs, bullets, and numbering.
• Images.
• Shapes and connectors.
• Tables with common fills and borders.
• Charts for column, bar, line, area, pie, and scatter types.

Limitations

• Fidelity is intentionally practical, not pixel-perfect.
• Animations, transitions, SmartArt, embedded audio or video, 3D, and advanced chart options are not supported.
• Fonts are not embedded; rendering depends on the fonts available in the runtime environment.
• Very large presentations may require substantial memory because ZIP contents and images are decoded in memory.

Environment Support

• Browsers: modern evergreen browsers with ES module support.
• Node: supported through domParserFactory, or by installing a parser such as @xmldom/xmldom. The library also attempts a best-effort require("@xmldom/xmldom") when available.

License

MIT