How to convert HTML slides to PPTX and keep the design

Updated: 2026-10-14 · Dawwerni team

To convert HTML slides to PPTX without losing the design, build every slide as a fixed 1920x1080 px element, load web fonts before capture, avoid vw and vh units inside slides, make the final animation state the default style, and keep speaker notes in an aside with the class notes. A converter then turns each slide into one full-slide image in a 16:9 PowerPoint file.

Why HTML slides often break in PowerPoint

An HTML deck is a web page that happens to look like slides. It adapts to the browser window, waits for fonts from a CDN, and often animates content in as you click or scroll. PowerPoint works the other way round: a slide is a fixed canvas of 13.333 x 7.5 inches (the widescreen 16:9 format), and whatever sits on it at export time is what your audience sees.

Converting means freezing a moving, resizable page into fixed frames. When the deck was written with that in mind, the result is pixel-faithful. When it wasn't, you get cropped headings, fallback fonts, empty charts or bullet points stuck halfway through a fade. The five rules below make the difference, whether you hand-code the deck, use reveal.js, or ask an AI assistant to generate it and then run it through our free HTML to PPTX converter.

Rule 1: put every slide on a fixed 1920x1080 stage

This is the rule that matters most. Give every slide the same fixed size in CSS pixels, 1920x1080 (or 1280x720, the same 16:9 ratio), and clip anything that overflows. A fixed stage looks the same in a small laptop window, on a 4K monitor and inside a converter.

.slide {
  width: 1920px;
  height: 1080px;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  padding: 120px 160px;
}

Use one predictable element per slide

Converters look for patterns. The HTML to PPTX tool detects reveal.js decks, elements with the class slide, sections sized 1920x1080 or 1280x720, and CSS page breaks. Each detected slide becomes exactly one PowerPoint slide. Without any of these signals, the page is treated as a long document and split into pages, which is rarely what you want for a presentation.

If you also want the deck to fit a small screen when people open the HTML file directly, scale the whole stage with a CSS transform from a short script instead of making the slide itself fluid. The slide keeps its 1920x1080 layout; only the on-screen preview is scaled.

Rule 2: make sure fonts are loaded before capture

A slide designed in Inter or Poppins and captured in Arial looks wrong straight away: lines wrap differently, titles overflow and alignment drifts. Web fonts load asynchronously, so a capture taken too early uses the fallback font.

• Load Google Fonts with a link tag in the head, with preconnect hints, rather than an @import at the end of a stylesheet.
• Keep display=swap in the URL so text is never invisible while the font loads.
• For self-hosted fonts, use relative paths and keep the files next to the HTML; put everything in a .zip so the converter can resolve the paths.
• Choose a fallback stack close in width (for example Inter, then system-ui, then sans-serif) to limit the damage if a font fails.

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">

Wait for fonts in your own scripts

Our converter waits for the document fonts and images before capturing, and you can add a few seconds of extra waiting for pages that build themselves with scripts. If your deck measures text in JavaScript (to fit titles, for example), run that code after document.fonts.ready resolves.

document.fonts.ready.then(() => {
  document.body.classList.add('fonts-loaded');
});

Rule 3: no viewport-dependent units inside a slide

Units such as vw, vh and vmin tie sizes to the browser window, so the slide reflows whenever the window changes. At capture time the window is whatever the converter uses, not your screen, and a heading set to 6vw can come out much larger or smaller than you designed it.

Inside a fixed stage, use px (or rem with a fixed root size) for type, spacing and positions. clamp() with a vw middle value has the same problem: keep it for responsive websites, not for slides.

/* Fragile: depends on the browser window */
.slide h1 { font-size: 6vw; }
.slide .hero { height: 100vh; }

/* Stable: depends only on the 1920x1080 stage */
.slide h1 { font-size: 112px; }
.slide .hero { height: 100%; }

• A grid such as repeat(3, 1fr) is fine, because the stage width is fixed.
• Media queries that switch to one column below a certain width are a trap: they react to the window, which may be narrower than the slide.
• Percentages are fine when they refer to the slide itself (height: 100% of a 1080 px slide), not to the viewport.

Rule 4: no animations at capture time

Entrance animations are the most common cause of empty or half-transparent slides. Libraries and AI-generated decks often start elements at opacity 0 and fade them in when the slide becomes active or scrolls into view. A capture taken at the wrong moment records the starting state.

Our converter freezes CSS animations and transitions at their end state and scrolls through the page so scroll-reveal content appears. You make that reliable by writing animations so the visible state is the element's normal style and only the starting frame is animated:

