rendiv

The video editor built for AI.

Create videos programmatically with React and TypeScript — designed from the ground up for AI agents, LLM pipelines, and automated video production. Pure code. No GUI required. Fully open source.

Quick Start

Your first video in under a minute. All you need is Node.js 18 or newer.

# 1. Scaffold a project (dependencies are installed for you)
npx create-rendiv my-video
cd my-video

# 2. Open the Studio — live preview at http://localhost:3000
npm run studio

# 3. Render it to MP4 (writes out/my-video.mp4)
npm run render

That's the whole loop: edit src/MyVideo.tsx, watch the Studio hot-reload, render when you're happy. The scaffold also gives you npm run preview (plain browser preview) and npm run still (export a single frame as an image).

Building with an AI coding agent? Install the rendiv agent skill so your agent knows the API:

npx skills add thecodacus/rendiv

Prefer wiring things up yourself, or running in a container? See Getting Started for the manual setup and Docker paths.

Table of Contents

• Quick Start
• What is Rendiv?
• Features
• Why AI-First?
• Packages
• Getting Started · Manual setup · Docker
• CLI Reference
• Render API (Node.js / Bun)
• Tech Stack
• Roadmap
• Contributing

What is Rendiv?

Rendiv is a code-first video editor where AI is a first-class citizen. Every video is a pure function of time — a React component that renders a frame given a frame number. This makes video creation fully deterministic, versionable, and trivially automatable by LLMs and AI agents.

Give an AI agent your Rendiv project and a prompt. It writes React components. You get a video. No drag-and-drop. No timeline editors. Just code that any LLM can read, write, and iterate on.

import { useFrame, useCompositionConfig, Fill } from '@rendiv/core';

export const MyVideo = () => {
  const frame = useFrame();
  const { totalFrames } = useCompositionConfig();

  const progress = frame / totalFrames;
  const opacity = progress;

  return (
    <Fill style={{ backgroundColor: '#0f0f0f' }}>
      <h1 style={{ opacity, color: 'white', fontSize: 80 }}>
        Hello, Rendiv 👋
      </h1>
    </Fill>
  );
};

Features

🤖 Built for AI

Every video is plain React + TypeScript — the languages LLMs understand best. AI agents can generate, modify, and iterate on compositions without any special tooling. Pair with Claude, GPT, or any code-generating model to produce videos from natural language prompts.

Agent Skills

Rendiv maintains Agent Skills that teach AI coding agents how to use rendiv correctly. Install them for Claude Code, Cursor, Codex, and more:

npx skills add thecodacus/rendiv

🎬 React-First Video Creation

Write videos as React components. Use all of CSS, SVG, Canvas, WebGL, and Three.js to design each frame. Any web technology that renders in a browser renders in Rendiv.

⏱ Precise Frame Control

• useFrame() — get the current frame number in any component
• useCompositionConfig() — access fps, totalFrames, width, height
• <Sequence> — show components only within a time window
• <Series> — chain sequences automatically without manual offset math
• <Loop> — repeat content for N iterations
• <Freeze> — lock time at a specific frame for children

🎞 Smooth Animation Primitives

• interpolate(frame, inputRange, outputRange) — map frame ranges to any value with built-in clamping and easing
• spring({ frame, fps, config }) — physics-based spring animation driven by frame number
• blendColors(value, inputRange, outputRange) — interpolate smoothly between CSS colors
• getSpringDuration(config) — calculate how long a spring takes to settle
• Full Easing library: linear, ease, easeIn, easeOut, easeInOut, bezier, bounce, elastic

🎵 Audio & Video Support

• <Video> — embed video files synced to the frame clock
• <Audio> — embed audio with per-frame volume control
• <OffthreadVideo> — pixel-perfect frame extraction via FFmpeg (for rendering)
• <Img> — load images with guaranteed readiness before capture
• <AnimatedImage> — GIF, AVIF, and animated WebP support

🏗 Async Frame Control

Load external data before a frame is captured using a simple hold/release pattern:

const handle = holdRender('Loading data...');
const data = await fetchMyData();
// update state
releaseRender(handle);

🖥 Rendiv Studio

A local development environment that launches in your browser:

• Live preview of all registered compositions
• Interactive timeline editor — drag to reposition and resize sequences, multi-track z-ordering, changes persist to timeline-overrides.json
• Playback controls with keyboard shortcuts
• Frame-by-frame scrubbing
• JSON-based props editor
• Hot reload on every file change
• Server-side render queue (persists across page refresh)
• URL-based composition routing (survives page refresh)
• One-click render trigger
• Integrated agent terminal — launch Claude Code or any CLI agent directly in Studio with a real PTY, full TUI support, and WebSocket-based communication
• Multi-project workspace mode — manage multiple projects from a single Studio instance (--workspace flag)
• Docker support — run Studio in a container with rendering, AI agents, and skills preloaded

