### WebReel Configuration File Example

Source: https://webreel.dev/quick-start

An example of the `webreel.config.json` file, detailing video settings, viewport dimensions, and a sequence of actions to be performed during recording. The `url` specifies the target webpage, `viewport` defines the resolution, and `steps` outlines the interaction sequence.

```json
{
  "$schema": "https://webreel.dev/schema/v1.json",
  "videos": {
    "my-video": {
      "url": "https://example.com",
      "viewport": { "width": 1080, "height": 1080 },
      "steps": [
        { "action": "pause", "ms": 500 },
        { "action": "click", "text": "Get Started" },
        { "action": "key", "key": "cmd+a" },
        { "action": "pause", "ms": 1000 }
      ]
    }
  }
}
```

--------------------------------

### Install WebReel using npm

Source: https://webreel.dev/quick-start

Installs the WebReel package using npm. Ensure you have Node.js (v18+) installed.

```bash
npm install webreel
```

--------------------------------

### Initialize WebReel project

Source: https://webreel.dev/quick-start

Initializes a new WebReel project, creating a default configuration file (`webreel.config.json`). This command sets up the basic structure for your video recordings.

```bash
npx webreel init
```

--------------------------------

### webreel Configuration Example (JSONC)

Source: https://webreel.dev/configuration

An example of a webreel configuration file in JSONC format. It demonstrates top-level settings and defines configurations for two videos: 'hero' and 'login', including their URLs, steps, and output options.

```json
{
  "$schema": "https://webreel.dev/schema/v1.json",
  "outDir": "./videos",
  "baseUrl": "https://myapp.com",
  "viewport": { "width": 1920, "height": 1080 },
  "defaultDelay": 500,
  "videos": {
    "hero": {
      "url": "/",
      "steps": [
        { "action": "pause", "ms": 500 },
        { "action": "click", "text": "Get Started", "delay": 1000 }
      ]
    },
    "login": {
      "url": "/login",
      "output": "login-flow.mp4",
      "steps": [
        {
          "action": "type",
          "text": "user@example.com",
          "target": { "selector": "#email" }
        },
        { "action": "click", "text": "Sign In" }
      ]
    }
  }
}
```

--------------------------------

### Record video with WebReel

Source: https://webreel.dev/quick-start

Records a video based on the WebReel configuration. The output is saved as `videos/my-video.mp4` by default. You can specify different output formats like `.gif` or `.webm` using the `output` field in the configuration.

```bash
npx webreel record
```

--------------------------------

### webreel Step Label and Description Example (JSONC)

Source: https://webreel.dev/configuration

Shows how to add `label` and `description` fields to a webreel step. The `label` is displayed on-screen during recording, while the `description` is used in verbose output and dry-run summaries.

```json
{
  "action": "click",
  "text": "Get Started",
  "label": "CTA",
  "description": "Click the CTA button on the hero section"
}
```

--------------------------------

### Specify Element to Wait For (waitFor)

Source: https://webreel.dev/configuration

Defines an element to wait for before starting video recording steps. Accepts a CSS selector or an object with text/selector properties.

```json
{
  "videos": {
    "app": {
      "url": "https://example.com",
      "waitFor": "[data-ready]",
      "steps": []
    },
    "dashboard": {
      "url": "https://example.com/app",
      "waitFor": { "text": "Welcome back" },
      "steps": []
    }
  }
}
```

--------------------------------

### Configure Zoom Level (zoom)

Source: https://webreel.dev/configuration

Applies a CSS zoom level to the page content within the viewport. A value of 2, for example, doubles the size of all elements.

```json
{
  "zoom": 2
}
```

--------------------------------

### Use Environment Variables in Config

Source: https://webreel.dev/configuration

Demonstrates how to use $VAR or ${VAR} syntax in JSON configurations for dynamic values, alongside CLI execution.

```json
{
  "baseUrl": "$BASE_URL",
  "videos": {
    "hero": {
      "url": "${APP_PATH}/dashboard",
      "steps": []
    }
  }
}
```

```bash
BASE_URL=https://staging.myapp.com webreel record
```

