Presentations written as HTML. One file per slide, a theme in CSS, and Reveal.js to present it.

Byeslide

One title, inside a .pptx

PowerPoint stores where the title sits as an offset and a size, counted in EMU: 914,400 to the inch. To move the title, you change the numbers.

<p:sp>
  <p:nvSpPr>
    <p:cNvPr id="2" name="Title 1"/>
    <p:nvPr><p:ph type="title"/></p:nvPr>
  </p:nvSpPr>
  <p:spPr><a:xfrm>
    <a:off x="838200" y="365125"/>
    <a:ext cx="10515600" cy="1325563"/>
  </a:xfrm></p:spPr>
  <p:txBody>
    <a:bodyPr/><a:p><a:r>
      <a:t>Quarterly review</a:t>
    </a:r></a:p>
  </p:txBody>
</p:sp>

The same title, as a Byeslide slide

The slide file holds the words. Position, size and type come from styles.css, written once for every slide.

<section class="slide">
  <h1 class="title">Quarterly review</h1>
</section>

A deck is a folder you can read

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

Seven entries, one job each

Press next to open them one at a time.

Settings

Title, slide size, transitions and the Reveal plugins to load.

Design tokens

Fonts, inks and sizes as CSS custom properties. Change a value and every slide follows.

Layout classes

The classes slides share, like .split and .listing.

Example slides

To start a new slide, copy the closest pattern and replace its content.

One file per slide

File names set the order. Each file holds its own notes and scripts.

Everything the slides load

Fonts, images, video and libraries stay with the deck, so it runs offline.

Build output

byeslide build writes dist/index.html and the Reveal runtime. Nobody edits it by hand.

Content, theme and runtime stay apart

Like the plates in a print shop: each one carries a single layer, and the build prints them in register.

Quarterly review

RuntimeReveal.js: controls, progress, speaker view

Themetheme.css and styles.css

Contentslides/05-separations.html

Every slide is its own file

The build stacks the files in slides/ into one page.

Change three values, recolor every slide

/* theme.css */
:root {
  --ink-1: #0078bf;
  --ink-2: #ff48b0;
  --ink-3: #ffe800;
}

Pick a set. The change is live, so the title, the diagrams and the 3D sheets change too.

A slide file, top to bottom


<section class="slide">
  <h2 class="heading">Pilot starts in March</h2>
  <ul class="points">
    <li class="fragment">Two teams onboard</li>
    <li class="fragment">Weekly check-ins</li>
  </ul>
  <canvas data-chart></canvas>
  <script src="./assets/vendor/chart.umd.js"></script>
  <script>
    const slide = Byeslide.slideForScript(document.currentScript);
    new Chart(slide.querySelector("[data-chart]"), config);
  </script>
  <aside class="notes">Pause for questions.</aside>
</section>

Everything the slide needs

Content, steps, a chart and notes, in one file.

A section

Classes come from styles.css, so the file holds no layout.

Fragments

Each one appears on the next click.

Its own scripts

Load a library and set up the slide. slideForScript finds the slide the script came from.

Speaker notes

Press S to read them in the speaker view.

Text that doesn't fit gets caught

byeslide check opens each slide in Chromium and measures it. This page runs the same measurement live: type into it or add a sentence.


    

    

      

        

          
Pilot plan

          
Two teams start in March. We check in every week and decide in May whether to widen the pilot.

        

        

      

      

        
        
      

    

  

  
  





  

    
To edit one slide, read one slide

    
At 14 slides, an agent reads 61 lines instead of 616.

  

  

    
  

  

    
    
    
One-file deck: every slide. Byeslide: one slide file and the pattern it came from (17 lines).

  

  
  
  





  

    

      
    

    

      
Save the file, the preview reloads

      
Recorded from byeslide preview. A script edits a slide file, and the browser rebuilds and reloads on its own.

    

  

  





  

    

      
Present from the browser

      
These keys work right now. In Teams, share this window and keep the speaker view on your own screen.

    

    

      
S
Speaker viewNotes, timer and the next slide

      
F
Full screenPress Esc to leave

      
Esc
OverviewEvery slide at once

      
Alt
ZoomAlt and click on any detail, Ctrl on Linux

      
P
PDFIn preview, writes dist/deck.pdf

      
?view=scroll
Scroll viewRead it as one long page

    

  

  





  

    

      
Send the deck as one file

      
byeslide bundle puts every slide, font, video and script into one HTML file. Put it on Teams or SharePoint: people download it, open it in Edge or Chrome, and it works offline.

    

    

      
      

        byeslide.html
        One file, 3.6 MB
      

      
This deck after byeslide build: 59 files in dist/. After byeslide bundle: one.

      
    

  

  
  





  
  

    

      
Start a deck

      
Start from this tour, a report or a lesson.

    

    
pnpm dlx byeslide init my-deck --template reportCreated ~/my-deck from the report template.cd my-deckpnpm installpnpm previewPreview: http://127.0.0.1:4173/index.html

  

  
Byeslide