Documentation — HTMLSlides

Quick Start

Three steps. That's it.

1

Describe your presentation

Write a natural-language prompt telling the AI what you want. Be as detailed or as brief as you like.

Prompt

# Example prompt
Create a 10-slide presentation about "Introduction to Rust".
Use flip cards for key concepts, a timeline for Rust's history,
code blocks with syntax highlighting for examples,
and a comparison table for Rust vs C++.
Audience: intermediate developers.
Color theme: dark with orange accents.

2

Generate

The AI processes your prompt and produces a complete, self-contained HTML file. All CSS, JavaScript, and content are embedded directly in the file—no external dependencies, no build step, nothing to install.

3

Open & present

Double-click the HTML file to open it in your browser, or serve it locally. Use keyboard shortcuts to navigate, enter fullscreen, or start presenter mode. Share the file with anyone—they just need a browser.

Your first presentation

Let's walk through creating a real presentation from scratch. Here's a sample prompt you can use right away:

Sample Prompt

# My first HTMLSlides presentation

Create a 6-slide presentation titled "Why Our Team Should Adopt TypeScript".

Slide 1: Title slide with the presentation name and subtitle
         "A practical guide for JavaScript developers"

Slide 2: Use stats & metrics to show TypeScript adoption rates:
         • 78% of JS developers have used TS
         • 3x fewer production bugs
         • 40% faster onboarding for new team members

Slide 3: Use a comparison table for TypeScript vs JavaScript
         covering: type safety, IDE support, refactoring, learning curve

Slide 4: Use flip cards for the top 4 TypeScript features:
         generics, interfaces, enums, type guards

Slide 5: Use a code block showing a before/after example
         of refactoring JS to TS

Slide 6: Use a checklist for the migration plan:
         • Audit current codebase
         • Set up tsconfig.json
         • Convert files incrementally
         • Add CI type-checking

Audience: engineering team leads. Tone: professional but approachable.

What to expect

You'll get a single presentation.html file (typically 15–40 KB) containing all 6 slides with fully interactive components, smooth transitions, and keyboard navigation built in. Open it in any modern browser to present.

Understanding the output

Every generated presentation is a single .html file. There are no external stylesheets, scripts, or image assets to manage. Everything is embedded inline.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>My Presentation</title>
  <style>
    /* All CSS is embedded here */
    /* Slide layouts, animations, themes, component styles */
  </style>
</head>
<body>
  <!-- Slide 1 -->
  <section class="slide"> ... </section>
  <!-- Slide 2 -->
  <section class="slide"> ... </section>
  <!-- ... more slides ... -->

  <script>
    // Navigation, keyboard shortcuts, animations
    // Presenter mode, fullscreen, component interactivity
  </script>
</body>
</html>

1

Single file

0

Dependencies

∞

Offline capable

Component types

HTMLSlides ships with 11 interactive component types you can mix and match across your slides.

Flip Cards

Click-to-reveal cards with front/back content

Expandable Cards

Accordion-style cards that expand on click

Code Blocks

Syntax-highlighted code with line numbers

Architecture Flows

System diagrams with connected nodes

Stats & Metrics

Animated counters and progress indicators

Timelines

Chronological events with visual connections

Comparisons

Side-by-side or table-based feature comparisons

Quote Blocks

Styled quotations with attribution

Checklists

Interactive to-do and checklist items

Image Grids

Responsive gallery layouts with captions

Custom Layouts

Flexible grid and split-screen arrangements

Tips for better prompts

Small changes in how you write your prompt can dramatically improve the output quality.

Be specific about the number of slides

Instead of "make a presentation about X", say "create an 8-slide presentation about X". This gives the AI a clear scope to work with.

Name the component types you want

Say "use flip cards for definitions" or "add a timeline for the project history". The AI maps named components to the right interactive elements.

Include your actual content or key points

Don't make the AI guess. Provide bullet points, data, quotes, or talking points. The more real content you supply, the more accurate and useful the output.

Specify your audience

A presentation for "C-suite executives" will differ from one for "junior developers". Stating the audience helps the AI calibrate language, depth, and visual complexity.

Mention colors or branding

If you have brand colors, say "use #FF6B35 as the accent color" or "dark theme with blue accents". You can also reference well-known styles like "minimalist" or "corporate".

Keyboard shortcuts

Navigate and control your presentation without touching the mouse.

Shortcut	Action
`←` `→`	Navigate between slides
`↑` `↓`	Navigate between slides (alternative)
`F`	Toggle fullscreen mode
`P`	Toggle presenter mode with speaker notes
`Esc`	Exit fullscreen or close overlay
`?`	Show keyboard shortcuts help overlay

Ready to create your first presentation?

Jump in and start building. It takes less than a minute to go from prompt to polished deck.

Start creating free

Getting Started