Drawings in Slidev

This skill covers Slidev's built-in drawing and annotation features powered by drauu, allowing you to draw, highlight, and annotate slides in real-time during presentations.

When to Use This Skill

Highlighting important content during presentations
Drawing diagrams on the fly
Annotating code or images
Interactive teaching sessions
Brainstorming visualizations

Enabling Drawings

In Frontmatter

---
drawings:
  enabled: true
---

Full Configuration

---
drawings:
  enabled: true
  persist: false
  presenterOnly: false
  syncAll: true
---

Drawing Options

Option	Type	Default	Description
`enabled`	boolean/string	`true`	Enable drawings (`true`, `false`, `'dev'`)
`persist`	boolean	`false`	Save drawings to `.slidev/drawings/`
`presenterOnly`	boolean	`false`	Only presenter can draw
`syncAll`	boolean	`true`	Sync drawings across all clients

Accessing Drawing Tools

Via UI

Click the pen/pencil icon in the navigation bar
Drawing toolbar appears

Toolbar Options

Pen: Freehand drawing
Line: Straight lines
Arrow: Lines with arrowheads
Rectangle: Draw rectangles
Ellipse: Draw circles/ellipses
Eraser: Remove drawings
Clear: Remove all drawings

Drawing Tools Detailed

Pen Tool

Freehand drawing
Adjustable stroke width
Color selection

Usage: Click and drag to draw
Good for: Underlining, circling, quick annotations

Line Tool

Creates straight lines
Hold Shift for horizontal/vertical lines

Usage: Click start point, drag to end
Good for: Connecting elements, pointing

Arrow Tool

Lines with arrowheads
Directional indicators

Usage: Click start, drag to arrow point
Good for: Showing flow, indicating direction

Rectangle Tool

Draw rectangles/squares
Hold Shift for perfect squares

Usage: Click corner, drag to opposite corner
Good for: Highlighting areas, boxing content

Ellipse Tool

Draw circles/ellipses
Hold Shift for perfect circles

Usage: Click center, drag to edge
Good for: Circling items, attention markers

Eraser

Remove specific drawings
Click on drawing to erase it

Usage: Click on drawn elements to remove
Good for: Correcting mistakes, cleaning up

Stylus/Pen Support

Automatic Detection

Slidev automatically detects stylus input:

Pressure sensitivity (if supported)
Palm rejection
Natural drawing experience

iPad + Apple Pencil

Works great with:

Safari on iPad
Chrome on iPad
Sidecar (iPad as second display)

Color and Style

Changing Colors

Click color selector in drawing toolbar:

Preset colors available
Some themes support custom colors

Stroke Width

Adjust stroke width for:

Thin lines (precision)
Thick lines (visibility)

Persisting Drawings

Enable Persistence

---
drawings:
  persist: true
---

Storage Location

Drawings saved to:

.slidev/drawings/[slide-number].svg

Benefits

Drawings survive page reloads
Include in exports (PDF, etc.)
Version control friendly (SVG format)

Clearing Persisted Drawings

Delete files from .slidev/drawings/ or:

Use "Clear" button in drawing mode
Clear from presenter mode

Presenter-Only Mode

Configuration

---
drawings:
  presenterOnly: true
---

Behavior

Only presenter can draw
Drawings visible to all audiences
Audience cannot accidentally draw

Synchronization

Sync All Clients

---
drawings:
  syncAll: true
---

All connected clients see drawings in real-time.

Disable Sync

---
drawings:
  syncAll: false
---

Only presenter's drawings are synced to audience.

Best Practices

1. Prepare Key Annotations

Know in advance what you'll highlight:

<!--
ANNOTATIONS:
- Circle the error on line 5
- Arrow from input to output
- Underline the key term
-->

2. Use Appropriate Tools

Need	Tool
Highlight text	Pen (underline)
Point to something	Arrow
Group elements	Rectangle
Mark important	Ellipse

3. Color Choices

Red: Errors, warnings, important
Green: Success, correct, good
Blue: Information, notes
Yellow: Highlights (if visible on theme)

4. Clean As You Go

Erase unnecessary drawings before moving on
Keep drawings minimal and meaningful
Use "Clear" when starting fresh concept

5. Practice Drawing

Test stylus pressure/speed
Practice common shapes
Know your drawing shortcuts

Keyboard Shortcuts

When drawing mode is active:

Key	Action
`1`	Pen tool
`2`	Line tool
`3`	Arrow tool
`4`	Rectangle tool
`5`	Ellipse tool
`e`	Eraser
`c`	Clear all
`Esc`	Exit drawing mode

Integration with Slides

Drawing Over Code

# Code Review

```python
def calculate(x, y):
    result = x + y  # Circle this line
    return result

Draw a circle around the important line during presentation.


### Drawing Over Diagrams

```markdown
```mermaid
graph LR
    A --> B --> C

Use arrows to trace the flow during explanation.


### Drawing Over Images

```markdown
![Architecture](/images/architecture.png)

Annotate specific components during walkthrough.

Common Patterns

Highlight and Explain

Show slide content
Activate drawing mode
Circle/underline key points
Explain while pointing

Build Diagram Live

Show empty/partial diagram
Draw connections as you explain
Add labels with rectangles

Code Walkthrough

Display code block
Draw arrows showing execution flow
Circle variables being discussed
Underline return values

Before/After

Draw "X" over old approach
Draw checkmark on new approach

Troubleshooting

Drawings Not Appearing

Check drawings.enabled: true
Refresh browser
Check for CSS conflicts

Sync Issues

Verify syncAll setting
Check network connection
Refresh all clients

Persistence Not Working

Check persist: true
Verify .slidev/ directory exists
Check file permissions

Stylus Not Working

Check browser compatibility
Verify stylus is connected
Try different browser

Output Format

When configuring drawings:

---
drawings:
  enabled: true      # Enable drawing feature
  persist: true      # Save drawings between sessions
  presenterOnly: true # Only presenter can draw
  syncAll: true      # Sync to all viewers
---

DRAWING PLAN FOR SLIDE:

[What to draw/highlight]
[Tool to use]
[Color choice]
[When in explanation]

CLEANUP:

Clear before: [yes/no]
Clear after: [yes/no]

slidev-drawings