remotion-reels-renderer

Generate short-form vertical videos (reels) from a JSON array — no code. Library + CLI, built on Remotion. Bun monorepo:

packages/remotion-reels-renderer  # library (schema, components, render API)
packages/cli                     # `reel` CLI
packages/editor                  # block-based canvas editor components (React + Tailwind + shadcn)

• Reel JSON format reference
• Library/CLI API reference
• Editor reference

Repo scripts (bun)

bun install
bun run build          # build all packages
bun run test           # fast tests
bun run test:render    # slow e2e (renders the example)
bun run example        # render examples/reel.json → out.mp4
bun run dev            # editor playground (http://localhost:5173)

Editor (packages/editor)

A React component library for building reels visually from blocks — caption on photo, photo, video clip, before/after, photo grids, title card, countdown, lists, quotes, stats, pricing, call to action, transition, music, settings — with a live WYSIWYG preview (@remotion/player), per-panel asset swap, and reel JSON export. Tailwind + shadcn/ui. Full reference: docs/editor.md.

import { ReelEditor } from "reel-editor";
import "reel-editor/styles.css";

<ReelEditor initialReel={myReelArray} onChange={(items) => ...} />

Every block template carries meta.guidance — plain-language instructions for LLM/agents to fill in assets/text for automated reel generation. Run the playground with bun run dev.

CLI

bun run build
bun packages/cli/bin/reel.mjs render packages/remotion-reels-renderer/examples/reel.json -o out.mp4   # render
bun packages/cli/bin/reel.mjs validate packages/remotion-reels-renderer/examples/reel.json              # schema check
bun packages/cli/bin/reel.mjs preview packages/remotion-reels-renderer/examples/reel.json               # Remotion Studio
bun packages/cli/bin/reel.mjs example my-reel.json                                                      # starter reel

(or bun run reel ... from the repo root)

Options for render: -o out.mp4, --crf 18, --codec h264|vp9|prores..., --fps/--width/--height (override the config item).

The reel format

The JSON file's top level is an array of typed items, in any order:

[
  { "type": "config", "fps": 30, "width": 1080, "height": 1920 },
  { "type": "music", "src": "https://.../song.mp3", "volume": 0.5, "loop": true, "fadeOut": 2 },
  { "type": "transition", "style": "fade", "duration": 0.5 },
  {
    "type": "scene",
    "duration": 3,
    "background": ["#1a1a2e", "#16213e"],
    "media": { "src": "photo.jpg", "fit": "cover", "position": "center", "zoom": 1.1 },
    "texts": [
      {
        "text": "Hello",
        "x": "center",
        "y": "40%",
        "font": "Poppins",
        "fontSize": 72,
        "animation": "slide-up",
        "delay": 0.2,
        "duration": 2
      }
    ]
  }
]

type	what it does
config	fps / width / height / background (defaults: 30, 1080×1920)
scene	one clip: duration (s), background (color or gradient array), optional media, texts[]
transition	entry effect for the next scene: fade, slide-*, zoom, none
music	audio track across the whole reel: src, volume, startFrom, loop, fadeIn, fadeOut

• media.src — image or video. Local path (relative to the JSON file) or http(s) URL (downloaded and cached in .reel-cache/). fit: cover/contain/fill; position: crop/focal point ("center", "top", "30% 70%", ...); zoom + zoomDirection: Ken Burns. Video-only: muted, volume, loop, trim: {start, end} (seconds).
• texts[] — absolute-positioned overlays: x/y (px, %, or "center"), font (Inter, Poppins, Montserrat, Roboto, Oswald, Playfair Display), fontSize, color, weight, align, style (extra CSS), animation (fade-in, slide-*, zoom-in, none), delay, duration.
• Transitions can also be set directly on a scene via its transition field.

Library

import { renderReel, validateReel } from "remotion-reels-renderer";

const result = await renderReel(reelArray, { output: "out.mp4", crf: 18, baseDir: "." });
// { outputPath, durationSeconds, sizeBytes, fpsUsed, resolution }

const check = validateReel(reelArray); // { ok: true, issues: [] }

Notes

• Requires Node ≥18. Rendering uses Remotion's bundled ffmpeg — no system ffmpeg needed.
• Transitions animate the incoming scene (no cross-dissolve yet).
• Remotion license: free for individuals and orgs ≤3 people — check terms for company use.