npx rendiv studio src/index.tsx

⚡ Fast Parallel Rendering

• Headless Chromium (via Playwright) captures frames in parallel
• Configurable concurrency — up to 16 simultaneous tabs
• FFmpeg stitches frames + audio into the final video
• Outputs: MP4, WebM, GIF, MP3, WAV, PNG sequence

📦 Embeddable Player

Drop a Rendiv composition directly into any React app with zero server dependency:

import { Player } from '@rendiv/player';
import { MyVideo } from './MyVideo';

<Player
  component={MyVideo}
  totalFrames={150}
  fps={30}
  compositionWidth={1920}
  compositionHeight={1080}
  controls
  loop
/>

🎨 Transitions

<TransitionSeries>
  <TransitionSeries.Sequence durationInFrames={60}>
    <SceneA />
  </TransitionSeries.Sequence>
  <TransitionSeries.Transition timing={linearTiming({ durationInFrames: 15 })} presentation={fade()} />
  <TransitionSeries.Sequence durationInFrames={60}>
    <SceneB />
  </TransitionSeries.Sequence>
</TransitionSeries>

Built-in transitions: fade, slide, wipe, flip, clockWipe

🔷 SVG Shapes & Paths

• shapeCircle, shapeRect, shapeTriangle, shapeStar, shapePie, shapePolygon, shapeEllipse — SVG shape primitives
• pathLength, pointOnPath, morphPath, strokeReveal — path animation utilities

🌊 Perlin Noise

import { noise2D, noise3D } from '@rendiv/noise';
const x = noise2D(frame * 0.05, 0) * 100;

🔤 Font Loading

import { useFont } from '@rendiv/google-fonts';

const fontFamily = useFont({ family: 'Roboto', weight: '700' });
return <h1 style={{ fontFamily }}>Hello</h1>;

Load local fonts with @rendiv/fonts:

import { useLocalFont } from '@rendiv/fonts';

const fontFamily = useLocalFont({ family: 'CustomFont', src: staticFile('custom.woff2') });

💫 Motion Blur

<MotionTrail layers={5} offset={2} fadeRate={0.6}>
  <MovingObject />
</MotionTrail>

<ShutterBlur angle={180} layers={10}>
  <Scene />
</ShutterBlur>

Why AI-First?

Traditional video editors are GUI-based — impossible for AI to operate. Rendiv flips this:

The workflow: Describe what you want in natural language. An AI agent writes the Rendiv composition. rendiv render produces the video. Iterate by editing code — something AI is already great at.

// AI generates this from: "fade in a title, then show 3 bullet points with spring animations"
import { useFrame, Fill, Sequence, interpolate, spring } from '@rendiv/core';

export const AIGeneratedVideo = () => {
  const frame = useFrame();
  return (
    <Fill style={{ background: '#0a0a0a', padding: 80 }}>
      <Sequence from={0} durationInFrames={60}>
        <h1 style={{ color: 'white', opacity: interpolate(frame, [0, 30], [0, 1]) }}>
          Quarterly Results
        </h1>
      </Sequence>
      {['Revenue up 40%', 'New markets launched', '10k new users'].map((text, i) => (
        <Sequence key={i} from={60 + i * 30} durationInFrames={90}>
          <p style={{ color: '#ccc', transform: `translateX(${(1 - spring({ frame: frame - 60 - i * 30, fps: 30 })) * 100}px)` }}>
            {text}
          </p>
        </Sequence>
      ))}
    </Fill>
  );
};

Rendiv compositions are just functions — deterministic, testable, and perfectly suited for AI-generated code.

Packages

Getting Started

Already saw the Quick Start? This section covers the same flow in more detail, plus manual setup and Docker.

The fastest way to start is with create-rendiv:

npx create-rendiv my-video-project
cd my-video-project

This scaffolds a complete project and installs all dependencies for you. You get:

my-video-project/
├── src/
│   ├── index.tsx      # entry point — registers your compositions
│   └── MyVideo.tsx    # a starter composition to edit
├── vite.config.ts
└── package.json       # studio / preview / render / still scripts wired up

Then:

# Open the Studio preview (http://localhost:3000)
npm run studio          # same as: npx rendiv studio src/index.tsx

# Render to MP4 (writes out/my-video.mp4)
npm run render

# Preview in browser (Vite dev server)
npm run preview

Edit src/MyVideo.tsx while the Studio is open — it hot-reloads on every save, so you can iterate on animations frame by frame before committing to a render.

Manual setup

If you prefer to set things up yourself:

npm install @rendiv/core @rendiv/cli @rendiv/player react react-dom
npm install -D @types/react @types/react-dom @vitejs/plugin-react vite typescript

Create your entry point:

