pptx-glimpse

pptx-glimpse

No LibreOffice required — just npm install.

A lightweight JavaScript library that renders PowerPoint (.pptx) slides as SVG or PNG in Node.js.

Try the Demo | npm

Upload a .pptx file → get SVG/PNG output instantly

PowerPoint	pptx-glimpse

Motivation

pptx-glimpse is designed for two primary use cases:

• Frontend PPTX preview — Render slide thumbnails without depending on Microsoft Office or LibreOffice. The SVG output can be embedded directly in web pages.
• AI image recognition — Convert slides to PNG so that vision-capable LLMs can understand slide content and layout.

The library focuses on accurately reproducing text, shapes, and spatial layout rather than pixel-perfect rendering of every PowerPoint feature.

Why not LibreOffice?

Requirements

• Node.js >= 22

Installation

npm install pptx-glimpse

Usage

import { readFileSync, writeFileSync } from "fs";
import { convertPptxToSvg, convertPptxToPng } from "pptx-glimpse";

const pptx = readFileSync("presentation.pptx");

// Convert to SVG
const { slides: svgResults } = await convertPptxToSvg(pptx);
// [{ slideNumber: 1, svg: "<svg>...</svg>" }, ...]

// Convert to PNG
const { slides: pngResults } = await convertPptxToPng(pptx);
// [{ slideNumber: 1, png: Buffer, width: 960, height: 540 }, ...]

writeFileSync("slide1.png", pngResults[0].png);

The conversion APIs return a report object:

const { slides, diagnostics, supportCoverage } = await convertPptxToSvg(pptx);

• slides contains the converted SVG or PNG slide results.
• diagnostics contains document reader, computed view, renderer adapter, and renderer warning diagnostics collected during conversion.
• supportCoverage summarizes support/renderability counts such as input elements, output elements, skipped elements, unresolved elements, fallback elements, and warnings. It is not a PowerPoint visual-match or pixel-accuracy score.

Options

Both convertPptxToSvg and convertPptxToPng accept an optional ConvertOptions object.

const { slides } = await convertPptxToPng(pptx, {
  slides: [1, 3], // Convert only slides 1 and 3
  width: 1920, // Output width in pixels (default: 960)
  height: 1080, // Currently ignored by public conversion; width controls PNG size
  logLevel: "warn", // Warning log level: "off" | "warn" | "debug"
  fontDirs: ["/custom/fonts"], // Additional font directories to search
  skipSystemFonts: true, // Skip OS system font directories; use fontDirs only
  fontMapping: {
    "Custom Corp Font": "Noto Sans", // Custom font name mapping
  },
});

Text output mode (textOutput)

By default, text is converted to <path> outlines, which renders consistently in any environment but bypasses the browser's native text rasterization (hinting, text-specific anti-aliasing), so glyph edges can look jagged when SVGs are displayed inline in a browser.

With textOutput: "text", convertPptxToSvg emits native <text> elements along with @font-face rules that embed subsetted fonts as data URIs. This produces smoother text rendering in browsers, smaller SVGs for CJK-heavy slides, and selectable/copyable text. Characters not covered by the resolved font fall back to the viewer's fonts via the font-family chain.

// SVG only — convertPptxToPng always uses path output
const { slides: svgResults } = await convertPptxToSvg(pptx, { textOutput: "text" });

Note: embedded fonts and <text> may not render as expected when the SVG is referenced via <img src="...svg"> or sanitized. convertPptxToPng always uses path output regardless of this option.

Advanced Usage

import { collectUsedFonts } from "pptx-glimpse";

const fonts = collectUsedFonts(pptx);
// {
//   theme: { majorFont: "Calibri Light", minorFont: "Calibri", majorFontEa: "...", ... },
//   fonts: ["Arial", "Calibri", "Meiryo"]
// }

import { DEFAULT_FONT_MAPPING, createFontMapping, getMappedFont } from "pptx-glimpse";

// Create a custom mapping (merges with defaults, user values take priority)
const mapping = createFontMapping({ Calibri: "Ubuntu" });

// Look up mapped font (case-insensitive)
getMappedFont("Meiryo", mapping); // "Noto Sans JP"
getMappedFont("calibri", mapping); // "Ubuntu"

import { readFileSync } from "fs";
import { createOpentypeSetupFromBuffers } from "pptx-glimpse";

const setup = await createOpentypeSetupFromBuffers([
  { name: "Carlito", data: readFileSync("fonts/Carlito-Regular.ttf") },
  { name: "Noto Sans JP", data: readFileSync("fonts/NotoSansJP-Regular.ttf") },
]);
// setup.measurer — text width measurement
// setup.fontResolver — text-to-SVG-path conversion

Fonts

Automatic Font Loading

pptx-glimpse automatically scans system font directories and loads fonts using opentype.js. Text in SVG output is converted to <path> elements, ensuring consistent rendering regardless of the environment.

Default system font directories:

Use the fontDirs option to add custom font directories. To skip system font scanning entirely and use only fontDirs (useful in containers, serverless environments, or when you want to bundle specific fonts to reduce startup time), set skipSystemFonts: true.

Font Mapping

PPTX files often reference proprietary fonts (e.g., Calibri, Meiryo). pptx-glimpse maps these to open-source alternatives available on Google Fonts.

Default mapping:

You can customize the mapping via the fontMapping option:

const { slides } = await convertPptxToSvg(pptx, {
  fontMapping: {
    "Custom Corp Font": "Noto Sans", // Add a new mapping
    Arial: "Inter", // Override the default
  },
});

Feature Support

136 preset shapes, charts, tables, SmartArt, gradients, shadows, and more — covering the most common static PowerPoint content.

Supported Features

Shapes

Text

Fill

Lines & Borders

Colors

Effects

Images

Tables

Charts

SmartArt

Background & Slide Settings

Development

npm run render -- <pptx-file> [output-dir]

# Examples
npm run render -- presentation.pptx
npm run render -- presentation.pptx ./my-output

License

MIT