| 1 | --- |
| 2 | outline: deep |
| 3 | --- |
| 4 | |
| 5 | # Why Slidev |
| 6 | |
| 7 | There have been lots of feature-rich WYSIWYG slides makers like [Microsoft PowerPoint](https://www.microsoft.com/en-us/microsoft-365/powerpoint) and [Apple Keynote](https://www.apple.com/keynote/) _(see [Comparisons](#comparisons))_. They are intuitive and easy to learn. So why bother making Slidev? |
| 8 | |
| 9 | Slidev aims to provide flexibility and interactivity for **developers** to make their presentations much more interesting, expressive, and attractive by using technologies they are familiar with. Slidev is also open source with a strong community. |
| 10 | |
| 11 | Slidev is Markdown-based, which helps you **focus on the content**. Slidev is also Web-based, which means **nothing is impossible** - everything you can do in a web app can apply to your slides. |
| 12 | |
| 13 | Slidev is also **progressive**. You can start with a super simple Markdown file, and then use the [built-in features](../features/) when you need them without any configuration. There are also [themes and addons](./theme-addon) you can optionally install to enhance your slides. |
| 14 | |
| 15 |  {#welcome} |
| 16 | |
| 17 | ## Features |
| 18 | |
| 19 | ### 📝 Markdown-based |
| 20 | |
| 21 | Slidev uses an extended Markdown format to organize your slides in a single plain text file. This helps you focus on the content while allowing you to use Git and any editor you like. |
| 22 | |
| 23 | > Learn more: <LinkInline link="guide/syntax"/>. |
| 24 | |
| 25 | ### 🧑💻 Developer Friendly |
| 26 | |
| 27 | Slidev provides first-class support for code snippets for developers. It uses [Shiki](https://github.com/shikijs/shiki) to get the most accurate syntax highlighting. Slidev also supports <LinkInline link="features/shiki-magic-move"/> and <LinkInline link="features/twoslash"/>. These make Slidev the best choice for tech talks. |
| 28 | |
| 29 | ### 🎨 Themable |
| 30 | |
| 31 | Themes for Slidev can be shared via npm packages. You apply a theme within one line of code. |
| 32 | |
| 33 | Check out the [Theme Gallery](../resources/theme-gallery) for the beautiful themes made by the official team and the community. |
| 34 | |
| 35 | ### ⚡ Fast |
| 36 | |
| 37 | Every change you make in the editor will be updated to your slides in the browser **instantly** without reloading, thanks to [Vite's HMR feature](https://vitejs.dev/guide/features.html#hot-module-replacement). |
| 38 | |
| 39 | ### 🤹 Interactive & Expressive |
| 40 | |
| 41 | You can write Vue components and use them in your slides, which you can then interact with during the presentation to express your idea in a more interesting and intuitive way. |
| 42 | |
| 43 | Slidev also has built-in support of <LinkInline link="features/monaco-editor"/>, which empowers you to do live coding in your presentation with auto-completion and hover messages. |
| 44 | |
| 45 | ### 🎥 Recording Support |
| 46 | |
| 47 | Slidev provides built-in recording and camera view. You can share your presentation with your camera view inside, or record and save your screen and camera separately. |
| 48 | |
| 49 | > Learn more: <LinkInline link="features/recording"/>. |
| 50 | |
| 51 | ### 📤 Portable |
| 52 | |
| 53 | You can export your slides into PDF, PPTX, PNGs, or even a single-page application (SPA) via a single command. Then you can share or host it anywhere you like. |
| 54 | |
| 55 | > Learn more: <LinkInline link="guide/exporting"/> and <LinkInline link="guide/hosting"/>. |
| 56 | |
| 57 | ### 🛠 Hackable |
| 58 | |
| 59 | Because Slidev is web-based, everything that can be done in a normal web app can be applied to your slides. For example, WebGL, API requests, iframes, or even live sharing. It's up to your imagination! |
| 60 | |
| 61 | > Learn more: [Customization](../custom/). |
| 62 | |
| 63 | ## Comparisons |
| 64 | |
| 65 | ::: details Slidev vs. Microsoft PowerPoint / Apple Keynote |
| 66 | |
| 67 | [Microsoft PowerPoint](https://www.microsoft.com/en-us/microsoft-365/powerpoint) and [Apple Keynote](https://www.apple.com/keynote/) are feature-rich WYSIWYG slides makers. They are intuitive and easy to learn, which makes them one of the best choices for non-developers. |
| 68 | |
| 69 | Compared to them, Slidev has the following advantages: |
| 70 | |
| 71 | - Developer-friendly: Code snippets are first-class citizens in Slidev. |
| 72 | - Markdown-based: Focus on the content, and version control your slides with Git. |
| 73 | - Web-based: Everything you can do in a web app can apply to your slides. |
| 74 | - Hackable: Customize anything you like with web technologies. |
| 75 | - Open source: Slidev is completely open source, and has a strong community. |
| 76 | |
| 77 | ::: |
| 78 | |
| 79 | ::: details Slidev vs. Reveal.js |
| 80 | |
| 81 | [Reveal.js](https://revealjs.com/) is a popular HTML presentation framework. It is also open source and supports Markdown. |
| 82 | |
| 83 | Compared to Reveal.js, Slidev has the following advantages: |
| 84 | |
| 85 | - More concise: Slidev uses an extended Markdown format, while Reveal.js encourages you to write HTML to organize your slides. |
| 86 | - Vue support: You can use Vue components in Slidev to make your slides interactive. |
| 87 | - Vite-based: Slidev is built on top of Vite, which provides instant HMR and flexible plugin API. |
| 88 | - Atomatic CSS: You can [UnoCSS](https://unocss.dev/) out of the box to style your slides. |
| 89 | |
| 90 | ::: |
| 91 | |
| 92 | ::: details Slidev vs. Marp |
| 93 | |
| 94 | [Marp](https://marp.app/) is a Markdown presentation tool that focuses on simplicity and portability. It is also open source and supports Markdown. |
| 95 | |
| 96 | Compared to Marp, Slidev has the following advantages: |
| 97 | |
| 98 | - The same simplicity: Slidev's slides can start as simple as Marp's. |
| 99 | - More features: Slidev supports many features that Marp doesn't. |
| 100 | - Vue support: You can use Vue components in Slidev to make your slides interactive. |
| 101 | - Vite-based: Slidev is built on top of Vite, which provides instant HMR and flexible plugin API. |
| 102 | - Atomatic CSS: You can [UnoCSS](https://unocss.dev/) out of the box to style your slides. |
| 103 | |
| 104 | ::: |
| 105 | |
| 106 | ## Give it a Try |
| 107 | |
| 108 | Playing around with Slidev will tell you more than thousands of words. Check the <LinkInline link="guide/"/> guide to create your first Slidev project in one click or one command. |
| 109 | |
| 110 | Or you can have a quick preview of it: |
| 111 | |
| 112 | <iframe class="aspect-16/9 rounded-xl w-full shadow-md border-none" src="https://www.youtube.com/embed/eW7v-2ZKZOU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> |
| 113 |