Remotion

Turns JSON timeline specs into actual videos using Remotion. You define your composition structure, tracks, and clips in JSON, then this renders it through Remotion's engine. Comes with eight standard components like TitleCard, TypingText, and SplitScreen, but you can plug in custom React components too. The real win here is being able to generate or manipulate video timelines programmatically instead of hardcoding compositions. If you're building AI video generators, batch rendering systems, or anything where you need to create videos from structured data, this gives you a clean layer between your data pipeline and Remotion's rendering.

install copies · 90 days. Times the install command was copied on this site in the last 90 days, bots filtered.: 7
skills.sh installs: 1.8K
GitHub stars: 19.5K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add vercel-labs/json-render --skill remotion --agent claude-code

Installs into .claude/skills of the current project.

Files

@json-render/remotion

Remotion renderer that converts JSON timeline specs into video compositions.

Quick Start

import { Player } from "@remotion/player";
import { Renderer, type TimelineSpec } from "@json-render/remotion";

function VideoPlayer({ spec }: { spec: TimelineSpec }) {
  return (
    <Player
      component={Renderer}
      inputProps={{ spec }}
      durationInFrames={spec.composition.durationInFrames}
      fps={spec.composition.fps}
      compositionWidth={spec.composition.width}
      compositionHeight={spec.composition.height}
      controls
    />
  );
}

Using Standard Components

import { defineCatalog } from "@json-render/core";
import {
  schema,
  standardComponentDefinitions,
  standardTransitionDefinitions,
  standardEffectDefinitions,
} from "@json-render/remotion";

export const videoCatalog = defineCatalog(schema, {
  components: standardComponentDefinitions,
  transitions: standardTransitionDefinitions,
  effects: standardEffectDefinitions,
});