Claude Code | 7 min read | 2026-04-26 | Updated 2026-04-26 | By Variant Team

Presentation Mode for Claude Code Decks

How presentation mode works for Claude Code decks in Variant: present from the browser, navigate with keys or clicks, keep HTML slides editable, and export a portable deck.

Author: Variant Team. Variant is built by a small team working on HTML-native presentation tools, MCP workflows, and agent-editable decks.

Presentation mode for Claude Code decks should be boring in the best way: open the deck, hit Present, and show the same HTML slides you just edited. No screenshot export. No fragile handoff into another slide tool. No "it looked right in the editor" moment when you put it on a projector.

Variant now treats presenting as part of the same Claude Code workflow as generating, editing, previewing, and exporting. Claude Code can create the deck over MCP. You can refine it on the canvas or in code. Then the deck can fill the browser window for a live talk, or export as a single HTML file for someone else to present.

#Quick answer

Use Claude Code to generate a Variant deck, open the returned deck URL, click Present, and navigate with ArrowRight, ArrowDown, Space, ArrowLeft, or ArrowUp. Click the right half of the screen to advance, click the left half to go back, and press Escape to return to the editor.

If you need a portable file, export HTML from the same deck. The exported file contains a browser presentation runtime, slide counter, keyboard navigation, and the slide HTML/CSS source needed to render the deck.

#Why presentation mode matters for agent-made decks

AI slide tools usually focus on the first draft. That is useful, but it is not the whole job. A deck is not done when the model writes slide 12. It is done when you can stand in front of a room, move through the story cleanly, and trust that the slide on screen is the slide you approved.

That trust is harder when the workflow has too many conversions:

Claude Code generates HTML.
You export screenshots.
You paste screenshots into PowerPoint.
You discover a typo.
You go back to the agent and regenerate something close, but not identical.

Presentation mode removes one of those conversion points. The deck you present is the deck you edit. The slide is still HTML and CSS, so text stays text, charts stay inspectable, and layouts stay tied to the source Claude Code can revise.

#The basic Claude Code flow

The practical workflow is:

Connect Claude Code to Variant's MCP server.
Ask Claude Code to create a deck from a real brief.
Let the agent use deck.create, slides.batchUpdate, and slide.preview to draft and check the slides.
Open the deck URL in Variant.
Clean up copy, layout, charts, and speaker notes.
Click Present when the deck is ready.

If you have not connected Claude Code yet, start with Connect Claude Code to an MCP Presentation Editor. If you want the full prompt-to-export loop, read Create a Presentation with Claude Code: Full Workflow.

Here is a small prompt that gives Claude Code enough structure:

Use the Variant MCP server to create an 8-slide deck called
"Q2 Reliability Review".

Audience: engineering leadership.
Goal: explain what improved, what still breaks, and what we need next.

Slides:
1. Title and thesis
2. Reliability scorecard
3. Incident trend chart
4. Top failure modes
5. What changed this quarter
6. Remaining risks
7. Next-quarter plan
8. Decision ask

Use speaker notes for what I should say out loud.
Keep the charts as editable HTML/SVG, not screenshots.
Return the Variant deck URL when finished.

Once Claude Code returns the URL, you are in the normal editor. The important thing is that there is no separate "AI deck" mode. A Claude Code deck is a Variant deck. You can present it, share it, export it, or edit it by hand.

#What happens when you click Present

The Present button switches from the editor into a full-window presentation view. Variant centers the active slide, scales it to fit the browser window, and keeps the slide aspect ratio intact. The surrounding backdrop adapts to the slide background so light slides are not surrounded by harsh white and dark slides can sit on black.

Navigation is intentionally simple:

Action	Control
Next slide	ArrowRight, ArrowDown, Space, or click the right half
Previous slide	ArrowLeft, ArrowUp, or click the left half
Exit	Escape

There is a small slide counter in the corner. When you exit, Variant returns you to the slide you were presenting, so you can make a fix without hunting through the filmstrip.

Interactive slides can still receive pointer events when the slide is marked for scripts. That matters for demos, embedded controls, and small custom interactions Claude Code might build into a technical deck.

#Why this fits HTML slides

Presentation mode works because the slide source is already browser-native. Variant does not need to flatten the slide into an image before presenting it. It renders the slide in an iframe, using the same HTML/CSS model the editor and preview pipeline understand.

That has a few concrete advantages:

Text remains crisp at different screen sizes.
SVG diagrams and charts scale cleanly.
Code blocks stay readable instead of becoming blurry screenshots.
CSS layout behaves the same way it did during editing.
Agent edits still target real elements after the presentation is over.