/* The visible state is the default; only the "from" frame is animated */
@keyframes rise {
  from { opacity: 0; transform: translateY(24px); }
}
.slide .bullet { animation: rise 0.6s ease-out both; }

/* No motion when printing or for users who ask for less motion */
@media print, (prefers-reduced-motion: reduce) {
  .slide * { animation: none !important; transition: none !important; }
}

• Avoid content that only appears when JavaScript adds a class after a click or a timer: if the class is never added, the element stays hidden.
• PowerPoint will not replay your CSS animations. If a point must appear step by step, split it into several slides.
• Charts: turn off Chart.js animations (animation: false in the options) so the chart is complete as soon as it is drawn.

Rule 5: write speaker notes in an aside with the class notes

reveal.js made a simple convention popular: speaker notes live in an aside element with the class notes, inside the slide they belong to. The PPTX export of our converter reads these elements and puts their text in the PowerPoint notes of the matching slide, where Presenter View shows them.

<section class="slide">
  <h2>Revenue grew 18% in Q3</h2>
  <p>Driven by repeat customers in two regions.</p>
  <aside class="notes">
    Mention the July pricing change. Source: finance dashboard, 30 Sept.
  </aside>
</section>

.slide .notes { display: none; }

Why notes are worth the effort

Outside reveal.js the browser shows the aside like any other element, so hide it with the CSS rule above. Notes are text, so they stay editable in PowerPoint even though the slide itself is an image. That makes them the right place for talking points, sources and figures you may want to adjust later.

A minimal deck that converts cleanly

Here is a complete two-slide deck that follows all five rules. Save it as deck.html and open it in a browser: the slides are stacked vertically on screen, and each one converts to exactly one PowerPoint slide. The print block also makes Print / Save as PDF in Chrome or Edge produce one 16:9 page per slide with the dark background kept.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Q3 review</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
<style>
  * { box-sizing: border-box; margin: 0; }
  body { background: #e5e7eb; font-family: 'Inter', system-ui, sans-serif; }
  .slide {
    width: 1920px; height: 1080px; position: relative; overflow: hidden;
    padding: 120px 160px; margin: 0 auto 40px;
    background: #0f172a; color: #f8fafc;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .slide h1 { font-size: 112px; line-height: 1.05; }
  .slide h2 { font-size: 72px; margin-bottom: 48px; }
  .slide p, .slide li { font-size: 40px; line-height: 1.4; }
  .slide ul { padding-left: 48px; }
  .slide .notes { display: none; }
  @media print {
    @page { size: 1920px 1080px; margin: 0; }
    body { background: none; }
    .slide { margin: 0; break-after: page; }
  }
</style>
</head>
<body>
  <section class="slide">
    <h1>Q3 review</h1>
    <p>Sales team, October</p>
    <aside class="notes">Welcome everyone, 20 minutes plus questions.</aside>
  </section>
  <section class="slide">
    <h2>Three things to remember</h2>
    <ul>
      <li>Revenue up 18%</li>
      <li>Churn down to 3.1%</li>
      <li>Two new regions open</li>
    </ul>
    <aside class="notes">Pause after each point.</aside>
  </section>
</body>
</html>

PPTX or PDF for presenting?

Be clear about what you get. In the PPTX each slide is a full-slide image, which is why it looks exactly like the HTML, but the text on the slide is not editable. A PDF made with the browser's print engine keeps the text selectable and searchable, but has no speaker notes.

• Need to edit wording often? Rebuild the text-heavy slides in PowerPoint and keep the converted images for charts, diagrams and illustrations.
• Only sharing to read? Use the HTML to PDF converter or follow our guide to converting HTML to PDF for free.

Converting the deck, step by step

1. Save the deck as a single .html file, or zip it with its images, CSS and font files if it uses relative paths.
2. Open the HTML to PPTX converter and drop the file or paste the code. Nothing is uploaded: the conversion runs in your browser, with no sign-up and no watermark.
3. Check that the preview shows the number of slides you expect. If it does not, your slides are probably not marked up as .slide elements or fixed 16:9 sections.
4. If the deck uses the Tailwind CDN or Chart.js, raise the wait time by a few seconds so styles and charts finish rendering.
5. Download the .pptx, open it in PowerPoint and check Presenter View for your notes.

Two limits to know: images hotlinked from other websites that do not send CORS headers can be missing in the PPTX (put them in the zip instead), and WebGL canvases or video frames may come out blank.

If the deck came out of an AI assistant, the Claude artifact to PowerPoint guide shows how to ask for this structure upfront, and the guide to fixing broken HTML to PDF exports covers fonts, charts and backgrounds in more detail.