https://github.com/atharva9167j/dom-to-pptx

A client-side library that converts any HTML element into a fully editable PowerPoint slide. **dom-to-pptx** transforms DOM structures into pixel-accurate `.pptx` content, preserving gradients, shadows, rounded images, and responsive layouts.
https://github.com/atharva9167j/dom-to-pptx

client-side-pptx convert-html css-to-powerpoint css-to-pptx dom dom-to-pptx html-to-powerpoint html-to-ppt html-to-pptx layout-engine npm-package powerpoint powerpoint-presentation pptx pptx-creator presentation-generator slides-creation web-to-powerpoint web-to-pptx

Last synced: 3 months ago
JSON representation

Host: GitHub
URL: https://github.com/atharva9167j/dom-to-pptx
Owner: atharva9167j
License: mit
Created: 2025-11-30T18:38:01.000Z (8 months ago)
Default Branch: master
Last Pushed: 2026-01-12T03:29:27.000Z (7 months ago)
Last Synced: 2026-01-12T10:20:10.440Z (7 months ago)
Topics: client-side-pptx, convert-html, css-to-powerpoint, css-to-pptx, dom, dom-to-pptx, html-to-powerpoint, html-to-ppt, html-to-pptx, layout-engine, npm-package, powerpoint, powerpoint-presentation, pptx, pptx-creator, presentation-generator, slides-creation, web-to-powerpoint, web-to-pptx
Language: JavaScript
Homepage: https://www.npmjs.com/package/dom-to-pptx
Size: 284 KB
Stars: 34
Watchers: 0
Forks: 6
Open Issues: 1
Metadata Files:
- Readme: Readme.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Support: SUPPORTED.md

Awesome Lists containing this project

README

# dom-to-pptx

**The High-Fidelity HTML to PowerPoint Converter (v1.1.8)**

> [!TIP]
> **Quick Start for AI Agents (Claude Code, Gemini, Windsurf):**
> Run `npx dom-to-pptx-skills` to automatically install professional PPT creation skills into your agent's toolkit.

---

