tdeo

Code typing playback for VS Code. Create engaging coding tutorials and demos by automatically re-typing your code with customizable pacing.

How It Works

1. Write your final code
2. Add :tdeo comments to control timing
3. Run the extension
4. Record your screen with any tool (OBS, Loom, etc.)

The extension types your code character-by-character while you record, giving you authentic typing videos in your actual VS Code environment.

Installation

From VSIX (Local)

# Build the extension
npm install
npm run compile

# Package it
npx vsce package

# Install in VS Code
code --install-extension tdeo-0.1.0.vsix

Quick Start

1. Open any code file
2. Add timing commands as comments (see below)
3. Press Cmd+Shift+T (Mac) or Ctrl+Shift+T (Windows/Linux)
4. Start your screen recorder
5. Confirm to begin playback

Commands

Example

// :tdeo speed 2
import express from 'express';
import cors from 'cors';

// :tdeo speed 1
// :tdeo pause 1s

// :tdeo speed 0.5
// This important part types slowly
const app = express();

// :tdeo instant-start
app.use(cors());
app.use(express.json());
// :tdeo instant-end

// :tdeo pause 2s
app.listen(3000);

What Happens

1. Imports type quickly (2x speed)
2. 1 second pause
3. App creation types slowly (0.5x speed)
4. Middleware appears instantly
5. 2 second pause before final line

Supported Languages

Commands work in any language with comment support:

Keyboard Shortcuts

Settings

Configure in VS Code settings (Cmd+,):

Tips

1. Fast imports: Use speed 2 or instant-start/end for boilerplate
2. Emphasize key code: Use speed 0.5 and pause before important sections
3. Let viewers read: Add pause 2s after complex code blocks
4. Hide setup code: Use hide for code you don't want in the final output

Demo Files

Check the examples/ folder for sample scripts:

1. demo.js - JavaScript/Express example
2. demo.py - Python/ML example

License

MIT