Create your first Cuppa Studio presentation in under 5 minutes.
Pick whichever fits your workflow:
The fastest way to get started — no install needed. Studio is a browser-based IDE with a live preview, AI generation, 10 starter templates, and HTML export.
Cuppa Studio requires Node.js 20 or later. No global install needed — use npx:
npx mycuppa init my-talkThis creates a my-talk/ directory with a starter slides.md file.
Slides are separated by --- on its own line. The first block is document frontmatter:
---
title: My Tech Talk
author: Jane Developer
theme: dark
---
# Welcome to My Talk
### Built with Cuppa Studio
---
## Key Points
- First point
- Second point
- Third point
---
layout: quote
---
> "Code is poetry."
---
## Thank You!
Get started at [cuppa.studio](https://cuppa.studio)The first --- block sets presentation-level properties:
| Property | Type | Description |
|---|---|---|
title | string | Presentation title (shown in browser tab) |
author | string | Author name |
theme | string | Theme name: dark, light, minimal, corporate, elegant, bold, forest, ocean |
description | string | Presentation description |
presentationTemplate | string | Template family: tech-talk, pitch-deck, workshop, changelog |
Each slide separator can include optional directives:
---
layout: image-right
background: #1a1a2e
transition: fade
image: ./images/diagram.png
---
## My Custom Slide
Content uses the specified layout.| Directive | Values | Description |
|---|---|---|
layout | intro, section, center, header-body, split, code-focus, quote, image-left, image-right, image-full, full, blank, end | Override auto-detected layout |
background | Color or image path | Slide background |
transition | fade, slide, none | Transition to this slide |
image | Image path | Image for image layouts |
template | e.g. tech-talk/intro, pitch-deck/hero | Scene template for styled slide chrome |
badge | string | Badge label shown on template slides |
accentBar | Color hex | Colored bar at top of slide |
Scene templates add professional chrome (badges, accent bars, designed lists) to your slides. Set presentationTemplate in frontmatter for auto-assignment, or use template per-slide:
---
title: My Talk
presentationTemplate: tech-talk
---
---
template: tech-talk/intro
badge: "DEMO"
footerKeywords: "Fast · Simple · Beautiful"
---
# My Talk Title
### Subtitle here
---
## Key Features
- **Speed** — Sub-100ms builds
- **Scale** — Handle thousands of users
- **Safety** — Zero-downtime deployments
---
template: tech-talk/closing
badge: "DEMO"
---
## Thank You!Available template families:
| Family | Scene Templates | Best For |
|---|---|---|
tech-talk | intro, content, code, section, closing | Developer presentations |
pitch-deck | hero, problem, solution, metrics, cta | Startup pitches |
workshop | intro, step, exercise, checkpoint, summary | Tutorials and workshops |
changelog | cover, feature, breaking, fixes, credits | Release notes |
Lists inside templates render as designed card rows with multi-color accents. Use **Title** — Description for two-line items.
# Build markdown to .cup
mycuppa build slides.md
# Serve with hot reload (watches markdown for changes)
mycuppa serve slides.md
# Serve a pre-built .cup file
mycuppa serve slides.cup
# Export to standalone HTML
mycuppa export slides.cup --out talk.htmlPresent like a pro with the built-in backstage remote. Serve with the --backstage flag:
mycuppa serve slides.md --backstage
# → Slides: http://localhost:3000/
# → Backstage: http://localhost:3000/backstage
# → LAN: http://192.168.1.10:3000/backstageOpen the LAN URL on your phone to get a wireless remote with slide previews, speaker notes, and a timer. Navigate from your phone while the audience sees the main screen.
| Key | Action |
|---|---|
| Right / Space | Next slide |
| Left | Previous slide |
| F | Toggle fullscreen |
| O | Slide overview grid |
| N | Presenter view |
| P | Play/pause autoplay |
Generate presentations with AI (requires ANTHROPIC_API_KEY):
# Generate from a prompt
mycuppa ai "Explain OAuth 2.0 in 8 slides"
# Generate from existing content
mycuppa ai --from meeting-notes.md
# Refine an existing presentation
mycuppa ai --refine my-talk/
# Generate and immediately serve
mycuppa ai "Quick standup update" --serveAdd speaker notes with HTML comments:
## My Slide Title
Content here.
<!-- notes: These are speaker notes visible
in the presenter view. They won't appear
on the main slides. -->Don't know how to present your slides? Auto Drive narrates your presentation for you. AI generates a transcript for each slide, then reads it aloud while stepping through your content automatically — like a video, but interactive and updatable.
Browse any presentation in the library and click Auto Drive to try it.
To generate transcripts for your own presentations via CLI:
# Generate transcripts for a presentation
mycuppa transcribe my-talk/
# Batch-generate for all presentations in a directory
mycuppa transcribe public/presentations/Cuppa Studio covers the entire journey from idea to presented content: