HTML slides, start to finish: make, fix, print and present

What HTML slides are

Under the hood an HTML deck is an ordinary web page: text and diagrams in HTML, colors and layout in CSS. The difference is that the page is split into slides. The most common pattern is one <section> per slide, with CSS fixing each slide to a size such as 1280×720px. Some decks add JavaScript to step through the slides; others simply stack them one below the other.

Keep everything in one HTML file and the deck looks the same on any device with a browser. No presentation app, no upload, no account.

HTML slides vs. PowerPoint and Google Slides

The weak spots of HTML slides are the last edits and printing. An AI deck is usually 95% done, yet changing the last few things means reading HTML. Most of the rest of this page is about getting past those two.

Three ways to make them

Ask an AI

The quickest way is to describe your content to Claude or ChatGPT and ask for “a presentation as a single HTML file”. A designed deck with colors and diagrams comes back in under a minute. How you phrase the request, though, decides whether the result is easy to fix and print later. Asking for one file, one section per slide, a fixed slide size and real text instead of text baked into images makes the finishing work much lighter. The reasons and a prompt you can copy are in How to prompt AI for HTML slides that are easy to edit later.

Write them by hand

If you know HTML and CSS, you can write a deck yourself. The smallest version is one <section class="slide"> per slide plus a few lines of CSS for the size. Open it in a browser as it is and the slides appear one below the other.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>My talk</title>
  <style>
    body { margin: 0; background: #e5e5e5; font-family: sans-serif; }
    .slide {
      width: 1280px;
      height: 720px;
      margin: 24px auto;
      padding: 64px;
      box-sizing: border-box;
      background: #fff;
      overflow: hidden;
    }
  </style>
</head>
<body>
  <section class="slide">
    <h1>Title of the talk</h1>
    <p>Your name · Date</p>
  </section>
  <section class="slide">
    <h2>Second slide</h2>
    <ul>
      <li>First point</li>
      <li>Second point</li>
    </ul>
  </section>
</body>
</html>

Stepping through the slides and printing one slide per page are things you add on top. Stepping can come from the presentation export described below, and an example print stylesheet is in the last section of the PDF guide.

Use a slide framework

There are tools built for HTML slides. Three well-known ones:

• reveal.js: a library that treats each HTML <section> as a slide, with keyboard navigation, speaker notes and themes.
• Marp: turns Markdown into slides as HTML, PDF or PowerPoint.
• Slidev: developer-oriented slides written in Markdown, with Vue components mixed in.

When the source is Markdown, as with Marp or Slidev, fix the Markdown rather than the exported HTML. Edits made to the HTML disappear the next time you build from the Markdown.

If you want a template

reveal.js ships with themes that set colors and fonts. chamfer does not have a template gallery (at least not yet). What works well instead is to settle on one prompt and only swap the content each time, which gives you decks in the same shape every time. The ready-to-use prompt is a good starting point.

Fixing a finished deck

AI-made slides tend to leave small things behind: a phrase that reads wrong, a heading that wraps onto two lines, a placeholder image that should be your photo. There are three ways to fix them, and each suits different fixes.

• Ask the AI again: good for big changes such as restructuring or adding slides, but it may change parts you never mentioned
• Edit the HTML by hand: good for changing one value when you know exactly where it is, but you need to read tags and CSS
• Use an editor that lets you edit what you see: good for finishing touches to text, position, size, color and images

For the third, there is chamfer, a free editor that runs in your browser. It opens AI-generated HTML as it is, lets you edit it, and exports the same HTML. Click text to change it in place, drag elements to move them, replace an image with a file from your computer. Everything you did not touch stays exactly as it was. The three approaches compared, and the steps in chamfer with screenshots, are in How to fix AI-generated HTML slides without regenerating them.

Turning them into a PDF

When you need a PDF to submit or send, saving straight from the browser’s print dialog often goes wrong: slides split across pages, background colors disappear, a wide slide shrinks onto portrait A4. HTML has no notion of “this is one slide”, and unless the CSS says otherwise, the browser picks the paper size and skips backgrounds.

There are two fixes. Add a print stylesheet yourself (paper size, a page break per slide, printed backgrounds), or choose As a PDF when exporting from chamfer. chamfer reads the real size of your slides, sets the paper to match and hands the browser’s print dialog one slide per page. Why it happens, the steps, and what to do when it still goes wrong are in Turn HTML slides into a PDF with one slide per page.

Presenting

How you present an HTML deck depends on how it was built.

• If the deck has its own navigation (reveal.js and the like), use it. Open the file in a browser and press the arrow keys.
• If the slides are just stacked one below the other, open the deck in chamfer and press Present in the toolbar to go full screen from the current slide. ← → or Space move between slides and Esc takes you back to editing.
• To present on another computer, or to give the deck to someone else to present, export it As a presentation. You get a single HTML file with a start screen and keyboard navigation built in. Open it and you are presenting: → or Space to go forward, ← to go back, F for full screen and Esc to stop.

You can also make elements appear one at a time (fade, slide in from any side, zoom) and set their order in chamfer. The animations play in order with each click or key press, both when presenting in chamfer and in the exported HTML.

Handing it to someone else

Unless you sign in, chamfer never sends the files you open outside your browser. When you do sign in, the document you are editing is saved to the cloud, so you can open it on another device or show it to others through a view-only link.

Where to start

• You are about to ask an AI for slides → How to prompt AI for HTML slides that are easy to edit later
• You have an AI-made HTML deck and want to fix a few things → How to fix AI-generated HTML slides without regenerating them
• You need a PDF → Turn HTML slides into a PDF with one slide per page
• You want to try the editor first → open chamfer and press Open the sample deck