Developer Screencasting: Tools and Workflows

In this tutorial, you'll learn developer screencasting including tools like asciinema, OBS, and terminal recording for creating tutorials, demos, and documentation with terminal session recordings.

Why Screencasting Matters

Developer tutorials are more effective when they show real terminal sessions. Text explanations of commands are good, but seeing the commands executed with their output is better. Screencasting tools let you record terminal sessions, create tutorials, and produce documentation that readers can follow step by step. Unlike video recording, text-based terminal recordings are lightweight, searchable, and embeddable.

By the end of this guide, you will record terminal sessions with asciinema, create full-screen tutorials with OBS, and produce embedded terminal recordings for documentation.

What is Developer Screencasting?

Developer screencasting is the practice of recording terminal sessions, screen activity, or both, for educational or documentation purposes. Tools range from lightweight terminal recorders (asciinema) to full video production tools (OBS Studio).

flowchart LR
  A[Screencasting Tools] --> B[asciinema]
  A --> C[OBS Studio]
  A --> D[Terminal Recorders]
  B --> E[Record Terminal Only]
  B --> F[Share as SVG/JS]
  B --> G[Embed in Docs]
  C --> H[Record Full Screen]
  C --> I[Add Overlays]
  C --> J[Edit & Export]
  D --> K[script command]
  D --> L[ttyrec]

asciinema: Terminal Recording

asciinema records terminal sessions as text-based cast files. They are lightweight, searchable, and can be embedded in web pages.

Installation

# macOS
brew install asciinema

# Linux
sudo apt install asciinema -y

# Verify
asciinema --version
# asciinema 3.0.0

Recording a Session

# Start recording
asciinema rec demo.cast

# ... perform commands ...
ls -la
git status
cat README.md

# Stop recording: Ctrl-D or exit

Expected Output

$ asciinema rec demo.cast
~ asciinema recording started.
~ exit to finish recording.

$ ls -la
total 24
drwxr-xr-x   5 user  group   160 Jun 22 10:00 .
drwxr-xr-x  10 user  group   320 Jun 22 09:55 ..
-rw-r--r--   1 user  group   342 Jun 22 10:00 README.md
drwxr-xr-x   2 user  group    64 Jun 22 10:00 src
-rw-r--r--   1 user  group   120 Jun 22 10:00 package.json

$ exit
~ asciinema recording finished.
~ recorded 8 lines in 15 seconds.
~ saved to demo.cast (~ 2.4 KB)

Playing Back

# Local playback
asciinema play demo.cast

# Play at double speed
asciinema play -s 2 demo.cast

Uploading and Sharing

# Upload to asciinema.org
asciinema upload demo.cast
# https://asciinema.org/a/abc123

# Embed HTML (provided by asciinema.org)
<script async src="https://asciinema.org/a/abc123/embed.js"></script>

Advanced asciinema

Timing Control

# Record with idle time limit (max 2 seconds between commands)
asciinema rec --idle-time-limit 2 demo.cast

# Set custom max wait
asciinema rec -w 0.5 demo.cast

Editing Cast Files

# Install agg (asciinema GIF generator)
brew install agg

# Convert to GIF
agg demo.cast demo.gif

# Trim a recording
asciinema play --from 10 --to 30 demo.cast

OBS Studio: Full Video Recording

OBS Studio is the industry-standard tool for screen recording and live streaming. It is free, open-source, and cross-platform.

Installation

# macOS
brew install --cask obs

# Linux
sudo apt install obs-studio -y

Setting Up a Scene

1. Open OBS Studio
2. Create a new Scene (named "Tutorial")
3. Add Sources:
   • Window Capture: Your terminal window
   • Audio Input Capture: Your microphone
   • Text (optional): Overlay text

Scene Configuration for Developer Tutorials

Recording Settings

Recording Workflow

1. Prepare your script and terminal Windows
2. Start OBS recording
3. Narrate while performing commands
4. Stop recording
5. Edit with video editor (optional)

Terminal Font and Theme for Recording

# Recommended settings for readable terminal recordings
# Terminal profile: "Tutorial Recording"
Font: "Fira Code" or "JetBrains Mono" (16-18pt)
Theme: Light background for readability
Window size: 80x24 or 100x30 characters
Cursor: Block, blinking

Asciicast for Documentation

Embedding in Markdown

{{</* asciicast "abc123" */>}}

Or use the SVG approach:

# Generate SVG from cast file
pip install svg-term
svg-term --cast demo.cast --out demo.svg

# Embed in Markdown
![Terminal demo](demo.svg)

Creating Step-by-Step Recordings

# Record each command separately for precise timing
asciinema rec step1.cast  --title "Step 1: Install dependencies"
# ... run first command ...
# Ctrl-D to stop

asciinema rec step2.cast  --title "Step 2: Configure"
# ... run second command ...
# Ctrl-D to stop

Scripting Recordings

#!/bin/bash
# record-demo.sh
# Automate demo recording with expect-like scripting

DEMO_DIR="${1:-./demo}"

echo "Recording demo in $DEMO_DIR..."
mkdir -p "$DEMO_DIR"

# Record a series of commands automatically
asciinema rec "$DEMO_DIR/install.cast" -c "
  npm install create-vite -g
  vite --version
  echo 'Vite installed successfully'
"

asciinema rec "$DEMO_DIR/build.cast" -c "
  npm install
  npm run build
  echo 'Build complete'
"

Best Practices

Common Errors

Practice Questions

1. What is the primary advantage of asciinema over video recording?

asciinema recordings are text-based, lightweight, searchable, and can be embedded in web pages.

2. How do you limit idle time in an asciinema recording?

Use --idle-time-limit 2 to cap idle time at 2 seconds.

3. What is OBS Studio used for?

Full-screen recording with multiple sources (window, audio, display) for video production.

4. How do you share an asciinema recording publicly?

Upload it: asciinema upload demo.cast, which gives a URL like https://asciinema.org/a/abc123.

5. What terminal settings are recommended for recording?

Large font (16-18pt), monospace typeface, light background, and a clean prompt.

Challenge

Create a complete tutorial on a developer topic using asciinema. Record a terminal session that demonstrates installing a tool, configuring it, running a command, and viewing the output. Upload the recording, generate an SVG embed, and write a Markdown document that integrates the recording with explanatory text.

Real-World Task

Record a 5-minute screencast using OBS demonstrating your development workflow. Include: opening the project in Neovim, running tests, making a code change, and viewing the results. Add voice narration explaining each step. Export as a 1080p MP4 and share with your team for feedback.

Built by the developers of Doda Browser, DodaZIP, and Durga Antivirus Pro.