Pixels

create.creativeplatform.xyz

Edit videos. In your browser.

Pixels is a browser-based, multi-track video editor. No install, no uploads: projects and media stay local, while editing, preview, analysis, transcription, AI generation, and export run in the browser through WebGPU, WebCodecs, Web Workers, OPFS, and the File System Access API.

Pixels writes projects, linked media metadata, thumbnails, waveforms, generated AI assets, transcripts, scene cuts, and caches as plain files inside a workspace folder you choose on disk.

User Guide

New to Pixels? Start with the user guide.

Community

Join the Pixels Discord to share edits, request features, report bugs, and give feedback on browser-based editing workflows.

Screenshots

Timeline	Keyframes
Semantic scene search	Export
Audio EQ	Hotkeys

Features

Timeline & Editing

• Multi-track timeline with video, audio, text, image, shape, mask, Lottie, and compound clip items
• Multiple timelines per project as Sequences with tabs, unified with compound clips (open a compound clip as its own sequence)
• Linked audio/video editing with split, join, ripple, rolling, slip, slide, and rate-stretch tools
• Cut-centered transitions with live resize, alignment, source-time anchoring, and preview overlays
• Track mute/visibility/lock controls, linked sync badges, track push/pull, and close-gap workflows
• Filmstrip thumbnails, stereo waveforms, snap guides, markers, timecode, and undo/redo
• Source monitor with mark in/out, patch destinations, insert edits, and overwrite edits
• Project templates, auto-match canvas/FPS from first media, and configurable keyboard shortcuts

Preview & Playback

• Real-time preview with transform, crop, corner-pin, mask, and group gizmos
• Frame-accurate playback through Pixels's custom Clock and composition runtime
• Fast scrub overlays, decoder prewarming, adaptive preview quality, and source warming
• Two-up and four-up edit panels for ripple, rolling, slip, and slide operations
• GPU color scopes: waveform, vectorscope, and histogram
• Separate project master bus and monitor/device volume

Audio

• Clip volume, audio fades, track faders, master bus fader, and stereo LED meters
• Per-clip pitch shift in semitones/cents with SoundTouch preview playback
• Clip EQ and track EQ stages, including a compact six-band floating EQ panel
• Pitch, EQ, fades, volume, and transition audio paths are preserved in preview and export

Effects, Masks & Compositing

All visual effects and compositing paths are WebGPU-first, with fallbacks where practical.

• Blur: gaussian, box, motion, radial, zoom
• Color: brightness, contrast, exposure, hue shift, saturation, vibrance, temperature/tint, levels, curves, color wheels, gradient map, LUT (.cube), grayscale, sepia, invert
• Distortion: pixelate, RGB split, twirl, wave, bulge/pinch, kaleidoscope, mirror, fluted glass, ripple glass, glass mosaic, droste
• Stylize: vignette, film grain, sharpen, posterize, glow, edge detect, scanlines, halftone, ASCII art, color glitch, block glitch, VHS, CRT, ink, pixel sort
• Keying: chroma key with tolerance, softness, and spill suppression
• 25 blend modes, including multiply, screen, overlay, soft light, difference, hue, saturation, color, and luminosity
• Clip masks and pen paths with keyframeable geometry transforms
• Color picker with hex and alpha input, plus an in-app eyedropper with loupe

Transitions

• Fade, wipe, slide, 3D flip, clock wipe, and iris transitions with directional variants
• Dissolve, sparkles, glitch, light leak, pixelate, chromatic aberration, and radial blur
• Adjustable duration, alignment, source anchoring, and Canvas 2D fallback for non-WebGPU paths

Keyframe Animation

• Bezier graph editor, dopesheet, split view, and multi-curve overlays
• Easing presets (linear, ease-in/out, cubic-bezier, spring) with a live-preview editor and saved custom presets
• Procedural motion modifiers (drift, sway, breath, spin, shake) evaluated at render time, with one-click bake to keyframes
• Motion text: per-character, per-word, and per-line text animation
• Auto-keyframe mode, tangent mirroring, property accordions, and marquee selection
• Animated transform, crop, mask, text, effect, and color properties

