This project demonstrates a simple TypeScript + Express backend with a React frontend for creating and rendering video templates.
We based the template on a short "Avocado Toast Recipe" social media clip.
A template contains:
- A sequence of segments (each with type: image, video, or text overlay)
- Duration for each segment
- Audio/music track (optional)
- Placeholder fields for end-user customization
The template is based on a popular short social media recipe video showing “How to make avocado toast in 3 steps.”
The video consists of three short clips illustrating each step, with overlay text describing the action.
- The template uses a JSON structure defining
segmentswhich can be video clips with optional text overlays and duration control. - Segments are concatenated in order.
- Optional audio background can be added to the final video.
- Text overlays support configurable position (top, center, bottom).
- The system uses FFmpeg to render the final video by applying trims, overlays, concatenation, and audio mixing.
- Install dependencies:
npm install