/slidev

Presentation Slides for Developers (Public Beta ๐ŸŽ‰)

Primary LanguageTypeScriptMIT LicenseMIT


Slidev

Presentation slides for developers ๐Ÿง‘โ€๐Ÿ’ป๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป

NPM version NPM Downloads Docs & Demos Themes
GitHub stars

Video Preview


Status: Public Beta ๐ŸŽ‰
Made possible by my Sponsor Program ๐Ÿ’–

Slidev - Presentation Slides for Developers | Product Hunt

Motivation

I always found myself spending too much time styling and layouting slides when using apps like PowerPoint / Keynote / Google Slides. Whenever I need to share code snippets, I would also need to use other tools to generate the highlighted code as images over and over again.

So as a frontend developer, why not solve it the way that fits better with what I am good at?

Documentations and guides on Sli.dev

Features

  • ๐Ÿ“ Markdown-based - use your favorite editors and workflow
  • ๐Ÿง‘โ€๐Ÿ’ป Developer Friendly - built-in syntax highlighting, live coding, etc.
  • ๐ŸŽจ Themable - theme can be shared and used with npm packages
  • ๐ŸŒˆ Stylish - Windi CSS on-demand utilities, easy-to-use embedded stylesheets
  • ๐Ÿคน Interactive - embedding Vue components seamlessly
  • ๐ŸŽ™ Presenter Mode - use another window, or even your phone to control your slides
  • ๐Ÿงฎ LaTeX - Built-in LaTeX math equations support
  • ๐Ÿ’ป Editors - Integrated editor, or extension for VS Code
  • ๐ŸŽฅ Recording - built-in recording and camera view
  • ๐Ÿ“ค Portable - export into PDF, PNGs, or even a hostable SPA
  • โšก๏ธ Fast - instant reloading powered by Vite
  • ๐Ÿ›  Hackable - using Vite plugins, Vue components, or any npm packages

Get Started

The best way to understand it is to try it, just one command away:

npm init slidev

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

Tech Stack

Sponsors

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

License

MIT License ยฉ 2021 Anthony Fu