Skip to main content

​
Get started in three steps

This guide walks you through creating and recording your first webreel video.
1

Install webreel

Install webreel using npm, yarn, or pnpm:
npm install webreel
Need Node.js 18 or higher? See the installation guide for system requirements.
2

Create a config file

Initialize a new webreel config file:
npx webreel init --name my-first-video --url https://example.com
This creates a webreel.config.json file with a basic configuration:
webreel.config.json
{
  "$schema": "https://webreel.dev/schema/v1.json",
  "videos": {
    "my-first-video": {
      "url": "https://example.com",
      "viewport": { "width": 1080, "height": 1080 },
      "defaultDelay": 500,
      "steps": [
        { "action": "pause", "ms": 500 },
        { "action": "click", "text": "Get Started" },
        { "action": "key", "key": "cmd+a", "delay": 1000 }
      ]
    }
  }
}
The $schema field enables autocompletion in VS Code and other editors that support JSON schemas.
3

Record your video

Run the record command to generate your video:
npx webreel record
The first run will download Chrome and ffmpeg automatically (approximately 200MB total). This one-time download may take a few minutes.
webreel will:
  1. Launch a headless Chrome browser
  2. Navigate to the specified URL
  3. Execute each step in sequence
  4. Capture screenshots at approximately 60fps
  5. Encode the final video with ffmpeg
Your video will be saved to videos/my-first-video.mp4.

​
Complete example: Login form

Here’s a more realistic example that demonstrates typing into form fields:
webreel.config.json
{
  "$schema": "https://webreel.dev/schema/v1.json",
  "videos": {
    "form-filling": {
      "url": "https://yourapp.com/login",
      "viewport": { "width": 1920, "height": 1080 },
      "defaultDelay": 300,
      "steps": [
        { "action": "pause", "ms": 500 },
        {
          "action": "type",
          "text": "user@example.com",
          "selector": "#email",
          "charDelay": 40
        },
        {
          "action": "type",
          "text": "supersecret123",
          "selector": "#password",
          "charDelay": 30,
          "delay": 500
        },
        { "action": "click", "text": "Sign In" },
        { "action": "pause", "ms": 2500 }
      ]
    }
  }
}
This config:
  • Opens your login page at a 1920x1080 viewport
  • Types an email address into the #email field with realistic character delay
  • Types a password into the #password field
  • Clicks the “Sign In” button
  • Waits 2.5 seconds to show the result

​
Preview before recording

Test your config in a visible browser window without recording: 
npx webreel preview
This is helpful for:
  • Debugging selector issues
  • Timing your steps correctly
  • Verifying animations and transitions
Use webreel preview --verbose to see detailed logs of each step as it executes.

​
Expected output

After recording completes, you’ll see: 
✓ Recording complete: videos/my-first-video.mp4
✓ Thumbnail generated: videos/my-first-video.jpg
Your videos/ directory will contain:
  • my-first-video.mp4: The final encoded video
  • my-first-video.jpg: A thumbnail image (by default from the first frame)

​
Next steps

Now that you’ve recorded your first video, explore more features:

CLI commands

Learn about all available commands including watch mode and validation

Configuration

Explore all config options, actions, and advanced features

Actions reference

Complete reference for all available actions (click, type, scroll, drag)

Examples

Browse example configs for common use cases

Build docs developers (and LLMs) love

Get started for freeTalk to us