slides-grab
Generates and edits HTML slide decks in Claude Code and Codex, with design styles and export to PDF or per-slide PNG, plus card-news and image-based slide modes.
7 skills2 agents1.2k
@nomadamasPresentations
Plugin
slidev
Create and present web-based slide decks with Slidev, using Markdown, Vue components, code highlighting, animations, Mermaid diagrams, LaTeX math, and PDF export. Built for developers making technical presentations.
Plugin Signal72/100Solid
maintained95
capable14
documented100
adopted100
Claude Code
> /plugin marketplace add slidevjs/slidev> /plugin install slidev@slidev-plugins
Codex
$ npx skills add slidevjs/slidev -a codex
Cursor
$ npx skills add slidevjs/slidev -a cursor
Gemini CLI
$ npx skills add slidevjs/slidev -a gemini-cli
GitHub Copilot
$ copilot plugin marketplace add slidevjs/slidev$ copilot plugin install slidev@slidev-plugins
OpenCode
$ npx skills add slidevjs/slidev -a opencode
Windsurf
$ npx skills add slidevjs/slidev -a windsurf
Stats
49,428
Stars
2,271
Forks
Active
Maintenance
TypeScript
Language
MIT
License
Last commit
Created
What's inside
README
Presentation slides for developers 🧑💻👩💻👨💻
Video Preview | Documentation
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 ⚡️
Init Project Locally
Install Node.js >= 22.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
Stars on GitHub
Momentum
- stars in total
- 49.4k
File tree
Similar plugins.
@nomadamasppt-image-first
A Claude Code skill that turns a vague presentation request into a deck plan through a step by step proposal process. It builds the content outline, shows visual style previews, and refines the style before generating the final slides.
1 skill1.2k
@nyxtidesppt-agent
A multi-agent workflow that generates presentation slides, with an LLM drafting them and Gemini reviewing the output. Slides are produced as SVG in a Bento Grid layout and the workflow runs across platforms.
2 skills4 agents1 command+2+1+1+1834
@zengwenliang416xiaobei-skill
3 skills604
@xiao24beiQuestions about slidev.
Install it with the command on its page. It includes slidev. Its skills do not fire on their own yet. Free and open source.
- What is slidev?
- slidevjs/slidev is a plugin for building web-based slide decks from Markdown with Vue components. It adds a slidev skill for creating technical presentations with code highlighting, animations and interactive features.
- How do I install slidev?
- Run these in Claude Code: /plugin marketplace add slidevjs/slidev then /plugin install slidev@slidev-plugins. Then prompt normally.
- Does slidev auto-invoke its skills?
- Not yet. It is indexed on Flowy as a plain plugin.
- Is slidev free?
- Yes. Flowy is free and open source, with nothing gated. You can read every skill in full before you install.
- Which coding agents can use slidev's skills?
- slidev installs in Claude Code, and its skills also install in Codex, Cursor, Gemini CLI, GitHub Copilot, OpenCode and Windsurf with the skills CLI. Each skill's page has the install command. Flowy's auto-invocation, which fires a skill when your prompt matches, runs in Claude Code only.
Is this plugin yours?
Claim it with GitHubSubmit a pluginPromote it