| 1 | --- |
| 2 | depends: |
| 3 | - guide/ui#navigation-bar |
| 4 | relates: |
| 5 | - drauu: https://github.com/antfu/drauu |
| 6 | tags: [drawing] |
| 7 | description: | |
| 8 | Draw and annotate your slides with ease. |
| 9 | --- |
| 10 | |
| 11 | # Drawing & Annotations |
| 12 | |
| 13 | Slidev comes with a built-in drawing and annotation feature powered by [drauu](https://github.com/antfu/drauu). It allows you to draw and annotate your slides with ease. |
| 14 | |
| 15 | To start, click the <carbon-pen class="inline-icon-btn"/> icon in the [navigation bar](../guide/ui#navigation-bar) to open the drawing toolbar. It's also available in the [Presenter Mode](/guide/ui#presenter-mode). Drawings and annotations you created will be **synced** automatically across all instances in real-time. |
| 16 | |
| 17 | <TheTweet id="1424027510342250499" /> |
| 18 | |
| 19 | ## Use with Stylus Pen |
| 20 | |
| 21 | When using a stylus pen on a tablet (for example, iPad with Apple Pencil), Slidev will intelligently detect the input type. You can directly draw on your slides with the pen without turning on the drawing mode while having your fingers or mouse control the navigation. |
| 22 | |
| 23 | ## Persist Drawings |
| 24 | |
| 25 | The following frontmatter configuration allows you to persist your drawings as SVGs under `.slidev/drawings` directory and have them inside your exported PDF or hosted site. |
| 26 | |
| 27 | ```md |
| 28 | --- |
| 29 | drawings: |
| 30 | persist: true |
| 31 | --- |
| 32 | ``` |
| 33 | |
| 34 | ## Disable Drawings |
| 35 | |
| 36 | Entirely: |
| 37 | |
| 38 | ```md |
| 39 | --- |
| 40 | drawings: |
| 41 | enabled: false |
| 42 | --- |
| 43 | ``` |
| 44 | |
| 45 | Only in Development: |
| 46 | |
| 47 | ```md |
| 48 | --- |
| 49 | drawings: |
| 50 | enabled: dev |
| 51 | --- |
| 52 | ``` |
| 53 | |
| 54 | Only in Presenter Mode: |
| 55 | |
| 56 | ```md |
| 57 | --- |
| 58 | drawings: |
| 59 | presenterOnly: true |
| 60 | --- |
| 61 | ``` |
| 62 | |
| 63 | ## Drawing Syncing |
| 64 | |
| 65 | By default, Slidev syncs up your drawings across all instances. If you are sharing your slides with others, you might want to disable the syncing via: |
| 66 | |
| 67 | ```md |
| 68 | --- |
| 69 | drawings: |
| 70 | syncAll: false |
| 71 | --- |
| 72 | ``` |
| 73 | |
| 74 | With this config, only the drawing from the presenter instance will be able to sync with others. |
| 75 |