@pagus-kit/renderer

Framework-agnostic SVG renderer for @pagus-kit/core IR. Converts parsed PPTX slides into self-contained SVG strings — no DOM required.

Part of the Pagus project.

Install

npm install @pagus-kit/renderer @pagus-kit/core

Usage

import { parse } from '@pagus-kit/core'
import { renderSlide, buildFontSubstitutes, generateFontCss } from '@pagus-kit/renderer'

const presentation = await parse(buffer)

// Map Office fonts to Google Fonts
const fontSubs = buildFontSubstitutes(presentation.fonts)
const { css: fontCss, unresolvedFonts } = generateFontCss(presentation.fonts)

// Render a slide
const { svg, width, height } = renderSlide(
  presentation.slides[0],
  presentation.slideSize,
  { fontSubstitutes: fontSubs },
)
// svg is a complete <svg>...</svg> string

API

renderSlide(slide, slideSize, options?): SlideRenderResult

interface RenderOptions {
  scale?: number                            // default 1
  backgroundColor?: string                  // CSS color override
  fontSubstitutes?: Record<string, string>  // e.g. { "Calibri": "Carlito" }
}

interface SlideRenderResult {
  svg: string     // complete <svg>...</svg>
  width: number   // output width in px
  height: number  // output height in px
}

Font System

// Build a substitution map from presentation fonts
buildFontSubstitutes(fonts: PresentationFonts): Record<string, string>

// Generate @import CSS for Google Fonts
generateFontCss(fonts: PresentationFonts): FontCssResult

interface FontCssResult {
  css: string               // @import rules for Google Fonts
  googleFontUrls: string[]  // individual font stylesheet URLs
  unresolvedFonts: string[] // fonts with no web mapping
}

Individual Renderers

Each element type has a standalone renderer exported for advanced use:

import { renderShape, renderText, renderImage, renderTable } from '@pagus-kit/renderer'
import { renderBackground, renderFill, fillToCss } from '@pagus-kit/renderer'

License

MIT