@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,

});

## Adding Custom Components

import { z } from "zod";

const catalog = defineCatalog(schema, {

components: {

...standardComponentDefinitions,

MyCustomClip: {

props: z.object({ text: z.string() }),

type: "scene",

defaultDuration: 90,

description: "My custom video clip",

},

},

});

// Pass custom component to Renderer

<Player

component={Renderer}

inputProps={{

spec,

components: { MyCustomClip: MyCustomComponent },

}}

/>

## Timeline Spec Structure

{

"composition": { "id": "video", "fps": 30, "width": 1920, "height": 1080, "durationInFrames": 300 },

"tracks": [{ "id": "main", "name": "Main", "type": "video", "enabled": true }],

"clips": [

{ "id": "clip-1", "trackId": "main", "component": "TitleCard", "props": { "title": "Hello" }, "from": 0, "durationInFrames": 90 }

],

"audio": { "tracks": [] }

}