Slidecraft

A modern Markdown-driven presentation framework with cinematic WebGL backgrounds, GPU-accelerated transitions, beautiful themes, code walkthroughs, live drawing, and remote control.

Live demo →

Features

• Markdown authoring — write slides as plain .md with YAML frontmatter
• Per-slide frontmatter — set transition, background, class, or layout in a YAML block at the top of each slide
• WebGL backgrounds — particles, gradient, geometric, waves
• GPU transitions — dissolve, morph, zoom, slide
• Code walkthroughs — line highlighting, multi-step reveals, syntax highlighting via highlight.js
• Auto-fit code blocks — code text scales to the largest size that fits the slide without scrolling
• Diff (before/after) layout — side-by-side <!-- layout: diff --> slides
• Mermaid diagrams, KaTeX math, terminal blocks, fragments
• Speaker notes, slide overview (G), drawing mode (D), laser pointer (L)
• Remote control via QR code, autoplay, fullscreen
• 20+ themes — midnight, aurora, cyberpunk, forest, ocean, synthwave, and more

Quick start

# Clone or use as a template
git clone https://github.com/jfenc91/slidecraft.git my-talk
cd my-talk
npm install
npm run dev

Open http://localhost:5173 to see the marketing site, or http://localhost:5173/view?p=presentation to launch the demo deck.

Install from npm

npm install @jfenc91/slidecraft

Authoring a presentation

Create public/presentations/my-talk.md:

---
title: My Talk
theme: midnight
transition: dissolve
background: particles
---

# Welcome

Your first slide.

---
transition: zoom
background: gradient
fragment: fade-up
---

## Second slide

+ Bullet one (revealed on keypress)
+ Bullet two

???
Speaker notes for this slide.

Then visit http://localhost:5173/view?p=my-talk.

Slide syntax

Slidecraft is plain CommonMark with three conventions on top:

| Feature | Syntax | |---------|--------| | Slide separator | A line containing only --- | | Per-slide config | A YAML frontmatter block right after the separator (---\nkey: value\n---) | | Speaker notes | A line containing only ???; everything below is notes | | Fragment (reveal on click) | A list item starting with + instead of - | | Section / subsection | The first # heading on a slide opens a section; the first ## opens a subsection |

Recognized per-slide YAML keys:

| Key | Values | Effect | |-----|--------|--------| | transition | dissolve, morph, zoom, slide, none | Override deck transition | | background | particles, gradient, geometric, waves, none | Override deck background | | class | centered, two-column, title-slide, … | Layout class on the slide element | | layout | diff | Built-in layout (e.g. before/after) | | fragment | fade-up, fade-left, fade-right, highlight-current | Default style for + fragments on this slide |

Keyboard shortcuts

| Key | Action | |-----|--------| | → ↓ Space | Next slide | | ← ↑ | Previous slide | | G | Slide overview grid | | F | Toggle fullscreen | | S | Speaker notes | | D | Drawing mode | | L | Laser pointer | | R | Remote control QR | | P | Pause / resume autoplay | | ? | Help overlay |

Building

npm run build          # build to dist/
npm run build:pages    # build with /slidecraft/ base path for GitHub Pages
npm run preview        # preview the production build locally

License

MIT © jfenc91