Features

This is a list of all the individual features that Slidev provides. Each feature can be used independently and is optional.

You can also read

to learn the features by topic.

Block Frontmatter

Use a YAML code block as the frontmatter.

Generate PDF when Building

Generate a downloadable PDF along with your slides build.

Bundle Remote Assets

Download and bundle remote assets when building your slides.

Slide Canvas Size

Set the size for all your slides.

Highlighting notes and auto-scrolling to the active section of notes.

presenter animation

Enable line numbering for all code blocks across the slides or individually.

Set a maximum height for a code block and enable scrolling.

codeblock layout

Navigation Direction Variants

Apply different styles and animations based on the navigation direction.

navigation styling

Draggable Elements

Move, resize, and rotate elements by dragging them with the mouse.

Drawing & Annotations

Draw and annotate your slides with ease.

Eject the installed theme from your project to customize it.

Frontmatter Merging

Merge frontmatter from multiple markdown files.

Create custom components that persist across slides.

navigation layout

Use icons from virtually all open-source icon sets directly in your markdown.

Import Code Snippets

Import code snippets from existing files into your slides.

codeblock syntax

Importing Slides

Split your `slides.md` into multiple files for better reusability and organization.

Slidev comes with LaTeX support out-of-box, powered by KaTeX.

codeblock syntax

Line Highlighting

Highlight specific lines in code blocks based on clicks.

codeblock animation

A powerful syntax to enhance your markdown content with components and styles.

Mermaid.js Diagrams

Create diagrams/graphs from textual descriptions, powered by Mermaid.

Turn code blocks into fully-featured editors, or generate a diff between two code blocks.

codeblock editor

Run code directly in the editor and see the result.

codeblock editor

Writable Monaco Editor

A monaco editor that allows you to write code directly in the slides and save the changes back to the file.

codeblock editor

PlantUML Diagrams

Create diagrams from textual descriptions, powered by PlantUML.

Prettier Plugin

Use the Prettier plugin to format your slides.

Record your presentation with the built-in camera view and recording feature.

Access your presentation remotely with Slidev's remote access feature.

Integrate Rough Notation to allow marking or highlighting elements in your slides.

drawing animation

Shiki Magic Move

Enable granular transition between code changes, similar to Keynote's Magic Move.

codeblock animation

Integrated Editor

Edit your slides source file alongside the presentation.

Hooks to manage the slide lifecycle.

Slide Scope Styles

Define styles for only the current slide.

Slot Sugar for Layouts

A syntax sugar for named slots in layouts.

The `Transform` Component

A component for scaling some elements.

TwoSlash Integration

A powerful tool for rendering TypeScript code blocks with type information on hover or inlined.

VS Code Extension

Help you better organize your slides and have a quick overview of them.

Zoom the content of a slide to a specific scale.