// src/index.tsx
import { setRootComponent, Composition } from '@rendiv/core';
import { MyVideo } from './MyVideo';

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

Create your first composition:

// src/MyVideo.tsx
import { useFrame, useCompositionConfig, Fill, interpolate, spring } from '@rendiv/core';

export const MyVideo = () => {
  const frame = useFrame();
  const { fps } = useCompositionConfig();

  const opacity = interpolate(frame, [0, 30], [0, 1]);
  const scale = spring({ frame, fps, config: { damping: 12 } });

  return (
    <Fill style={{ background: '#0f0f0f', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
      <h1 style={{ color: 'white', fontSize: 80, opacity, transform: `scale(${scale})` }}>
        Hello, Rendiv!
      </h1>
    </Fill>
  );
};

Then launch the studio (http://localhost:3000) or render:

npx rendiv studio src/index.tsx
npx rendiv render src/index.tsx MyVideo out/video.mp4

Docker

Run Studio in a container — no local setup needed. The image includes Playwright, FFmpeg, Claude Code, Codex, and the rendiv-video agent skill preloaded:

docker run -v /path/to/projects:/workspace -p 3000:3000 ghcr.io/thecodacus/rendiv-studio

Open http://localhost:3000 to access the workspace picker. Pass API keys for AI agents:

docker run -v ./projects:/workspace -p 3000:3000 \
  -e ANTHROPIC_API_KEY=sk-ant-... \
  -e OPENAI_API_KEY=sk-... \
  ghcr.io/thecodacus/rendiv-studio

Or use Docker Compose:

services:
  studio:
    image: ghcr.io/thecodacus/rendiv-studio
    ports:
      - "3000:3000"
    volumes:
      - ./projects:/workspace
    environment:
      - ANTHROPIC_API_KEY=${ANTHROPIC_API_KEY}
      - OPENAI_API_KEY=${OPENAI_API_KEY}

See the full Docker guide for cloud hosting, custom ports, and more.

CLI Reference

Render API (Node.js / Bun)

import { renderMedia, bundle } from '@rendiv/renderer';

const bundled = await bundle({ entryPoint: 'src/index.tsx' });

await renderMedia({
  serveUrl: bundled,
  compositionId: 'MyVideo',
  codec: 'mp4',
  outputLocation: 'out/video.mp4',
  concurrency: 4,
  onProgress: ({ progress }) => console.log(`${Math.round(progress * 100)}%`),
});

Tech Stack

Roadmap

• [x] Core hooks and composition system
• [x] Sequence, Series, Loop, Freeze primitives
• [x] Spring and interpolation animation engine
• [x] Media components (Video, Audio, Img, AnimatedImage, IFrame)
• [x] Headless Playwright renderer with parallel frame capture
• [x] Studio with preview, timeline, server-side render queue, and URL-based composition routing
• [x] Interactive timeline editor GUI (drag-to-edit sequences, multi-track z-ordering, persistent overrides)
• [x] Integrated agent terminal (Claude Code / CLI agents in Studio)
• [x] Multi-project workspace mode (create, switch, and manage projects from the browser)
• [x] Embeddable player component
• [x] Transition primitives (@rendiv/transitions)
• [x] Project scaffolding CLI (create-rendiv)
• [x] SVG shapes and path animation (@rendiv/shapes, @rendiv/paths)
• [x] Simplex noise (@rendiv/noise)
• [x] Motion blur effects (@rendiv/motion-blur)
• [x] Font loading (@rendiv/fonts, @rendiv/google-fonts)
• [x] Lottie animations (@rendiv/lottie)
• [x] Three.js 3D scenes (@rendiv/three)
• [x] Docker image with AI agents and preloaded skills
• [ ] Cloud / distributed rendering

Contributing

Rendiv is fully open source and welcomes contributions of all kinds.

git clone https://github.com/thecodacus/rendiv
cd rendiv
pnpm install
pnpm dev

Please read CONTRIBUTING.md before opening a pull request.

License

Apache License 2.0 © Rendiv Contributors

You are free to use Rendiv in personal projects, commercial products, open-source libraries, and SaaS applications. See LICENSE for the full text.

Acknowledgments

Rendiv was inspired by the concept of programmatic, React-based video creation pioneered by Remotion — a project we deeply respect. Jonny Burger and the Remotion team did groundbreaking work in proving that "a video is a function of time" is a powerful and developer-friendly paradigm.

However, Rendiv is not a fork, port, or derivative of Remotion's codebase. It is an independent implementation built from scratch with several fundamental technical differences:

How Rendiv differs from Remotion

The goal of Rendiv is to be the video editor that AI agents use — fully free, open, and unrestricted — so that every developer, studio, and AI startup can build on top of it without worrying about licensing costs or commercial terms.

We encourage you to check out Remotion as well — if their licensing works for your use case, it is an excellent and mature product.