--------------------------------

### Include Steps from Other Files (include)

Source: https://webreel.dev/configuration

Prepends steps from external files (JSON, TS, JS, MJS). Can be set globally or per video. JSON files require a 'steps' array, while TS/JS files export an object with a 'steps' array.

```json
{
  "include": ["./shared/login-steps.json"],
  "videos": {
    "dashboard": {
      "url": "/dashboard",
      "steps": [{ "action": "click", "text": "Analytics" }]
    }
  }
}
```

```json
{
  "steps": [
    { "action": "click", "text": "Sign In" },
    { "action": "type", "text": "user@example.com", "target": { "selector": "#email" } }
  ]
}
```

```javascript
export default {
  steps: [
    { action: "click", text: "Sign In" },
    { action: "type", text: "user@example.com", target: { selector: "#email" } },
  ],
};
```

--------------------------------

### Configure with TypeScript

Source: https://webreel.dev/configuration

Uses the defineConfig helper for type-safe configuration in TypeScript projects.

```typescript
import { defineConfig } from "webreel";

export default defineConfig({
  videos: {
    hero: {
      url: "/",
      steps: [{ action: "click", text: "Get Started" }],
    },
  },
});
```

```typescript
import type { InputWebreelConfig } from "webreel";
```

--------------------------------

### Configure Output Directory (outDir)

Source: https://webreel.dev/configuration

Specifies the directory where output videos are saved. Defaults to './videos/'. If not set, videos are named '<name>.mp4' and placed in this directory.

```json
{
  "outDir": "./dist",
  "videos": {
    "hero": { "url": "https://example.com", "steps": [] }
  }
}
```

--------------------------------

### Customize Theme (theme)

Source: https://webreel.dev/configuration

Customizes the appearance of the cursor and keystroke overlay. Options include cursor image, size, hotspot, and HUD background, color, font size, family, border radius, and position.

```json
{
  "theme": {
    "cursor": {
      "image": "path/to/cursor.svg",
      "size": 32,
      "hotspot": "top-left"
    },
    "hud": {
      "background": "rgba(0,0,0,0.7)",
      "color": "white",
      "fontSize": 48,
      "fontFamily": "monospace",
      "borderRadius": 12,
      "position": "bottom"
    }
  }
}
```

--------------------------------

### Define Key Bindings and Combos

Source: https://webreel.dev/configuration

Specifies key actions using single keys or modifiers like 'mod' (platform-specific), 'shift', or 'alt'.

```json
{ "action": "key", "key": "mod+a" }
{ "action": "key", "key": "cmd+shift+p" }
{ "action": "key", "key": "Enter" }
{ "action": "key", "key": "Escape" }
```

--------------------------------

### webreel Default Delay Configuration (JSONC)

Source: https://webreel.dev/configuration

Illustrates the use of `defaultDelay` in webreel configuration. This setting applies a default delay after each step, which can be overridden by a step's specific `delay` property or by using a `pause` step for explicit waits.

```json
{
  "defaultDelay": 500,
  "videos": {
    "hero": {
      "url": "/",
      "steps": [
        { "action": "click", "text": "Get Started" },
        { "action": "key", "key": "mod+a", "delay": 1000 },
        { "action": "click", "text": "Submit" }
      ]
    }
  }
}
```

--------------------------------

### Set Viewport Presets

Source: https://webreel.dev/configuration

Defines the browser viewport size using named device presets instead of explicit dimensions.

```json
{
  "viewport": "iphone-15",
  "videos": {
    "mobile": { "url": "/", "steps": [] }
  }
}
```

--------------------------------

### Run Dry Run for Debugging

Source: https://webreel.dev/configuration

Executes the CLI in dry-run mode to resolve and print the final configuration without launching a browser.

```bash
webreel record --dry-run
webreel record hero --dry-run
```

--------------------------------

### Customize Thumbnail Generation (thumbnail)

Source: https://webreel.dev/configuration

Configures thumbnail generation for videos. By default, a PNG thumbnail is created from the first frame. Customization includes specifying the time or disabling generation.

