# slidevjs/slidev

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/slidevjs-slidev).**

44,409 stars · 1,932 forks · TypeScript · mit

## Links

- GitHub: https://github.com/slidevjs/slidev
- Homepage: https://sli.dev
- awesome-repositories: https://awesome-repositories.com/repository/slidevjs-slidev.md

## Topics

`markdown` `presentation` `slides` `vite` `vue` `vueuse`

## Description

Slidev is a markdown-based presentation framework designed for creating interactive, web-based slide decks. It functions as a static site generator that transforms plain text files into modular UI components, allowing authors to maintain version control while building professional presentations. The engine provides a browser-based runtime that manages slide navigation, animated transitions, and the live execution of code blocks.

What distinguishes Slidev is its developer-centric approach to technical presentations. It features built-in support for syntax highlighting, mathematical typesetting, and live code execution, enabling presenters to demonstrate concepts directly within their slides. The framework utilizes a component-based architecture where markdown files serve as the source of truth, and custom UI components can be automatically registered and used without manual imports.

The platform offers a comprehensive suite of tools for design and deployment. Authors can extend functionality through a modular plugin system, apply custom themes, and utilize an atomic CSS engine for visual styling. The development environment includes a local server for live previews and hot-reloading, while the build process supports exporting presentations into various static formats, including PDF and standalone single-page applications, for deployment on any standard web server.

## Tags

### Content Management & Publishing

