Decksmith

A modern presentation framework built with Svelte 5. Create beautiful, interactive presentations using components and modern JavaScript.

Decksmith was originally inspired by Reveal.js.

Features

• Slide Navigation — Horizontal and vertical 2D slide grid
• Transitions — Fade, slide, convex, concave, zoom (per-slide or global)
• Fragments — Step-by-step reveals with 17 animation styles
• Keyboard & Touch — Full keyboard navigation + mobile swipe support
• Overview Mode — Bird's-eye view of all slides (ESC key)
• Speaker Notes — Separate speaker window with timer and notes
• Markdown — Write slide content in Markdown
• Code Highlighting — Syntax highlighting with line-by-line step-through
• Auto-Animate — Automatically animate matching elements between slides
• Scroll View — Render as a scrollable page
• Themes — 5 built-in themes (Obsidian, Air, Dusk, Parchment, Ember)
• Hash Routing — URL reflects current slide for deep-linking
• Auto-Scaling — Content scales to fit any viewport
• PDF Export — Print-friendly layout via ?print-pdf
• Progress Bar & Slide Numbers — Configurable UI controls

Quick Start

Install Decksmith from npm:

npm install decksmith

Then import it in your presentation file:

<script lang="ts">
  import { Deck, Slide, Fragment } from "decksmith";
</script>

<Deck theme="obsidian" transition="slide">
  <Slide h={0} v={0}>
    <h1>Hello World</h1>
  </Slide>

  <Slide h={1} v={0}>
    <h2>Second Slide</h2>
    <Fragment index={0} style="fade-up">
      <p>Appears on click</p>
    </Fragment>
  </Slide>
</Deck>

Local Development

To work on Decksmith itself:

git clone <repo-url> decksmith
cd decksmith
npm install
npm start

Keyboard Shortcuts

| Key | Action | | ------------------- | ------------------------ | | → / Space | Next slide/fragment | | ← / Shift+Space | Previous slide/fragment | | ↑ / ↓ | Navigate vertical slides | | Esc | Toggle overview mode | | F | Toggle fullscreen | | S | Open speaker notes | | B / . | Pause (blackout) | | Home / End | First / last slide |

Themes

Set the theme on the <Deck> component:

<Deck theme="obsidian">

Available: obsidian (default), air, dusk, parchment, ember

Documentation

See the docs/ directory for complete documentation:

• Getting Started
• Installation
• Creating Presentations
• Slides
• Fragments
• Transitions
• Themes
• Navigation
• Speaker Notes
• Code Highlighting
• Markdown
• Auto-Animate
• Scroll View
• PDF Export
• Overview Mode
• Configuration
• API Reference
• LLM Guide — For AI-assisted presentation generation

For LLMs / AI Agents

See CLAUDE.md for a structured reference designed for AI agents to read and generate presentations programmatically.

Tech Stack

• Svelte 5 — Runes-based reactivity
• Vite — Fast build tooling
• TypeScript — Type safety
• Marked — Markdown parsing

License

Decksmith is released under the MIT License.