@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" : [ ] } } Standard Components Component Type Description TitleCard scene Full-screen title with subtitle TypingText scene Terminal-style typing animation ImageSlide image Full-screen image display SplitScreen scene Two-panel comparison QuoteCard scene Quote with attribution StatCard scene Animated statistic display TextOverlay overlay Text overlay LowerThird overlay Name/title overlay Key Exports Export Purpose Renderer Render spec to Remotion composition schema Timeline schema standardComponents Pre-built component registry standardComponentDefinitions Catalog definitions useTransition Transition animation hook ClipWrapper Wrap clips with transitions