slidev

Create web-based slides with Markdown, Vue components, and Vite.

1|Updated Jan 17, 2026

Search Tags:#markdown #presentation #slides #code #developer #web

Ready to run

npx skills add https://github.com/iancleary/dotfiles --skill slidev-iancleary

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: slidev
Source: https://github.com/iancleary/dotfiles/tree/main/.agents/skills/slidev
Command: npx skills add https://github.com/iancleary/dotfiles --skill slidev-iancleary

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires pnpm, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill streamlines the creation and presentation of dynamic, web-based slides, making technical presentations engaging and interactive.

Core Features & Use Cases

Markdown-based Creation: Write slides using familiar Markdown syntax, enhanced with Vue components.
Interactive Features: Incorporate code highlighting, animations, diagrams, and even runnable code editors.
Use Case: Prepare a conference talk on a new JavaScript framework, embedding live code examples and interactive diagrams that attendees can explore.

Quick Start

Use the slidev skill to create a new presentation project.

Frequently Asked Questions about slidev

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I create web-based slides using Markdown?▼

Markdown-based slide creation is achieved by writing familiar Markdown syntax enhanced with Vue components and Vite. This approach allows you to easily build dynamic, web-based technical presentations with interactive features.

Can I add live code highlighting and runnable editors to my presentation?▼

Yes, interactive features like code highlighting, diagrams, LaTeX, and runnable code editors are fully supported. You can embed live code examples directly into your slides for engaging technical presentations.

What's the best way to build a technical presentation for a developer conference?▼

The best way to build a developer presentation is using Markdown with Vue components and Vite. This method supports interactive diagrams and live code examples that attendees can explore during the talk.

Do I need pnpm to set up a presentation project with Vite and Vue components?▼

Yes, you need pnpm installed to set up your presentation project and handle development dependencies. It is explicitly required for project setup and local development of the web-based slides.

Does this approach support animations and diagrams for educational materials?▼

Yes, animations and diagrams are supported for creating educational materials. Combined with LaTeX support, these features help streamline the creation of dynamic and interactive learning content.

Why use Markdown and Vue components instead of traditional presentation software?▼

Using Markdown and Vue components streamlines the creation of web-based slides, making technical presentations more engaging than traditional software. It allows developers to embed interactive, runnable code directly within Vite.