- [Presentation Authoring Tools](https://awesome-repositories.com/f/content-management-publishing/presentation-authoring-tools.md) — Creating professional slide decks using plain text files to maintain version control and streamline the design process.
- [Static Site Generators](https://awesome-repositories.com/f/content-management-publishing/static-site-generators.md) — A build tool that compiles markdown-based content into optimized, standalone single-page applications for deployment on any standard web server. ([source](https://sli.dev/guide/hosting))
- [Markdown-to-Component Parsers](https://awesome-repositories.com/f/content-management-publishing/markdown-to-component-parsers.md) — Uses markdown files as the primary source of truth, which are parsed and transformed into modular UI components for rendering.
- [Presentation Configuration](https://awesome-repositories.com/f/content-management-publishing/presentation-configuration.md) — Slidev defines global presentation properties like themes, metadata, and export options by setting configuration values in the first slide of the deck. ([source](https://sli.dev/custom/))
- [Document Configuration Schemas](https://awesome-repositories.com/f/content-management-publishing/document-configuration-schemas.md) — Slidev defines global deck settings or individual slide properties using structured data blocks at the beginning of files to control presentation behavior. ([source](https://sli.dev/guide/syntax))
- [Markdown Extensions](https://awesome-repositories.com/f/content-management-publishing/markdown-extensions.md) — Slidev transforms raw slide content by defining custom rules that modify markdown parsing before the final presentation is rendered. ([source](https://sli.dev/custom/config-parser))
- [Diagramming Integrations](https://awesome-repositories.com/f/content-management-publishing/diagramming-integrations.md) — Slidev integrates third-party diagram rendering libraries by providing a setup function that handles the conversion of diagram syntax into visual elements. ([source](https://sli.dev/custom/config-mermaid-renderer))
- [Presentation Layout Controls](https://awesome-repositories.com/f/content-management-publishing/presentation-layout-controls.md) — Slidev defines individual slides in a presentation deck by using specific line separators to organize content into distinct visual pages. ([source](https://sli.dev/guide/syntax))
- [Slide Layout Controls](https://awesome-repositories.com/f/content-management-publishing/slide-layout-controls.md) — Slidev customizes layout, transitions, and navigation for specific slides by adding configuration properties directly to the slide block metadata. ([source](https://sli.dev/custom/))

### Game Development

- [Presentation Software](https://awesome-repositories.com/f/game-development/presentation-software.md) — A browser-based runtime that manages slide navigation, animated transitions, and live execution of code blocks during a presentation.

### User Interface & Experience

- [Presentation Frameworks](https://awesome-repositories.com/f/user-interface-experience/presentation-frameworks.md) — Extending slide functionality through reusable components, custom themes, and modular plugins to achieve unique visual branding.
- [Presentation Component Frameworks](https://awesome-repositories.com/f/user-interface-experience/presentation-component-frameworks.md) — Slidev inserts components directly into slides without manual imports by placing them in a designated directory for automatic availability. ([source](https://sli.dev/guide/component))
- [Component Registration Systems](https://awesome-repositories.com/f/user-interface-experience/component-registration-systems.md) — Slidev creates and registers custom components in a designated directory to automatically make them available for use throughout your presentation slides. ([source](https://sli.dev/guide/component))
- [Presentation Navigation](https://awesome-repositories.com/f/user-interface-experience/presentation-navigation.md) — Slidev inserts navigation links to specific slides by number or alias to enable interactive transitions and non-linear presentation flow. ([source](https://sli.dev/builtin/components))
- [Presentation Sequencing Tools](https://awesome-repositories.com/f/user-interface-experience/presentation-sequencing-tools.md) — Slidev sequences the visibility of slide content step-by-step using click-based directives to reveal, hide, or transition elements during a live presentation. ([source](https://sli.dev/guide/animations))
- [Presentation Themes](https://awesome-repositories.com/f/user-interface-experience/presentation-themes.md) — Slidev styles slides automatically by specifying a theme package name or local path in the document headmatter. ([source](https://sli.dev/guide/theme-addon))
- [Animation Libraries](https://awesome-repositories.com/f/user-interface-experience/animation-libraries.md) — Slidev defines initial, enter, and click-triggered states for slide elements using declarative directives to create smooth and interactive animations. ([source](https://sli.dev/guide/animations))
- [Component Libraries](https://awesome-repositories.com/f/user-interface-experience/component-libraries.md) — A development environment that allows authors to compose slide content using reusable UI components and custom layout templates.
- [Contextual Rendering Engines](https://awesome-repositories.com/f/user-interface-experience/contextual-rendering-engines.md) — Slidev displays specific content based on the current presentation context such as presenter view, print mode, or slide overview. ([source](https://sli.dev/builtin/components))
- [Interactive Drawing Tools](https://awesome-repositories.com/f/user-interface-experience/interactive-drawing-tools.md) — Slidev creates interactive arrows on a slide that allow users to reposition the start and end points during a live presentation. ([source](https://sli.dev/builtin/components))
- [Adaptive Typography Tools](https://awesome-repositories.com/f/user-interface-experience/adaptive-typography-tools.md) — Slidev adjusts text size automatically within a defined box to ensure content fits perfectly regardless of length or screen resolution. ([source](https://sli.dev/builtin/components))
- [Layout Components](https://awesome-repositories.com/f/user-interface-experience/layout-components.md) — Slidev adds persistent interface elements like navigation controls, headers, or footers by defining specific component files that remain visible across all slides. ([source](https://sli.dev/custom/directory-structure))
- [Media Embeds](https://awesome-repositories.com/f/user-interface-experience/media-embeds.md) — Displays external video content by identifier with configurable playback options and dimensions. ([source](https://sli.dev/builtin/components))
- [Navigation Menus](https://awesome-repositories.com/f/user-interface-experience/navigation-menus.md) — Slidev shows a navigation menu for the presentation with options to filter by depth, customize column layout, and restrict visibility to specific sections. ([source](https://sli.dev/builtin/components))
- [Presentation Layouts](https://awesome-repositories.com/f/user-interface-experience/presentation-layouts.md) — Slidev applies pre-defined templates to structure presentation content including introductory slides, section dividers, quotes, and custom column-based layouts. ([source](https://sli.dev/builtin/layouts))
- [Presentation Styling Utilities](https://awesome-repositories.com/f/user-interface-experience/presentation-styling-utilities.md) — Slidev assigns custom styles and classes to specific slide elements using a simplified syntax to achieve rapid layout and design adjustments. ([source](https://sli.dev/guide/syntax))
- [Social Media Embeds](https://awesome-repositories.com/f/user-interface-experience/social-media-embeds.md) — Displays interactive social media posts directly within presentation slides using unique identifiers. ([source](https://sli.dev/builtin/components))
- [Style Configurations](https://awesome-repositories.com/f/user-interface-experience/style-configurations.md) — Slidev defines custom shortcuts, presets, and style rules by extending the default atomic CSS engine configuration in a local file. ([source](https://sli.dev/custom/config-unocss))
- [Theme Customization Tools](https://awesome-repositories.com/f/user-interface-experience/theme-customization-tools.md) — Slidev extracts existing theme files into the local project directory to modify visual styles, layouts, and design components directly within the development environment. ([source](https://sli.dev/builtin/cli))
- [Theming Adapters](https://awesome-repositories.com/f/user-interface-experience/theming-adapters.md) — Slidev displays different content based on the active light or dark theme using named slots to ensure visual consistency across modes. ([source](https://sli.dev/builtin/components))
- [Transition Engines](https://awesome-repositories.com/f/user-interface-experience/transition-engines.md) — Slidev sets animated transitions between slides using built-in effects, native browser view transitions, or custom style rules for seamless navigation. ([source](https://sli.dev/guide/animations))
- [Video Players](https://awesome-repositories.com/f/user-interface-experience/video-players.md) — Slidev displays HTML5 video content with support for custom controls, autoplay behavior, poster images, and automatic resetting based on slide navigation. ([source](https://sli.dev/builtin/components))

### Development Tools & Productivity

- [Markdown Tools](https://awesome-repositories.com/f/development-tools-productivity/markdown-tools.md) — A development tool that transforms markdown files into interactive, web-based slide decks with support for live coding and component-based layouts.
- [Development Servers](https://awesome-repositories.com/f/development-tools-productivity/development-servers.md) — Slidev runs a local server for slide presentations to enable remote control, live theme previews, and automatic browser refreshing for rapid iteration. ([source](https://sli.dev/builtin/cli))
- [Document Export Tools](https://awesome-repositories.com/f/development-tools-productivity/document-export-tools.md) — Slidev converts slide decks into formats like PDF, PNG, or PPTX while applying specific page ranges, dark mode settings, and rendering click-based animations. ([source](https://sli.dev/builtin/cli))
- [Presentation Plugin Systems](https://awesome-repositories.com/f/development-tools-productivity/presentation-plugin-systems.md) — Slidev extends presentation features by adding modular plugins to the document headmatter from official or community-maintained packages. ([source](https://sli.dev/guide/theme-addon))
- [Syntax Highlighters](https://awesome-repositories.com/f/development-tools-productivity/syntax-highlighters.md) — Slidev displays and formats code snippets within slides using syntax highlighting to improve readability and clarity for technical presentations. ([source](https://sli.dev/guide/syntax))
- [Browser-Based Export Utilities](https://awesome-repositories.com/f/development-tools-productivity/browser-based-export-utilities.md) — Slidev generates PDF, PPTX, or image files directly from the browser interface using a modern rendering engine for high-quality output. ([source](https://sli.dev/guide/exporting))
- [CLI Export Tools](https://awesome-repositories.com/f/development-tools-productivity/cli-export-tools.md) — Slidev converts slide decks into PDF, PPTX, PNG, or Markdown files using the command line interface and a headless browser engine. ([source](https://sli.dev/guide/exporting))
- [Keyboard Shortcut Mappers](https://awesome-repositories.com/f/development-tools-productivity/keyboard-shortcut-mappers.md) — Slidev maps specific key combinations to navigation actions or custom functions by defining shortcut configurations in a dedicated setup file. ([source](https://sli.dev/custom/config-shortcuts))

### Education & Learning Resources

- [Technical Presentation Tools](https://awesome-repositories.com/f/education-learning-resources/technical-presentation-tools.md) — Building interactive slide decks that feature live code execution, syntax highlighting, and mathematical rendering for technical audiences.

### Software Engineering & Architecture

- [Code Execution Engines](https://awesome-repositories.com/f/software-engineering-architecture/code-execution-engines.md) — Slidev executes code snippets within slides by defining execution logic that manages context, output rendering, and dependencies for interactive blocks. ([source](https://sli.dev/custom/config-code-runners))
- [Execution Environments](https://awesome-repositories.com/f/software-engineering-architecture/execution-environments.md) — Slidev toggles strict mode settings for the internal code runner to control the execution environment and safety of runnable code blocks. ([source](https://sli.dev/custom/config-monaco))

### Web Development

- [File-System Routing Engines](https://awesome-repositories.com/f/web-development/file-system-routing-engines.md) — Automatically generates application routes and navigation structures by mapping the directory layout of markdown files to slide pages.
- [Static Presentation Generators](https://awesome-repositories.com/f/web-development/static-presentation-generators.md) — Generating portable, high-performance web applications from slide content for easy deployment to any standard web server.
- [Static Site Generators](https://awesome-repositories.com/f/web-development/static-site-generators.md) — Slidev generates a static single-page application from markdown files by configuring custom output directories, applying theme overrides, and including speaker notes for deployment. ([source](https://sli.dev/builtin/cli))
- [Reactive State Managers](https://awesome-repositories.com/f/web-development/reactive-state-managers.md) — Tracks the current slide index and click-based animation steps to synchronize content visibility and transitions across the presentation.
- [Application Setup Hooks](https://awesome-repositories.com/f/web-development/application-setup-hooks.md) — Slidev initializes custom logic or registers plugins before the application starts by using a dedicated setup file to extend core functionality. ([source](https://sli.dev/custom/config-vue))
- [Component Registration Systems](https://awesome-repositories.com/f/web-development/component-registration-systems.md) — Scans designated directories to automatically register and provide reusable UI components for use within any slide without manual imports.

### Programming Languages & Runtimes

- [Type Definitions](https://awesome-repositories.com/f/programming-languages-runtimes/type-definitions.md) — Slidev fetches or installs type definitions for code blocks to ensure proper editor support and autocompletion for client-side code editing. ([source](https://sli.dev/custom/config-monaco))