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