What is Slidev?
Slidev is a slides maker and presenter designed for developers, consist of the following features
- 📝 Text-based - focus on the content with Markdown, and then style them later
- 🎨 Themable - themes can be shared and re-used as npm packages
- 🧑💻 Developer Friendly - code highlighting, live coding with autocompletion
- 🤹 Interactive - embed Vue components to enhance your expressions
- 🎥 Recording - built-in recording and camera view
- 📤 Portable - export to PDF, PPTX, PNGs, or even a hostable SPA
- 🛠 Hackable - virtually anything that’s possible on a webpage is possible in Slidev
Read more about Why Slidev?
Navigation
Hover on the bottom-left corner to see the navigation’s controls panel, learn more
Keyboard Shortcuts
| right / space | next animation or slide |
| left / shiftspace | previous animation or slide |
| up | previous slide |
| down | next slide |
Here!
Table of contents
You can use the Toc component to generate a table of contents for your slides:
<Toc minDepth="1" maxDepth="1"></Toc>The title will be inferred from your slide content, or you can override it with title and level in your frontmatter.
Code
Use code snippets and get the highlighting directly, and even types hover!
// TwoSlash enables TypeScript hover information
// and errors in markdown code blocks
// More at https://shiki.style/packages/twoslash
import { computed, ref } from 'vue'
const count = ref(0)
const doubled = computed(() => count.value * 2)
doubled.value = 2Cannot assign to 'value' because it is a read-only property.// Inside ./snippets/external.ts
export function emptyArray<T>(length: number) {
return Array.from<T>({ length })
}Shiki Magic Move
Powered by shiki-magic-move, Slidev supports animations across multiple code snippets.
Add multiple code blocks and wrap them with ````md magic-move (four backticks) to enable the magic move. For example:
1 // step 1
2 const author = reactive({
3 name: 'John Doe',
4 books: [
5 'Vue 2 - Advanced Guide',
6 'Vue 3 - Basic Guide',
7 'Vue 4 - The Mystery'
8 ]
9 })
Components
You can use Vue components directly inside your slides.
We have provided a few built-in components like <Tweet/> and <Youtube/> that you can use directly. And adding your custom components is also super easy.
<Counter :count="10" />Check out the guides for more.
<Tweet id="1390115482657726468" />Themes
Slidev comes with powerful theming support. Themes can provide styles, layouts, components, or even configurations for tools. Switching between themes by just one edit in your frontmatter:
---
theme: default
------
theme: seriph
---
Read more about How to use a theme and check out the Awesome Themes Gallery.
Clicks Animations
You can add v-click to elements to add a click animation.
This shows up when you click the slide:
<div v-click>This shows up when you click the slide.</div>The v-mark directive also allows you to add inline marks , powered by Rough Notation:
<span v-mark.underline.orange>inline markers</span>Motions
Motion animations are powered by @vueuse/motion, triggered by v-motion directive.
<div
v-motion
:initial="{ x: -80 }"
:enter="{ x: 0 }"
:click-3="{ x: 80 }"
:leave="{ x: 1000 }"
>
Slidev
</div>
LaTeX
LaTeX is supported out-of-box. Powered by KaTeX.
Inline 3x−1+(1+x)2
Block
∇⋅E∇⋅B∇×E∇×B=ε0ρ=0=−∂t∂B=μ0J+μ0ε0∂t∂E
Diagrams
You can create diagrams / graphs from textual descriptions, directly in your Markdown.
Learn more: Mermaid Diagrams and PlantUML Diagrams
Draggable Elements
Double-click on the draggable elements to edit their positions.
Directive Usage
<img v-drag="'square'" src="https://sli.dev/logo.png">Component Usage
<v-drag text-3xl>
<carbon:arrow-up />
Use the `v-drag` component to have a draggable container!
</v-drag>
Draggable Arrow
<v-drag-arrow two-way />Imported Slides
You can split your slides.md into multiple files and organize them as you want using the src attribute.
slides.md
# Page 1
Page 2 from main entry.
---
## src: ./subpage.mdsubpage.md
# Page 2
Page 2 from another file.Monaco Editor
Slidev provides built-in Monaco Editor support.
Add {monaco} to the code block to turn it into an editor:
Use {monaco-run} to create an editor that can execute the code directly in the slide:
[1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144]