| 1 | # Customizations |
| 2 | |
| 3 | Slidev is fully customizable, from styling to tooling configurations. It allows you to configure the tools underneath ([Vite](/custom/config-vite), [UnoCSS](/custom/config-unocss), [Monaco](/custom/config-monaco), etc.) |
| 4 | |
| 5 | ## Slides Deck Configs {#headmatter} |
| 6 | |
| 7 | You can configure the whole slides project in the frontmatter of your **first** slide (i.e. headmatter). The following shows the default value for each option: |
| 8 | |
| 9 | ```yaml |
| 10 | --- |
| 11 | # theme id, package name, or local path |
| 12 | # Learn more: https://sli.dev/guide/theme-addon.html#use-theme |
| 13 | theme: default |
| 14 | # addons, can be a list of package names or local paths |
| 15 | # Learn more: https://sli.dev/guide/theme-addon.html#use-addon |
| 16 | addons: [] |
| 17 | # title of your slide, will inferred from the first header if not specified |
| 18 | title: Slidev |
| 19 | # titleTemplate for the webpage, `%s` will be replaced by the slides deck's title |
| 20 | titleTemplate: '%s - Slidev' |
| 21 | # information for your slides, can be a Markdown string |
| 22 | info: false |
| 23 | # author field for exported PDF or PPTX |
| 24 | author: Your Name Here |
| 25 | # keywords field for exported PDF, comma-delimited |
| 26 | keywords: keyword1,keyword2 |
| 27 | |
| 28 | # enable presenter mode, can be boolean, 'dev' or 'build' |
| 29 | presenter: true |
| 30 | # enable browser exporter, can be boolean, 'dev' or 'build' |
| 31 | browserExporter: dev |
| 32 | # enabled pdf downloading in SPA build, can also be a custom url |
| 33 | download: false |
| 34 | # filename of the export file |
| 35 | exportFilename: slidev-exported |
| 36 | # export options |
| 37 | # use export CLI options in camelCase format |
| 38 | # Learn more: https://sli.dev/guide/exporting.html |
| 39 | export: |
| 40 | format: pdf |
| 41 | timeout: 30000 |
| 42 | dark: false |
| 43 | withClicks: false |
| 44 | withToc: false |
| 45 | # enable twoslash, can be boolean, 'dev' or 'build' |
| 46 | twoslash: true |
| 47 | # show line numbers in code blocks |
| 48 | lineNumbers: false |
| 49 | # enable monaco editor, can be boolean, 'dev' or 'build' |
| 50 | monaco: true |
| 51 | # Where to load monaco types from, can be 'cdn', 'local' or 'none' |
| 52 | monacoTypesSource: local |
| 53 | # explicitly specify extra local packages to import the types for |
| 54 | monacoTypesAdditionalPackages: [] |
| 55 | # explicitly specify extra local modules as dependencies of monaco runnable |
| 56 | monacoRunAdditionalDeps: [] |
| 57 | # download remote assets in local using vite-plugin-remote-assets, can be boolean, 'dev' or 'build' |
| 58 | remoteAssets: false |
| 59 | # controls whether texts in slides are selectable |
| 60 | selectable: true |
| 61 | # enable slide recording, can be boolean, 'dev' or 'build' |
| 62 | record: dev |
| 63 | # enable Slidev's context menu, can be boolean, 'dev' or 'build' |
| 64 | contextMenu: true |
| 65 | # enable wake lock, can be boolean, 'dev' or 'build' |
| 66 | wakeLock: true |
| 67 | # enable PWA support to precache assets for offline use, can be boolean, 'dev' or 'build' |
| 68 | # Learn more: https://sli.dev/features/pwa.html |
| 69 | pwa: false |
| 70 | # take snapshot for each slide in the overview |
| 71 | overviewSnapshots: false |
| 72 | # router mode for vue-router, can be "history", "hash", or "memory" |
| 73 | routerMode: history |
| 74 | |
| 75 | # force color schema for the slides, can be 'auto', 'light', or 'dark' |
| 76 | colorSchema: auto |
| 77 | # aspect ratio for the slides |
| 78 | aspectRatio: 16/9 |
| 79 | # real width of the canvas, unit in px |
| 80 | canvasWidth: 980 |
| 81 | # defines the default transition between slides |
| 82 | # Learn more: https://sli.dev/guide/animations.html#slide-transitions |
| 83 | transition: undefined # or BuiltinSlideTransition | string | TransitionGroupProps | null |
| 84 | # defines the default animation presets for click animations |
| 85 | # Learn more: https://sli.dev/guide/animations.html#click-animation-presets |
| 86 | clickAnimation: undefined # or comma-delimited string |
| 87 | # used for theme customization, will inject root styles as `--slidev-theme-x` for attribute `x` |
| 88 | themeConfig: |
| 89 | primary: '#5d8392' |
| 90 | |
| 91 | # favicon, can be a local file path or URL |
| 92 | favicon: 'https://cdn.jsdelivr.net/gh/slidevjs/slidev/assets/favicon.png' |
| 93 | # URL of PlantUML server used to render diagrams |
| 94 | # Learn more: https://sli.dev/features/plantuml.html |
| 95 | plantUmlServer: https://www.plantuml.com/plantuml |
| 96 | # fonts will be auto-imported from Google fonts |
| 97 | # Learn more: https://sli.dev/custom/config-fonts.html |
| 98 | fonts: |
| 99 | sans: Roboto |
| 100 | serif: Roboto Slab |
| 101 | mono: Fira Code |
| 102 | |
| 103 | # default frontmatter applies to all slides |
| 104 | defaults: |
| 105 | layout: default |
| 106 | # ... |
| 107 | |
| 108 | # drawing options |
| 109 | # Learn more: https://sli.dev/guide/drawing.html |
| 110 | drawings: |
| 111 | enabled: true |
| 112 | persist: false |
| 113 | presenterOnly: false |
| 114 | syncAll: true |
| 115 | |
| 116 | # HTML tag attributes |
| 117 | htmlAttrs: |
| 118 | dir: ltr |
| 119 | lang: en |
| 120 | |
| 121 | # SEO meta tags |
| 122 | seoMeta: |
| 123 | ogTitle: Slidev Starter Template |
| 124 | ogDescription: Presentation slides for developers |
| 125 | ogImage: https://cover.sli.dev |
| 126 | ogUrl: https://example.com |
| 127 | twitterCard: summary_large_image |
| 128 | twitterTitle: Slidev Starter Template |
| 129 | twitterDescription: Presentation slides for developers |
| 130 | twitterImage: https://cover.sli.dev |
| 131 | twitterSite: username |
| 132 | twitterUrl: https://example.com |
| 133 | --- |
| 134 | ``` |
| 135 | |
| 136 | Check out the [type definitions](https://github.com/slidevjs/slidev/blob/main/packages/types/src/config.ts) for more details. |
| 137 | |
| 138 | ## Per-slide Configs {#frontmatter} |
| 139 | |
| 140 | Also every slide accepts the following configuration in its frontmatter block. The following shows the default value for each option: |
| 141 | |
| 142 | ```yaml |
| 143 | --- |
| 144 | # custom clicks count |
| 145 | # Learn more: https://sli.dev/guide/animations#total |
| 146 | clicks: 0 |
| 147 | # custom start clicks count |
| 148 | clicksStart: 0 |
| 149 | # background image URL, local asset path, or color/gradient |
| 150 | background: undefined # or string (e.g. 'https://cover.sli.dev' or '/image.png') |
| 151 | # completely disable and hide the slide |
| 152 | disabled: false |
| 153 | # the same as `disabled` |
| 154 | hide: false |
| 155 | # hide the slide for the <Toc> components |
| 156 | hideInToc: false |
| 157 | # defines the layout component applied to the slide |
| 158 | layout: <"cover" if the slide is the first slide, otherwise "default"> |
| 159 | # custom class(es) added to the slide root element |
| 160 | class: undefined # or string | string[] | Record<string, unknown> |
| 161 | # override the title level for the <TitleRenderer> and <Toc> components |
| 162 | # only if `title` has also been declared |
| 163 | level: 1 |
| 164 | # mount this slide before entering |
| 165 | preload: true |
| 166 | # create a route alias that can be used in the URL or with the <Link> component |
| 167 | routeAlias: undefined # or string |
| 168 | # includes a markdown file |
| 169 | # Learn more: https://sli.dev/guide/syntax.html#importing-slides |
| 170 | src: undefined # or string |
| 171 | # override the title for the <TitleRenderer> and <Toc> components |
| 172 | # only if `title` has also been declared |
| 173 | title: undefined # or string |
| 174 | # defines the transition between the slide and the next one |
| 175 | # Learn more: https://sli.dev/guide/animations.html#slide-transitions |
| 176 | transition: undefined # or BuiltinSlideTransition | string | TransitionGroupProps | null |
| 177 | # defines the default animation presets for click animations in this slide |
| 178 | # Learn more: https://sli.dev/guide/animations.html#click-animation-presets |
| 179 | clickAnimation: undefined # or comma-delimited string |
| 180 | # custom zoom scale |
| 181 | # useful for slides with a lot of content |
| 182 | zoom: 1 |
| 183 | # used as positions of draggable elements |
| 184 | # Learn more: https://sli.dev/features/draggable.html |
| 185 | dragPos: {} # type: Record<string, string> |
| 186 | --- |
| 187 | ``` |
| 188 | |
| 189 | Check out the [type definition](https://github.com/slidevjs/slidev/blob/main/packages/types/src/frontmatter.ts#L260) for more details. |
| 190 | |
| 191 | ## Directory Structure |
| 192 | |
| 193 | Slidev uses directory structure conventions to minimalize the configuration surface and make extensions in functionality flexible and intuitive. |
| 194 | |
| 195 | Refer to the [Directory Structure](/custom/directory-structure) section. |
| 196 | |
| 197 | ## Config Tools |
| 198 | |
| 199 | <script setup> |
| 200 | import VPLink from 'vitepress/dist/client/theme-default/components/VPLink.vue' |
| 201 | import customizations from '../.vitepress/customizations' |
| 202 | </script> |
| 203 | |
| 204 | <li v-for="c of customizations.slice(2)" :key="c.text"> |
| 205 | <VPLink :href="c.link"> |
| 206 | {{ c.text }} |
| 207 | </VPLink> |
| 208 | </li> |
| 209 |