html-in-pptx-out

Convert HTML to PowerPoint with a plugin architecture.


Install

``bash
npm install html-in-pptx-out pptxgenjs
`

Quick Start

`typescript
import { HtmlToPptx } from "html-in-pptx-out";

const html =

const buffer = await converter.export({
format: "pptx",
filename: "output.pptx",
});
`

CLI

`bash
npx html-in-pptx-out input.html output.pptx
npx html-in-pptx-out input.html output.pptx --selector ".page"
`

Core Plugins

Built-in plugins for common element types:

- core:text - Text elements with typography
- core:shape - Rectangles, rounded rectangles with fill/stroke
- core:image - Images (base64, URLs)
- core:table - HTML tables
- core:line - Horizontal/vertical lines
- core:chart-plotly - Plotly.js charts
- core:fontawesome - Font Awesome icons

Architecture

`
HTML → Parser → Plugins (onParse) → ElementDTOs → Plugins (onSlide) → Serializer → PPTX
`

$3

1. beforeParse - Modify HTML before parsing
2. onParse - Transform DOM element to ElementDTO
3. onSlide - Modify slide after all elements parsed
4. afterGenerate - Post-process the PPTX object

$3

Feel free to create your own plugins, apologies bcs this was made in a day

`typescript
import { Plugin, TextElementDTO } from "html-in-pptx-out";

const myPlugin: Plugin = {
name: "my-plugin",
handles: ["text"],
onParse: (element, context) => {
return {
type: "text",
id: crypto.randomUUID(),
content: element.textContent || "",
position: {
left: context.boundingRect.left,
top: context.boundingRect.top,
},
dimensions: {
width: context.boundingRect.width,
height: context.boundingRect.height,
},
};
},
};

const converter = new HtmlToPptx().use(myPlugin);
`

API

`typescript
class HtmlToPptx {
constructor(config?: {
selector?: string; // default: ".slide"
dimensions?: { width: number; height: number };
plugins?: { core?: Plugin[]; extensions?: Plugin[] };
});

load(html: string): this;
use(plugin: Plugin): this;
convert(): Promise;
export(options: ExportConfig): Promise;
getPresentation(): PresentationDTO;
}
`

Types

Core types exported from the package:

- ElementDTO - Union of all element types
- TextElementDTO, ShapeElementDTO, ImageElementDTO, etc.
- Position, Dimensions, Typography, Fill, Stroke
- Plugin, ParseContext, PluginContext
- PresentationDTO, SlideDTO

See docs/api.md for full type reference.

Demo

`bash
npm run demo


Open http://localhost:3000/demo

Requirements

- Node.js >= 20.19.0
- pptxgenjs ^3.12.0 (peer dependency)

License

MIT