How I built a video editor inside @Framer

I wanted to see if Framer could do something it's not supposed to do, so I tried building a real multitrack video editor on it.

I started by planning it out properly instead of asking for everything at once. The UI got built as reusable components first: the panels, the timeline, the track headers, the clips. Then the actual editing engine went into a code component that holds all the state and runs the playback.

The core of it is a single clock that advances the playhead every frame, and every video, audio, and text layer follows that clock so they stay in sync when you play or scrub. On top of that I added the things that make it feel like an editor: drag clips around, trim them, split them, add styled text, drop effects onto a clip and tune them, all updating live in the preview.

I built it with Framer 3.0 agents, one piece at a time, checking each part worked before moving to the next. When my credits ran out partway through, I connected Claude as an external agent and finished it from there.

Export runs on a server, that's the next step. This is the live editing part.

Check it out: https://www.framer.com/community/contests/agents-hackathon/submissions/LfU6NV8T2vuxZYM4Tgwp1F/

Built with Framer AI.

How I built a video editor inside @Framer

I wanted to see if Framer could do something it's not supposed to do, so I tried building a real multitrack video editor on it.

I started by planning it out properly instead of asking for everything at once. The UI got built as reusable components first: the panels, the timeline, the track headers, the clips. Then the actual editing engine went into a code component that holds all the state and runs the playback.

The core of it is a single clock that advances the playhead every frame, and every video, audio, and text layer follows that clock so they stay in sync when you play or scrub. On top of that I added the things that make it feel like an editor: drag clips around, trim them, split them, add styled text, drop effects onto a clip and tune them, all updating live in the preview.

I built it with Framer 3.0 agents, one piece at a time, checking each part worked before moving to the next. When my credits ran out partway through, I connected Claude as an external agent and finished it from there.

Export runs on a server, that's the next step. This is the live editing part.

Check it out: https://www.framer.com/community/contests/agents-hackathon/submissions/LfU6NV8T2vuxZYM4Tgwp1F/

Built with Framer AI.