Editor Support

Since Slidev uses Markdown as the source entry, you can use any editor you prefer to create your slides.

If you want some high-level management to your slides, we have provided the following editor integrations for you!

Integrated Editor

Slidev comes with an integrated editor that will instantly reload and save the changes to your file.

Click the button to open it.

VS Code Extension

 

The VS Code extension provides some features to help you better organize your slides and have a quick overview of them.

Features

• Preview slides in the side panel
• Slides tree view
• Re-ordering slides
• Folding for slide blocks
• Multiple slides project support
• Start the dev server with one click

Installation

You can install the extension from the VS Code Marketplace.

Usage

Click the Slidev icon in the activity bar to open the Slidev panel. In the Slidev panel, you can see the projects tree view, slides tree view, and the preview webview.

In the projects tree view, you can see all the Slidev projects in your workspace. You can dlick the item to open the corresponding file, and click the icon over it to switch the active project. The icon allows you to load a slides project that wasn't scanned automatically.

In the slides tree view, you can see all the slides in the active project. You can click the item to move you cursor to the slide in the editor, and drag and drop to reorder the slides.

In the preview webview, you can click the icon to start the dev server and click the icon to open the slides in the browser. Toggle icon to sync/unsync the preview navigation with the editor cursor.

There are also some commands you can use. Type Slidev in the command palette to see them.

You can add glob patterns to the slidev.include configuration to include files as Slidev entries. The default value is ["**/*.md"]. Example:

{
  "slidev.include": ["**/presentation.md"]
}

Prettier Plugin

Slidev also provides a Prettier plugin to format your slides. You can use it with your favorite editor that supports Prettier. Docs for the plugin can be found here.