TraceWeaver

A lightweight web app to stitch Chrome trace filmstrips (DevTools Screenshot events) into a single video — right in your browser.

Features

• Drop multiple DevTools trace JSONs or a single .zip containing them
• Extract Screenshot frames and true timings
• Reorder files, edit frames (remove/restore), set output size, and no cross-fades between frames
• Preview on-canvas, then Export to WebM via MediaRecorder (no server). You can also export MP4 via ffmpeg.wasm (client-side transcode). Encoding defaults to WebM VP9 for previews/exports in the browser.

For MP4/H.264 exports, consider adding ffmpeg.wasm later; WebM is fastest and works great in Chrome/Firefox.

Local dev

npm install
npm run dev

Docker

Build locally

docker build -t traceweaver:local .
docker run --rm -p 8080:80 traceweaver:local

With docker-compose

services:
  traceweaver:
    image: ghcr.io/YOUR_GH_USERNAME/traceweaver:latest
    ports: ["8080:80"]
    restart: unless-stopped

GitHub Container Registry (GHCR)

1. Create a repo on GitHub and push this code.
2. Ensure Actions are enabled. On push to main, the workflow builds and pushes to ghcr.io/<owner>/<repo>.
3. Pull/run:

docker pull ghcr.io/<owner>/<repo>:latest
docker run -p 8080:80 ghcr.io/<owner>/<repo>:latest

The workflow uses the built-in GITHUB_TOKEN with packages: write permission.

Notes

• Input must be Chrome/DevTools performance traces that include Screenshot events. You can upload individual .json files or a .zip created by the source tool.
• Timestamps (ts) are microseconds; we preserve relative timing between frames.
• Encoding is done with the browser's MediaRecorder API for speed and simplicity.

Roadmap

• MP4 export via ffmpeg.wasm (toggle)
• Per-trace trimming
• Watermark/timestamp overlays
• Variable frame-rate WebM muxing