Slidev

Presentation Slides for Developers

Presentation Vue

slidevjs/slidev sli.dev @slidev/cli

README

Presentation slides for developers 🧑‍💻👩‍💻👨‍💻

Video Preview | Documentation

_{Made possible by my Sponsor Program 💖}

Features

- 📝 [Markdown-based](https://sli.dev/guide/syntax.html) - use your favorite editors and workflow

- 🧑‍💻 [Developer Friendly](https://sli.dev/guide/syntax.html#code-blocks) - built-in syntax highlighting, live coding, etc.

- 🎨 [Themable](https://sli.dev/themes/gallery.html) - theme can be shared and used with npm packages.

- 🌈 [Stylish](https://sli.dev/guide/syntax.html#embedded-styles) - on-demand utilities via Windi CSS or UnoCSS.

- 🤹 [Interactive](https://sli.dev/custom/directory-structure.html#components) - embedding Vue components seamlessly.

- 🎙 [Presenter Mode](https://sli.dev/guide/presenter-mode.html) - use another window, or even your phone to control your slides.

- 🧮 [LaTeX](https://sli.dev/guide/syntax.html#latex) - built-in LaTeX math equations support.

- 📰 [Diagrams](https://sli.dev/guide/syntax.html#diagrams) - creates diagrams with textual descriptions

- 🌟 [Icons](https://sli.dev/guide/syntax.html#icons) - access to icons from any iconset directly.

- 💻 [Editors](https://sli.dev/guide/editors.html) - integrated editor, or extension for VS Code

- 🎥 [Recording](https://sli.dev/guide/recording.html) - built-in recording and camera view.

- 📤 [Portable](https://sli.dev/guide/exporting.html) - export into PDF, PNGs, or even a hostable SPA.

- ⚡️ [Fast](https://vitejs.dev) - instant reloading powered by Vite.

- 🛠 [Hackable](https://sli.dev/custom/config-vite.html) - using Vite plugins, Vue components, or any npm packages.

Getting Started

Try it Online ⚡️

sli.dev/new

Init Project Locally

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

``` sh
npm init slidev
```

Documentations:

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

- Windi CSS / UnoCSS - On-demand utility-first CSS framework, style your slides at ease

- Prism, Shiki, Monaco Editor - First-class code snippets support with live coding capability

- RecordRTC - Built-in recording and camera view

- VueUse family - [@vueuse/core](https://github.com/vueuse/vueuse), [@vueuse/head](https://github.com/vueuse/head), [@vueuse/motion](https://github.com/vueuse/motion), etc.

- Iconify - Iconsets collection.

- Drauu - Drawing and annotations support

- KaTeX - LaTeX math rendering.

- Mermaid - Textual Diagrams.