dom-to-pptx

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

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.

$3

- SVG Vector Export: New svgAsVector option keeps SVG elements as vectors instead of rasterizing them. This enables "Convert to Shape" in PowerPoint for editable charts and graphics.
- Fontawesome Icon partially rendering: Solved icon clipping issues by injecting a global style tag to enforce FontAwesome font family and correct image display properties during potential rasterization.
- Recursion Logic Resolved recursion issues where containers were incorrectly rasterized as images, making children uneditable.

Features

$3

- 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).

$3

- 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.

$3

- 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.

$3

- 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
`

Usage

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

$3

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',
});
});
`

$3

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

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',
});
});
`

$3

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.

$3

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

`html



`

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


id="slide-container"
class="slide w-[1000px] h-[562px] bg-white rounded-xl overflow-hidden relative shadow-2xl shadow-black/50 flex"
>