Open-Athena/slidev — a fork of sli.dev

Adds direct manipulation for slide content: click any image to drag, resize, rotate, or reorder; double-click to crop.
Live demo → · slide gallery

What this fork adds

• 🖱️ Drag / resize / rotate any markdown image or embed; positions persist to slides.coords.yaml
• ✂️ Crop — double-click an image to enter crop mode
• 📐 Snap-to-guides during drag/resize against other slide elements (hold ⌘ to disable); ⇧ locks AR
• 📚 Z-order shortcuts: ⌘↑/⌘↓ forward/back · ⇧⌘↑/⇧⌘↓ to-front/back
• ↩️ Undo / redo (⌘Z / ⇧⌘Z), with a right-side version-history drawer that can restore any prior state
• 🌐 Multi-tab live edits — changes in one browser tab propagate to others via SSE
• 🖼️ Draggable embeds: <Tweet>, <Youtube>, <BlueSky> — see slide 2
• 🔍 Pinch-zoom & pan in slide view (trackpad / touch)
• 📤 Per-slide OG cards built into slidev build + a thumbnail gallery

State persists to <userRoot>/.slidev/state.db (SQLite, dev-server only — powers undo/redo, history, multi-tab sync) and <userRoot>/slides.coords.yaml (checked-in source of truth; flushed via the toolbar "Commit to YAML" button — orange dot when the DB is ahead). Production builds ship neither — published decks are read-only static HTML/JS.

Installing this fork

Not published to npm — installs go through pkg.pr.new, which auto-publishes a SHA-pinned preview of every fork package on each push to main (via the cr.yml workflow). Works with npm / pnpm / yarn, no pnpm.overrides, no manual version bumps:

# Pin to a specific commit SHA — see CR run summaries for the latest:
# https://github.com/Open-Athena/slidev/actions/workflows/cr.yml
SHA=<sha>
npm install https://pkg.pr.new/Open-Athena/slidev/@slidev/{cli,client,parser}@$SHA

(Brace expansion is bash / zsh; drop the braces and run the three URLs separately in fish / dash.)

All three packages are required: @slidev/cli (the build/dev CLI) depends on @slidev/client + @slidev/parser at exact upstream versions, so installing just the cli would silently pull the other two from upstream npm and lose the fork features. The fork pkgs keep their @slidev/* names, so node_modules/@slidev/{cli,client,parser} end up wired together correctly and themes (incl. oa-slidev-theme) keep working without changes.

@slidev/types is unchanged in this fork — pull it straight from upstream npm if needed.

---

Presentation slides for developers 🧑‍💻👩‍💻👨‍💻

Video Preview | Documentation

Made possible by my Sponsor Program 💖

Features

• 📝 Markdown-based - focus on content and use your favorite editor
• 🧑‍💻 Developer Friendly - built-in code highlighting, live coding, etc.
• 🎨 Themable - theme can be shared and used with npm packages
• 🌈 Stylish - on-demand utilities via UnoCSS.
• 🤹 Interactive - embedding Vue components seamlessly
• 🎙 Presenter Mode - use another window, or even your phone to control your slides
• 🎨 Drawing - draw and annotate on your slides
• 🧮 LaTeX - built-in LaTeX math equations support
• 📰 Diagrams - creates diagrams using textual descriptions with Mermaid
• 🌟 Icons - access to icons from any icon set directly
• 💻 Editor - integrated editor, or the VSCode extension
• 🎥 Recording - built-in recording and camera view
• 📤 Portable - export into PDF, PNGs, or PPTX
• ⚡️ Fast - instant reloading powered by Vite
• 🛠 Hackable - using Vite plugins, Vue components, or any npm packages

Getting Started

Try it Online ⚡️

sli.dev/new

Init Project Locally

Install Node.js >= 20.12.0 and run the following command:

npm init slidev

Documentation: English | 中文文档 | Français | Español | Русский | Português-BR

Discord: chat.sli.dev

For a full example, you can check the demo folder, which is also the source file for my previous talk.

Tech Stack

• Vite - An extremely fast frontend tooling
• Vue 3 powered Markdown - Focus on the content while having the power of HTML and Vue components whenever needed
• UnoCSS - On-demand utility-first CSS engine, style your slides at ease
• Shiki, Monaco Editor - First-class code snippets support with live coding capability
• RecordRTC - Built-in recording and camera view
• VueUse family - @vueuse/core, @vueuse/motion, etc.
• Iconify - Icon sets collection.
• Drauu - Drawing and annotations support
• KaTeX - LaTeX math rendering.
• Mermaid - Textual Diagrams.

Sponsors

This project is made possible by all the sponsors supporting my work:

License

MIT License © 2021 Anthony Fu