Open source MIT License TypeScript

Pagus — PowerPoint PPTX Renderer for the Web

Pagus is a modular, open-source library that parses PowerPoint (.pptx) files and renders them as SVG directly in the browser or Node.js — no server-side conversion, no Microsoft Office or LibreOffice install required.

What is Pagus?

Pagus reads the OOXML inside a .pptx file (shapes, text, images, tables, charts, gradients, shadows, groups, transitions and animations) and renders each slide as a self-contained <svg> string. Text and tables are rendered inside <foreignObject> so they remain fully selectable, copyable, and searchable — unlike raster or canvas-based PPT viewers.

Because the renderer is a pure function that emits SVG strings, Pagus works in any frontend framework, in headless Node.js pipelines, and inside AI agent workflows via the Model Context Protocol (MCP).

Key features

  • Pure client-side rendering — parse .pptx files directly in the browser or Node.js.
  • High-fidelity output — shapes, text, images, tables, charts, gradients, shadows, and nested groups.
  • SVG + DOM hybrid — shapes rendered as SVG paths; text and tables in <foreignObject> for native selection, copy, and rich layout.
  • Web font substitution — maps Office fonts (Calibri, Microsoft YaHei, SimSun, MS Gothic, Malgun Gothic, etc.) to metrically compatible Google Fonts.
  • Embedded font extraction — reads fonts embedded in .pptx files and serves them via @font-face.
  • React components — drop-in <PptxViewer> with file upload, slide navigation, and font loading.
  • Slide transitions & entrance animations — CSS-based playback for transitions and common DrawingML animation effects.
  • Deck authoring API — build decks programmatically for agent-driven generation via @pagus-kit/builder.
  • MCP Apps integration — inline slide preview inside Claude Desktop and claude.ai via @pagus-kit/mcp.
  • Framework-agnostic core — use the core and renderer with any framework, or headless in Node.js.

Packages

Pagus is distributed as a set of small, focused packages on npm under the @pagus-kit scope:

PackagePurpose
@pagus-kit/corePPTX parser and intermediate representation (IR).
@pagus-kit/rendererFramework-agnostic SVG string renderer.
@pagus-kit/builderIR authoring API for constructing decks programmatically.
@pagus-kit/reactReact components (PptxViewer, SlideView, hooks).
@pagus-kit/mcpMCP server for inline PPTX preview in Claude and other AI clients.

Quick start

React

npm install @pagus-kit/react

import { PptxViewer } from '@pagus-kit/react'

function App() {
  return <PptxViewer />
}

Headless (Node.js or any framework)

import { readFile } from 'node:fs/promises'
import { parse } from '@pagus-kit/core'
import { renderSlide } from '@pagus-kit/renderer'

const buf = await readFile('deck.pptx')
const presentation = await parse(buf.buffer)

for (const slide of presentation.slides) {
  const { svg } = renderSlide(slide, presentation.slideSize)
  // svg is a complete <svg>...</svg> string
}

MCP (Claude Desktop inline preview)

{
  "mcpServers": {
    "pagus": { "command": "npx", "args": ["-y", "@pagus-kit/mcp"] }
  }
}

How Pagus compares

ApproachServer requiredSelectable textFidelity
Server conversion (LibreOffice, unoconv, Aspose)YesDepends on outputHigh
Canvas / image-based JS viewersNoNoMedium
Convert to PDF + PDF.jsYes (for conversion)PartialMedium
Pagus (SVG + DOM)NoYesHigh

FAQ

What is Pagus?

Pagus is an open-source, modular PPTX web renderer. It parses PowerPoint (.pptx) files and renders them in the browser as SVG — with no server-side conversion and no Microsoft Office or LibreOffice dependencies.

How does Pagus render PowerPoint files in the browser?

Pagus unzips the .pptx file, parses the OOXML with fast-xml-parser, resolves theme colors and property inheritance into a normalized intermediate representation, and then emits SVG for shapes, images, and backgrounds. Text and tables are wrapped in <foreignObject> so they remain selectable and copyable with native HTML layout.

Can I use Pagus in Node.js or a headless environment?

Yes. @pagus-kit/core and @pagus-kit/renderer have no DOM dependency. You can parse a .pptx in Node.js and get back complete <svg>...</svg> strings that you can write to files, embed in HTML, or rasterize with headless Chromium.

Does Pagus support slide transitions and animations?

Yes. Pagus ships CSS-based playback for slide transitions and common DrawingML entrance animations (fade, fly, wipe, zoom, and more) via the React adapter.

How does Pagus handle fonts?

Pagus uses a two-source strategy: it extracts fonts embedded inside the .pptx (ODTTF/TTF) and exposes them via @font-face, and falls back to metrically compatible Google Fonts for common Office faces — for example Calibri → Carlito, Cambria → Caladea, Microsoft YaHei → Noto Sans SC, MS Gothic → Noto Sans JP, Malgun Gothic → Noto Sans KR.

Can Pagus be used with Claude or other AI agents?

Yes. @pagus-kit/mcp is a Model Context Protocol server that exposes a render_slides tool. When installed in Claude Desktop it renders any .pptx file as an interactive inline widget with slide navigation. @pagus-kit/builder also provides an IR-level authoring API for agent-driven deck generation.

Is Pagus free and open source?

Yes. Pagus is released under the MIT license and published on npm under the @pagus-kit scope. The source code is on GitHub at pagus-kit/pagus.

Links