slyds

Lightweight HTML presentation toolkit. Zero dependencies in output. Works from file://.

Quick Start

npx slyds init "My Talk Title"
cd my-talk-title
open index.html

Commands

slyds init "Talk Title" [-n slides]

Scaffolds a new presentation directory with 4 files:

• index.html — Your presentation (default 3 slides, or specify with -n)
• theme.css — Color/style overrides (commented-out examples)
• slyds.css — Base styles (don't edit unless you want to)
• slyds.js — Slide engine

slyds serve [dir]

Starts a local dev server. Useful when file:// restrictions block features.

slyds serve my-talk       # default port 3000
slyds serve my-talk -p 8080

slyds build [dir]

Inlines all CSS and JS into a single self-contained dist/index.html.

slyds build my-talk
# → my-talk/dist/index.html

Writing Slides

Each slide is a <div class="slide">:

<div class="slide">
    <h1>Slide Title</h1>
    <p>Content here.</p>
    <div class="speaker-notes">
        <p>Notes only visible in presenter mode.</p>
    </div>
</div>

The first slide gets class="slide active". Add as many slides as you need.

Keyboard Shortcuts

| Key | Action | |-----|--------| | → | Next slide | | ← | Previous slide | | N | Open speaker notes window | | Esc | Close notes window |

Built-in CSS Classes

| Class | Use | |-------|-----| | .title-slide | Full-color title slide | | .conclusion-slide | Dark closing slide | | .highlight | Gradient callout box | | .stats-grid + .stat-box | Grid of stat cards | | .phase-box | Bordered content block | | .tier-table | Styled table | | .controls-bar | Fixed top navigation bar |

Theming

Edit theme.css to override base styles. Common overrides:

• body background gradient
• .title-slide / .conclusion-slide backgrounds
• .slide h1 border color
• .nav-button colors
• .stat-number color

License

MIT