create-sveltekitslides

Scaffold a SvelteKit slide deck — the kind you can rehearse in the browser and project at a real conference — in a few keystrokes.

npm create sveltekitslides@latest my-talk

You're walked through a presenter interview (length, audience, central claim, sections, demos, risks) and a working SvelteKit project drops onto disk. The interview answers are baked into a PROMPT.md so an LLM (Claude, Cursor, etc.) can read it and finish drafting src/lib/outline.js for you.

What you get

A SvelteKit static site where every slide is a long, scrollable page:

• Above the fold — the projected slide. Title, gist, bullets or code, pace bar at the bottom, QR code in the corner.
• Below the fold — rehearsal notes for that slide. Markdown, scrollable, invisible from the projector. Safe place to talk yourself through the beat without putting it on screen.

That's the design philosophy: the slide and the speaker notes live at the same URL. Share the link, scroll for the long version, project the top half for the talk.

Built in

• Wheel + touch swipe + arrow keys for slide nav
• Vertical scroll reveals notes, never advances the slide
• 30-min (or whatever you said) presentation timer in the header, localStorage-persisted
• Pace bar across the bottom — section ticks, current-slide window, live clock marker. Click anywhere to jump.
• QR code on every slide, encoded with window.location.origin so it works on localhost:5173 during rehearsal and your domain when deployed
• View-transition crossfade between slides (back/forward direction-aware)
• B to black the screen for Q&A, ? for keymap, n to toggle rehearsal notes inline, g to jump-to-slide picker
• /presenter popout — current slide preview, next slide preview, notes, and timer in one window. Drive from your phone, project the main window.
• Print stylesheet → Cmd-P produces a one-pager handout (slides + notes collapsed) you can hand out or PDF
• Optional PartyKit sync — phone drives, laptop projects, both stay on the same slide. (Skip it and the site still works offline.)
• Bundled qrgen Rust binary — generate static SVG QR codes for posters, handouts, or to bake into the deck as static/qr.svg

How it relates to create-sveltekitbook

This package is create-sveltekitbook's sibling. Both ship a SvelteKit project with a single outline.js driving every page. The book format is for long-form, reader-driven content. The slides format is for twenty- to forty-minute talks where the speaker is in the room. Same gestures library, same markdown helper, same scroll model. Different chrome.

The presenter interview

Before any files land, you're asked:

1. Talk length in minutes
2. Audience (who's in the room — one line)
3. Central claim of the talk
4. Section breakdown (labels and per-section budgets)
5. Demos planned — live, recorded, or both
6. What could go wrong, and your fallback
7. Single takeaway you want them to leave with
8. Anticipated Q&A — questions you want to be ready for

The answers are written verbatim into PROMPT.md at the project root. Open the project in Claude Code or Cursor and ask it to fill in src/lib/outline.js from the prompt — it has everything it needs.

After scaffolding

cd my-talk
npm install
npm run dev

Open the URL Vite prints. The cover loads. Hit → to start.

qrgen

A Rust binary that produces SVG QR codes is bundled at <project>/qrgen/. First run on a machine builds it once:

npm run qr -- "https://your-talk.example" > static/qr.svg

Subsequent invocations are instant. The runtime QrCode.svelte component still works without it (uses the qrcode npm package); the binary is for static / print / poster use cases.

Author

Andrew Gauger