Browser usage

Load presentation bytes

const file = input.files?.[0];
if (!file) throw new Error("Choose a PPTX file");

const pptx = new Uint8Array(await file.arrayBuffer());

Reading a File and passing its bytes to pptx-glimpse does not upload it. Network behavior is entirely controlled by your application.

Provide fonts

Browsers cannot scan OS font directories. Fetch or bundle the fonts your application is allowed to use and provide their bytes through the fonts option.

import { convertPptxToSvg } from "pptx-glimpse";

const fontResponse = await fetch("/fonts/Inter-Regular.ttf");
if (!fontResponse.ok) {
  throw new Error(`Failed to load font: HTTP ${fontResponse.status}`);
}
const inter = await fontResponse.arrayBuffer();

const report = await convertPptxToSvg(pptx, {
  fonts: [{ name: "Inter", data: inter }],
  textOutput: "text",
});

Embed SVG safely

SVG output is a string. Insert it only where your application intentionally accepts rendered presentation content. Review your sanitization and Content Security Policy when presentations can come from untrusted users.

Native <text> output works best as inline SVG. Embedded font rules may not survive sanitizers or render when the SVG is loaded through an <img> element.

Initialize PNG rendering

Browser PNG conversion requires explicit resvg WASM initialization. SVG rendering and the high-level editor session do not.

import { initResvgWasm, convertPptxToPng } from "pptx-glimpse";

await initResvgWasm(await fetch("/resvg.wasm"));
const report = await convertPptxToPng(pptx);