Skip to main content
The hello-world example demonstrates the basic setup for a webreel recording. It opens a landing page, waits for it to load, pauses briefly, and clicks a call-to-action button.

​
Configuration

Here’s the complete webreel.config.json for this example: 
{
  "$schema": "https://webreel.dev/schema/v1.json",
  "videos": {
    "hello-world": {
      "url": "./web/index.html",
      "viewport": { "width": 1920, "height": 1080 },
      "zoom": 2,
      "waitFor": ".cta",
      "steps": [
        { "action": "pause", "ms": 500 },
        { "action": "click", "selector": "a.cta", "delay": 1000 }
      ]
    }
  }
}

​
What It Demonstrates

​
Minimal Setup

This example shows the minimum required fields to create a webreel recording:
  • A url to navigate to
  • A viewport size for the browser window
  • A zoom level for higher quality output
  • An array of steps defining the interactions

​
Wait For Ready State

The waitFor field ensures the page is fully loaded before recording starts: 
"waitFor": ".cta"
Webreel waits until the .cta element appears in the DOM, guaranteeing the page is ready for interaction.

​
Basic Actions

The example uses two fundamental actions:
  1. Pause: Waits for 500ms to let the page settle 
    { "action": "pause", "ms": 500 }
  2. Click: Clicks the CTA button after a 1-second delay 
    { "action": "click", "selector": "a.cta", "delay": 1000 }
The delay field adds a pause before the next step, making the recording feel more natural.

​
Running the Example

cd examples/hello-world
webreel record
The output video will be saved to videos/hello-world.mp4.

​
Next Steps

Build docs developers (and LLMs) love

Get started for freeTalk to us