```json
{
  "videos": {
    "hero": {
      "url": "https://example.com",
      "thumbnail": { "time": 2.5 },
      "steps": []
    },
    "background": {
      "url": "https://example.com",
      "thumbnail": { "enabled": false },
      "steps": []
    }
  }
}
```

--------------------------------

### Configure Sound Effects in Webreel

Source: https://webreel.dev/configuration

Configures click and keystroke sound effects globally or per-video. Supports built-in variants (1-4) or custom file paths.

```json
{
  "sfx": { "click": 1, "key": 2 },
  "videos": {
    "hero": {
      "url": "/",
      "steps": [{ "action": "click", "text": "Get Started" }]
    },
    "silent": {
      "url": "/about",
      "sfx": { "click": 3, "key": "./sounds/custom-key.mp3" },
      "steps": []
    }
  }
}
```

--------------------------------

### Enable JSON Schema Validation

Source: https://webreel.dev/configuration

Adds the $schema field to the configuration file to enable IDE autocompletion and validation.

```json
{
  "$schema": "https://webreel.dev/schema/v1.json"
}
```

--------------------------------

### webreel Click Dwell Configuration (JSONC)

Source: https://webreel.dev/configuration

Demonstrates how to configure `clickDwell` in webreel. This setting controls the pause duration before a click action. It can be set globally, per-video, or to `0` for instant clicks.

```json
{
  "clickDwell": 120,
  "videos": {
    "hero": {
      "url": "/",
      "clickDwell": 0,
      "steps": [{ "action": "click", "text": "Get Started" }]
    }
  }
}
```

--------------------------------

### Configure Viewport Dimensions

Source: https://webreel.dev/configuration

Sets the browser window dimensions for recording. Defaults to 1080x1080 pixels. This can be set globally or per video.

```json
{
  "viewport": { "width": 1920, "height": 1080 }
}
```

--------------------------------

### Set Base URL (baseUrl)

Source: https://webreel.dev/configuration

Defines a base URL that is inherited by all videos unless overridden. This is useful for setting a common domain or path for multiple videos.

```json
{
  "baseUrl": "https://myapp.com",
  "videos": {
    "home": { "url": "/", "steps": [] },
    "docs": { "url": "/docs", "steps": [] }
  }
}
```

--------------------------------

### Simulate Key Presses in Webreel

Source: https://webreel.dev/actions

The 'key' action simulates keyboard input, including single keys or combinations. It supports platform-agnostic modifiers ('mod+') and explicit modifiers ('cmd+', 'ctrl+'). An optional 'target' can specify an element to focus before pressing the key.

```json
{ "action": "key", "key": "mod+a" }
```

```json
{ "action": "key", "key": "Enter", "label": "Submit" }
```

```json
{ "action": "key", "key": "Escape", "target": "#modal" }
```

--------------------------------

### Navigate to URL in Webreel

Source: https://webreel.dev/actions

The 'navigate' action changes the current page URL during a recording. This is useful for multi-page user flows. The 'url' parameter can be a relative path or a full URL.

```json
{ "action": "navigate", "url": "/dashboard" }
```

```json
{ "action": "navigate", "url": "https://example.com/settings" }
```

--------------------------------

### Override Video Output Path (output)

Source: https://webreel.dev/configuration

Allows overriding the default output path for a specific video. This path is resolved relative to `outDir` and supports .mp4, .gif, and .webm formats.

```json
{
  "videos": {
    "hero": {
      "url": "https://example.com",
      "output": "hero-video.mp4",
      "steps": []
    }
  }
}
```

--------------------------------

### Set Recording Frame Rate (fps)

Source: https://webreel.dev/configuration

Determines the recording frame rate. Defaults to 60 FPS. Lower values can reduce file size, especially for GIF output.

```json
{
  "videos": {
    "hero": {
      "url": "https://example.com",
      "fps": 30,
      "steps": []
    }
  }
}
```

--------------------------------

### Capture Screenshot in Webreel

Source: https://webreel.dev/actions

The 'screenshot' action captures a PNG image of the current page state. The 'output' parameter specifies the file path where the screenshot will be saved.

