iTranslated by AI
[Slidev Absolute Beginner's Guide] How to Create Powerful Slides Only Possible for Engineers!
1. Introduction
When you present at internal study sessions or LT events, what tools do you use to create your slides? Google Slides? PowerPoint? Zenn?
In this article, I'd like to propose Slidev—a library that lets you create slides using Markdown and Vue.js, which are relatively familiar to engineers—as a new option!!
You might be able to create slides that surprise people in sales or HR who typically use tools like Google Slides!
2. What is Slidev?
Slidev is a presentation library that can be built based on Markdown.
It was developed by Anthony Fu (antfu.me), who has been involved in numerous OSS projects, and it is built on top of Vue.js.
Features of Slidev
-
Write in Markdown
Organize your slides into a single plain text file using extended Markdown format. This allows you to focus on content while using Git or any editor you prefer. -
Developer Friendly
It's packed with code snippets for developers!
Examples: Shiki, Keynote-like Magic Move, TwoSlash -
Interactive and Expressive Customization with Vue.js and CSS
You can create Vue components. This allows you to add interactive elements to your slides (like a button that counts up when clicked, or anything else you can do with Vue!). -
Diverse Export Options
You can export to PDF, PPTX, PNG, and even publish as a Web page in SPA format. -
Fast Builds with Vite
Since it uses Vite for builds, they are extremely fast. It naturally supports HMR and allows you to use Vite plugins.
3. Why Slidev is Superior to Other Tools (Author's Perspective)
I'll introduce the points where I feel Slidev is superior compared to Google Slides or PowerPoint.
Easily Create Beautiful Slides
You can create beautiful slides while maintaining design consistency across pages!
-
Google Slides, etc.
Intuitive and free operation is possible! However, there are fewer features for placing elements systematically like a design tool. This can sometimes make it hard to maintain design consistency between slides. -
Slidev
By following Markdown syntax and Slidev's unique notation, you can arrange elements systematically.
Also, because layout rules and styles are common to all slides, it's easy when you want to modify the overall layout!
-
Google Slides, etc.
Even if you use slide templates, once you've created slides, you (probably) have to change the design of each page one by one... -
Slidev
You can change the design of the entire presentation by modifying layout files or changing CSS!
Git Management per MD File
-
Google Slides, etc.
You can restore or version past slides using features like change history. However, there are limitations such as history not being preserved after restoration or limits on the number of versions. -
Slidev
Since it's created as an MD file, you can manage versions with Git and GitHub. History remains after restoring past slides, and versioning via commit messages or tags is possible.
Create Vue Components for Complex Slides
If it can be done in Vue, you can do anything!!!
That alone should tell you how amazing it is.
4. 👶 Slidev Basics
4.1. Installation
Just run the following command:
pnpm create slidev
$ pnpm create slidev
●■▲
Slidev Creator v0.50.0-beta.7
✔ Project name: … project-name
Scaffolding project in project-name ...
Done.
✔ Install and start it now? … yes
✔ Choose the package manager › pnpm
4.2. Creating a New Slide
The {project-root}/slides.md file constitutes a single slide presentation.
This is the file that is previewed during creation.
If you followed step 4.1, a slide should have already been created.
4.3. Creating a New Page
To create the second page and beyond, separate them with ---.
Basically, you create the content for all pages of the slides within slides.md alone.
# Page 1
Content of Page 1
---
# Page 2
Content of Page 2
Tips: Splitting into separate files
You can configure each slide by adding optional frontmatter at the beginning of the slide.
(Frontmatter: The part enclosed by --- ~ ---)
You can also split the content into separate files using the src attribute.
# Page 1
Content of Page 1
---
src: ./pages/imported-slides.md
hide: false
---
# Page 2
Content of the separated Page 2
4.4. Writing Page Content
You can write content using basic Markdown syntax (Markdown Cheatsheet).
Syntax listed in the Markdown Cheatsheet
# H1
## H2
### H3
#### H4
##### H5
###### H6
Alternatively, for H1 and H2, an underline-ish style:
# Alt-H1
## Alt-H2
Emphasis, aka italics, with _asterisks_ or _underscores_.
Strong emphasis, aka bold, with **asterisks** or **underscores**.
Combined emphasis with **asterisks and _underscores_**.
Strikethrough uses two tildes. ~~Scratch this.~~
1. First ordered list item
2. Another item
⋅⋅\* Unordered sub-list.
3. Actual numbers don't matter, just that it's a number
⋅⋅1. Ordered sub-list
4. And another item.
⋅⋅⋅You can have properly indented paragraphs within list items. Notice the blank line above, and the leading spaces (at least one, but we'll use three here to also align the raw Markdown).
⋅⋅⋅To have a line break without a paragraph, you will need to use two trailing spaces.⋅⋅
⋅⋅⋅Note that this line is separate, but within the same paragraph.⋅⋅
⋅⋅⋅(This is contrary to the typical GFM line break behaviour, where trailing spaces are not required.)
- Unordered list can use asterisks
* Or minuses
- Or pluses
Additionally, as a unique feature of Slidev, you can use MDC Syntax.
---
mdc: true
---
# MDC Syntax
By adding `mdc: true` to the frontmatter, you can use MDC Syntax.
This is a [red text]{style="color:red"} :inline-component{prop="value"}
---
4.5. Writing the Script (Speaker Notes)
Tools like Google Slides have a feature called "Speaker Notes," where you can write scripts or supplementary information for the presenter to see during the presentation.
Slidev has a similar feature.
Comment blocks at the end of each slide are treated as speaker notes.
<!-- Writing here won't work -->
# Page 1
<!--
This commented-out part will be displayed as speaker notes
-->
4.6. Previewing the Slides
To preview the slides in your local environment, run the following command:
pnpm slidev
If it looks like this, it's a success!
Three links will be displayed, each with the following purpose:
- public slide show: The URL for the public slide presentation
-
presenter mode: The URL for the presenter mode
You can check the speaker notes you just added at this URL - slides overview: The URL to display an overview of the slides
$ pnpm slidev
●■▲
Slidev v0.50.0-beta.6
theme @slidev/theme-default
css engine unocss
entry /Users/kanekotakuma/dev/other/takuma-ru-documents/slidev/slides.md
public slide show > http://localhost:3030/
presenter mode > http://localhost:3030/presenter/
slides overview > http://localhost:3030/overview/
remote control > pass --remote to enable
shortcuts > restart | open | edit | quit
🎉 Once you've reached this point, you've gained enough knowledge to play around with Slidev!
5. 🔈 Presenting with Slidev
5.1. Publishing Slides as a Web Page (Hosting)
Details: Slidev - Building and Hosting
1. Build
Running the following command generates files built as an SPA.
pnpm slidev build
2. Upload to each hosting service
This is the same as hosting an SPA built with Vite or similar tools.
Major hosting methods are listed in the official documentation (Slidev - Hosting), so please check it out!
5.2. Distributing as Material (PDF, PPTX, PNG)
Details: Slidev - Exporting
1. Library Installation
Install the following, as it is required.
pnpm add -D playwright-chromium
2a. Build as PDF
slidev export
2b. Build as PPTX
slidev export --format pptx
2c. Build as PNG
slidev export --format png
5.3. Giving a Presentation
If you publish your slides as a web page, you can distribute the presentation materials by sharing the URL with the audience.
By using the presenter mode (/presenter), you can give your presentation while checking your speaker notes!
If you build as PDF, PPTX, or PNG, you can distribute the materials by sending each file to the audience.
Everyone can present using the tools they are familiar with!
🎉 Once you've reached this point, you've gained enough knowledge to give a simple presentation with Slidev!!
6. 👦 Slidev Introduction
The knowledge you've gained so far covers features that could, with some effort, be used in other presentation tools. From here, let's dive into how to use Slidev's unique features to their full potential!
6.1. Liven Up Your Slides with Animations
In Slidev, you can broadly use two types of animations: "Click Animations" and "Transition Animations".
Click Animations
These are animations used when you want to reveal elements gradually within the same page.
v-click
This is an animation that can be added using the <v-click> component or the v-click attribute.
Elements wrapped in v-click will be displayed gradually by pressing the right arrow key or the space bar. They appear in the order they are placed, and the next page will be displayed only after all elements have appeared.
<v-click>
<p>This element appeared by pressing the Right Arrow or Space key once</p>
</v-click>
<div v-click>
<p>This element appeared by pressing the Right Arrow or Space key twice</p>
</div>
v-after
This is an animation that can be added using the <v-after> component or the v-after attribute.
Elements wrapped in v-after will be displayed when the immediately preceding click animation is triggered. They appear at the same time as the preceding click animation.
<div v-click>The first click animation</div> <!-- Displays by pressing Right Arrow or Space key once -->
<div v-after>An animation that triggers when the first click animation is activated</div> <!-- Displays at the same time as above (on the 1st click) -->
v-clicks
This is an animation that can be added only using <v-clicks>.
It is used when you want to display items in a list or similar structure one by one.
<v-clicks>
- Item 1 <!-- Displays by pressing Right Arrow or Space key once -->
- Item 2 <!-- Displays by pressing Right Arrow or Space key twice -->
- Item 3 <!-- Displays by pressing Right Arrow or Space key three times -->
</v-clicks>
Tips: "Hide" with Click Animations
These animations typically work by displaying elements upon clicking. However, it's also possible to hide an element by clicking!
<v-click>
<p>This element appeared by pressing the Right Arrow or Space key once</p>
</v-click>
<div v-click.hide>
<p>This element will **be hidden** by pressing the Right Arrow or Space key twice</p>
</div>
Tips: Highlighting inside Code Blocks
While it doesn't strictly use the click animation components, there is also a highlight animation feature for code blocks! This is useful when you want to draw attention to specific lines!
By adding {none|{line number to highlight}|line number to highlight} to the code block definition, the specified lines will be highlighted in order from left to right as you continue to click.
```js {none|1|2}
1; // Highlighted by pressing Right Arrow or Space key once
2; // Highlighted by pressing Right Arrow or Space key twice
\``` <!-- The \ is included for Zenn's formatting. Please remove it. -->
Tips: Adjusting Animation Timing with at
By using at, you can adjust the timing of animations. While elements normally appear in order from top to bottom, using at allows them to be displayed after a specific number of clicks.
<v-click>
<p>This element appeared by pressing the Right Arrow or Space key once</p>
</v-click>
<div v-click.at="3">
<p>This element appeared by pressing the Right Arrow or Space key three times</p> <!-- Normally the 2nd click, but... -->
</div>
<div v-click.at="2">
<p>This element appeared by pressing the Right Arrow or Space key twice</p> <!-- Normally the 3rd click, but... -->
</div>
Transition Animations
These are animations used when you want to apply an effect to the entire page during a page change.
You can add transition animations using the transition frontmatter.
---
transition: slide
---
# Page 1
There are several types of transition animations:
-
fade- Crossfade in/out -
fade-out- Fade out then fade in -
slide-left- Slide to the left (slides right when going back) -
slide-right- Slide to the right (slides left when going back) -
slide-up- Slide upwards (slides down when going back) -
slide-down- Slide downwards (slides up when going back) -
view-transition- View Transition API
view-transition
You can add transition animations using the View Transition API.
For configuration methods, please refer to Slidev - View Transition API.
---
transition: view-transition
mdc: true
---
# View Transition {.inline-block.view-transition-title}
---
# View Transition {.inline-block.view-transition-title}
Tips: Creating Your Own Animations
These transition animations are implemented based on Vue Transition. You can create your own transition animations by adding CSS that follows the Vue Transition conventions.
6.2. Streamlining Slide Creation with Components
Slidev allows you to use Vue components directly within your Markdown files.
By simply creating components in {project-root}/components, you can immediately use them in your .md files.
There are no limitations on the features of these Vue components—if it's possible in Vue, you can do it here!
Please refer to the Vue.js - Components Basics for more details.
<template>
<div>
<h1>MyComponent</h1>
</div>
</template>
# Page 1
<MyComponent /><!-- Displays "# MyComponent" -->
6.3. Making it Look Cool by Changing Themes
While Slidev's default design is quite sophisticated and cool, you can change the theme to match your personal preference or specific use case!
How to Change the Theme
You can change the theme by adding theme to the frontmatter. Since themes are provided as separate packages, they need to be installed via npm or a similar package manager (Slidev usually handles the installation automatically, so you don't need to worry too much about it).
---
theme: {theme-name}
---
# Page 1
Theme Gallery
You can check out available themes in the Theme Gallery at the link below!
Personally, I recommend the Vercel theme—it's very sleek!
6.4. Adjusting the Layout
There are times when you want to adjust the entire page, such as placing an image on the right or splitting the page into two sections. In such cases, you can change the layout using the layout frontmatter.
By default, the first page is set to cover, and subsequent pages are set to default.
---
layout: {layout-name}
---
# Page 1
With 19 standard layouts provided, you should be able to find what you need.
Recommended layouts:
-
image-right
A layout that displays text on the left and an image on the right. -
section
A layout for displaying a section title before starting a new topic. -
end
A layout for the final slide (e.g., "Thank you for listening").
🎉 Once you've reached this point, you should already be capable of creating powerful, expert-level slides with Slidev!!!
7. 🧑 Slidev Advanced
You already have sufficient knowledge.
But there's still room to make your slides even cooler!
From here, I'll impart some advanced ways to use Slidev!
7.1. Flexibly Change Design with CSS
If the provided layouts and syntax aren't enough to express what you want, you can freely change the design using CSS.
While you can apply styles using the style attribute, Slidev supports UnoCSS by default!
Using the Interactive Docs, where you can search for UnoCSS class names by entering CSS property names, makes it easy to apply styles even without deep knowledge!
The following presets are pre-installed, so you can enjoy a full UnoCSS experience right away!
- @unocss/preset-uno - Tailwind / Windi CSS compatible utilities
- @unocss/preset-attributify - Attribute mode
- @unocss/preset-icons - Use any icon as a class
- @unocss/preset-web-fonts - Use web fonts
- @unocss/transformer-directives - Use in CSS via @apply
<div class="grid pt-4 gap-4 grid-cols-[100px,1fr]">
### Name
- Item 1
- Item 2
</div>
7.2. Accessing Slide Behavior with Global Context
There might be times when you want to display the page number on the slide or perform advanced conditional rendering based on the click animation timing.
In such cases, you can achieve this by using the Global Context to retrieve slide behavior!
Since many variables are provided, please refer to Slidev - Global Context for full details.
Here are a few examples.
Displaying page numbers at the bottom of the screen
# Page 1
<div class="absolute bottom-5 right-5">
<span class="font-size-2">
{{ $page }}<!-- 1 -->
</span>
</div>
Displaying the slide title at the bottom of the screen
# Page 1
<div class="absolute bottom-5 left-10">
<span class="font-size-2">
{{ $slidev.configs.title }}
</span>
</div>
7.3. Creating Custom Layouts
You might want to create a layout that cannot be fully expressed by 6.4. Adjusting the Layout.
In such cases, you can create a dedicated layout by creating a Vue component in the layouts directory.
Content written in Markdown will be inserted into the <slot> area.
The usage of <slot> is the same as in Vue (How to handle slots in Vue).
<!-- Custom layout to center content on the screen -->
<template>
<div class="flex flex-col items-center justify-center h-full">
<slot />
</div>
</template>
---
layout: MyLayout
---
# Page 1
7.4. Changing Fonts
This is a very important setting when making slides in Japanese!!!
Since standard Japanese fonts are not set by default in Slidev, you need to set the fonts yourself.
By adding the font frontmatter, you can change the fonts.
Google Fonts can be used without any installation setup!
Recommended settings for Japanese slides
---
fonts:
# For standard text
sans: Noto Sans JP
# For when the `font-serif` class is specified in UnoCSS
serif: Noto Serif JP
# For code blocks
mono: Fira Code
---
# Page 1
Conclusion
Thank you for staying with me for so long!
As you can see, Slidev has features that set it apart from existing presentation tools.
There are many features that couldn't be introduced here, so please check out the official documentation!
Happy creating powerful slides!!
Discussion