slides-slidev

A slide list app for managing multiple Slidev presentations in one repository. Auto-generates a slide index from frontmatter, with dark mode, thumbnail support, and GitHub Pages deployment.

Transcript

1. slides-slidev Demo: https://www.kkoisland.com/slides-slidev/ GitHub: https://github.com/kkoisland/slides-slidev Slides with Slidev kkoisland (Keiko)
2. About Me kkoisland (Keiko) Frontend Engineer React / TypeScript Interactive UI Developer experience Portfolio: www.kkoisland.com GitHub: github.com/kkoisland
3. What is slides-slidev? A React app that lists all Slidev presentations in one repository 📝 Reads metadata from each slides.md frontmatter 🌙 Dark mode support 🖼️ Optional thumbnail per slide One repo. One URL. All your slides.
4. What is Slidev? 📝 A Markdown-based slide authoring tool for developers 🧩 Vue components work directly inside slides 💻 Code highlighting, animations, and diagrams built-in 📤 Export to PDF, PNG, or host as a web app → sli.dev: https://sli.dev
5. Why I Built This ❌ No built-in index page for multiple presentations ❌ Existing tools I found were Vue-based and hard to customize (layout, size, etc.) ❌ No single URL to share all slides → So I built my own solution Built for my own workflow — and open to fork! Problems with managing multiple Slidev presentations:
6. Key Features ✅ Auto-generated slide list from frontmatter ✅ Dark mode toggle ✅ Thumbnail support (any image format) ✅ pnpm new-slide — create from template ✅ Parallel dev server for all slides at once ✅ One-command deploy to GitHub Pages What You Can Do
7. Showcase #1: Slide List 📋 All presentations listed in one place 🌙 Dark mode toggle 🖼️ Show thumbnails for visual overview 📄 Hide thumbnails for a compact, scannable list
8. Showcase #2: Adding a New Slide 1️⃣ pnpm new-slide test 2️⃣ pnpm generate 3️⃣ pnpm dev 4️⃣ Appears in the list!
9. Showcase #3: Opening a Slide 🖱️ Click any slide in the list 🚀 Opens the Slidev presentation in a new tab 🌐 Works in both dev and production
10. Showcase #4: Animations in Slides excalidraw-animate — Animated SVGs from Excalidraw (I am a top contributor) excalidraw-claymate — Frame-by-frame GIFs from Excalidraw 🎉 Successfully embedded animations in Slidev — Slidev supports HTML directly in Markdown, so <object> and <img> just work! <script setup> const base = import.meta.env.BASE_URL </script> <object :key="$slidev.nav.currentPage" type="image/svg+xml" :data="base + 'excalidraw-animate.svg'" width="372" height="492"></object> <img src="/excalidraw-claymate.gif" style="max-height: 400px" />
11. Architecture
12. Tech Stack Frontend React + TypeScript Vite Tailwind CSS v4 Tooling pnpm Biome (lint & format) gray-matter concurrently Deploy GitHub Actions GitHub Pages 🛠️ Built with
13. Try It! 🚀 Live Demo https://www.kkoisland.com/slides-slidev/ 💻 Source Code https://github.com/kkoisland/slides-slidev ⭐ Want to use it? Fork the repo, replace slides with yours, swap avatar.png! ✏️ Hand-drawn diagrams excalidraw-animate (OSS contributor) Try slides-slidev for your own presentations! kkoisland (Keiko)