back to home

slidevjs / slidev

Presentation Slides for Developers

44,419 stars
1,932 forks
178 issues
TypeScriptVueJavaScript
Chat with CodebaseArchitecture ScanSecurity AuditExplain Codebase

AI Architecture Analysis

This repository is indexed by RepoMind. By analyzing slidevjs/slidev in our AI interface, you can instantly generate complete architecture diagrams, visualize control flows, and perform automated security audits across the entire codebase.

Our Agentic Context Augmented Generation (Agentic CAG) engine loads full source files into context, avoiding the fragmentation of traditional RAG systems. Ask questions about the architecture, dependencies, or specific features to see it in action.

Click here to launch the interactive analysis workspace

Embed this Badge

Showcase RepoMind's analysis directly in your repository's README.

[![Analyzed by RepoMind](https://img.shields.io/badge/Analyzed%20by-RepoMind-4F46E5?style=for-the-badge)](https://repomind-ai.vercel.app/repo/slidevjs/slidev)
Preview:Analyzed by RepoMind

Repository Summary (README)

Preview
<br> <p align="center"> <a href="https://sli.dev" target="_blank"> <img src="https://sli.dev/logo-title.png" alt="Slidev" height="250" width="250"/> </a> </p> <p align="center"> Presentation <b>slide</b>s for <b>dev</b>elopers 🧑‍💻👩‍💻👨‍💻 </p> <p align="center"> <a href="https://www.npmjs.com/package/@slidev/cli" target="__blank"><img src="https://img.shields.io/npm/v/@slidev/cli?color=2B90B6&label=" alt="NPM version"></a> <a href="https://www.npmjs.com/package/@slidev/cli" target="__blank"><img alt="NPM Downloads" src="https://img.shields.io/npm/dm/@slidev/cli?color=349dbe&label="></a> <a href="https://sli.dev/" target="__blank"><img src="https://img.shields.io/static/v1?label=&message=docs%20%26%20demos&color=45b8cd" alt="Docs & Demos"></a> <a href="https://sli.dev/resources/theme-gallery" target="__blank"><img src="https://img.shields.io/static/v1?label=&message=themes&color=4ec5d4" alt="Themes"></a> <br> <a href="https://github.com/slidevjs/slidev/stargazers" target="__blank"><img alt="GitHub stars" src="https://img.shields.io/github/stars/slidevjs/slidev?style=social"></a> </p> <p align="center"> <a href="https://twitter.com/antfu7/status/1389604687502995457">Video Preview</a> | <a href="https://sli.dev">Documentation</a> </p> <div align="center"> <table> <tbody> <td align="center"> <img width="2000" height="0" alt="" aria-hidden><br> <sub>Made possible by my <a href="https://github.com/sponsors/antfu">Sponsor Program 💖</a></sub><br> <img width="2000" height="0" alt="" aria-hidden> </td> </tbody> </table> </div>

Features

  • 📝 Markdown-based - focus on content and use your favorite editor
  • 🧑‍💻 Developer Friendly - built-in code highlighting, live coding, etc.
  • 🎨 Themable - theme can be shared and used with npm packages
  • 🌈 Stylish - on-demand utilities via UnoCSS.
  • 🤹 Interactive - embedding Vue components seamlessly
  • 🎙 Presenter Mode - use another window, or even your phone to control your slides
  • 🎨 Drawing - draw and annotate on your slides
  • 🧮 LaTeX - built-in LaTeX math equations support
  • 📰 Diagrams - creates diagrams using textual descriptions with Mermaid
  • 🌟 Icons - access to icons from any icon set directly
  • 💻 Editor - integrated editor, or the VSCode extension
  • 🎥 Recording - built-in recording and camera view
  • 📤 Portable - export into PDF, PNGs, or PPTX
  • ⚡️ Fast - instant reloading powered by Vite
  • 🛠 Hackable - using Vite plugins, Vue components, or any npm packages

Getting Started

Try it Online ⚡️

sli.dev/new

Init Project Locally

Install Node.js >=18 and run the following command:

npm init slidev

Documentation: English | 中文文档 | Français | Español | Русский | Português-BR

Discord: chat.sli.dev

For a full example, you can check the demo folder, which is also the source file for my previous talk.

Tech Stack

  • Vite - An extremely fast frontend tooling
  • Vue 3 powered Markdown - Focus on the content while having the power of HTML and Vue components whenever needed
  • UnoCSS - On-demand utility-first CSS engine, style your slides at ease
  • Shiki, Monaco Editor - First-class code snippets support with live coding capability
  • RecordRTC - Built-in recording and camera view
  • VueUse family - @vueuse/core, @vueuse/motion, etc.
  • Iconify - Icon sets collection.
  • Drauu - Drawing and annotations support
  • KaTeX - LaTeX math rendering.
  • Mermaid - Textual Diagrams.

Sponsors

This project is made possible by all the sponsors supporting my work:

<p align="center"> <a href="https://github.com/sponsors/antfu"> <img src='https://cdn.jsdelivr.net/gh/antfu/static/sponsors.svg' alt="Logos from Sponsors" /> </a> </p>

License

MIT License © 2021 Anthony Fu