DOM-to-PPTX: High-Fidelity HTML to PowerPoint Converter in JavaScript

Authoratharva9167j

Last UpdateSeptember 14, 2026

LicenseMIT

Features:

Multi-slide export from arrays of DOM elements or selectors.
Automatic web-font discovery and embedding, plus manual font URLs when needed.
Vector SVG export through svgAsVector.
Canvas capture for Chart.js, ECharts, and other canvas-rendered content.
Native PowerPoint entrance, exit, and slide transition effects from documented CSS classes.
Speaker notes from data-pptx-notes.
::before and ::after export, with image capture for complex CSS shapes.
Standard, portrait, and custom slide dimensions.
Client-side browser export and Puppeteer-based command-line export.
CSS conversion for linear gradients, borders, shadows, rounded corners, rich text, hyperlinks, typography, opacity, and blur effects.

Use Cases:

Export web dashboards with charts, tables, metrics, and styled cards to editable PowerPoint slides.
Generate recurring reports from HTML views that already contain application or business data.
Convert HTML slide decks into PPTX files for editing, sharing, speaker notes, and native presentation playback.
Create PowerPoint documentation from web-based design systems, component demos, and training material.

How To Use It:

1. Install dom-to-pptx

# npm
npm install dom-to-pptx

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

2. Export One HTML Element

Pass a CSS selector or DOM element to exportToPptx(). The function returns a Promise<Blob> and downloads the PPTX automatically unless skipDownload is enabled.

document.getElementById('download-btn').addEventListener('click', async () => {
  await exportToPptx('#slide-container', {
    fileName: 'dashboard-report.pptx'
  });
});

3. Export Multiple Slides

Pass an array of DOM elements or selectors. Each item becomes one PowerPoint slide.

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

4. Use dom-to-pptx Directly in the Browser

Load the browser bundle by itself. It contains the runtime dependencies required for browser export.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/dom-to-pptx.bundle.js"></script>
<script>
document.getElementById('download-btn').addEventListener('click', async () => {
  await domToPptx.exportToPptx('#slide-container', {
    fileName: 'presentation.pptx'
  });
});
</script>

5. Create the Slide Container

Use a fixed 16:9 container such as 1920×1080 or 960×540 for widescreen slides. dom-to-pptx reads each element’s final browser coordinates and maps those measurements to the PowerPoint slide.

