Slidev Drawings

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

Accessing Drawing Tools

Via UI

1. Click the pen/pencil icon in the navigation bar 2. 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

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:

Integration with Slides

Drawing Over Code

# Code Review

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

Draw a circle around the important line during presentation.

Drawing Over Diagrams

graph LR A --> B --> C

Use arrows to trace the flow during explanation.

Drawing Over Images

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

Annotate specific components during walkthrough.

Common Patterns

Highlight and Explain

1. Show slide content 2. Activate drawing mode 3. Circle/underline key points 4. Explain while pointing

Build Diagram Live

1. Show empty/partial diagram 2. Draw connections as you explain 3. Add labels with rectangles

Code Walkthrough

1. Display code block 2. Draw arrows showing execution flow 3. Circle variables being discussed 4. Underline return values

Before/After

1. Draw "X" over old approach 2. Draw checkmark on new approach

Troubleshooting

Drawings Not Appearing

1. Check drawings.enabled: true 2. Refresh browser 3. Check for CSS conflicts

Sync Issues

1. Verify syncAll setting 2. Check network connection 3. Refresh all clients

Persistence Not Working

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

Stylus Not Working

1. Check browser compatibility 2. Verify stylus is connected 3. 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: 1. [What to draw/highlight] 2. [Tool to use] 3. [Color choice] 4. [When in explanation]

CLEANUP:

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