Getting Started
Build your first video composition with Editframe Elements.
Note: Need a project? Run npm create @editframe -- html -d my-project -y — see the editframe-create skill.
Composition Structure
Every composition starts with an ef-timegroup root:
<ef-timegroup mode="sequence" class="w-[1920px] h-[1080px] bg-black"><!-- scenes go here --></ef-timegroup>
The mode controls how child elements are timed.
Step 1: Create a Scene
Add a fixed-duration scene with text:
<ef-timegroup mode="sequence" class="w-[1920px] h-[1080px] bg-black"><ef-timegroup mode="fixed" duration="5s" class="absolute w-full h-full"><ef-text class="text-white text-4xl">Hello, Editframe!</ef-text></ef-timegroup></ef-timegroup>
Step 2: Add Media
Add video and audio to your scene:
<ef-timegroup mode="sequence" class="w-[1920px] h-[1080px] bg-black"><ef-timegroup mode="fixed" duration="5s" class="absolute w-full h-full"><ef-video src="/assets/intro.mp4" class="size-full object-cover"></ef-video><ef-text class="absolute bottom-8 text-white text-2xl">Title</ef-text></ef-timegroup></ef-timegroup>
Step 3: Add More Scenes
Chain scenes in a sequence with overlap for transitions:
<ef-timegroup mode="sequence" overlap="1s" class="w-[1920px] h-[1080px] bg-black"><ef-timegroup mode="fixed" duration="5s" class="absolute w-full h-full"><ef-video src="/assets/intro.mp4" class="size-full object-cover"></ef-video></ef-timegroup><ef-timegroup mode="fixed" duration="5s" class="absolute w-full h-full"><ef-video src="/assets/main.mp4" class="size-full object-cover"></ef-video><ef-audio src="/assets/music.mp3" volume="0.3"></ef-audio></ef-timegroup></ef-timegroup>
Assets
Place media files in src/assets/ and reference with /assets/filename:
<ef-video src="/assets/video.mp4"></ef-video><ef-audio src="/assets/music.mp3"></ef-audio><ef-image src="/assets/logo.png"></ef-image>
Render to Video
npx editframe render -o output.mp4
See the editframe-cli skill for full render options.
Your First CompositionStep 1 of 1