A stateless, cross-platform video and image rendering engine with JSON templates and React component support.
- Stateless Engine - Accept JSON templates, output video/images
- Cross-Platform - Works in browser and Node.js
- JSON Templates - Easy to share, AI can generate
- Custom React Components - Full CSS/Tailwind support for advanced use cases
- Rich Animation System - 40+ presets, keyframe animations, 30+ easing functions
- Self-Describing API - Capabilities API for AI integration
| Package | Description |
|---|---|
@rendervid/core |
Core engine, types, validation |
@rendervid/renderer-browser |
Browser-based renderer |
@rendervid/renderer-node |
Node.js renderer (headless browser + FFmpeg) |
@rendervid/player |
React preview component |
@rendervid/components |
Built-in React components library |
# Install core package
npm install @rendervid/core
# For browser rendering
npm install @rendervid/renderer-browser
# For server-side rendering
npm install @rendervid/renderer-nodeimport { RendervidEngine } from '@rendervid/core';
const engine = new RendervidEngine();
// Define a template
const template = {
name: 'Hello World',
output: {
type: 'video',
width: 1920,
height: 1080,
fps: 30,
duration: 5,
},
inputs: [
{ key: 'title', type: 'string', label: 'Title', required: true },
],
composition: {
scenes: [{
id: 'main',
startFrame: 0,
endFrame: 150,
backgroundColor: '#1a1a2e',
layers: [{
id: 'title',
type: 'text',
position: { x: 960, y: 540 },
size: { width: 1600, height: 200 },
inputKey: 'title',
props: {
fontSize: 120,
color: '#ffffff',
textAlign: 'center',
},
animations: [{
type: 'entrance',
effect: 'fadeInUp',
duration: 30,
}],
}],
}],
},
};
// Validate template
const validation = engine.validateTemplate(template);
if (!validation.valid) {
console.error(validation.errors);
}
// Get capabilities (for AI integration)
const capabilities = engine.getCapabilities();
console.log(capabilities.animations); // Available animation presets
console.log(capabilities.elements); // Available layer types
// Render video (requires renderer package)
const result = await engine.renderVideo({
template,
inputs: { title: 'Hello World!' },
output: { format: 'mp4', quality: 'high' },
});- image - Display images with fit options
- video - Play videos with playback controls
- text - Rich text with typography options
- shape - Rectangles, ellipses, polygons, stars, paths
- audio - Audio with volume and fade controls
- group - Container for grouping layers
- lottie - Lottie animations
- custom - Custom React components
fadeIn, fadeInUp, fadeInDown, fadeInLeft, fadeInRight, slideInUp, slideInDown, slideInLeft, slideInRight, scaleIn, zoomIn, rotateIn, bounceIn, and more...
fadeOut, fadeOutUp, fadeOutDown, slideOutUp, slideOutDown, scaleOut, zoomOut, rotateOut, bounceOut, and more...
pulse, shake, bounce, swing, wobble, flash, rubberBand, heartbeat, float, spin
Create dynamic, animated React components directly in templates for effects beyond built-in components.
- ✅ Animated counters & timers - Smooth number animations
- ✅ Particle systems - Explosions, confetti, snow effects
- ✅ Data visualizations - Custom charts and graphs
- ✅ 3D effects - CSS transforms and perspective
- ✅ Physics simulations - Gravity, collisions, motion
- ✅ Procedural graphics - Dynamic SVG animations
import { createBrowserRenderer } from '@rendervid/renderer-browser';
// 1. Create a template with a custom component
const template = {
name: "Animated Counter",
output: { type: "video", width: 1920, height: 1080, fps: 30, duration: 3 },
customComponents: {
"Counter": {
"type": "inline",
"code": "function Counter(props) { const progress = Math.min(props.frame / (props.fps * 2), 1); const value = Math.floor(props.from + (props.to - props.from) * progress); return React.createElement('div', { style: { fontSize: '72px', fontWeight: 'bold', color: '#00ffff' } }, value); }"
}
},
composition: {
scenes: [{
layers: [{
type: "custom",
customComponent: {
name: "Counter",
props: { from: 0, to: 100 }
}
}]
}]
}
};
// 2. Render the video
const renderer = createBrowserRenderer();
const result = await renderer.renderVideo({ template });
// 3. Download or use the video
const url = URL.createObjectURL(result.blob);1. Inline (Quick & Self-Contained)
{
"type": "inline",
"code": "function MyComponent(props) { return React.createElement('div', {}, props.frame); }"
}✅ Best for: Simple components, prototyping, self-contained demos
2. URL (Shared & Reusable)
{
"type": "url",
"url": "https://cdn.example.com/MyComponent.js"
}✅ Best for: Sharing components, external libraries, team collaboration
3. Reference (Pre-Registered)
{
"type": "reference",
"reference": "AnimatedChart"
}✅ Best for: Production apps, type-safe components, trusted code
Every custom component receives these props automatically:
interface ComponentProps {
frame: number; // Current frame (0, 1, 2, ...)
fps: number; // Frames per second (30, 60)
sceneDuration: number; // Total frames in scene
layerSize: {
width: number;
height: number;
};
// + your custom props
}Use {{variableName}} to make components dynamic:
{
"inputs": [
{ "key": "title", "type": "string" },
{ "key": "count", "type": "number" }
],
"composition": {
"scenes": [{
"layers": [{
"type": "custom",
"customComponent": {
"name": "Counter",
"props": {
"text": "{{title}}",
"to": "{{count}}"
}
}
}]
}]
}
}// Render with custom values
await renderer.renderVideo({
template,
inputs: {
title: "Total Sales",
count: 1000
}
});Check out production-ready examples in examples/custom-components/:
- particle-explosion - 150+ particles with physics
- 3d-cube-rotation - CSS 3D transforms
- wave-visualization - Audio spectrum analyzer
- neon-text-effects - Realistic neon glow
- holographic-interface - Sci-fi UI
- And 4 more basic examples!
📖 Complete Guide - Full technical documentation 🤖 AI Agent Guide - For AI agents 👨💻 Development Tutorial - Step-by-step 🎬 Examples Overview - All 9 examples
Explore our collection of ready-to-use templates:
| Example | Description | Preview |
|---|---|---|
| Hello World | Minimal text animation |  SVG |
| First Video | 5-second video with text |  SVG |
| First Image | Social media image |  SVG |
| Example | Dimensions | Platform | SVG |
|---|---|---|---|
| Instagram Story | 1080x1920 | Instagram Stories | Preview |
| Instagram Post | 1080x1080 | Instagram Feed | Preview |
| TikTok Video | 1080x1920 | TikTok | Preview |
| YouTube Thumbnail | 1280x720 | YouTube | Preview |
| Twitter Card | 1200x630 | Twitter/X | Preview |
| LinkedIn Banner | 1584x396 | Preview |
| Example | Description | SVG |
|---|---|---|
| Product Showcase | Feature product with details | Preview |
| Sale Announcement | Promotional sale video | Preview |
| Testimonial Video | Customer testimonial | Preview |
| Before & After | Before/after comparison | Preview |
| Logo Reveal | Animated logo reveal | Preview |
| Example | Description | SVG |
|---|---|---|
| Animated Bar Chart | Animated bar chart | Preview |
| Line Graph | Animated line graph | Preview |
| Pie Chart | Pie chart reveal | Preview |
| Counter Animation | Counting numbers | Preview |
| Progress Dashboard | Progress indicators | Preview |
See the examples directory for more details and usage instructions.
All example templates include an animated SVG preview (preview.svg). These are lightweight, scalable, CSS-animated SVG files generated by exportAnimatedSvg(). To regenerate all previews:
npx tsx scripts/export-all-svgs.tsEnable AI agents (Claude, Cursor, Windsurf, Google Antigravite) to generate videos and images using the Model Context Protocol server.
The MCP server exposes 6 tools:
- render_video - Generate videos from templates
- render_image - Generate images/frames
- validate_template - Validate template JSON
- get_capabilities - Discover available features
- list_examples - Browse 50+ example templates
- get_example - Load specific examples
See the MCP server directory for installation and usage instructions.
# Install dependencies
pnpm install
# Build all packages
pnpm build
# Run tests
pnpm test
# Type check
pnpm typecheckAll packages are published automatically via GitHub Actions when you push a version tag.
# Create and push a version tag (e.g., v0.2.0)
git tag v0.2.0
git push origin v0.2.0This triggers the publish workflow which:
- Validates — builds all packages, runs type checks, tests, and example validation
- Publishes — updates all package versions to match the tag, resolves
workspace:*dependencies, and publishes all 11@rendervid/*packages to npm in dependency order
Requirements:
- An
NPM_TOKENsecret must be configured in GitHub repository settings (Settings → Secrets → Actions) - The token needs publish permissions for the
@rendervidnpm scope
Published packages: core, components, renderer-browser, renderer-node, player, editor, templates, cloud-rendering, editor-playground, player-playground, mcp-server
Interactive dev apps for testing the editor and player components with sample templates.
# Build libraries first (required on first run)
pnpm build
# Start editor playground → http://localhost:5180
pnpm --filter @rendervid/editor-playground dev
# Start player playground → http://localhost:5181
pnpm --filter @rendervid/player-playground dev
# Or start both at once
pnpm --filter @rendervid/editor-playground --filter @rendervid/player-playground --parallel devEditor Playground (packages/editor-playground/) — Full VideoEditor with template switching, undo/redo, save/export callbacks logged to the console.
Player Playground (packages/player-playground/) — Player with sidebar controls for autoplay, loop, speed (0.25x–4x), and show/hide controls. Template info panel shows dimensions, FPS, and duration.
FlowHunt Attribution License - Free for commercial and personal use with attribution
Auto-generated MCP skills documentation is available in the /skills/ directory:
- Individual skill docs: Detailed documentation for each MCP tool
- Skills registry: Machine-readable JSON format for programmatic access
- Examples: Usage examples and best practices
To regenerate skills documentation:
cd mcp
pnpm build
pnpm generate:skillsOr use the convenience script:
./scripts/generate-all-docs.shSkills documentation is automatically updated when MCP server source code changes via GitHub Actions.
See CONTRIBUTING.md for development guidelines.