Media & Import

• Import videos, audio, images, GIFs, SVGs, Lottie animations, and generated assets without copying originals
• Edit imported Lottie animations (.json and .lottie): remap colors and themes, edit text, and adjust value slots with live preview
• Apple ProRes decode for import, preview, and thumbnails, including variants browsers cannot natively decode
• Proxy generation, thumbnail extraction, waveform caching, and media relinking

Local AI & Analysis

Runs on-device in the browser — nothing is uploaded.

• On-device transcription with the Parakeet engine (Whisper fallback) and generated caption text items
• AI captioning with local vision-language providers and configurable sample cadence
• Scene detection with fast histogram or frame-accurate adaptive content analysis and optional model verification
• Scene Browser for searching captioned media and reusing detected moments
• Local Kokoro text-to-speech voiceovers
• Local MusicGen music generation with presets, progress, and cancellation
• Local model cache controls and unload controls in settings

Projects & Storage

• Workspace folder persistence via the File System Access API
• Multi-workspace switcher with known workspace management
• Projects stored as plain files on disk, with legacy browser-storage migration
• Project soft-delete, restore, empty-trash, and permanent delete flows
• Project ZIP bundle export/import with Zod-validated schemas
• Auto-save, project thumbnails, workspace cache mirroring, and orphan cleanup

Export

• In-browser rendering through WebCodecs and worker-backed render paths
• Export any sequence, not just the main timeline
• Video containers: MP4, WebM, MOV, MKV
• Video codecs: H.264, H.265, VP8, VP9, AV1 (where the browser provides an encoder)
• Audio export formats: MP3, AAC, WAV/PCM
• Subtitles: off, burn-in, sidecar file, or embedded soft track (container-dependent)
• Quality presets from low to ultra, with runtime capability checks and fallbacks

Quick Start

Prerequisites: Node.js 22+ recommended, npm 11+, and a modern Chromium browser.

git clone https://github.com/creativeplatform/pixels.git
cd pixels
npm install
npm run dev

Open http://localhost:5173 in Chrome, Edge, Brave, or Arc.

Workflow

1. Pick a workspace folder when prompted.
2. Create a project from the projects page.
3. Import media by dragging files into the media library.
4. Drag clips to the timeline, then trim, arrange, add effects, transitions, masks, captions, and audio work.
5. Use the source monitor, keyframe editor, scene browser, AI tools, and preview overlays as needed.
6. Export directly from the browser.

Browser Support

Chrome or Edge 113+ is recommended. Pixels depends on WebGPU, WebCodecs, OPFS, and the File System Access API, so a modern Chromium browser is required for the full workflow.

Brave

Brave may disable the File System Access API. To enable it:

1. Navigate to brave://flags/#file-system-access-api
2. Change the setting from Disabled to Enabled
3. Click Relaunch to restart the browser

Tech Stack

• React 19 + TypeScript
• Vite+ for dev, build, lint, format, check, and tests
• Vite + @vitejs/plugin-react
• WebGPU for effects, compositing, transitions, masks, scopes, and AI acceleration
• WebCodecs for preview and export pipelines
• File System Access API + OPFS for workspace-backed persistence and caches
• Zustand + Zundo for state management and undo/redo
• TanStack Router for file-based, type-safe routing
• Tailwind CSS 4 + Radix UI + shadcn-style components
• Mediabunny for media decoding, metadata, and audio encoding support
• Transformers.js for local browser AI models
• Kokoro.js for WebGPU text-to-speech
• Web Workers and AudioWorklets for heavy media processing off the main thread

Development

Most commands are npm scripts backed by vite-plus (vp).

npm run dev                 # Dev server on port 5173
npm run build               # Production build
npm run preview             # Preview the production build
npm run perf                # Build + serve a production-like perf target

npm run lint                # Oxlint through Vite+
npm run format              # Oxfmt
npm run test:run            # Run the test suite once (npm run test to watch)
npm run verify              # Full gate: static/arch/unit/build + portable headless contracts
npm run headless:test       # Build once, then run the complete portable headless suite

