| 1 | --- |
| 2 | outline: deep |
| 3 | --- |
| 4 | |
| 5 | # Getting Started |
| 6 | |
| 7 | Slidev <sup>(slide + dev, **/slaɪdɪv/**)</sup> is a web-based slides maker and presenter. It's designed for developers to focus on writing content in Markdown. With the power of web technologies like Vue, you are able to deliver pixel-perfect designs with interactive demos to your presentation. |
| 8 | |
| 9 | ::: tip |
| 10 | |
| 11 | You can learn more about the rationale behind this project in <LinkInline link="guide/why" />. |
| 12 | |
| 13 | ::: |
| 14 | |
| 15 | <!-- |
| 16 | - 📝 [**Markdown-based**](/guide/syntax) - focus on content and use your favorite editor |
| 17 | - 🧑💻 [**Developer Friendly**](/guide/syntax#code-blocks) - built-in code highlighting, live coding, etc. |
| 18 | - 🎨 [**Themable**](/resources/theme-gallery) - theme can be shared and used with npm packages |
| 19 | - 🌈 [**Stylish**](/guide/syntax#embedded-styles) - on-demand utilities via [UnoCSS](https://github.com/unocss/unocss). |
| 20 | - 🤹 [**Interactive**](/custom/directory-structure#components) - embedding Vue components seamlessly |
| 21 | - 🎙 [**Presenter Mode**](/guide/ui#presenter-mode) - use another window, or even your phone to control your slides |
| 22 | - 🎨 [**Drawing**](/features/drawing) - draw and annotate on your slides |
| 23 | - 🧮 [**LaTeX**](/guide/syntax#latex) - built-in LaTeX math equations support |
| 24 | - 📰 [**Diagrams**](/guide/syntax#diagrams) - creates diagrams using textual descriptions with [Mermaid.js](https://mermaid.js.org/) |
| 25 | - 🌟 [**Icons**](/guide/syntax#icons) - access to icons from any icon set directly |
| 26 | - 💻 [**Editor**](/guide/index#editor) - integrated editor, or the [VSCode extension](/features/vscode-extension) |
| 27 | - 🎥 [**Recording**](/features/recording) - built-in recording and camera view |
| 28 | - 📤 [**Portable**](/guide/exporting) - export into PDF, PNGs, or PPTX |
| 29 | - ⚡️ [**Fast**](https://vitejs.dev) - instant reloading powered by [Vite](https://vitejs.dev) |
| 30 | - 🛠 [**Hackable**](/custom/) - using Vite plugins, Vue components, or any npm packages |
| 31 | --> |
| 32 | |
| 33 | <!-- <FeaturesAnimation /> --> |
| 34 | |
| 35 | ## Create Slides |
| 36 | |
| 37 | ### Try it Online |
| 38 | |
| 39 | Start Slidev right in your browser with StackBlitz: [sli.dev/new](https://sli.dev/new) |
| 40 | |
| 41 | ### Create Locally |
| 42 | |
| 43 | > Requires [Node.js](https://nodejs.org) >= 20.12.0 installed. |
| 44 | |
| 45 | Run the following command to create a new Slidev project locally: |
| 46 | |
| 47 | ::: code-group |
| 48 | |
| 49 | ```bash [pnpm] |
| 50 | # If you haven't installed pnpm |
| 51 | npm i -g pnpm |
| 52 | |
| 53 | pnpm create slidev |
| 54 | ``` |
| 55 | |
| 56 | ```bash [npm] |
| 57 | # Not recommended - |
| 58 | # NPM will download the packages each time you create a new project, |
| 59 | # which is slow and takes up a lot of space |
| 60 | |
| 61 | npm init slidev@latest |
| 62 | ``` |
| 63 | |
| 64 | ```bash [yarn] |
| 65 | yarn create slidev |
| 66 | ``` |
| 67 | |
| 68 | ```bash [bun] |
| 69 | bun create slidev |
| 70 | ``` |
| 71 | |
| 72 | ```bash [deno] |
| 73 | deno init --npm slidev |
| 74 | ``` |
| 75 | |
| 76 | ::: |
| 77 | |
| 78 | Follow the prompts to start your slides project. The slides content is in `slides.md`, which initially includes demos of most the Slidev features. For more information about the Markdown syntax, please check <LinkInline link="guide/syntax" />. |
| 79 | |
| 80 | :::: details Single file usage (not recommended) |
| 81 | |
| 82 | If you prefer to have a single Markdown file as your slides, you can install the Slidev CLI globally: |
| 83 | |
| 84 | ::: code-group |
| 85 | |
| 86 | ```bash [pnpm] |
| 87 | pnpm i -g @slidev/cli |
| 88 | ``` |
| 89 | |
| 90 | ```bash [npm] |
| 91 | npm i -g @slidev/cli |
| 92 | ``` |
| 93 | |
| 94 | ```bash [yarn] |
| 95 | yarn global add @slidev/cli |
| 96 | ``` |
| 97 | |
| 98 | ```bash [bun] |
| 99 | bun i -g @slidev/cli |
| 100 | ``` |
| 101 | |
| 102 | ```bash [deno] |
| 103 | deno i -g npm:@slidev/cli |
| 104 | ``` |
| 105 | |
| 106 | ::: |
| 107 | |
| 108 | Then, you can create and start a single file slides via: |
| 109 | |
| 110 | ```bash |
| 111 | slidev slides.md |
| 112 | ``` |
| 113 | |
| 114 | :::: |
| 115 | |
| 116 | ## Basic Commands |
| 117 | |
| 118 | Slidev provides a set of commands in its CLI. Here are some common ones: |
| 119 | |
| 120 | - `slidev` - Start the dev server. See [the dev command](../builtin/cli#dev). |
| 121 | - `slidev export` - Export the slides to PDF, PPTX, or PNGs. See <LinkInline link="guide/exporting" />. |
| 122 | - `slidev build` - Build the slides as a static web application. See <LinkInline link="guide/hosting" />. |
| 123 | - `slidev format` - Format the slides. See [the format command](../builtin/cli#format). |
| 124 | - `slidev --help` - Show the help message |
| 125 | |
| 126 | To run these commands, you can add them to your `package.json` scripts (which has been done for you if the project was created via `npm init slidev`): |
| 127 | |
| 128 | ```json [package.json] |
| 129 | { |
| 130 | "scripts": { |
| 131 | "dev": "slidev --open", |
| 132 | "build": "slidev build", |
| 133 | "export": "slidev export" |
| 134 | } |
| 135 | } |
| 136 | ``` |
| 137 | |
| 138 | Then, you can simply run `npm run dev`, `npm run build`, and `npm run export`. |
| 139 | |
| 140 | For more information about the CLI, please check the [CLI guide](../builtin/cli). |
| 141 | |
| 142 | ## Setup Your Editor {#editor} |
| 143 | |
| 144 | Since Slidev uses Markdown as the source entry, you can use any editor you prefer to create your slides. We also provide tools to help you edit you slides more conveniently: |
| 145 | |
| 146 | <LinkCard link="features/vscode-extension" /> |
| 147 | <LinkCard link="features/side-editor" /> |
| 148 | <LinkCard link="features/prettier-plugin" /> |
| 149 | |
| 150 | ## Join the Community |
| 151 | |
| 152 | It's recommended to join our official [Discord Server](https://chat.sli.dev/) to get help, share your slides, or discuss anything about Slidev. |
| 153 | |
| 154 | If you're encountering bugs, feel free to open an issue on [GitHub](https://github.com/slidevjs/slidev/issues/new/choose). |
| 155 | |
| 156 | ## Tech Stack |
| 157 | |
| 158 | Slidev is made possible by combining these tools and technologies. |
| 159 | |
| 160 | - [Vite](https://vitejs.dev) - An extremely fast frontend tooling |
| 161 | - [Vue 3](https://v3.vuejs.org/) powered [Markdown](https://daringfireball.net/projects/markdown/syntax) - Focus on the content while having the power of HTML and Vue components whenever needed |
| 162 | - [UnoCSS](https://github.com/unocss/unocss) - On-demand utility-first CSS framework, style your slides at ease |
| 163 | - [Shiki](https://github.com/shikijs/shiki), [Monaco Editor](https://github.com/Microsoft/monaco-editor) - First-class code snippets support with live coding capability |
| 164 | - [RecordRTC](https://recordrtc.org) - Built-in recording and camera view |
| 165 | - [VueUse](https://vueuse.org) family - [`@vueuse/core`](https://github.com/vueuse/vueuse), [`@vueuse/head`](https://github.com/vueuse/head), [`@vueuse/motion`](https://github.com/vueuse/motion), etc. |
| 166 | - [Iconify](https://iconify.design/) - Iconsets collection. |
| 167 | - [Drauu](https://github.com/antfu/drauu) - Drawing and annotations support |
| 168 | - [KaTeX](https://katex.org/) - LaTeX math rendering. |
| 169 | - [Mermaid](https://mermaid-js.github.io/mermaid) - Textual Diagrams. |
| 170 |