Installation

Get started by installing the globally accessible CLI tool.

npm install -g slides-tape

Requirements

• Node.js: 18.0.0 or higher.
• FFmpeg: Required for video exports. (Auto-detected if in your PATH).
• NPM/PNPM/Yarn: For dependency management.

Quick Start

From zero to presentation in 4 steps.

1. Create a Markdown file:

   # Hello World
   ---
   ```bash run
   echo "This works!"
   ```

2. Preview live: slides-tape serve talk.md
3. Record script: slides-tape run script.sh
4. Export deck: slides-tape export talk.md -o video.mp4

Serve Command

Launch the interactive presentation viewer. This serves your slides on a local port and watches for file changes.

slides-tape serve talk.md --port 8080 -d 6

Run Command

Record a shell script to MP4/WebM using the high-performance native canvas renderer.

slides-tape run demo.sh -o demo.mp4 --speed 1.5 --font-size 18

Web Command

Execute and record standalone browser automation scripts extracted from Markdown.

slides-tape web demo.md -o tour.mp4 -r 1280x720

Export Command

The total production command. Walks through your Markdown and compiles all animations into one video.

slides-tape export talk.md -d 6 --transition-type zoom

Export with 2x speed for all embedded recordings

slides-tape export talk.md --speed 2

Web Automation Guide

slides-tape features a natively bridged **Puppeteer** engine capable of projecting complex web UI interactions directly onto your presentation or video export.

1. Defining a Web Payload

Flag your markdown execution block with the web identifier:

```web run
# 1. Boot up the local dev server
# @goto http://localhost:4200/login
# @wait 800ms

# 2. Emulate the user dropping their credentials
# @type input[name="email"] "admin@studio.co.ke"
# @type input[name="pwd"] "password"
# @wait 400ms

# 3. Simulate the button press
# @click form > button[type="submit"]

# 4. Wait for the networking latency to finish rendering the dashboard
# @wait 2s

# 5. Fire raw sandboxed Javascript to trigger a complex UI alert visually
document.querySelector('body').style.backgroundColor = 'red';
alert("System Compromised!");
# @wait 1s
```

2. Available Directives

Directives are simplified abstractions that lower the boilerplate overhead for orchestrating browser interactions.

3. CSS Selectors

Since the engine uses Chromium, all modern CSS selectors are supported, including attribute queries, relational depth, and pseudo-selectors like :last-child.

# @click button[title="Edit"]:not([disabled])
# @type input[name="email"] "admin@example.com"

4. Javascript Sandbox

Complex logic can be executed via page.evaluate(). Any line not starting with # @ is treated as raw Javascript.

```web run
# @goto http://localhost:3000
document.title = 'Injected via slides-tape!';
```

.tre Event Logs

Terminal Recording Events (.tre) are JSONL session logs that contain a "frozen serialization" of every ANSI byte sequence emitted during a session.

Phase 1 vs Phase 2

slides-tape splits workflow into two phases:

• Phase 1 (Execution): Executes the native Unix PTY and records bytes + millisecond timestamps to a .tre file.
• Phase 2 (Canvas Draw): Iterates over the log and pushes it through the Rust-powered canvas engine to generate MP4 frames.

Re-render Tweaks

slides-tape run deploy.sh --load-events deploy.tre --speed 5 --font-size 22

License

slides-tape is licensed under the Creative Commons Attribution-NonCommercial 4.0 International (CC-BY-NC-4.0) license.

© 2026 Alex Muturi J.

Key Terms:

• Attribution: You must give appropriate credit.
• Non-Commercial: You may not use the material for commercial purposes.
• No Additional Restrictions: You may not apply legal terms or technological measures that legally restrict others from doing anything the license permits.

View full legal code →

Examples Showcase

Copy these snippets to jump-start your technical productions.

1. Markdown Presentation (`talk.md`)

A basic deck with speaker notes and a run block.

# Technical Deep Dive
---
> Note: Intro goes here. Keep it brief!

## Running the tool
```bash run
slides-tape serve talk.md --port 8080
```
---
# 🌐 Live UI Tour
```web run
# @goto http://localhost:3000
# @wait 1s
```

2. Bash Logic Script (`demo.sh`)

Advanced directives for specific terminal visuals.

# @title "Building Docker Image"
# @echo off
# @wait 1s
# @type "docker build -t app:v1 ."
echo "Step 1/3 : FROM node:20"
sleep 0.5
echo "---> Successfully built app:v1"

# @clear
# @title "Launch"
# @type "npm run start"
echo "Listening at http://localhost:3000"

3. Web Automation (`demo.md`)

Direct browser interactions.

```web run
# @goto https://github.com/alex-migwi/slides-tape
# @wait 800ms
# @type input[name="q"] "release"
# @click button[type="submit"]
# @wait 2s
```

4. .tre Event Log (JSON Snippet)

The underlying event serialization format.

[
  {"e":"ps1","ps1":"$ "},
  {"e":"typing","cmd":"npm install"},
  {"e":"output","data":"\r\nadded 12 packages...\r\n","t":450},
  {"e":"cmd_end","exit":0},
  {"e":"session_end","exit":0}
]