Slidev is a slides maker and presenter designed for developers, consist of the following features
Read more about Why Slidev?
Slidev is a slides maker and presenter designed for developers, consist of the following features
Read more about Why Slidev?
Hover on the bottom-left corner to see the navigationβs controls panel, learn more
right / space | next animation or slide |
left | previous animation or slide |
up | previous slide |
down | next slide |
Here!
Use code snippets and get the highlighting directly!
interface User { id: number firstName: string lastName: string role: string } function updateUser(id: number, update: User) { const user = getUser(id) const newUser = {...user, ...update} saveUser(id, newUser) }
interface User { id: number firstName: string lastName: string role: string } function updateUser(id: number, update: User) { const user = getUser(id) const newUser = {...user, ...update} saveUser(id, newUser) }
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" />
<Counter :count="10" />
Check out the guides for more.
<Tweet id="1390115482657726468" />
<Tweet id="1390115482657726468" />
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: default ---
--- theme: seriph ---
--- theme: seriph ---
Read more about How to use a theme and check out the Awesome Themes Gallery.
Animations are powered by @vueuse/motion.
<div v-motion :initial="{ x: -80 }" :enter="{ x: 0 }"> Slidev </div>
<div v-motion :initial="{ x: -80 }" :enter="{ x: 0 }"> Slidev </div>
LaTeX is supported out-of-box powered by KaTeX.
Inline 3xβ1β+(1+x)2
Block
βΓBβc1ββtβEββΓE+c1ββtβBβββ Bβ=c4Οβjβββ E=0=0β=4ΟΟ
You can create diagrams / graphs from textual descriptions, directly in your Markdown.