Skip to main content

​
Overview

VSCode Typing Simulator provides several configuration options to customize your typing simulation videos. All configuration is done by modifying parameters in the Python code.

​
Window Size Configuration

The VSCode window size is configured through the VSCodeMockup class initialization:
vscode_mockup.py
class VSCodeMockup:
    def __init__(self, width=1280, height=720):
        pygame.init()
        self.width = width
        self.height = height
        self.screen = pygame.display.set_mode((width, height))

​
Default Values

  • Width: 1280 pixels
  • Height: 720 pixels (HD resolution)

​
Changing Window Size

To use a different resolution, modify the initialization in capture.py: 
mockup = VSCodeMockup()
Larger resolutions will increase processing time and file size significantly.

​
Typing Speed Configuration

The typing speed determines how fast characters appear in the simulation.

​
Default Typing Speed

vscode_mockup.py
def simulate_typing(self, text, video_writer, delay=0.1):
    for char in text:
        # ... rendering code ...
        time.sleep(delay)
  • Default delay: 0.1 seconds per character
  • Effective speed: 10 characters per second
  • Lines per minute: Approximately 30-40 (depending on line length)

​
Adjusting Typing Speed

Modify the delay parameter when calling simulate_typing: 
mockup.simulate_typing(code, out, delay=0.05)  # 20 chars/sec
The delay applies to every character, including whitespace and newlines. A lower delay creates faster typing, while a higher delay makes it more deliberate.

​
Font Size Settings

Font configuration affects both the code text and UI elements.

​
Code Font Size

vscode_mockup.py
try:
    font_path = './media/CascadiaCode.ttf'
    self.font = pygame.font.Font(font_path, 14)
except:
    print("Could not load Cascadia Code, using fallback font")
    self.font = pygame.font.SysFont('Consolas', 14)
  • Default size: 14 pixels
  • Font: Cascadia Code (or Consolas fallback)

​
Title Bar Font

vscode_mockup.py
self.title_font = pygame.font.SysFont('Segoe UI', 12)
  • Default size: 12 pixels
  • Font: Segoe UI

​
Changing Font Sizes

Modify the font initialization in VSCodeMockup.__init__: 
self.font = pygame.font.Font(font_path, 18)
Changing font size may require adjusting line_height and char_width for proper spacing.

​
Window Margins and Dimensions

The VSCode window is positioned with margins from the desktop edges.

​
Margin Configuration

vscode_mockup.py
# VSCode window dimensions
self.window_margin = 100
self.title_bar_height = 30
self.window_width = width - (self.window_margin * 2)
self.window_height = height - (self.window_margin * 1.5)

​
Default Values

PropertyValueDescription
window_margin100Distance from screen edges (left/right)
title_bar_height30Height of the title bar
window_widthwidth - 200Calculated: screen width minus margins
window_heightheight - 150Calculated: screen height minus 1.5× margin

​
Text Layout Settings

vscode_mockup.py
self.line_height = 20
self.char_width = 8
self.left_margin = 50
PropertyValueDescription
line_height20Vertical spacing between lines
char_width8Approximate character width
left_margin50Space for line numbers

​
Customizing Layout

To adjust the window positioning and spacing:
Custom Margins Example
# Larger desktop margins for more background visibility
self.window_margin = 150

# Taller title bar
self.title_bar_height = 40

# More compact line spacing
self.line_height = 18

# Wider left margin for larger line numbers
self.left_margin = 60

​
Window Control Buttons

The macOS-style window control buttons can be configured:
vscode_mockup.py
# Window control buttons colors
self.close_button_color = (232, 17, 35)
self.minimize_button_color = (255, 185, 0)
self.maximize_button_color = (0, 204, 0)
Button rendering settings:
vscode_mockup.py:draw_window_buttons
button_size = 12
button_margin = 8
  • Button diameter: 12 pixels
  • Button spacing: 8 pixels between buttons

​
Video Output Settings

The video encoding is configured in capture.py:
capture.py
def record_video(source_file, output_file, duration):
    # Configure video capture
    screen_size = (1280, 720)  # Fixed size for mockup
    
    # Use MJPG with AVI format for better compatibility
    fourcc = cv2.VideoWriter_fourcc(*'MJPG')
    out = cv2.VideoWriter(
        output_file + '.avi',
        fourcc,
        30.0,
        screen_size
    )

​
Video Parameters

ParameterValueDescription
CodecMJPGMotion JPEG codec
Frame Rate30.0Frames per second
FormatAVIContainer format
Resolution(1280, 720)Video dimensions
The screen_size in record_video should match the VSCodeMockup dimensions for proper recording.

​
Configuration Example

Here’s a complete example with custom configuration:
capture.py (modified)
def record_video(source_file, output_file, duration):
    # Custom high-res configuration
    screen_size = (1920, 1080)
    
    fourcc = cv2.VideoWriter_fourcc(*'MJPG')
    out = cv2.VideoWriter(
        output_file + '.avi',
        fourcc,
        30.0,
        screen_size
    )
    
    if not out.isOpened():
        print("Error: Could not initialize video recording.")
        return
        
    print("Recording started successfully")
    
    try:
        with open(source_file, 'r', encoding='utf-8') as file:
            code = file.read()
        
        # Custom mockup with larger window and faster typing
        mockup = VSCodeMockup(width=1920, height=1080)
        mockup.simulate_typing(code, out, delay=0.05)
            
    finally:
        out.release()
        cv2.destroyAllWindows()
        pygame.quit()

​
Best Practices

1

Match Dimensions

Ensure screen_size in record_video matches the VSCodeMockup dimensions
2

Test Typing Speed

Start with the default 0.1s delay and adjust based on your content length
3

Consider File Size

Larger resolutions and longer videos create much larger file sizes
4

Font Size Scaling

When changing resolution, consider scaling font sizes proportionally

​
Next Steps

Customization

Customize colors, backgrounds, and visual styling

Examples

See real-world examples and use cases

Build docs developers (and LLMs) love

Get started for freeTalk to us