Preview Studio

Preview templates live - adjust and export in seconds

Remotion Studio is a local browser app that lets you scrub through every frame, change props, compare themes, and export to MP4, GIF, or PNG - all without touching config files.

Browse Templates View on GitHub

Free

Open-source

localhost:3000

Local preview

No account

Required

What Remotion renders

Every preview below was generated with a single npx remotion render command. Hover to play.

Testimonial - Neon Split

npx remotion render Testimonial-NeonSplit

Proposal - Dark Executive

npx remotion render Proposal-DarkExecutive

Event - Neon Countdown

npx remotion render Event-NeonCountdown

Explainer - Dark Cinematic

npx remotion render Explainer-DarkCinematic

Product Launch - Dark Hero Reveal

npx remotion render ProductLaunch-DarkHeroReveal

Recap - Neon Timeline

npx remotion render Recap-NeonTimeline

Browse all compositions in the library to find the template that fits your project.

Quick start - 3 commands

Clone the repo and install

Get the full project including all 318 compositions and the shared design system.

git clone https://github.com/mzzavaa/freelancer-templates.org
cd freelancer-templates.org
npm install

Start Remotion Studio

This opens a browser at localhost:3000 with a live preview of every registered composition. Use the sidebar to switch templates and the timeline to scrub frames.

npx remotion studio
# Opens at http://localhost:3000

Edit props and see changes live

Open any *Showcase.tsx file, change the spec data, and the Studio hot-reloads instantly. No rebuild needed.

const MY_SPEC: TestimonialSpec = {
  client_name: "Your Client Name",
  quote: "Working with you changed everything.",
  rating: 5,
  freelancer_name: "Linda Mohamed",
};

Export to any format

All exports use the Remotion CLI. Run from the project root after npm install.

MP4 video

Full quality H.264 video. Use for LinkedIn, YouTube, client deliverables.

npx remotion render Testimonial-NeonSplit out/video.mp4

PNG still

Export any single frame as a PNG. Great for thumbnails, social cards, and preview images.

# Frame 0 = first frame (thumbnail)
npx remotion still Testimonial-NeonSplit --frame=0 out/thumb.png
# Frame 45 = mid-animation
npx remotion still Testimonial-NeonSplit --frame=45 out/mid.png

Animated GIF

Looping GIF for social media previews, README badges, and email signatures.

npx remotion render Testimonial-NeonSplit out/preview.gif
# Trim to first 90 frames (3s loop)
npx remotion render Testimonial-NeonSplit --frames=0-89 out/loop.gif

Render at scale with Lambda

Use Remotion Lambda to render hundreds of personalized videos in parallel. Costs pennies per video.

npx remotion lambda render Testimonial-NeonSplit out/video.mp4
# See remotion.dev/docs/lambda for setup

Customize the design system

All visual tokens live in two files. Edit them once and every template updates automatically.

src/remotion/templates/_shared/themes.ts

Colors and fonts

Each THEME_* object defines the complete visual identity: background, text, accent, card, gradient. Add a new theme by copying an existing one and changing 5-6 color values.

export const THEME_MYBRAND: Theme = {
  name: "mybrand",
  bg: "#0d0d0d",
  accent: "#ff6b35",
  textPrimary: "#ffffff",
  // ... copy remaining fields
};

src/remotion/templates/_shared/layouts.ts

Font sizes and spacing

The TYPE scale controls all font sizes. Increase values here to make text bigger across every template. Minimum TYPE.body = 20 keeps text legible at thumbnail scale.

export const TYPE = {
  hero: 68, // main headline
  title: 48, // section title
  body: 20, // min for thumbnails
  label: 16, // badges, tags
};