Claude Code can build editable HTML presentation slides and deploy them to a live URL via Cloudflare Pages in a single session. The slides use contenteditable for in-browser text editing and arrow keys for navigation. The build process involves 8-12 rounds of visual feedback, each taking about 2 minutes. Deployment uses Wrangler CLI with one command: wrangler pages deploy folder --project-name name. The deploy step is the only part that happens outside Claude Code.
What is Cloudflare Pages?
Cloudflare Pages is Cloudflare’s free hosting service for static websites. It takes a folder of HTML, CSS, and JavaScript files and makes them available at a URL. No build configuration or server setup is required for plain HTML. Deployment happens via the Wrangler CLI with a single command.
You can go from “I need slides for tomorrow” to “slides are live at a real URL” in one Claude Code session. Here’s how it works in practice. If you need a .pptx file instead of HTML, Building Presentation Slides with Claude Code covers both approaches.
What you’re building
The end result is a static HTML file that works as a presentation. The slides are editable directly in the browser (using a built-in HTML feature called contenteditable), so you can make small text changes on the fly without touching the code. That file gets deployed to Cloudflare Pages, which means it’s hosted at a real URL anyone can open.
This is the workflow that got used to build and ship the slides for Session 2 of Code for Creatives.
The pieces
Claude Code is Anthropic’s AI coding tool. You describe what you want, it writes code, runs it, fixes errors, and keeps going until the thing works. It’s the builder in this workflow.
A static site is just a collection of HTML, CSS, and JavaScript files. No server, no database. You hand the browser some files, and it renders them. Presentation slides are a perfect use case because they don’t need to do anything dynamic.
Cloudflare Pages is Cloudflare’s free hosting for static sites. You point it at a folder of files, and it makes them available at a URL. No build configuration required for simple HTML files. It’s noticeably simpler to set up than alternatives like Netlify or Vercel when you’re deploying plain HTML.
Wrangler is Cloudflare’s command-line tool. You use it to deploy files from your computer to Cloudflare Pages. The command you’ll run is:
wrangler pages deploy <folder-name> --project-name <your-project-name>
That’s it. No config files, no build step, no YAML to write.
contenteditable is an HTML attribute that makes any element editable in the browser. Add it to a paragraph or heading, and the visitor can click it and type. For slides, this means the presenter can make last-minute text edits without reopening a code editor. The edits only last until the page reloads, but for live presentations that’s usually fine.
The workflow
Step 1: Start with a rough prompt
Open Claude Code and describe what you need. Don’t try to get it perfect on the first message. You’re starting a conversation, not issuing a spec.
Something like:
Build me an HTML slide deck for a presentation on AI tools for creative work.
I need:
- A title slide
- 5-6 content slides with bullet points
- Keyboard navigation (left/right arrows)
- Dark background, clean typography
- All text should be contenteditable so I can edit it in the browser
Claude Code will write the full HTML file, usually in under a minute.
Step 2: Open it in the browser
Claude Code will save the file locally. Open it directly in your browser. Look at every slide. Notice what’s wrong.
The first version will be roughly right and specifically wrong. The layout might be off. The font sizes might be too small. A slide might be missing something. That’s expected. The point of round one is to see what you’re working with.
Step 3: Give feedback, not instructions
This is the part that makes the difference. Don’t try to tell Claude exactly what code to change. Tell it what you’re seeing and what you want instead.
Bad feedback: “Change the h2 font size to 2.2rem and add 40px padding to the slide container.”
Good feedback:
The title on slide 3 is getting cut off on the right side.
The bullet points on every slide feel too cramped, they need more breathing room.
Slide 5 should be a quote slide with just one big line of text, not a bulleted list.
Claude Code can read the existing file, understand what you described, and make targeted changes. You don’t need to know the code.
Step 4: Repeat
Open the updated file. Look at it again. Give more feedback.
Getting slides right typically takes 8 to 12 rounds. That sounds like a lot, but each round takes about 2 minutes. You’re going from “rough” to “good” incrementally, and you’ll notice the slides actually improving each time.
If you want to capture changes you’ve made directly in the browser (via contenteditable), you can export them. Open the browser console (Cmd+Option+J on Mac), type document.documentElement.outerHTML, copy the result, and paste it into Claude Code with a note like “here’s the current version with my edits, apply these changes on top of it.” It’s a slightly awkward step, but it works.
Step 5: Deploy to Cloudflare Pages
Once the slides look right, deploy them.
First, make sure Wrangler is installed:
npm install -g wrangler
Then authenticate with Cloudflare. Because Claude Code runs in a non-interactive terminal environment, the standard wrangler login command (which opens a browser window and waits for a click) won’t work from inside the Claude Code session. The workaround: run wrangler login yourself in a regular terminal window, complete the auth flow, and then run the deploy command from there too.
Once you’re authenticated:
wrangler pages deploy slides --project-name c4c-session-2
Replace slides with whatever folder your HTML file is in, and c4c-session-2 with whatever you want the project called. Wrangler will create the project if it doesn’t exist and give you a live URL.
The whole deploy takes about 10 seconds. Once deployed, Unit Tests for Non-Developers covers adding a test suite to a Cloudflare Pages project.
What the deployed result looks like
The slides live at a Cloudflare Pages URL like c4c-session-2.pages.dev. Anyone with the link can open them. The contenteditable attributes are preserved, so you can still edit text in the browser on the live version. Navigate with arrow keys.
No login, no CMS, no server. Just a URL that works.
One thing to know
The deploy step is the only part that needs to happen outside Claude Code. Everything else, from writing the initial HTML to making 10 rounds of edits, can stay inside the same Claude Code session. Keep the conversation going. Don’t start a new session mid-build or you lose all the context.
Further reading
- Cloudflare Pages documentation for the full setup guide and configuration options
- Wrangler CLI reference for all the deploy flags and project management commands
- Claude Code documentation for getting started with Claude Code and understanding how it handles files and tools
- contenteditable reference on MDN for understanding how browser-editable HTML works
Common Questions
How do I deploy HTML slides to a live URL?
Build the slides in Claude Code as an HTML file, then deploy with wrangler pages deploy folder --project-name your-name. Wrangler creates the Cloudflare Pages project if it doesn’t exist and returns a live URL. The whole deploy takes about 10 seconds.
What is Wrangler CLI?
Wrangler is Cloudflare’s command-line tool for deploying files to Cloudflare Pages and Workers. Install it with npm install -g wrangler. Authenticate with wrangler login in a regular terminal, then run deploy commands. No config files or YAML needed for simple HTML deployments.
How many rounds of feedback do HTML slides need?
Typically 8-12 rounds, each taking about 2 minutes. Describe visual problems in plain language (“the title on slide 3 is cut off”) rather than giving CSS instructions. Claude infers the code fix from the description.
Can I edit slides in the browser after deploying?
Yes. The contenteditable attribute is preserved on the live version, so you can click and edit text during a presentation. Changes only last until the page reloads, which is usually fine for live presenting.
A note from Alex: hi i’m alex - i run code for creatives. i’m a writer so i feel that it is important to say - i had claude write this piece based on my ideas and ramblings, voice notes, and teachings. the concepts were mine but the words themselves aren’t. i want to say that because its important for me to distinguish, as a writer, what is written ‘by me’ and what’s not. maybe that idea will seem insane and antiquated in a year, i’m not sure, but for now it helps me feel okay about putting stuff out there like this that a) i know is helpful and b) is not MY voice but exists within the umbrella of my business and work. If you have any thoughts or musings on this, i’d genuinely love to hear them - its an open question, all of this stuff, and my guess is as good as yours.