Live example: https://powerslides.david.app
Agent-friendly deck creation: one slides.yaml file and one command. Slides are plain text, so an agent can edit, reorder, and reuse them — then you present from your phone, where the remote shows your notes, the next slide before the room sees it, and timers that keep your pacing honest.
- title: Power Slides
eyebrow: Introducing
subtitle: Agent-friendly deck creation
notes:
- Built so an agent can create and revise the deck while you focus on the talk.
- columns:
- title: Focused slides in plain text
eyebrow: Start simple with
subtitle: Easy for agents to edit, reorder, and reuse
- image: /generated/plain-text-card.png
fit: contain
background: /generated/plain-text-16bit.png
notes:
- Each slide is a few lines of YAML, exactly what an agent is good at editing.
- columns:
- image: /remote-control.png
fit: contain
- title: Remote Control
eyebrow: Use your phone as a
subtitle: Next slide preview, notes, pacing timers
- title: Full screen video
eyebrow: Media helpers like
subtitle: (on the next slide)
- video: /fractal-loop.mp4
controls: true
muted: true
loop: true
fit: contain
- columns:
- title: Iframe Helper
eyebrow: Interact with live web apps using the
subtitle: Power Slides gives you both mobile and desktop options
- iframe: https://david.app
device: iphone
screenBackground: '#061018'
- custom: particleField
- html: |
<section class="ps-install-terminal">
<!-- terminal-shaped install card with a talk-name input, generated commands, and Copy All -->
</section>Start a deck with the CLI, edit the YAML, drop static assets into public/, present from your phone, and deploy the built public/ folder anywhere static files can live.
Create a deck with npx:
npx power-slides init best-talk-ever
cd best-talk-ever
npx power-slides dev .init creates a talk folder with:
slides.yaml— deck content and speaker notestalk.js— optional browser code for custom slidespublic/— media and static files served by the deck
npx power-slides dev . # starts a local dev server
npx power-slides build . # writes deployable static files into public/Deploy the public/ folder to any static host.
Start with a YAML list. Each item is one slide.
- title: Power Slides
eyebrow: Introducing
subtitle: Agent-friendly deck creation
align: center
notes:
- Plain text means an agent can draft and revise the deck for you.
- Keep each slide focused; put the speaker story in the notes.
- columns:
- title: Focused slides in plain text
eyebrow: Start simple with
subtitle: Easy for agents to edit, reorder, and reuse
- image: /generated/plain-text-card.png
fit: contain
background: /generated/plain-text-16bit.png
notes:
- Each slide is a few lines of YAML, exactly what an agent is good at editing.
- Ask an agent to restructure the deck, then review the diff like any change.
- columns:
- image: /remote-control.png
fit: contain
- title: Remote Control
eyebrow: Use your phone as a
subtitle: Next slide preview, notes, pacing timers
- title: Full screen video
eyebrow: Media helpers like
subtitle: (on the next slide)
- video: /fractal-loop.mp4
controls: true
muted: true
loop: true
fit: contain
- columns:
- title: Iframe Helper
eyebrow: Interact with live web apps using the
subtitle: Power Slides gives you both mobile and desktop options
- iframe: https://david.app
device: iphone
screenBackground: '#061018'
- custom: particleField
- html: |
<section class="ps-install-terminal">
<!-- terminal-shaped install card with a talk-name input, generated commands, and Copy All -->
</section>Each slide can have one of the following:
title— words on screen, with optionalsubtitle,eyebrow,bullets,pullquote, ornotesimage— static assets as full-slide images or media inside designed layoutsvideo— a full-slide videoiframe— a web page embed, optionally framed as a devicehtml— trusted inline markupcustom— a named renderer fromtalk.js
To combine types, use columns, such as iframe-plus-copy or image-plus-title.
The full slide shape and advanced API reference lives in docs/slide-api.md.
For deck-wide metadata or CSS defaults, wrap the same slide list in a deck object with title, style, and slides.
title: Best Talk Ever
style:
fontFamily: Inter, system-ui, sans-serif
background: '#061018'
color: white
"--accent": '#5ffbf1'
slides:
- title: Power Slides
eyebrow: Introducing
subtitle: Agent-friendly deck creation
- title: Focused slides in plain text
eyebrow: Start simple with
subtitle: Easy for agents to edit, reorder, and reuseRun or build the deck, press o to open Options, click Enable remote control, then scan the QR code or open the shown URL on your phone.
The phone remote is the real control surface, and each piece of it earns its place:
- Next-slide preview so you are never surprised by your own deck and never spoil the next beat — you set up the transition before you tap forward.
- Slide timer so you can feel your pacing on the current slide instead of guessing.
- Talk timer so you protect the ending and don't rush the close after losing track of time.
- Estimated duration from your per-slide timers, so you know the talk fits its slot before you ever present.
- Notes on the phone so the projected slide stays focused on a single point.
Use talk.js for slides that need browser code: a typewriter effect, live D3 visualization, WebGL toy, API fetch, or anything else the browser can render.
export default {
renderers: {
demo (slide) {
const el = document.createElement('section')
el.innerHTML = `<h1>${slide.title || 'Live demo'}</h1>`
return el
}
}
}Then reference the renderer from YAML:
- custom: demo
title: Browser-native slideFor more talk.js hooks, see docs/slide-api.md. The packaged examples/starter/ deck is the maintained example and init template.
MIT © David Guttman
init also writes a small package.json for hosts or CI runners that expect npm scripts:
npm install
npm run dev
npm run buildUse those scripts for hosts, CI, or deploy flows that run npm commands.