This is the same reason HTML export is a strong handoff format. If you want more on the source-format argument, read Why HTML Beats Images for AI-Generated Slides.

#Presenter HTML for notes-heavy talks

Live presentation mode is for showing the deck from the editor. For a self-contained file, the export menu includes regular HTML export and Presenter HTML export.

Regular HTML export gives you the audience-facing presentation: current slide, browser navigation, and a counter.

Presenter HTML export adds a presenter view around the same deck. It includes:

The current slide.
The next slide preview.
Speaker notes for the current slide.
Keyboard hints.
Home and End navigation for jumping to the beginning or end.

That is useful when Claude Code has generated notes as part of the deck. You can ask for notes in the initial prompt, polish them in Variant, then export a presenter file before a rehearsal.

One practical caution: if you are sending a deck to someone else, regular HTML is usually the right file. Presenter HTML is for the person presenting, not for the audience.

#How to ask Claude Code for a presentable deck

Claude Code can produce slides that look impressive and still fail as a live talk. The fix is to tell it what "presentable" means before it starts.

Useful constraints:

Keep each slide to one job.
Use large text and few bullets.
Put dense tables in the appendix unless they are the point of the slide.
Add speaker notes for context instead of stuffing every detail onto the canvas.
Use real chart labels and units.
Avoid tiny legends, tiny axis labels, and decorative code screenshots.

Here is a prompt pattern:

Make this deck presentable on a 1080p projector.
Use one main idea per slide.
Do not use more than five bullets on any slide.
Put detailed explanation in speaker notes.
Before you finish, preview slides with dense content and fix overflow.

That last line matters. Variant's slide.preview tool gives the agent visual feedback before you open the deck. It does not replace your review, but it catches obvious overflow and cramped layouts earlier.

#What to check before presenting

Before a live talk, do one pass in this order:

Run through the deck in Present mode from start to finish.
Check that titles tell the story without the body text.
Make sure charts have readable labels and honest units.
Confirm code blocks fit without wrapping into nonsense.
Read the speaker notes where Claude Code added them.
Export HTML if anyone else needs the deck outside Variant.

Do not wait until the final pass to enter presentation mode. A deck can look fine on a canvas at 70% zoom and still feel crowded when it fills the screen. Present early enough that you can fix rhythm, not just typos.

#Where presentation mode stops

Presentation mode is not trying to be a cinematic animation system. It is a clean way to show HTML slides generated and edited through an agent workflow.

A few limits are worth knowing:

There is no full animation timeline UI.
Exports are static files; they do not keep live backend data unless you deliberately embed a live source.
Presenter HTML is exported from the UI, while MCP deck.export supports the standard export formats: HTML, PDF, PPTX, and JSON.
If you need strict PowerPoint-native collaboration, export PPTX and do that final pass in PowerPoint.

Those tradeoffs are deliberate. The main value is that Claude Code can create the deck, Variant can make it editable, and the same deck can be presented without becoming a different artifact.

#FAQ

#Can Claude Code start presentation mode for me?

Claude Code can create and edit the deck through MCP, then return the editor or presentation URL. Starting the live in-browser Present view is a UI action today: open the deck and click Present.

#Does presentation mode work with decks made by hand?

Yes. Presentation mode is a deck feature, not an AI-only feature. A deck made by hand, generated by Claude Code, or edited by Codex presents the same way.

#Is the HTML export the same as presentation mode?

It uses the same idea: browser-native slides with keyboard navigation. In-app Present is for presenting from Variant. HTML export is a portable file you can open, email, host, or archive.

#Can I include speaker notes?

Yes. Variant stores notes per slide, and Claude Code can draft them. The regular live presentation view is audience-facing. Presenter HTML export includes speaker notes and a next-slide preview.

#Can I present interactive slides?

Yes, if the slide is marked for scripted interactivity. Variant lets the slide iframe receive pointer events so custom controls or demos can work during presentation.

#What format should I send after the talk?

Use HTML when you want the most faithful portable version of the deck. Use PDF for a static archive or email attachment. Use PPTX when the recipient needs to keep editing in PowerPoint.

#Wrap-up

Presentation mode closes the loop for Claude Code decks. The same artifact can be generated by an agent, edited on a canvas, inspected as code, presented from the browser, and exported when the talk is done.

That is the point of HTML-native slides: fewer conversions, fewer dead ends, and less distance between the draft Claude Code made and the deck you actually present.