# How to draw on your screen in VS Code while demoing code

Source: https://useoverlaid.app/guides/draw-in-vscode

> VS Code can show your keystrokes and mouse clicks with Screencast Mode and zoom the whole editor, but it has no drawing tool. To circle or underline code while you talk, run a screen annotation app like Overlaid on top of it.

Most of what makes a code demo easy to follow is already inside VS Code. Zoom the editor, turn on Screencast Mode, and your audience can read what you type.

What's missing is pointing. A circle around the line you mean, or an arrow to the panel you're about to click, is what stops people asking where you are.

## VS Code's own presenting tools (Free)

Screencast Mode, editor zoom and Zen Mode make the code readable. None of them draw.

1. Open the Command Palette and run Toggle Screencast Mode. Mouse clicks get a red circle and your keystrokes appear on screen.
2. Zoom the editor from View > Appearance until the code is readable from the back of the room.
3. Switch on Zen Mode to hide the sidebar and status bar.

Good:
- Free and built in
- Screencast Mode can limit the overlay to keyboard shortcuts

Limits:
- No pen, arrow or highlighter
- Screencast Mode only works inside VS Code, not in your terminal app or browser

## Overlaid ($11.99 once, 7-day free trial)

Draws over VS Code and every other app, so one tool covers your editor, your browser and your terminal.

1. Zoom the editor first, then press ⌃⌥D to start drawing.
2. Circle the line, draw an arrow, or underline a function name.
3. Set ink to fade so marks clear themselves before you move on.
4. Press ⌃⌥K for keystrokes that also work outside VS Code.

Good:
- Works in every app, not just the editor
- Fading ink and a ruler for straight underlines
- Keeps its own drawings on each full-screen Space

Limits:
- A separate paid app after the trial

## Tips

- **Zoom the editor before you draw.** A bigger font means a bigger target for your circle, and your audience can read the code underneath.
- **Pick one keystroke display.** If you use Overlaid's keystrokes, turn Screencast Mode off so shortcuts don't show twice.
- **Full-screen VS Code keeps its own drawings.** If you demo in full screen and swipe to a browser, each Space remembers its own marks, so nothing leaks across.

## Questions

### Does VS Code have a built-in way to draw on the screen?

No. It has Screencast Mode for clicks and keystrokes, and zoom, but no drawing tool.

### How do I show keystrokes in VS Code?

Open the Command Palette and run Toggle Screencast Mode. There is also a setting to show only keyboard shortcuts.

### Will my drawings show up when I share my screen on a call?

Yes, if you share your entire screen. A single-window share leaves them out.