Step-by-Step Code Presenter for VS Code
DemiCod lets you create and deliver step-by-step code presentations directly in VS Code. Select snippets, build up steps, then walk through them incrementally. Perfect for live coding, tutorials, code reviews, and looking like you actually prepared.
Table of Contents
Features
[!TIP] These features work best when you have code selected in an open editor. No editor open? No steps for you.
| Feature | Description |
|---|---|
| Add Steps | Select code and save it as a presentation step |
| Start Presentation | Opens a temp file and reveals code step-by-step |
| Navigate | Move forward/backward through accumulated steps |
| Per-file Storage | Steps are stored per-file -- prepare multiple demos |
- Open a file and select a code snippet
- Press
Ctrl+Shift+Dto add it as a step - Repeat for each logical step in your presentation
- Press
Ctrl+Shift+Enterto start the presentation - Navigate with keyboard shortcuts or status bar buttons
[!NOTE] Steps are stored in
.demicod/presentation.jsonin your workspace root. No servers, no databases, no subscription fees. You can share you presentation with anyone. Just a simple JSON
Commands & Shortcuts
[!NOTE] Shortcuts are customizable. You can change to your favorites
| Command | Shortcut | Description |
|---|---|---|
Demicod: Add Selection as Step |
Ctrl+Shift+D / Cmd+Shift+D |
Add selected code as a step |
Demicod: Start Presentation |
Ctrl+Shift+Enter / Cmd+Shift+Enter |
Begin step-by-step presentation |
Demicod: Next Step |
Ctrl+Shift+Right / Cmd+Shift+Right |
Advance to next step |
Demicod: Previous Step |
Ctrl+Shift+Left / Cmd+Shift+Left |
Go back one step |
Demicod: End Presentation |
Ctrl+Shift+Esc / Cmd+Shift+Esc |
End the current presentation |
Demicod: Clear All Steps |
- | Remove all steps for current file |
Demicod: Remove Last Step |
- | Undo your last step addition |
Demicod: Open Keyboard Shortcuts |
- | Opens shortcut settings filtered to DemiCod |
[!WARNING] Clearing steps is permanent. There is no undo for undo.
Context Menu
Right-click any selection in the editor and choose Demicod: Add Selection as Step from the context menu.
Configuration
This extension contributes the following settings:
| Setting | Type | Default | Description |
|---|---|---|---|
demicod.stepSeparator |
string |
"\n" |
Separator between accumulated steps during presentation |
You can configure this in your settings.json:
{
// Add breathing room between steps
"demicod.stepSeparator": "\n\n"
}
Built With
| Technology | Purpose |
|---|---|
| TypeScript | Language |
| VS Code API | Extension framework |
| esbuild | Bundler |
| ESLint | Linting |
| Mocha | Testing |
Release Notes
0.0.1 (2026-05-10)
- Initial release
- Core features: add steps, start presentation, navigate, clear
- Keyboard shortcuts and status bar controls
- Per-file step management
- Configurable step separator
Made by Sudharsan Vanamali
If you find this useful, star the repo. It makes us feel warm inside.