🌐 Web Development Intermediate

Slidev

by slidevjs

Code-Driven Presentation Framework for Modern Developers

Build beautiful, interactive presentation slides using Markdown and Vue components with live coding, hot reload, and developer-first workflows.

43,891 Stars
1,900 Forks
43,891 Watchers
177 Issues
🌐

About This Project

Slidev transforms how developers create technical presentations by treating slides as code. Write presentations in Markdown with embedded Vue components, leverage your favorite editor with syntax highlighting and autocomplete, and version control your slides just like any other codebase.

Built on top of Vite and Vue 3, Slidev delivers instant hot module replacement, making slide editing feel as responsive as modern web development. The framework includes built-in support for code syntax highlighting with multiple themes, live coding demonstrations, interactive components, and seamless integration with npm packages. Export your presentations as PDFs, SPAs, or even host them as static websites.

What sets Slidev apart is its developer-centric approach to presentation design. Use CSS utilities like UnoCSS or Windi CSS for styling, integrate Monaco editor for live code editing within slides, record presentations with camera and audio, and create reusable slide decks through themes. The entire workflow feels natural to developers who prefer coding over clicking through GUI-based presentation tools.

With extensive customization options, plugin architecture, and a thriving ecosystem of community themes, Slidev empowers developers to create professional, engaging presentations without leaving their development environment or sacrificing the power of modern web technologies.

Key Features

  • Markdown-based slide authoring with Vue component embedding and full TypeScript support
  • Lightning-fast hot module replacement powered by Vite for instant preview updates
  • Built-in code syntax highlighting with Prism or Shiki and live code editor integration
  • Export to PDF, SPA, or PPTX with presenter notes and recording capabilities
  • Extensible theme system with customizable layouts, transitions, and reusable components

How You Can Use It

1

Technical conference talks with live code demonstrations and interactive examples

2

Internal team presentations and engineering documentation with version-controlled content

3

Educational programming tutorials featuring executable code snippets and dynamic visualizations

4

Product demos and API showcases with embedded interactive components and real-time data

Who Is This For?

Software developers, technical speakers, engineering educators, and DevRel professionals who prefer code-based workflows over traditional presentation software