GeekPresent

Presentation slides for people who'd rather write HTML than wrestle a slide editor.

GeekPresent turns HTML, CSS, and Svelte into presentations and long-form texts: every slide is just a route, every component is yours to reuse, and the whole thing builds into a static site you can deploy to GitHub Pages in one push.

Why it exists

If you have done any front-end work you already know HTML + CSS + JS, and you've probably have thought that it would be nice if you could just use that to make slides instead of fighting a WYSIWYG tool. GeekPresent lets you do exactly that:

  • You already know the tools. Author slides in HTML, CSS, and Svelte — no proprietary editor, no lock-in.
  • Fixed canvas, automatic scaling. Design on a fixed 1920×1080 canvas and position things with normal CSS — including pixel-exact absolute positioning — and the framework scales the whole slide to fit any screen. You think in one size; it handles the rest.
  • Real components. Reusable slide pieces — boxes, code viewers, notes — are just imports.
  • Interactive when you want. Slides are Svelte components, so state and events work as usual — click-to-reveal, toggles, live demos, anything you can do with JS.
  • Backend, if you wire it up. With a bit of plumbing you can talk to a backend too — Svelte 5 makes that kind of thing surprisingly pleasant.
  • It's just text. Slides are Svelte files, so they diff cleanly, version-control nicely, and hot-reload while you edit.
  • AI-friendly. Because slides and texts are plain Svelte files, an AI agent can read, create, and adjust them for you — no opaque binary format to fight.

Two kinds of artifact

Both are built from the same components — pick the shape that fits:

  • Presentations — many fixed slides on a 1920×1080 landscape canvas (or 1080×1920 portrait), advanced one at a time.
  • Texts — one long page that flows downward, its width following the window up to 1080px, that you scroll at your own pace.

What you get

  • Navigation built in. Arrow keys, an on-screen nav bar, and a Table of Contents — no wiring required.
  • SCALED / FIXED modes. Present scaled-to-fit, or switch to a fixed 1920×1080 view with speaker notes visible below.
  • A component toolbox. Box (pop-up overlays), Code / CodeBox (Monaco viewers, any language), YouTube (thumbnail + QR), plus Notes, Hints, and Labels.
  • Per-deck themes. Each presentation can carry its own fonts, colours, background, and favicon — light or dark.
  • Static, portable output. Every route is prerendered with relative asset paths, so the build drops onto GitHub Pages, any static host, or straight off disk.

What makes it great

  • Fixed canvas with auto-scaling. Anyone who has tried to build a raw HTML/CSS deck knows the nightmare of responsive design wrecking slide layouts across projector resolutions. Locking the design to a fixed aspect ratio (1920×1080) and auto-scaling it to fit the screen gives you the absolute positioning power of a traditional slide editor without losing the flexibility of web code.
  • Dual-purpose artifacts. The same source components compile into either a slide deck or a long-form, scrollable text. Give the talk on stage, then publish a reader-friendly version as a blog post or docs page — no rewriting.
  • Git- and AI-friendly. Plain-text Svelte/HTML files mean real version control — clean diffs, branches, pull requests — and they make it easy to point an LLM at your slides to scaffold, edit, or translate them. AI is far better at writing code than at generating opaque .pptx binaries.
  • Portrait mode for modern content. A 1080×1920 layout targets mobile and short-form video (YouTube Shorts, TikTok) — the same components, a taller frame.

What makes it unique

HTML-based slides aren't new — reveal.js, Slidev, Spectacle and Marp all exist. What no mainstream tool focuses on is the particular set of choices GeekPresent combines:

  • One slide = one route = one folder. Slides aren't sections of a single giant document or fenced blocks in one markdown file — each slide is its own route folder. So slides diff cleanly one file at a time, each can colocate its own assets (images, QR codes) right beside it, and every slide is independently URL-addressable and prerendered to its own HTML.
  • A fixed canvas with pixel-exact positioning and auto-scaling. You design against one fixed 1920×1080 size — left: 960px means the same thing on every screen — and the framework scales the whole canvas to fit any window. Most HTML-slide tools push you toward responsive flow; GeekPresent gives you a fixed pixel coordinate space and does the scaling for you.
  • Slides that are their own documentation. A </> Source button pops a slide's own source into a Monaco viewer titled with its file path — pulled straight from the file, so it can never drift from what you see.
  • Two artifact types from one component set. The same components compile into either a click-through presentation or a long-form, scrollable Text — give the talk, then publish the reader-friendly version with no rewrite.
  • Multiple independent presentations in one project. Navigation and the Table of Contents are scoped per presentation, not a single global config. Sibling decks each carry their own slide list, theme, fonts, background, and favicon, and coexist without interfering.
  • Genuinely portable, lean static output. Every route prerenders with relative asset paths, so the build runs from GitHub Pages, any sub-path, or straight off disk — and the build can emit the whole site or just a single presentation.

The trade-off: slide-to-slide navigation is a full page load, not client-side routing — so animations live within a slide; cross-slide transitions don't work out of the box. That's the cost of the route-per-slide design.

Explore

The best reference is the source itself — open any slide below and read its +page.svelte.

Presentations

  • GeekPresent — the main presentation: a guide to building decks with this framework.
  • What Makes It Unique — a short deck on what sets GeekPresent apart from mainstream slide tools (and it demonstrates each point as it makes it).
  • GeekPortrait — a portrait 1080×1920 deck for YouTube Shorts: same components, taller frame.
  • GeekLight — a light-theme presentation: same components on a light watercolor background.

Text

  • Text view — a sample Text artifact: one long page, authored by hand, that scrolls.

Get started

Clone the repo, then pnpm install and pnpm dev — list your slides in pages.ts, drop a +page.svelte next to each, and pnpm build when you're ready to ship. See the README for the full walkthrough.