```json
{ "action": "screenshot", "output": "hero.png" }
```

--------------------------------

### Move Cursor to Element in Webreel

Source: https://webreel.dev/actions

The 'moveTo' action simulates hovering the mouse cursor over a specified element without clicking. Elements can be targeted by 'text' or a 'selector', with an optional 'within' parameter to scope the search.

```json
{ "action": "moveTo", "text": "Settings" }
```

```json
{ "action": "moveTo", "selector": ".nav-item" }
```

--------------------------------

### Wait for Element Visibility in Webreel

Source: https://webreel.dev/actions

The 'wait' action pauses execution until a specified element appears on the page or a text is found. It can use either a 'selector' or 'text' to identify the target, with an optional 'timeout' to prevent indefinite waiting.

```json
{ "action": "wait", "selector": ".loaded" }
```

```json
{ "action": "wait", "text": "Welcome back", "timeout": 5000 }
```

--------------------------------

### Pause Execution in Webreel

Source: https://webreel.dev/actions

The 'pause' action halts video recording for a specified duration. It takes a single parameter 'ms' to define the wait time in milliseconds. This is useful for controlling the timing between steps.

```json
{
  "action": "pause",
  "ms": 500
}
```

--------------------------------

### Set Output Quality (quality)

Source: https://webreel.dev/configuration

Controls the output quality on a scale of 1 to 100, where 100 is the highest quality and largest file size. Defaults to 80. This maps to CRF values for MP4 and WebM.

```json
{
  "videos": {
    "hero": {
      "url": "https://example.com",
      "quality": 95,
      "steps": []
    }
  }
}
```

--------------------------------

### Type Text Character by Character in Webreel

Source: https://webreel.dev/actions

The 'type' action simulates typing text into an element, character by character, creating a realistic typing animation. It requires the text to be typed and optionally accepts a selector for the target element and a 'charDelay' for typing speed.

```json
{ "action": "type", "text": "hello@example.com" }
```

```json
{ "action": "type", "text": "search query", "selector": "#search" }
```

--------------------------------

### Drag and Drop Action in Webreel

Source: https://webreel.dev/actions

The 'drag' action simulates dragging an element from a source ('from') to a target ('to'). Both source and target elements can be identified using 'text' or 'selector'.

```json
{
  "action": "drag",
  "from": { "text": "Item 1" },
  "to": { "text": "Drop Zone" }
}
```

--------------------------------

### Click Element Action in Webreel

Source: https://webreel.dev/actions

The 'click' action simulates a mouse click on a web element. Elements can be identified by their text content or a CSS selector. An optional 'within' parameter can narrow the search scope. Modifier keys can also be applied.

```json
{ "action": "click", "text": "Get Started" }
```

```json
{ "action": "click", "selector": "#submit-btn" }
```

```json
{ "action": "click", "text": "Save", "within": ".modal" }
```

--------------------------------

### Select dropdown values with WebReel

Source: https://webreel.dev/actions

Selects a specific option value from a HTML select element. Users must provide the 'value' to be selected and identify the element via either 'text' or a 'selector'.

```json
{ "action": "select", "value": "us", "selector": "#country" }
{ "action": "select", "value": "dark", "text": "Theme" }
```

--------------------------------

### Hover over elements with WebReel

Source: https://webreel.dev/actions

Triggers hover states or JavaScript hover handlers on specified elements. Requires either a 'text' label or a 'selector' to identify the target element, with an optional 'within' parameter to scope the search.

```json
{ "action": "hover", "text": "Settings" }
{ "action": "hover", "selector": ".dropdown-trigger" }
{ "action": "hover", "text": "Menu", "within": ".nav" }
```

--------------------------------

### Scroll Page or Element in Webreel

Source: https://webreel.dev/actions

The 'scroll' action allows scrolling the page or a specific element vertically or horizontally. It accepts 'x' and 'y' offsets for the scroll amount and can target elements using 'selector' or 'text'.

```json
{ "action": "scroll", "y": 300 }
```

```json
{ "action": "scroll", "y": -200, "selector": ".sidebar" }
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.