Most HTML-to-PPTX libraries fail when faced with modern web design. They break on gradients, misalign text, ignore rounded corners, or simply take a screenshot (which isn't editable).

**dom-to-pptx** is different. It is a **Coordinate Scraper & Style Engine** that traverses your DOM, calculates the exact computed styles of every element (Flexbox/Grid positions, complex gradients, shadows), and mathematically maps them to native PowerPoint shapes and text boxes. The result is a fully editable, vector-sharp presentation that looks exactly like your web view.

### 🛠️ Updates in v1.1.8

- **XML Namespace Integrity**: Fixed a critical bug where font embedding caused PPTX corruption. Now uses explicit OpenXML namespaces for valid OOXML generation.
- **Vertical Alignment Precision**: Fixed a regression where tall elements defaulted to middle-alignment. Standard block elements are now correctly top-aligned by default.
- **`vertical-align` Support**: Added support for explicit CSS `vertical-align` (middle/bottom) mapping directly to PowerPoint text box vertical alignment.
- **Enhanced Inset Logic**: Improved padding handling; centered text now correctly respects and preserves container insets (padding).

## Features

### 🚀 New in v1.1.0

- **Smart Font Embedding:** The library **automatically detects** the fonts used in your HTML, finds their URLs in your CSS, and embeds them into the PPTX. Your slides will look identical on any computer, even if the user doesn't have the fonts installed.
- **Enhanced Icon Support:** Flawless rendering of FontAwesome, Material Icons, and SVG-based icon libraries (including gradient text icons).

### 🎨 Advanced Visual Fidelity

- **Complex Gradients:** Includes a built-in CSS Gradient Parser that converts `linear-gradient` strings (with multiple stops, specific angles like `45deg`, and transparency) into vector SVGs.
- **Mathematically Accurate Shadows:** Converts CSS Cartesian shadows (`x`, `y`, `blur`) into PowerPoint's Polar coordinate system (`angle`, `distance`) for 1:1 depth matching.
- **Anti-Halo Image Processing:** Uses off-screen HTML5 Canvas with `source-in` composite masking to render rounded images without the ugly white "halo" artifacts found in other libraries.
- **Soft Edges/Blurs:** Accurately translates CSS `filter: blur()` into PowerPoint's soft-edge effects, preserving visual depth.

### 📐 Smart Layout & Typography

- **Auto-Scaling Engine:** Build your slide in HTML at **1920x1080** (or any aspect ratio). The library automatically calculates the scaling factor to fit it perfectly into a standard 16:9 PowerPoint slide.
- **Rich Text Blocks:** Handles mixed-style text (e.g., **bold** spans inside a normal paragraph).
- **Text Transformations:** Supports CSS `text-transform: uppercase/lowercase` and `letter-spacing`.

### ⚡ Technical Capabilities

- **Z-Index Handling:** Respects DOM order for correct layering of elements.
- **Border Radius Math:** Calculates perfect corner rounding percentages based on element dimensions.
- **Client-Side:** Runs entirely in the browser. No server required.

## Installation

```bash
npm install dom-to-pptx
```

## 🤖 AI Skills Installation (New!)

You can now install the **dom-to-pptx skills** directly into your favorite AI agent (Claude Code, Gemini CLI, Windsurf, etc.) to help it generate high-fidelity presentations.

Run the following command to start the interactive installer:

```bash
npx dom-to-pptx-skills
```

The installer will ask you:
1. **Which AI Agent** you are using.
2. **Installation scope** (Local `.agent/skills` for current project or Global for all projects).
3. It will then automatically copy the latest optimized prompts and templates to your agent's directory.

---

## Usage

This library is intended for use in the browser (React, Vue, Svelte, Vanilla JS, etc.).

### 1. Basic Example (Auto-Font Embedding)

By default, `dom-to-pptx` attempts to automatically find and embed your web fonts.

```javascript
import { exportToPptx } from 'dom-to-pptx';

document.getElementById('export-btn').addEventListener('click', async () => {
// Pass the CSS selector of the container
await exportToPptx('#slide-container', {
fileName: 'slide-presentation.pptx',
});
});
```

### 2. Manual Font Configuration (Optional)

If you are using external fonts (like Google Fonts) that are hosted on a server without CORS headers, automatic detection might fail. In that case, you can explicitly pass the font URLs:

```javascript
import { exportToPptx } from 'dom-to-pptx';

await exportToPptx('#slide-container', {
fileName: 'report.pptx',
// Optional: Only needed if auto-detection fails due to CORS
fonts: [
{
name: 'Roboto',
url: 'https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu4mxK.woff2',
},
],
});
```

### 3. Multi-Slide Example

To export multiple HTML elements as separate slides, pass an array of elements or selectors:

```javascript
import { exportToPptx } from 'dom-to-pptx';

document.getElementById('export-btn').addEventListener('click', async () => {
const slideElements = document.querySelectorAll('.slide');
await exportToPptx(Array.from(slideElements), {
fileName: 'multi-slide-presentation.pptx',
});
});
```

### 4. SVG Vector Export (Editable Charts)

If your HTML contains SVG elements (like charts), you can keep them as vectors for editing in PowerPoint:

```javascript
import { exportToPptx } from 'dom-to-pptx';

await exportToPptx('#slide-with-charts', {
fileName: 'editable-charts.pptx',
svgAsVector: true, // SVGs remain as vectors, not rasterized
});
```

In PowerPoint, right-click the SVG image and select **"Convert to Shape"** (or **Group > Ungroup**) to make it fully editable.

### 5. Browser Usage (Script Tags)

You can use `dom-to-pptx` directly via CDN. The bundle includes all dependencies.

```html

document.getElementById('export-btn').addEventListener('click', async () => {
// The library is available globally as `domToPptx`
await domToPptx.exportToPptx('#slide-container', {
fileName: 'slide.pptx',
});
});

```

## Recommended HTML Structure

We recommend building your slide container at **1920x1080px**. The library will handle the downscaling to fit the PowerPoint slide (16:9).

```html

LIVE DATA

Quarterly

Performance

Visualizing the impact of high-fidelity DOM conversion on presentation workflows.

Pixel-perfect Shadows

Complex Gradients

Revenue Breakdown

Fiscal Year 2024

Total Sales

$124,500

+14.5%

Active Users

45.2k

Analysis Summary

The
Q3 projection
exceeds expectations due to the new
optimization algorithm. We observed a
240% increase
in processing speed across all nodes.

Confidential

```

## API

### `exportToPptx(elementOrSelector, options)`

Returns: `Promise` - Resolves with the generated PPTX file data (Blob).

**Options Object:**

| Key | Type | Default | Description |
| :--------------- | :-------- | :-------------- | :------------------------------------------------------------------------------------------------------------ |
| `fileName` | `string` | `"export.pptx"` | The name of the downloaded file. |
| `autoEmbedFonts` | `boolean` | `true` | Automatically detect and embed used fonts. |
| `fonts` | `Array` | `[]` | Manual array of font objects: `{ name, url }`. |
| `skipDownload` | `boolean` | `false` | If `true`, the file is not downloaded automatically. Use the returned `Blob` for custom handling (upload). |
| `svgAsVector` | `boolean` | `false` | If `true`, keeps SVG elements as vectors (not rasterized). Enables "Convert to Shape" in PowerPoint. |
| `layout` | `string` | `"LAYOUT_16x9"` | Slide layout name (e.g., `LAYOUT_4x3`, `LAYOUT_16x10`, `LAYOUT_WIDE`). |
| `width` | `number` | `10` | Custom slide width in inches (requires `height` to be set). |
| `height` | `number` | `5.625` | Custom slide height in inches (requires `width` to be set). |
| `listConfig` | `object` | `undefined` | Global overrides for list styles. Structure: `{ color: string, spacing: { before: number, after: number } }`. |

**List Configuration Example:**

```javascript
listConfig: {
spacing: {
before: 10, // Space before bullet (pt)
after: 5 // Space after bullet (pt)
}
}
```

## Important Notes

1. **Fonts & CORS:**
- **Automatic Embedding:** Works perfectly for local fonts and external fonts served with correct CORS headers.
- **Google Fonts:** For auto-detection to work with Google Fonts, you must add `crossorigin="anonymous"` to your link tag:
``
- If a font cannot be accessed due to CORS, the library will log a warning and proceed without embedding it (PowerPoint will fallback to Arial).

2. **Layout System:** The library does not "read" Flexbox or Grid definitions directly. It measures the final `x, y, width, height` of every element relative to the slide root and places them absolutely. This ensures 100% visual accuracy regardless of the CSS layout method used.

3. **CORS Images:** External images (`` tags) must also be served with `Access-Control-Allow-Origin: *` headers to be processed by the rounding/masking engine.

## License

## Acknowledgements

This project is built on top of [PptxGenJS](https://github.com/gitbrent/PptxGenJS). Huge thanks to the PptxGenJS maintainers and all contributors — dom-to-pptx leverages and extends their excellent work on PPTX generation.

ecosyste.ms

Data

Tools

Indexes

Applications

Experiments

Awesome

https://github.com/atharva9167j/dom-to-pptx

Awesome Lists containing this project

README

Quarterly

Performance

Revenue Breakdown

$124,500

45.2k

Analysis Summary

https://github.com/atharva9167j/dom-to-pptx

Awesome Lists containing this project

README

Quarterly Performance

Revenue Breakdown

$124,500

45.2k

Analysis Summary

Quarterly

Performance