{"_id":"@carlesandres/webreel","_rev":"2-f228831982ca42e2837fbd72028341fb","name":"@carlesandres/webreel","dist-tags":{"latest":"0.2.1"},"versions":{"0.2.0":{"name":"@carlesandres/webreel","version":"0.2.0","keywords":["video","recording","browser","demo","automation","headless","chrome","mp4","gif","webm","screencast"],"license":"Apache-2.0","_id":"@carlesandres/webreel@0.2.0","maintainers":[{"name":"carlesandres","email":"carlos.andres.c@gmail.com"}],"homepage":"https://webreel.dev","bugs":{"url":"https://github.com/vercel-labs/webreel/issues"},"bin":{"webreel":"dist/index.js"},"dist":{"shasum":"3714ebb783d3936d3fd8688c8edbbddb2e700c05","tarball":"https://registry.npmjs.org/@carlesandres/webreel/-/webreel-0.2.0.tgz","fileCount":63,"integrity":"sha512-rQY0voPnfNnuevCcb7yCINuPeQQ49ReMVycCOmnzMiwKVlqnJdJm2NFPFSBS/TL75PE/g3rUTU2xdwp0fuEL1g==","signatures":[{"sig":"MEUCIBj7QNbma6s05nQtTrkDBu6xr7gr/drrVWYT5BXlSg7qAiEArmV8E4igEbokyx2j06trq36vQNzRPm3f31p8dKfrSt0=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":252084},"type":"module","_from":"file:carlesandres-webreel-0.2.0.tgz","engines":{"node":">=18"},"exports":{".":{"types":"./dist/config.d.ts","import":"./dist/config.js"}},"scripts":{"dev":"tsc --watch","test":"vitest run","build":"rm -rf dist && tsc","clean":"rm -rf dist","type-check":"tsc --noEmit"},"_npmUser":{"name":"carlesandres","email":"carlos.andres.c@gmail.com"},"_resolved":"/private/var/folders/20/3lpbx2mx2l17h63z6cb6ky4r0000gn/T/301e71f49ccdf482565441e056c41e90/carlesandres-webreel-0.2.0.tgz","_integrity":"sha512-rQY0voPnfNnuevCcb7yCINuPeQQ49ReMVycCOmnzMiwKVlqnJdJm2NFPFSBS/TL75PE/g3rUTU2xdwp0fuEL1g==","repository":{"url":"git+https://github.com/carlesandres/webreel.git","type":"git","directory":"packages/webreel"},"_npmVersion":"11.12.1","description":"Record scripted browser demos as MP4, GIF, or WebM with cursor animation, keystroke overlays, and sound effects.","directories":{},"_nodeVersion":"24.15.0","dependencies":{"jiti":"^2.6.1","commander":"^14.0.3","jsonc-parser":"^3.3.1","@carlesandres/webreel-core":"0.2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"typescript":"5.9.3","@types/node":"25.3.0"},"_npmOperationalInternal":{"tmp":"tmp/webreel_0.2.0_1782389910346_0.6175846441654935","host":"s3://npm-registry-packages-npm-production"}},"0.2.1":{"name":"@carlesandres/webreel","version":"0.2.1","description":"Record scripted browser demos as MP4, GIF, or WebM with cursor animation, keystroke overlays, and sound effects.","homepage":"https://webreel.dev","repository":{"type":"git","url":"git+https://github.com/carlesandres/webreel.git","directory":"packages/webreel"},"bugs":{"url":"https://github.com/vercel-labs/webreel/issues"},"keywords":["video","recording","browser","demo","automation","headless","chrome","mp4","gif","webm","screencast"],"license":"Apache-2.0","publishConfig":{"access":"public"},"type":"module","exports":{".":{"types":"./dist/config.d.ts","import":"./dist/config.js"}},"bin":{"webreel":"dist/index.js"},"engines":{"node":">=18"},"dependencies":{"commander":"^14.0.3","jiti":"^2.6.1","jsonc-parser":"^3.3.1","@carlesandres/webreel-core":"0.2.1"},"devDependencies":{"@types/node":"25.3.0","typescript":"5.9.3"},"scripts":{"clean":"rm -rf dist","build":"rm -rf dist && tsc","type-check":"tsc --noEmit","dev":"tsc --watch","test":"vitest run"},"_id":"@carlesandres/webreel@0.2.1","_integrity":"sha512-noiwZ0L6/TI/zyMFu8o9y4YORYT7Qest07SW6UxaUWmqtNkYLT5WbpjrPc4h+rlOa/vvVLzSm+OzmFUEL+yTkA==","_resolved":"/private/var/folders/20/3lpbx2mx2l17h63z6cb6ky4r0000gn/T/be76593e825274d18fedeb3e64f2e178/carlesandres-webreel-0.2.1.tgz","_from":"file:carlesandres-webreel-0.2.1.tgz","_nodeVersion":"24.15.0","_npmVersion":"11.12.1","dist":{"integrity":"sha512-noiwZ0L6/TI/zyMFu8o9y4YORYT7Qest07SW6UxaUWmqtNkYLT5WbpjrPc4h+rlOa/vvVLzSm+OzmFUEL+yTkA==","shasum":"ec66aeb0cf6450229e67edf5df931d15d57d39e4","tarball":"https://registry.npmjs.org/@carlesandres/webreel/-/webreel-0.2.1.tgz","fileCount":63,"unpackedSize":252084,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQDd7Rog9YybVwXnErUuYzAWyVZYEP/kPE3fd7yKNeClqgIgELfaOgGHcUh2mOlUvLYFdaQ91kLaitOIamlo5noWItI="}]},"_npmUser":{"name":"carlesandres","email":"carlos.andres.c@gmail.com"},"directories":{},"maintainers":[{"name":"carlesandres","email":"carlos.andres.c@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/webreel_0.2.1_1782392190333_0.46694481635796214"},"_hasShrinkwrap":false}},"time":{"created":"2026-06-25T12:18:30.170Z","modified":"2026-06-25T12:56:30.622Z","0.2.0":"2026-06-25T12:18:30.491Z","0.2.1":"2026-06-25T12:56:30.479Z"},"bugs":{"url":"https://github.com/vercel-labs/webreel/issues"},"license":"Apache-2.0","homepage":"https://webreel.dev","keywords":["video","recording","browser","demo","automation","headless","chrome","mp4","gif","webm","screencast"],"repository":{"type":"git","url":"git+https://github.com/carlesandres/webreel.git","directory":"packages/webreel"},"description":"Record scripted browser demos as MP4, GIF, or WebM with cursor animation, keystroke overlays, and sound effects.","maintainers":[{"name":"carlesandres","email":"carlos.andres.c@gmail.com"}],"readme":"# webreel\n\nCLI that records scripted browser videos as MP4, GIF, or WebM files from JSON configs.\n\nDefine steps (clicks, key presses, drags, pauses) and webreel drives a headless Chrome instance, captures screenshots at ~60fps, adds cursor animation, keystroke overlays, and sound effects, and encodes the result with ffmpeg.\n\n## Installation\n\n```bash\nnpm install webreel\n```\n\n## Quick Start\n\n```bash\nnpx webreel init --name my-video --url https://example.com\nnpx webreel record\n```\n\n## Examples\n\n<!-- EXAMPLES:START -->\n\n**[custom-theme](../../examples/custom-theme)** - Demonstrates fully customizing the cursor overlay and keystroke HUD appearance using a code editor page.\n\n<video src=\"../../examples/custom-theme/videos/custom-theme.mp4\" controls muted width=\"100%\"></video>\n\n**[drag-and-drop](../../examples/drag-and-drop)** - Demonstrates dragging elements between positions on a kanban board.\n\n<video src=\"../../examples/drag-and-drop/videos/drag-and-drop.mp4\" controls muted width=\"100%\"></video>\n\n**[form-filling](../../examples/form-filling)** - Demonstrates typing into form fields and clicking a submit button, simulating a login flow.\n\n<video src=\"../../examples/form-filling/videos/form-filling.mp4\" controls muted width=\"100%\"></video>\n\n**[gif-output](../../examples/gif-output)** - Demonstrates outputting the recording as an animated GIF instead of the default MP4.\n\n<video src=\"../../examples/gif-output/videos/gif-output.gif\" controls muted width=\"100%\"></video>\n\n**[hello-world](../../examples/hello-world)** - The simplest possible webreel example. Opens a landing page and clicks the call-to-action button.\n\n<video src=\"../../examples/hello-world/videos/hello-world.mp4\" controls muted width=\"100%\"></video>\n\n**[keyboard-shortcuts](../../examples/keyboard-shortcuts)** - Demonstrates pressing key combos and displaying them in the keystroke HUD overlay. Uses a code editor page as the target.\n\n<video src=\"../../examples/keyboard-shortcuts/videos/keyboard-shortcuts.mp4\" controls muted width=\"100%\"></video>\n\n**[mobile-viewport](../../examples/mobile-viewport)** - Demonstrates recording at mobile device dimensions using a finance app interface.\n\n<video src=\"../../examples/mobile-viewport/videos/mobile-viewport.mp4\" controls muted width=\"100%\"></video>\n\n**[modifier-clicks](../../examples/modifier-clicks)** - Demonstrates clicking elements with modifier keys held down, simulating multi-select in a file manager.\n\n<video src=\"../../examples/modifier-clicks/videos/modifier-clicks.mp4\" controls muted width=\"100%\"></video>\n\n**[multi-demo](../../examples/multi-demo)** - Demonstrates defining multiple videos in a single config file, each producing its own output from the same page.\n\n<video src=\"../../examples/multi-demo/videos/homepage.mp4\" controls muted width=\"100%\"></video>\n\n**[page-scrolling](../../examples/page-scrolling)** - Demonstrates scrolling the page and scrolling within a specific container element on a blog post layout.\n\n<video src=\"../../examples/page-scrolling/videos/page-scrolling.mp4\" controls muted width=\"100%\"></video>\n\n**[screenshots](../../examples/screenshots)** - Demonstrates capturing PNG screenshots at specific points during a recording. Useful for generating static marketing assets or documentation images alongside videos.\n\n<video src=\"../../examples/screenshots/videos/screenshots.mp4\" controls muted width=\"100%\"></video>\n\n**[shared-steps](../../examples/shared-steps)** - Demonstrates using `include` to share common setup steps across videos. The shared steps dismiss a cookie consent banner before the main video steps run.\n\n<video src=\"../../examples/shared-steps/shared-steps.mp4\" controls muted width=\"100%\"></video>\n\n**[webm-output](../../examples/webm-output)** - Demonstrates outputting the recording as a WebM video using VP9 encoding.\n\n<video src=\"../../examples/webm-output/webm-output.webm\" controls muted width=\"100%\"></video>\n\n<!-- EXAMPLES:END -->\n\n## Commands\n\n### `webreel init`\n\nScaffold a new config file.\n\n```bash\nwebreel init\nwebreel init --name login-flow --url https://myapp.com\nwebreel init --name hero -o hero.config.json\n```\n\n| Option                | Default               | Description      |\n| --------------------- | --------------------- | ---------------- |\n| `--name <name>`       | `my-video`            | Video name       |\n| `--url <url>`         | `https://example.com` | Starting URL     |\n| `-o, --output <file>` | `<name>.json`         | Output file path |\n\n### `webreel record`\n\nRecord videos.\n\n```bash\nwebreel record\nwebreel record hero login\nwebreel record -c custom.config.json\n```\n\nWhen run without arguments, webreel reads `webreel.config.json` from the current directory and records all videos. Provide video names to record specific videos only.\n\n### `webreel preview`\n\nRun a video in a visible browser window without recording.\n\n```bash\nwebreel preview\nwebreel preview hero\n```\n\n### `webreel install`\n\nDownload Chrome and ffmpeg to `~/.webreel`. Both are also auto-downloaded on first run. Use `--force` to fix corrupted or broken binaries.\n\n```bash\nwebreel install\nwebreel install --force\n```\n\n### `webreel validate`\n\nCheck config files for errors without running them.\n\n```bash\nwebreel validate\nwebreel validate -c custom.config.json\n```\n\n### `webreel composite`\n\nRe-composite videos from stored raw recordings and timelines without re-recording.\n\n```bash\nwebreel composite\nwebreel composite hero login\n```\n\nRaw video and timeline data are saved in `.webreel/raw/` and `.webreel/timelines/` during `webreel record`. Use `composite` to re-apply cursor overlays, HUD, and sound effects without re-running the browser.\n\n## Config format\n\n```json\n{\n  \"$schema\": \"https://webreel.dev/schema/v1.json\",\n  \"capture\": { \"format\": \"jpeg\" },\n  \"videos\": {\n    \"my-video\": {\n      \"url\": \"https://example.com\",\n      \"viewport\": { \"width\": 1080, \"height\": 1080 },\n      \"defaultDelay\": 500,\n      \"steps\": [\n        { \"action\": \"pause\", \"ms\": 500 },\n        { \"action\": \"click\", \"text\": \"Get Started\" },\n        { \"action\": \"key\", \"key\": \"cmd+a\", \"delay\": 1000 }\n      ]\n    }\n  }\n}\n```\n\n### Config options\n\n| Field          | Default              | Description                                               |\n| -------------- | -------------------- | --------------------------------------------------------- |\n| `url`          | required             | URL to navigate to                                        |\n| `baseUrl`      | `\"\"`                 | Prepended to relative URLs                                |\n| `capture`      | `{ format: \"jpeg\" }` | Source-frame capture settings, inherited per video        |\n| `viewport`     | 1080x1080            | Browser viewport dimensions                               |\n| `zoom`         | -                    | CSS zoom level applied to the page                        |\n| `waitFor`      | -                    | CSS selector to wait for before starting                  |\n| `output`       | `<name>.mp4`         | Output file path (`.mp4`, `.gif`, or `.webm`)             |\n| `thumbnail`    | `{ time: 0 }`        | Object with `time` (seconds) or `enabled: false`          |\n| `theme`        | -                    | Overlay theme (`cursor: { image, size, hotspot }`, `hud`) |\n| `include`      | -                    | Array of JSON file paths whose steps are prepended        |\n| `defaultDelay` | -                    | Default delay (ms) after each step                        |\n\n### Actions\n\n| Action       | Fields                                                 | Description                           |\n| ------------ | ------------------------------------------------------ | ------------------------------------- |\n| `pause`      | `ms`                                                   | Wait for a duration                   |\n| `click`      | `text` or `selector`, optional `within`, `modifiers`   | Move cursor to an element and click   |\n| `key`        | `key` (e.g. `\"cmd+z\"`), optional `label`, `target`     | Press a key or key combo              |\n| `type`       | `text`, optional `target`, `charDelay`                 | Type text character by character      |\n| `drag`       | `from` and `to` (each with `text`/`selector`/`within`) | Drag from one element to another      |\n| `scroll`     | optional `x`, `y`, `selector`                          | Scroll the page or a container        |\n| `wait`       | `selector` or `text`, optional `timeout`               | Wait for an element or text to appear |\n| `moveTo`     | `text` or `selector`, optional `within`                | Move cursor to an element             |\n| `screenshot` | `output`                                               | Save a PNG screenshot                 |\n| `navigate`   | `url`                                                  | Navigate to a new URL mid-video       |\n| `hover`      | `text` or `selector`, optional `within`                | Hover over an element (triggers CSS)  |\n| `select`     | `selector`, `value`                                    | Select a value in a dropdown          |\n\nAll steps (except `pause`) accept an optional `delay` field (ms to wait after the step). Use `defaultDelay` at the top-level or per-video to set a default.\n\nSet `capture.format` to `\"png\"` to capture lossless source frames before final video encoding. This can improve text and UI detail, but may increase capture CPU usage and frame storage size when using `webreel record --frames`.\n\n## License\n\nApache-2.0\n","readmeFilename":"README.md"}