<div
  id="slide-container"
  style="
    width: 960px;
    height: 540px;
    box-sizing: border-box;
    padding: 64px;
    background: linear-gradient(135deg, #111827, #312e81);
    color: #ffffff;
    font-family: Inter, Arial, sans-serif;
  "
>
  <h1 style="font-size: 52px; margin: 0 0 24px;">
    Quarterly Performance
  </h1>
  <p style="font-size: 24px; line-height: 1.4; max-width: 720px;">
    Export this HTML layout as editable PowerPoint content.
  </p>
</div>

6. Embed Web Fonts

autoEmbedFonts is enabled by default. Font discovery follows nested cross-origin @import stylesheet chains and extracts the @font-face sources it can access. Pass explicit font URLs when automatic discovery cannot reach a font source.

await exportToPptx('#slide-container', {
  fileName: 'presentation.pptx',
  autoEmbedFonts: true,
  fonts: [
    {
      name: 'Roboto',
      url: 'https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu4mxK.woff2'
    }
  ]
});

7. Keep SVG Graphics as Vectors

Set svgAsVector to true for SVG charts, diagrams, icons, or illustrations that should stay vector-based in the PPTX file.

await exportToPptx('#slide-with-svg', {
  fileName: 'vector-slide.pptx',
  svgAsVector: true
});

8. Add PowerPoint Speaker Notes

Place data-pptx-notes on the slide root or a nested element. The text is written to the notes pane for that PowerPoint slide.

<div
  class="slide"
  data-pptx-notes="Explain the quarterly revenue trend before moving to the next slide."
>
  <h2>Quarterly Revenue</h2>
</div>

9. Export Animations and Slide Transitions

Configure element animations and slide transitions with CSS classes. Load animations.css and transitions.css to preview element motion in the browser. Slide-to-slide transitions are written to the PPTX file but are not previewed in the browser.

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/[email protected]/dist/animations.css"
/>
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/[email protected]/dist/transitions.css"
/>
<div class="slide slide-transition-fade">
  <h1 class="fade-in animate-duration-[1000]">Quarterly Results</h1>
  <p class="fly-in to-up animate-delay-[200] animate-trigger-after">
    Revenue increased during the quarter.
  </p>
</div>

Element Animation Classes

Entrance animations:

fade-in: Fade entrance.
appear: Instant appearance.
zoom-in: Zoom entrance.
fly-in: Fly entrance. Use to-up, to-down, to-left, or to-right.
wipe-in: Wipe entrance. Use to-up, to-down, to-left, or to-right.
split-in: Split entrance. Use vertical or horizontal.
wheel: Circular wheel entrance.
bounce-in: Bounce entrance.
checkerboard-in: Checkerboard entrance.
random-bars-in: Random bars entrance. Use vertical or horizontal.

Exit animations:

fade-out: Fade exit.
disappear: Instant disappearance.
zoom-out: Zoom exit.
fly-out: Fly exit. Use to-up, to-down, to-left, or to-right.
wipe-out: Wipe exit. Use to-up, to-down, to-left, or to-right.
split-out: Split exit. Use vertical or horizontal.
wheel-out: Circular wheel exit.
bounce-out: Bounce exit.
checkerboard-out: Checkerboard exit.
random-bars-out: Random bars exit. Use vertical or horizontal.

Timing, trigger, and text-build classes:

animate-duration-[MS]: Sets animation duration in milliseconds.
animate-delay-[MS]: Sets animation delay in milliseconds.
animate-trigger-on-click: Starts the animation on a PowerPoint click.
animate-trigger-with or with-previous: Starts with the preceding animation.
animate-trigger-after or after-previous: Starts after the preceding animation finishes.
paragraph or animate-build-paragraph: Reveals paragraph or list rows incrementally.
letter or animate-build-letter: Reveals text character by character.

Slide Transition Classes

Classic transitions:

slide-transition-fade
slide-transition-cut
slide-transition-push
slide-transition-wipe
slide-transition-pull
slide-transition-split
slide-transition-strips
slide-transition-dissolve
slide-transition-checker
slide-transition-randomBar
slide-transition-circle
slide-transition-comb
slide-transition-wheel
slide-transition-newsflash
slide-transition-blinds
slide-transition-flash

PowerPoint 2010 transition classes:

slide-transition-honeycomb
slide-transition-ripple
slide-transition-glitter
slide-transition-vortex
slide-transition-shred-in
slide-transition-shred-out
slide-transition-shred-rect-in
slide-transition-shred-rect-out
slide-transition-switch
slide-transition-flip
slide-transition-gallery
slide-transition-prism
slide-transition-prism-inverted
slide-transition-prism-inverted-r
slide-transition-warp
slide-transition-doors

PowerPoint 2013+ transition classes:

slide-transition-wind-left
slide-transition-wind-right
slide-transition-airplane-left
slide-transition-airplane-right
slide-transition-origami-left
slide-transition-origami-right
slide-transition-fallover-left
slide-transition-fallover-right
slide-transition-drape-left
slide-transition-drape-right
slide-transition-prestige
slide-transition-fracture
slide-transition-crush
slide-transition-pagecurldouble
slide-transition-pagecurldouble-r
slide-transition-pagecurlsingle
slide-transition-pagecurlsingle-r
slide-transition-curtains
slide-transition-peelOff

Transition modifiers:

transition-dir-u, transition-dir-d, transition-dir-l, and transition-dir-r: Up, down, left, and right directions.
transition-dir-in and transition-dir-out: Inward and outward directions.
transition-dir-ld and transition-dir-rd: Left-down and right-down strip directions.
transition-dir-horz and transition-dir-vert: Horizontal and vertical direction variants.
transition-orient-horz and transition-orient-vert: Horizontal and vertical split orientation.
transition-pattern-hexagon and transition-pattern-diamond: Glitter patterns.
transition-spokes-1 and transition-spokes-4: Wheel spoke counts.
transition-duration-fast, transition-duration-normal, and transition-duration-slow: Preset transition speeds.
transition-dur-[MS]: Custom transition duration in milliseconds, such as transition-dur-800.

Use applyBrowserAnimations() to preview click-triggered element animations in the browser.

domToPptx.applyBrowserAnimations(document.body, {
  enableClick: true
});

10. Set the Slide Size

Use layout for a predefined PowerPoint layout.

await exportToPptx('#slide-container', {
  fileName: 'widescreen.pptx',
  layout: 'LAYOUT_WIDE'
});

Set both width and height for custom slide dimensions in inches.

await exportToPptx('#slide-container', {
  fileName: 'custom-size.pptx',
  width: 10,
  height: 5.625
});

11. Customize List Formatting

await exportToPptx('#slide-container', {
  fileName: 'list-styles.pptx',
  listConfig: {
    color: '334155',
    spacing: {
      before: 10,
      after: 5
    }
  }
});

12. Return a Blob Without Automatic Download

Set skipDownload to true when the generated file needs custom handling such as an application upload flow.

const pptxBlob = await exportToPptx('#slide-container', {
  fileName: 'report.pptx',
  skipDownload: true
});
// Use pptxBlob in your own upload or storage workflow.

13. Export HTML from the Command Line

Use the unified export command or the standalone headless exporter for local HTML files and remote URLs.

# Unified command
npx dom-to-pptx export slides.html --output presentation.pptx
# Standalone exporter
npx dom-to-pptx-exporter slides.html --output presentation.pptx

CLI options:

--output, -o <path>: Sets the output PPTX path. The default is the input file’s folder.
--selector, -s <css>: Selects slide containers. The default selector is .slide.
--inject: Injects the local browser bundle when the source page does not load dom-to-pptx.
--title <text>: Sets presentation title metadata.
--author <text>: Sets presentation author metadata.
--width <number>: Sets slide width in inches. The default is 10.
--height <number>: Sets slide height in inches. The default is 5.625.
--browser-width, --bw <number>: Sets the headless browser viewport width.
--browser-height, --bh <number>: Sets the headless browser viewport height.
--no-pseudo: Disables ::before and ::after processing.

JavaScript API Reference

`exportToPptx(elementOrSelector, options)`

Converts one or more rendered DOM elements into a PPTX file and returns Promise<Blob>.

elementOrSelector

string: A selector for one slide element.
HTMLElement: A DOM element.
Array<string | HTMLElement>: Multiple selectors or elements for a multi-slide presentation.

options

fileName (string, default "export.pptx"): Sets the downloaded file name.
autoEmbedFonts (boolean, default true): Detects and embeds used fonts automatically.
fonts (Array<{ name, url }>, default []): Supplies font files manually.
skipDownload (boolean, default false): Stops the automatic browser download and returns the generated Blob for custom handling.
svgAsVector (boolean, default false): Preserves SVG elements as vectors.
layout (string, default "LAYOUT_16x9"): Selects a PowerPoint layout such as LAYOUT_4x3, LAYOUT_16x10, or LAYOUT_WIDE.
width (number, default 10): Sets a custom slide width in inches and requires height.
height (number, default 5.625): Sets a custom slide height in inches and requires width.
listConfig (object, default undefined): Overrides list color and paragraph spacing through { color, spacing: { before, after } }.
skipNormalize (boolean, default false): Returns the raw PptxGenJS package before the library’s PPTX normalization pass. This option is intended for debugging.
includePseudoElements (boolean, default true): Controls processing of ::before and ::after pseudo-elements.

`applyBrowserAnimations(parentElement, options)`

Applies browser-side animation behavior for previewing the element animation timeline before PPTX export.

parentElement (HTMLElement, required): Root element containing the slide stage or presentation.
options (object, default {}): Animation preview settings.
enableClick (boolean, default false): Advances click-triggered animation steps when the slide is clicked. Automatic playback is used when this option is false.

Common HTML and CSS Compatibility Notes

dom-to-pptx reads final browser coordinates for Flexbox and Grid layouts. It does not translate Flexbox or Grid rules into PowerPoint layout primitives.

Text, images, links, lists, tables, Canvas, and SVG content are handled by the exporter.
Linear gradients, borders, border radius, box shadows, font styles, text transforms, letter spacing, padding, opacity, and blur effects have dedicated conversion logic.
position: relative and position: absolute work with rendered coordinate extraction.
transform: rotate() is recognized. transform: scale() is not supported, and transform: translate() has partial support.
Radial gradients and text-shadow have limited conversion fidelity.
External images need CORS access when canvas processing is required.
Cross-origin font discovery recursively follows nested @import stylesheet chains. Relative font URLs in headless and jsdom environments resolve against the document base URL.
Rounded badges and pills with visible borders or border-radius export as independent PowerPoint shapes. Their borders, fills, insets, and rounded geometry are preserved.
Nested and indented list items map to native PowerPoint paragraph levels. Bullet glyphs and text stay aligned at each hierarchy level.
Only documented animation and transition classes are translated into PowerPoint motion effects. Other CSS animations export as static computed content.

Alternatives & Related Resources:

PptxGenJS: Create PowerPoint files directly from JavaScript through lower-level slide, shape, text, chart, image, and table APIs.
html2canvas: Capture rendered DOM content as a Canvas image when editable PowerPoint elements are not required.
snapDOM: Capture DOM elements as images, SVG, or Canvas output from JavaScript.
slide.css: Build browser presentations with CSS scroll snapping and CSS custom properties.
Hacker’s Tiny Slide Deck: Create responsive browser slide decks from Markdown.

FAQs:

Q: Why do external images appear blank in the generated PowerPoint file?
A: The image server must permit cross-origin access when dom-to-pptx needs to process image pixels. Use image URLs with suitable CORS headers or serve the files from your application domain.

Q: How does dom-to-pptx handle custom web fonts?
A: autoEmbedFonts is enabled by default. dom-to-pptx scans used fonts, follows accessible cross-origin @import stylesheet chains, and embeds discovered font files into the PPTX. Relative font URLs also resolve correctly in headless exports. Pass explicit { name, url } entries through fonts when automatic discovery cannot reach a font source.

Q: Can I export SVG charts as editable PowerPoint graphics?
A: Yes. Set svgAsVector: true to preserve SVG content as vectors. PowerPoint can convert suitable SVG graphics to shapes for further editing.

Q: Can dom-to-pptx export HTML files from a build script or terminal?
A: Yes. Use npx dom-to-pptx export or npx dom-to-pptx-exporter to render local HTML files or remote URLs through the headless exporter.

Q: How do I create a presentation with different content on each slide?
A: Create one HTML container per slide and pass an array of those elements or selectors to exportToPptx(). Each container is converted into its own PowerPoint slide.

Changelog:

v2.1.2 (09/14/2026)

Added recursive font detection through cross-origin @import stylesheet chains.
Fixed relative font URL resolution in headless and jsdom environments.
Fixed rounded badge and pill export to preserve borders, fills, insets, and native PowerPoint geometry.
Fixed hierarchical sub-bullet indentation so bullet glyphs and text move together at each list level.
Added internal margin normalization helpers and text-container cache memoization for more consistent export processing.

v2.1.1 (07/21/2026)

Fixed automatic font embedding when autoEmbedFonts is left at its default value.
Added fallback scanning for fonts referenced through cross-origin stylesheets.

v2.1.0 (07/21/2026)

Added PowerPoint speaker notes through data-pptx-notes.
Added hybrid ::before and ::after rendering.
Added --no-pseudo and includePseudoElements.
Added custom headless browser viewport dimensions.
Improved font embedding, inline SVG handling, and animation timing.

v2.0.3 (07/05/2026)

Fixed bullet formatting and indentation.
Improved translucent background and border rendering.
Fixed embedded font variants and inline SVG animation parsing.

v2.0.2 (06/30/2026)

Corrected the headless exporter command to dom-to-pptx-exporter.

v2.0.1 (06/21/2026)

Added the workspace monorepo layout and standalone exporter and skills packages.
Fixed independent NPX launchers and animation timing defaults.

v2.0.0 (06/20/2026)

Added native PowerPoint animations and slide transitions.
Added the unified CLI.
Added WOFF2 font handling, vertical text, rotation, and preformatted whitespace improvements.

v1.1.10 (06/01/2026)

Added text content support for ::before and ::after.
Improved CSS shape handling, stacking order, letter spacing, and slide aspect matching.

v1.1.9 (05/16/2026)

Added native hyperlinks and improved Flexbox axis handling.
Improved vertical text, text wrapping, opacity inheritance, and PowerPoint compatibility.
Added the skipNormalize debugging option.

v1.1.8 (05/03/2026)

Added the AI skills installer and vertical-align handling.
Fixed font-related PowerPoint XML issues and vertical alignment regressions.

v1.1.7 (04/21/2026)

Added URL-based CSS background image handling.
Improved font precision, CJK wrapping, table line breaks, vertical writing, and rounded-corner stability.

v1.1.6 (04/05/2026)

Added portrait and custom slide dimensions.
Improved table typography, gradients, column widths, borders, and nested rich text.

v1.1.5 (02/07/2026)

Added the svgAsVector option for vector SVG export.
Fixed editable child handling inside partially rounded containers and improved FontAwesome rendering.

v1.1.4 (01/19/2026)

Added Tailwind CSS v4 color parsing.
Added text gradient fallback and list marker customization.
Improved CJK wrapping, text alignment, line breaks, decorative shapes, and inline badges.

v1.1.3 (01/12/2026)

Added basic HTML table export for <table>, <th>, <td>, and <tr>.

v1.1.2 (01/08/2026)

Added Canvas export, skipDownload, listConfig, and pseudo-element icon handling.
Improved native lists, line height, and paragraph spacing.

v1.1.1 (01/02/2026)

Fixed list rendering, geometric shape layout, and text wrapping.

v1.1.0 (12/29/2025)

Added automatic font discovery and embedding.
Added manual font configuration and improved inline text detection.

v1.0.9 (12/28/2025)

Fixed complex linear-gradient parsing and icon visibility inside text or list content.

v1.0.8 (12/12/2025)

Fixed SVG conversion and split SVG handling from web component and icon handling.