npm run routes              # Regenerate the TanStack Router route tree

MCP server for AI agents

Pixels ships a headless lifecycle API and a stdio MCP server so AI agents can create, edit, and render Pixels projects programmatically. See docs/agent-prompt.md for a ready-to-use agent prompt (shared by OpenClaw and Hermes), and the in-app AI Agents and MCP guide for setup and runtime packaging. For Creative Director persistence (Firestore sessions/storyboards/billing audit), see docs/adr/002-director-firestore-persistence.md.

# Run the MCP server directly for a workspace
npm run headless:mcp -- --workspace /path/to/pixels-workspace

# Or build the harness once, then connect
npm run build
npm run headless:mcp -- --workspace /path/to/pixels-workspace

Tools exposed:

• pixels_capabilities — supported operations, effects, codecs, schemas
• pixels_list_projects / pixels_get_project
• pixels_create_project / pixels_update_project
• pixels_edit_project — apply timeline ops (addText, addClip, addTrack, moveItem, split, trimStart, trimEnd, addEffect, setTransform, removeItems, etc.)
• pixels_list_media / pixels_get_media / pixels_import_media
• pixels_render_project — export the project to MP4/WebM/audio

Example workflow:

npm run headless:mcp -- --workspace ./tmp-workspace
# Then ask an MCP client:
#   Create a 1920x1080 Pixels project named "Demo",
#   import ./clip.mp4, add it to track 1 at frame 0,
#   then render the first 5 seconds to demo.mp4.

No-code / hosted agent option: Pinata

If you don't have your own AI agent, deploy a Creative AI Digital Twin template on Pinata. These digital-twin agents can also drive the Pixels MCP server when connected:

• Creative AI Digital Twin — full Creative TV / Livepeer template
• Creative AI Digital Twin Lite — YouTube / Twitch–focused lite template

Deploy a template, start npm run headless:mcp -- --workspace <dir>, point the agent's MCP config at that stdio server, then edit/render conversationally. See the in-app AI Agents and MCP guide for OpenClaw vs Hermes packaging (same MCP prompt; different manifests and config files).

verify runs the complete quality gate, including architecture and dead-code checks scoped to the current diff, all Node headless contracts, the built-harness Chrome regression, every public edit operation, and generated media/audio rendering. Real-GPU effects remain an explicit operator/release gate because hosted PR CI does not provide a portable WebGPU adapter.

Performance Checks

• npm run dev is best for correctness and iteration, but includes React/Vite dev overhead, HMR, and debug instrumentation.
• npm run perf is the better check for real playback or rendering performance because it serves a production build locally.
• npm run dev:quiet keeps HMR while hiding the editor debug panel.
• npm run dev:compare starts http://localhost:5173 and http://localhost:4173 together for side-by-side dev vs production-like checks.

Environment

VITE_SHOW_DEBUG_PANEL=true   # Show debug panel in dev

Project Structure

The src/ tree is organized into a few layers:

• features/ — user-facing UI modules (editor, timeline, preview, media library, effects, keyframes, export, projects, settings, scene browser, and more)
• runtime/ — playback and rendering engines (composition runtime, player, clock) that are not user-facing UI
• infrastructure/ — platform adapters for GPU (effects, transitions, compositor, masks, text, scopes), analysis, audio, browser, storage, and thumbnails
• shared/ — framework-agnostic primitives and cross-feature state (transition engine, schema migrations, Zustand stores, utils)
• app/, components/, config/, routes/, types/ — bootstrap, shadcn/ui components, configuration, file-based routes, and shared types

Feature modules use their local deps/ adapters for cross-feature imports. Platform-coupled code (GPU, ML, audio, storage, browser) lives in @/infrastructure/* and is imported directly; there is no separate lib/ layer.

Contributing

Pixels is open source but not open contribution. Pull requests are not accepted at this time.

• Report bugs: open an issue
• Suggest features: start a discussion

License

MIT