# Editframe

> Build video with code. HTML + CSS compositions with scripting and React support. Instant preview, hyperscale cloud rendering.

Editframe lets developers create and render videos programmatically using HTML, CSS, and JavaScript. Compositions are defined as web components or React components, previewed instantly in the browser, and rendered to MP4 in the cloud.

## Create Project

- [Create Project](https://editframe.com/skills/editframe-create.md): Scaffold new Editframe video projects from templates. Generates project structure, installs dependencies, and sets up composition tooling to start immediately.
- [Agent Skills](https://editframe.com/skills/editframe-create/agent-skills.md): Install Editframe AI coding agent skills into Cursor, Windsurf, and other LLM-based IDEs for in-editor composition help.
- [Getting Started](https://editframe.com/skills/editframe-create/getting-started.md): Create and render your first Editframe video project from a template in under five minutes using the create CLI tool.
- [Templates](https://editframe.com/skills/editframe-create/templates.md): Available Editframe project templates — plain HTML, React, and more — and the file structure each template provides.

## CLI Tools

- [CLI Tools](https://editframe.com/skills/editframe-cli.md): Command-line tools for Editframe video development. Render compositions to MP4 locally, preview in the browser, transcribe audio, and deploy to the cloud.
- [Cloud Render](https://editframe.com/skills/editframe-cli/cloud-render.md): Submit Editframe compositions to the cloud render pipeline and download completed videos without local ffmpeg.
- [Preview](https://editframe.com/skills/editframe-cli/preview.md): Open an Editframe composition in the browser for live preview during development, with hot-reload on file changes.
- [Render](https://editframe.com/skills/editframe-cli/render.md): Render Editframe HTML compositions to MP4 files locally using headless Chrome and ffmpeg via the Editframe CLI.
- [Transcribe](https://editframe.com/skills/editframe-cli/transcribe.md): Generate word-level captions from audio or video files using Whisper, outputting JSON or WebVTT for use with ef-captions.
- [Utilities](https://editframe.com/skills/editframe-cli/utilities.md): CLI utilities for authentication, dependency checks, webhook testing, and video file inspection during development.

## Video Composition

- [Video Composition](https://editframe.com/skills/composition.md): Create video compositions with Editframe using HTML web components or React. Supports video, audio, images, text, captions, transitions, and cloud rendering.
- [Audio Element](https://editframe.com/skills/composition/audio.md): Audio element for music, voiceover, and sound effects with trim controls, volume adjustment, and loop support in compositions.
- [Captions Element](https://editframe.com/skills/composition/captions.md): Synchronized caption display with word-level highlighting, custom styling via CSS parts, and WebVTT/JSON caption file support.
- [Composition Model](https://editframe.com/skills/composition/composition-model.md): Mental model for how timegroup trees, temporal scheduling, and element rendering work together in an Editframe composition.
- [Configuration Element](https://editframe.com/skills/composition/configuration.md): Configuration wrapper for selecting media engine (ffmpeg or native) and setting API credentials for Editframe compositions.
- [CSS Parts Reference](https://editframe.com/skills/composition/css-parts.md): Catalog of CSS ::part() selectors for styling internal shadow DOM elements of Editframe web components from external stylesheets.
- [CSS Variables](https://editframe.com/skills/composition/css-variables.md): Dynamic CSS custom properties updated each frame with current time, duration, and progress values for time-driven animations.
- [Package Entry Points](https://editframe.com/skills/composition/entry-points.md): Complete guide to Editframe package entry points and exports — when to import from @editframe/elements vs @editframe/react vs core.
- [Custom Events](https://editframe.com/skills/composition/events.md): Catalog of all custom DOM events dispatched by Editframe elements for building interactive player and editor UI components.
- [Getting Started](https://editframe.com/skills/composition/getting-started.md): Build your first HTML video composition with Editframe Elements — install the package, place elements, and render to MP4.
- [Hooks](https://editframe.com/skills/composition/hooks.md): React hooks for reading current playback time, pan/zoom transform, and media loading state from within composition components.
- [Image Element](https://editframe.com/skills/composition/image.md): Static image element with configurable display duration, CSS positioning, and fit/fill/cover layout modes for compositions.
- [React Three Fiber Integration](https://editframe.com/skills/composition/r3f.md): Integrate React Three Fiber 3D scenes into Editframe compositions with frame-accurate scrubbing and video export support.
- [Render API](https://editframe.com/skills/composition/render-api.md): Export compositions to video in the browser or via CLI with full control over resolution, bitrate, and encoding options.
- [Render Strategies](https://editframe.com/skills/composition/render-strategies.md): Three approaches to rendering Editframe compositions — CLI, browser-side, and cloud — with tradeoffs and when to use each.
- [Render to Video Tutorial](https://editframe.com/skills/composition/render-to-video.md): End-to-end guide to exporting Editframe compositions as MP4 video files using the browser renderer or Editframe CLI.
- [Scripting](https://editframe.com/skills/composition/scripting.md): Add dynamic JavaScript behavior to timegroups with initializer callbacks and per-frame task functions for procedural animation.
- [Sequencing Scenes](https://editframe.com/skills/composition/sequencing.md): Create sequential scene playback using seq-mode timegroups, with automatic cuts and configurable transition timing between scenes.
- [Server-Side Rendering](https://editframe.com/skills/composition/server-rendering.md): Use SSR-safe imports and integrate Editframe with Next.js, Remix, and other server-rendered frameworks without hydration errors.
- [Surface Element](https://editframe.com/skills/composition/surface.md): Mirror or duplicate another element's canvas output into a new position, useful for picture-in-picture and reflection effects.
- [Text Element](https://editframe.com/skills/composition/text.md): Animated text element with automatic character, word, and line splitting for per-unit CSS animation and stagger effects.
- [Time Model](https://editframe.com/skills/composition/time-model.md): How time propagation works in composition trees: duration inheritance, offset calculation, and element scheduling rules.
- [Timegroup Modes](https://editframe.com/skills/composition/timegroup-modes.md): How the four timegroup layout modes — par, seq, excl, and media — control duration, ordering, and child element scheduling.
- [Timegroup Element](https://editframe.com/skills/composition/timegroup.md): Container element for grouping and sequencing composition elements, controlling layout mode, duration, and playback behavior.
- [Timeline Root](https://editframe.com/skills/composition/timeline-root.md): Required wrapper component for React-based Editframe timelines that sets up rendering context and playback coordination.
- [Transcription](https://editframe.com/skills/composition/transcription.md): Generate word-level transcription data from audio and video files for use with ef-captions synchronized caption playback.
- [Transitions](https://editframe.com/skills/composition/transitions.md): Create smooth CSS-animated transitions between sequence items using configurable overlap duration and animation keyframes.
- [useMediaInfo Hook](https://editframe.com/skills/composition/use-media-info.md): React hook for reading media metadata — duration, loading state, and dimensions — from Video and Audio composition elements.
- [Video Element](https://editframe.com/skills/composition/video.md): Video element with source trimming, volume control, muting, and frame-accurate playback for Editframe compositions.
- [Waveform Element](https://editframe.com/skills/composition/waveform.md): Audio waveform visualization element with bar, line, and mirror display modes, synced to composition playback time.

## Editor Toolkit

- [Editor Toolkit](https://editframe.com/skills/editor-gui.md): Build video editing interfaces with Editframe's GUI components. Assemble timeline, scrubber, filmstrip, preview, playback controls, and transform handles.
- [Active Root Temporal Element](https://editframe.com/skills/editor-gui/active-root-temporal.md): Component that displays the ID of whichever root temporal element is currently active based on canvas selection state.
- [Canvas Elements](https://editframe.com/skills/editor-gui/canvas.md): Interactive canvas area with element selection, drag-and-drop repositioning, and transform handle integration.
- [Controls Element](https://editframe.com/skills/editor-gui/controls.md): Context bridge that routes playback control actions to non-ancestor timeline elements in complex, nested editor layouts.
- [Dial Element](https://editframe.com/skills/editor-gui/dial.md): Rotary dial input for angle values, supporting mouse and touch circular drag gestures with configurable min, max, and step.
- [Building Custom Editors](https://editframe.com/skills/editor-gui/editor-toolkit.md): Compose Preview, Controls, Filmstrip, Workbench, and Hierarchy components to build fully custom video editor interfaces.
- [Filmstrip Element](https://editframe.com/skills/editor-gui/filmstrip.md): Visual timeline panel showing composition hierarchy as stacked tracks with time-proportional widths and playhead indicator.
- [Fit Scale Element](https://editframe.com/skills/editor-gui/fit-scale.md): Responsive wrapper that scales its content uniformly to fill available space while preserving the original aspect ratio.
- [Focus Overlay Element](https://editframe.com/skills/editor-gui/focus-overlay.md): Visual focus indicator that highlights and outlines the currently selected element in an Editframe composition preview.
- [Hierarchy Element](https://editframe.com/skills/editor-gui/hierarchy.md): Layer panel that displays the composition element tree with collapsible groups, selection highlighting, and drag-to-reorder.
- [Overlay Item Element](https://editframe.com/skills/editor-gui/overlay-item.md): Individual overlay element that tracks a specific composition element, following its position and size during playback.
- [Overlay Layer Element](https://editframe.com/skills/editor-gui/overlay-layer.md): Container that positions overlay items absolutely over a composition, anchoring them to their target elements during playback.
- [Pan-Zoom Element](https://editframe.com/skills/editor-gui/pan-zoom.md): Interactive container providing pan and zoom navigation with touch gesture support, mouse wheel zoom, and programmatic control.
- [Pause Button Element](https://editframe.com/skills/editor-gui/pause.md): Pause button that renders only when the composition is playing, auto-hiding when already paused for clean editor UIs.
- [Play Button Element](https://editframe.com/skills/editor-gui/play.md): Play button component that auto-hides when the composition is already playing, for clean minimal editor control bars.
- [Preview Element](https://editframe.com/skills/editor-gui/preview.md): Composition preview container with automatic focus tracking, zoom-to-fit behavior, and overlay layer integration.
- [Resizable Box Element](https://editframe.com/skills/editor-gui/resizable-box.md): Resizable box component with draggable edge and corner handles, supporting configurable minimum and maximum size constraints.
- [Scrubber Element](https://editframe.com/skills/editor-gui/scrubber.md): Timeline scrubber with horizontal seek and vertical zoom modes, keyboard shortcuts, and frame-accurate time control.
- [Thumbnail Strip Element](https://editframe.com/skills/editor-gui/thumbnail-strip.md): Video thumbnail strip that generates and displays preview frames at regular intervals along the composition timeline.
- [Time Display Element](https://editframe.com/skills/editor-gui/time-display.md): Formatted time display showing current playback position and total duration, with configurable frame rate and format options.
- [Timeline Ruler Element](https://editframe.com/skills/editor-gui/timeline-ruler.md): Time ruler with zoom-aware frame markers and time labels for precise timeline navigation in editor interfaces.
- [Timeline Element](https://editframe.com/skills/editor-gui/timeline.md): Complete timeline editor with zoomable tracks, multi-level hierarchy, scrubber, and synchronized playback controls.
- [Toggle Loop Element](https://editframe.com/skills/editor-gui/toggle-loop.md): Button component that toggles loop playback on and off, with visual state reflecting whether the composition will loop.
- [Toggle Play Element](https://editframe.com/skills/editor-gui/toggle-play.md): Combined play/pause toggle button that switches between play and pause states with configurable icons and labels.
- [Transform Handles Element](https://editframe.com/skills/editor-gui/transform-handles.md): Interactive resize and rotation handles for transforming composition elements with mouse drag in the preview canvas.
- [Trim Handles Element](https://editframe.com/skills/editor-gui/trim-handles.md): Draggable in-point and out-point handles for trimming media element duration directly on the composition timeline.
- [Workbench Element](https://editframe.com/skills/editor-gui/workbench.md): Full-featured video editor layout combining preview, timeline, hierarchy panel, and export controls in one component.

## Server API

- [Server API](https://editframe.com/skills/editframe-api.md): JavaScript/TypeScript SDK for Editframe's video rendering API. Create renders, upload video and image files, manage assets, and sign URLs for playback.
- [Authentication](https://editframe.com/skills/editframe-api/authentication.md): How API keys work, Client class behavior, and authentication patterns for server-side and browser-based applications
- [Caption Files](https://editframe.com/skills/editframe-api/caption-files.md): Upload and manage WebVTT or SRT subtitle files through the Editframe files API for synchronized caption playback.
- [Files](https://editframe.com/skills/editframe-api/files.md): Unified API for uploading, processing, and managing video, image, and caption files used in Editframe compositions and renders.
- [Getting Started](https://editframe.com/skills/editframe-api/getting-started.md): Install the Editframe API package, obtain an API key, and submit your first HTML composition as a cloud render job.
- [Image Files](https://editframe.com/skills/editframe-api/image-files.md): Upload and manage static image files through the Editframe unified files API for use in compositions and renders.
- [Media Pipeline](https://editframe.com/skills/editframe-api/media-pipeline.md): End-to-end workflow for uploading a media file, waiting for processing, and using the processed file in a composition.
- [Renders](https://editframe.com/skills/editframe-api/renders.md): Create render jobs from HTML compositions, poll for completion, and download finished videos or image outputs.
- [Transcription](https://editframe.com/skills/editframe-api/transcription.md): Generate spoken-word transcriptions from uploaded video files, returning word-level timestamps for caption generation.
- [Video Files](https://editframe.com/skills/editframe-api/unprocessed-files.md): Upload raw video files through the Editframe files API with automatic ISOBMFF processing for streaming-optimized playback.
- [URL Signing](https://editframe.com/skills/editframe-api/url-signing.md): Generate short-lived signed CDN tokens to enable browser-based playback of private Editframe media files securely.

## Webhooks

- [Webhooks](https://editframe.com/skills/webhooks.md): Webhook notifications for render completion and file processing events. Configure endpoints, verify HMAC signatures, and handle real-time status payloads.
- [Webhook Events](https://editframe.com/skills/webhooks/events.md): Complete reference for all Editframe webhook event types, payload schemas, and the conditions that trigger each event.
- [Getting Started with Webhooks](https://editframe.com/skills/webhooks/getting-started.md): Configure a webhook endpoint URL to receive Editframe event notifications for render completion and file processing.
- [Webhook Security](https://editframe.com/skills/webhooks/security.md): Verify HMAC-SHA256 signatures on incoming webhook requests and prevent replay attacks with timestamp validation.
- [Testing Webhooks](https://editframe.com/skills/webhooks/testing.md): Test Editframe webhook endpoints locally using ngrok tunnels, webhook.site inspection, and the CLI test command.
- [Troubleshooting Webhooks](https://editframe.com/skills/webhooks/troubleshooting.md): Diagnose and fix common webhook issues: signature verification failures, delivery timeouts, retries, and missed events.

## Vite Plugin

- [Vite Plugin](https://editframe.com/skills/vite-plugin.md): Vite integration for Editframe development with local video transcoding, asset serving, file API endpoints, and visual regression testing.
- [Local File API](https://editframe.com/skills/vite-plugin/file-api.md): Local development endpoints for file upload and ISOBMFF video processing, mirroring the Editframe cloud files API.
- [Getting Started](https://editframe.com/skills/vite-plugin/getting-started.md): Install and configure the Editframe Vite plugin to enable local asset serving, JIT transcoding, and visual testing.
- [JIT Transcoding](https://editframe.com/skills/vite-plugin/jit-transcoding.md): On-demand video transcoding during local development for instant browser-compatible playback of any input video format.
- [Local Assets API](https://editframe.com/skills/vite-plugin/local-assets.md): Local development endpoints for asset management, image thumbnail caching, and automatic caption file generation.
- [Visual Testing](https://editframe.com/skills/vite-plugin/visual-testing.md): Automated visual regression testing for Editframe compositions, comparing rendered frames against stored baseline images.