How to make great presentations in HTML

We have started to build our decks in HTML. The magic powers of HTML is about what a page can do that a document cannot. Here we use the same powers in a presentation.

Why HTML for presentations

A slide in HTML is a web page, so it can hold anything a page holds. A chart can draw itself, and a slider can answer a what-if question from the room. A prototype can run right on the slide.

The slides are written as text, so Claude Code can change many of them with one prompt and keep the style the same.

The deck below is this guide in nine slides. Click it and use the arrow keys, or press F for full screen.

Why we use building blocks

One long HTML file is fine when you make one deck. But when you want many reusable decks over time, it is smart to build a presentation pipeline with a few more building blocks. We use these four.

Building block	What it is	What it does for you
React	A library	You design a block once and use it on every slide.
Tailwind	A styling framework	Keeps colours, sizes and spacing the same everywhere.
TypeScript	The language the slides are written in	Catches mistakes in the code while the deck is being built, for example a slide without a title.
Vite	A build tool	Shows the deck in your browser while you work, and with an add-on packs everything into one HTML file at the end.

You do not need to know any of them. Claude Code sets them up, and you see the result in the browser.

YouCopy

Set up a new presentation project with React, Tailwind, TypeScript and Vite that turns every deck into one HTML file, and open the first deck in my browser so I can follow along.

Define your design

Before the first slide, decide the colours, the accent colour, the fonts, the text sizes, the spacing and where the logo sits. Claude Code keeps it in one place, and Tailwind turns it into the styles every slide uses.

Change the brand colour once, and every slide in every deck changes with it.

YouCopy

Before we make any slides, set up the design for my decks. Use our colours [colours], our font [font] and our logo. Pick one accent colour and fixed sizes for titles, text and spacing. Keep it all in one place that every slide uses.

Blocks on a slide

A component is a block you design once and use on many slides, such as a title, a list of points, a chart, a quote or a picture. A whole layout is a block too.

The deck shows one slide at a time and scales it to the screen, so it looks the same on a laptop and on a projector.

YouCopy

Build a deck that shows one slide at a time, scaled to fit the window. Make blocks for a title, points, a chart and a quote, two layouts that combine them, and three example slides.

Keyboard and full screen

An HTML deck can also have shortcut keys, for example for full screen, for showing every slide in a grid or for starting a timer.

The slide number sits in the web address. A link can then open a given slide, and reloading keeps your place.

YouCopy

Add keyboard control to the deck. The arrow keys and space move between slides, F turns full screen on and off, and G shows every slide in a grid. Put the slide number in the web address.

A side panel and hidden slides

A practical feature to add is the ability to hide slides and move them around. The side panel shows every slide as a small picture down the left edge, the way PowerPoint does. Click one and you go straight to that slide. The panel helps most while you build.

Hidden slides are the backup slides you keep for a question that may come up. The arrow keys skip them, but the panel shows them greyed out.

YouCopy

Add a side panel with every slide as a small picture. P opens and closes it. Let me drag slides in the panel to change the order, and mark a slide as hidden. Skip it when I move with the keys, and show it greyed out in the panel.

Speaker notes in their own window

PowerPoint has a presenter view with your notes, the next slide and the time. With HTML you can build exactly the same just by asking for it, for example a second window that opens when you press N, and that you drag to your laptop screen.

YouCopy

Add speaker notes to the deck. N opens a separate window with the notes for the current slide, a small picture of the next one and a clock. Update it on every slide change.

Animations

Because a slide is a web page, almost anything that moves on the web can move on a slide. Here are a few that work well in a presentation.

In our animated decks, the animation starts when a slide appears and plays again when you come back. The deck near the top also has points that appear one at a time.

YouCopy

Build the slides step by step, so each press of the right arrow shows the next point before the deck moves on. Fade each point in gently, and show everything without movement for people who have turned motion off.

A figure can also zoom when you click it. Try it on the figure below.

YouCopy

Make the figure on this slide clickable, so it zooms in on the detail I click and zooms back out on the next click.

Interactive charts

When you ask Claude Code for a chart, the browser draws it from your numbers. It can also be an interactive chart or a dashboard right inside your deck.

The numbers behind every chart live inside the one HTML file you send. Nobody needs a link to a spreadsheet, and the chart works offline. But anyone who gets the file also gets the numbers, so leave out what should not be shared.

YouCopy

Make a spider chart of our AI readiness from the numbers I paste below, with one line for today and one for our goal. Show the exact number when I point at it, and keep the data and the chart inside the deck.

One file to share

While you work, the deck is a folder of files. That is fine when you present it yourself, but a colleague wants one file to open.

Ask Claude Code for the one-file version and you get a single HTML file with every slide, font and picture inside. You can email it, and it opens in a browser with a double-click. We tried it on a small deck, and in Chrome the keys, a hidden slide and the notes window all worked.

YouCopy

Make a one-file version of this deck that I can email, with every slide, font and picture inside. Open it from my desktop and check that the keys, the hidden slides and the notes window work.

If someone needs a PDF, ask Claude Code for a Download PDF button. It puts every slide on its own page and opens the browser's print window, so the PDF always matches the deck you have open.

YouCopy

Add a Download PDF button to the deck. When I click it, put every slide on its own page at full size with its background colours and every animation finished, hide the buttons and the notes, and open the window for saving it as a PDF.

Where to start

Start with a presentation you are giving soon. Ask Claude Code for the slides and the keys first, and add the rest when you need it.

YouCopy

Turn the outline I paste below into an HTML deck with one idea and speaker notes per slide. Keep the style the same on every slide, and ask me before you add a chart.

If you have not built anything with an AI agent before, The vibe coding playbook for beginners takes you from the first idea.