Byeslide
Agent-first presentation systems

Presentation files shaped for agents

A practical deck system where source files stay editable, visual output stays polished, and presenter mode is built in.

slides/ one HTML file each
styles.css semantic layouts
dist/ Reveal runtime
HTML source of truth
PDF export path
S speaker view
Demo live deck charts, media, notes, export
Deck model
Source files stay ordinary

A presentation is a folder, not a mystery file

Every important surface is visible: content, theme tokens, media, notes, patterns, and generated output.

Generated files live under dist/; edit the source files and rebuild.
  1. Slides are ordered HTML fragments
  2. Theme decisions are CSS custom properties
  3. Media sits next to the deck in assets/
  4. Speaker notes travel with each slide
Principles

What agents need

  • Small files with stable intent
  • Named layout classes
  • One slide changed at a time
  • Fast visual validation

What audiences need

  • Clear hierarchy and rhythm
  • Readable charts and media
  • Smooth presentation controls
  • Speaker notes kept private
Rule source stays simple output can still feel finished
Workflow

Author by selecting and filling patterns

  • 01

    Pick a pattern

    Start from a title, comparison, metric, quote, video, or closing pattern.

  • 02

    Replace the content

    Keep structure stable, adjust copy, and use slide-local variables for fit.

  • 03

    Build and check

    Run pnpm build, pnpm check, then preview or export from the same source.

Charts
Pure HTML and SVG

Deck production cycle

12m
18m
26m
16m
9m
outline copy visuals check export

Confidence through iteration

  • Every slide is measured against the same fixed viewport.
  • Overflow reports point back to the source slide file.
  • Charts are just markup, so agents can edit them directly.
Media
Embedded video slide

Use embedded media without changing the authoring model

The starter ships with a local looping video, and the same frame works for product demos, trailers, walkthroughs, or YouTube embeds.

  • Keep the video or embed in the slide file.
  • Use presenter notes for setup context.
  • Swap the frame for a YouTube iframe when needed.
Three.js
Slide-contained browser dependency

A 3D scene can belong to one slide

Keep the dependency and scene module with the deck, import them from the slide, and let the build copy the whole asset bundle.

assets/vendor/three.module.min.js assets/three-demo.js full-frame canvas
Chart.js
Interactive trend slide

Switch the story without rebuilding the slide

Chart state lives in the slide, so the presenter can reveal different cuts of the same data live.

Live signal

+38% cycle time gained
  1. Every control scopes itself to this slide.
  2. The Chart.js runtime is loaded from assets/vendor/.
  3. The inline setup script can find its source slide after build.
Chart.js
Parameterized equation

Tune adoption live

Move the ceiling, growth rate, and inflection point; the charts recalculate from the equation in the slide.

Logistic growth

P(t) = 100 / (1 + e-0.80(t - 5.0))
Time to 80% 6.7
Peak growth 20.0
Presentation mode
Audience view plus private notes
Audience deck

Share the deck window

Use browser full screen or a second display so Teams sees only the audience presentation.

Speaker notes

Press S for notes

Reveal opens a separate speaker window with current slide, next slide, timer, and notes.

PDF export

Export when needed

Press P in preview or run pnpm pdf to write a static copy for review and handoff.

Default path
Build locally, present cleanly
Ship the deck

Edit HTML, preview Reveal, export PDF

The deck remains ordinary files on disk, while the live presentation still feels like a finished product.

pnpm preview press S for notes press P for PDF