HTML slides: build an editable presentation in 2026

How an HTML presentation fits into your workflow

HTML gives web content its structure, while CSS supplies visual presentation and JavaScript can provide interaction. In a slide deck, those familiar browser technologies become a sequence of pages with a consistent canvas, type hierarchy, and navigation. The result can be useful when you want to review a presentation in a browser and retain a readable source format for later revisions.

Claude Motion Skills uses implemented presentation templates rather than arbitrary imported slide markup. The editable source is project.json: the renderer turns its scene content and settings into the HTML deck. This is a practical fit for a research briefing, teaching outline, proposal, or recurring update whose wording changes over time. If your collaborators require a PowerPoint file, plan a separate PPTX workflow; the HTML output is a different deliverable.

Documentation: MDN: HTML structure, content, and browser presentation · Claude Motion Skills: published CLI workflow and supported outputs

Build the story before selecting visual details

Start by writing the question your presentation answers. Follow it with the key evidence, the interpretation, and the action you want the audience to take. Give each page a sentence-sized headline that communicates its point. A heading such as 'The rollout needs a smaller first phase' carries more meaning than 'Results' when that conclusion is actually supported by the source material.

Keep a local source checklist when adapting a long report. For each section, record what it contributes and which slide covers it. Mark material deliberately omitted from a short briefing, and flag anything the assistant could not read. This keeps the deck concise without confusing a summary with complete coverage. Preserve dates, units, and uncertainty; replace a missing number with a review note rather than an invented statistic.

• Write a source-grounded presentation prompt

Choose a layout that supports the audience

Select a presentation family based on how the audience needs to read. An academic layout separates a claim from its evidence. A consulting layout gives the recommendation priority. An editorial layout makes space for a narrative explanation, while an ink-inspired treatment creates a quieter visual setting. Open the actual style page and compare the sample structure with your draft before committing to its aesthetic.

Landscape 16:9 gives headings and supporting text horizontal room. Portrait 9:16 is useful for a phone-oriented sequence but requires shorter lines and more disciplined copy. Avoid solving an overcrowded page by shrinking everything. Split the argument into two pages, or move supporting detail into the narration. The goal is a page someone can understand in the time you intend to give it.

cm-skills styles --mode ppt --json

Documentation: Claude Motion Skills: published CLI workflow and supported outputs

• Browse HTML presentation styles
• Explore Academic Argument
• Explore Ink Landscape

Create the deck and retain its three working files

Install the CLI, check your tools with doctor, and use setup to connect your account and install the assistant skill. Your own Claude Code or Codex session prepares the draft from the material you provide. Set mode to ppt, choose an implemented ppt style ID, and include the title, format, source script, and scenes. A scene contains a title, visible body, full narration, and a duration.

Run compose with a new output directory. It writes index.html for the deck, project.json for editable content and timing, and narration.md for reviewing the spoken explanation. Keep these files together. New composition requires an active Creator or Studio subscription; inspect the pricing page and account status for current availability. The workflow does not require a new cloud render for each preview, and already downloaded work can still be previewed and rendered locally.

cm-skills doctor
cm-skills setup --agent both
cm-skills compose --input draft.json --out research-brief
cm-skills preview --project research-brief --port 4173

Documentation: Claude Motion Skills: published CLI workflow and supported outputs

• Install the local CLI
• Check plans and account availability

Rehearse in the browser and check readability

The generated PPT deck includes previous and next buttons, playback, and a speaker-notes control. Arrow keys and Page Up or Page Down move through the sequence; the space bar toggles playback. Test these controls before presenting. Use the printed local preview address rather than assuming that the preview server is a public sharing endpoint. Its loopback address is intended for the computer running the CLI.

Check the longest page first, then read the full presentation in order. Look for cropped text, low contrast, awkward line breaks, and narration that no longer matches the slide. For presentation content more broadly, meaningful headings help readers identify the document structure; MDN explains why headings should describe and organize their sections. A template is a starting point, so assess the delivered deck and provide a readable narration document when your audience needs an alternative format.

Documentation: Claude Motion Skills: published CLI workflow and supported outputs · MDN: HTML section headings and accessible document structure

• Review example visual treatments

Choose how the audience should receive the presentation

For revisions, edit project.json or compose a revised draft into a new folder. Preview and render regenerate the deck from validated data, so an edit made only to index.html is not the durable source for the CLI. Give each approved version a clear name and keep its source references nearby. For a recurring monthly briefing, duplicate the approved project and update both the visible figures and the narration before reviewing it again.

A browser presentation lets a person navigate its pages. A rendered MP4 follows the scene durations you selected and is useful when the audience should watch a complete explanation. The CLI renders locally with Chrome, FFmpeg, and its pinned HyperFrames engine. Service share links are a separate option requiring the relevant account entitlement: they contain silent visual HTML and do not upload local voice or music. Share the video when those audio tracks are part of the intended delivery.

cm-skills render --project research-brief --out research-brief-final.mp4 --fps 30

Documentation: Claude Motion Skills: published CLI workflow and supported outputs

• Turn a presentation into video
• Understand local HTML to MP4 rendering
• Edit an existing project