c-video-edit

Video Editing — Remotion & Editly

Create, render, and compose videos programmatically. Use Remotion for React-based dynamic videos or Editly for quick JSON-based assembly.

Remotion (React-based video creation)

Project Setup

# Create a new Remotion project
npx create-video@latest my-video
cd my-video

# Start interactive studio
npx remotion studio

Rendering

# Render a composition to video
npx remotion render src/index.ts MyComposition out/video.mp4

# Render a still frame (thumbnail)
npx remotion still src/index.ts MyComposition out/thumbnail.png --frame=30

# List available compositions
npx remotion compositions src/index.ts

Render Options

# Resolution and FPS
npx remotion render src/index.ts MyComp out.mp4 --width 1920 --height 1080 --fps 30

# Codec (h264, h265, vp8, vp9, prores)
npx remotion render src/index.ts MyComp out.mp4 --codec h264

# Quality (CRF 0-51, lower = better)
npx remotion render src/index.ts MyComp out.mp4 --crf 18

# Speed preset
npx remotion render src/index.ts MyComp out.mp4 --x264-preset fast

# Pass data as props
npx remotion render src/index.ts MyComp out.mp4 --props='{"title":"Hello","color":"blue"}'

# Parallel rendering (faster)
npx remotion render src/index.ts MyComp out.mp4 --concurrency 4

# Benchmark render time
npx remotion benchmark src/index.ts MyComp

Composition Structure

// src/Root.tsx — register compositions
import { Composition } from "remotion";
import { MyVideo } from "./MyVideo";

export const RemotionRoot = () => (
  <Composition id="MyVideo" component={MyVideo}
    durationInFrames={150} fps={30} width={1920} height={1080} />
);

// src/MyVideo.tsx — video content
import { useCurrentFrame, interpolate, AbsoluteFill, Sequence } from "remotion";

export const MyVideo = () => {
  const frame = useCurrentFrame();
  const opacity = interpolate(frame, [0, 30], [0, 1]);
  return (
    <AbsoluteFill style={{ backgroundColor: "black" }}>
      <Sequence from={0} durationInFrames={60}>
        <h1 style={{ color: "white", opacity }}>Hello World</h1>
      </Sequence>
    </AbsoluteFill>
  );
};