Agent-first HTML presentations

Readable slide source, Reveal.js output.

Byeslide gives agents and humans a small authoring layer for presentation decks. Slides stay as HTML files, design tokens stay in CSS custom properties, and builds produce a standalone Reveal-compatible deck.

Start a deck View commands Open example deck View on GitHub

Overview

What Byeslide is for

Byeslide is for decks that should remain easy to edit as source. Instead of burying layout inside a binary file, each slide lives in slides/ as HTML. Shared visual decisions live in theme.css and styles.css, while reusable slide vocabulary lives in patterns/.

The runtime is Reveal.js. Byeslide does not replace it. The build step assembles a Reveal-compatible dist/index.html, copies the local runtime assets, and leaves you with a deck that can be opened, hosted, presented, or exported.

Short slide files

Semantic CSS classes keep slide markup compact enough for agents to modify reliably.

Pattern-first workflow

Copy a nearby pattern, replace the content, then run build and check before presenting.

Reveal output

Keep Reveal features such as speaker view, fragments, transitions, PDF output, and scroll view.

Hosted example

See the starter template as a live deck at byeslide-example.mkdevforge.com.

Source repository

Browse the code, starter template, and release workflow at github.com/mkdevforge/byeslide.

Quick start

Create a deck

Use the published CLI to create a new deck, install its dependencies, build the Reveal output, and start the preview server.

pnpm dlx byeslide init my-deck
cd my-deck
pnpm install
pnpm build
pnpm preview

Initialize

byeslide init copies the starter structure into your deck directory.

Author

Work in slides/, patterns/, theme.css, and styles.css.

Check

Run pnpm check to catch slide overflow in Chromium before sharing the deck.

Deck structure

Generated project layout

A deck is a normal folder. The source files stay editable and the generated dist/ folder contains the standalone Reveal deck.

my-deck/
  deck.config.js
  theme.css
  styles.css
  patterns/
  slides/
  assets/
  dist/

slides/: Ordered slide HTML files, usually named like 01-title.html.
patterns/: Reusable source examples for common layouts and interactions.
assets/: Images, videos, local vendor scripts, and slide-specific media.
theme.css and styles.css: Design tokens, shared components, and deck-level styling.
dist/: Build output containing index.html and local runtime assets.

Authoring model

Write slides by adapting patterns

The recommended workflow is deliberately narrow. Read the patterns, copy the closest one into slides/, replace the content, keep structural edits small, then validate the deck.

Read patterns/ and choose the closest slide pattern.
Copy the markup into slides/NN-name.html.
Replace the content and make only the layout edits you need.
Run byeslide build and byeslide check.

Fragments are the default

Slide files may be fragments or full HTML documents. Fragments are the default path and are wrapped in Reveal section elements during build.

CLI reference

Commands

These are the current commands exposed by the byeslide CLI. Deck scripts in the starter template call the same commands.

Command	Purpose
`byeslide --version`	Print the installed Byeslide package version.
`byeslide version`	Print the installed Byeslide package version.
`byeslide init [dir] [--force]`	Create a new deck from the starter template.
`byeslide build [dir] [--out dist] [--no-clean]`	Write a standalone Reveal deck to the output directory.
`byeslide preview [dir] [--host 127.0.0.1] [--port 4173] [--out dist]`	Rebuild on changes and serve the deck with live reload.
`byeslide check [dir] [--json] [--out dist] [--no-clean]`	Open Chromium and report slide overflow.
`byeslide pdf [dir] [--output dist/deck.pdf] [--out dist] [--no-clean]`	Export the Reveal print view to PDF.
`byeslide patterns [dir]`	List available slide patterns for the deck.
`byeslide install-browsers [chromium]`	Install the browser runtime used by check and PDF export.

Preview ports

Preview listens on 127.0.0.1:4173 by default. If that port is occupied, Byeslide tries the next available ports and prints the selected URL.

Browser setup

If check or pdf cannot find a browser, run byeslide install-browsers.

Version metadata

Built decks include a generator meta tag and expose window.Byeslide.version for hosted deck debugging.

Interactive slides

Scripts, notes, and exports

Slides can include browser-side dependencies and setup scripts. External src scripts are moved after Reveal initialization and repeated dependency tags are deduped. Inline scripts are preserved per slide.

<aside class="notes">
  Mention the main takeaway before showing the chart.
</aside>

Slide-local setup

Use window.Byeslide.slideForScript(document.currentScript) in classic scripts, or window.Byeslide.slideForScript(import.meta) in inline module scripts.

Shared dependencies

Put browser dependencies under assets/vendor/. Add data-byeslide-repeat when an external setup script must run once per slide.

The starter deck includes Three.js and Chart.js examples that demonstrate local vendor assets, slide-specific setup code, and repeated dependencies across multiple slides.

Speaker notes live in <aside class="notes"> and open from preview with Reveal's S shortcut. Pressing P in preview writes dist/deck.pdf; in a static build it falls back to the browser print-to-PDF flow.