Create Project CLI Tools Video Composition Editor Toolkit Server API Webhooks

Quick Start

Getting Started

Media

JIT Transcoding Step 1: Display a Basic Audio Element Video Tutorial Real-Time Visualization Step 1: Connect Waveform to Audio Time Coordinates Step 2: Trim Your Audio Trimming Video Canvas Rendering Architecture Step 2: Explore Visualization Modes Trimming Semantics Step 3: Create a Simple Sequence Video Effects Step 3: Customize Appearance Audio Analysis Step 4: Pair Audio with Waveform Step 4: Configure Audio Analysis Production vs Development Workflows How To: Choose Between trimstart and sourcein Step 5: Combine with Timegroups How To: Create Waveform Visualizations How To: Connect Waveform to Audio or Video How To: Create Audio Sequences How To: Choose a Visualization Mode How To: Customize Waveform Appearance Video Element Audio Element Audio Tutorial Image Element Audio Concepts Image Element — Tutorial & How-To Guides Image Element — Concepts Video Element — Concepts Video Element — How-To Guides Text Element Surface Tutorial & How-To Guides Text Animation Tutorial Surface — Architecture & Concepts Text Element How-To Guides Text Element Concepts Captions Element Captions Tutorial Captions Concepts Waveform Element Waveform Tutorial Waveform Concepts

Concepts

Temporal Composition Time Propagation Frame Quantization Composition Model Time Model Timegroup Modes Render Strategies Timegroup Concepts

Layout & Timing

Step 1: Fixed Duration Timegroup Step 2: Sequence Multiple Items Step 3: Layer Content and Backgrounds How To: Use CSS Variables How To: Avoid Common Mistakes How To: LocalStorage Persistence How To: Advanced Composition Timegroup Element Sequencing Scenes Timegroup Tutorial Transitions Surface Element CSS Variables

Rendering

Render to Video Tutorial Render API Cloud Rendering Scripting Transcription

Advanced

Configuration Element React Three Fiber Integration Server-Side Rendering Package Entry Points Custom Events CSS Parts Reference

React

Timeline Root Hooks useMediaInfo Hook

/

Video Composition

/

Video Composition

Waveform Concepts

Architectural explanations for how ef-waveform works under the hood.

Docs

Video CompositionOverview →

Quick Start

Getting Started

Media

JIT Transcoding Step 1: Display a Basic Audio Element Video Tutorial Real-Time Visualization Step 1: Connect Waveform to Audio Time Coordinates Step 2: Trim Your Audio Trimming Video Canvas Rendering Architecture Step 2: Explore Visualization Modes Trimming Semantics Step 3: Create a Simple Sequence Video Effects Step 3: Customize Appearance Audio Analysis Step 4: Pair Audio with Waveform Step 4: Configure Audio Analysis Production vs Development Workflows How To: Choose Between trimstart and sourcein Step 5: Combine with Timegroups How To: Create Waveform Visualizations How To: Connect Waveform to Audio or Video How To: Create Audio Sequences How To: Choose a Visualization Mode How To: Customize Waveform Appearance Video Element Audio Element Audio Tutorial Image Element Audio Concepts Image Element — Tutorial & How-To Guides Image Element — Concepts Video Element — Concepts Video Element — How-To Guides Text Element Surface Tutorial & How-To Guides Text Animation Tutorial Surface — Architecture & Concepts Text Element How-To Guides Text Element Concepts Captions Element Captions Tutorial Captions Concepts Waveform Element Waveform Tutorial Waveform Concepts

Concepts

Temporal Composition Time Propagation Frame Quantization Composition Model Time Model Timegroup Modes Render Strategies Timegroup Concepts

Layout & Timing

Step 1: Fixed Duration Timegroup Step 2: Sequence Multiple Items Step 3: Layer Content and Backgrounds How To: Use CSS Variables How To: Avoid Common Mistakes How To: LocalStorage Persistence How To: Advanced Composition Timegroup Element Sequencing Scenes Timegroup Tutorial Transitions Surface Element CSS Variables

Rendering

Render to Video Tutorial Render API Cloud Rendering Scripting Transcription

Advanced

Configuration Element React Three Fiber Integration Server-Side Rendering Package Entry Points Custom Events CSS Parts Reference

React

Timeline Root Hooks useMediaInfo Hook