Video Editor Challenge
Timeline-based video editing with animated text overlays, server-side rendering, and live render progress.
In this case study
Overview
A video editor built with Next.js and an Express/Remotion render service. Users can reorder clips, drag and resize animated text overlays across multiple clips, zoom the timeline, and download rendered MP4 videos while tracking progress through Server-Sent Events.
Results
- A timeline with clip reordering, zoom controls, and draggable, resizable text overlays that snap to clip boundaries.
- Animated text spanning multiple clips, rendered server-side into a downloadable MP4.
- Live render progress with loading, success, and error states.
Video demonstration
Key features
- Drag-and-drop clip reordering
- Multi-clip animated text overlays
- Snap-to-clip dragging and resizing
- Timeline zoom and touch support
- Server-side MP4 rendering
- Live render progress and download
Architecture
A monorepo separates the Next.js editor from an Express render service. The frontend stores clip order and overlay ranges in clip units. The render service converts clip durations to 30 FPS Remotion sequences, composes the video and animated text, and renders an MP4. Each render receives a job ID, with progress streamed to the client through SSE and a download endpoint for the completed video.
Engineering decisions
The main choices behind the implementation.
- Store overlay positions in clip units rather than pixels so timeline placement remains consistent when clips are reordered or the timeline is zoomed.
- Calculate overlay frame duration by summing the durations of every clip it spans, keeping text visible across the full selected range.
- Use Server-Sent Events for one-way render progress updates, with a separate request to start the job and an endpoint to download the result.
- Use DnD Kit for clip sorting with a 5px activation threshold, while keeping text dragging and resize handlers separate to prevent gesture conflicts.
- Loop Lottie animations to fill the overlay duration instead of stopping when the animation reaches its final frame.
Challenges
Keeping the editor timeline and rendered output aligned. Multi-clip text required summing clip durations into frame ranges, while clip sorting and text resizing needed separate gesture handling. Render jobs also needed progress, completion, and error feedback without blocking the editing interface.