Rendervid Components - Layer Types, React Components & Visual Editor

Rendervid is built on a component-based architecture that makes video creation modular, extensible, and developer-friendly. Every element in a Rendervid template is a layer, and each layer has a specific type that determines how it renders. With 8 built-in layer types, a growing library of pre-built React components, a visual template editor, and a standalone player, Rendervid gives you everything you need to produce professional video content programmatically.

This page covers the full component ecosystem: from primitive layer types like text and shape, through audio and video playback, to fully custom React components that unlock unlimited creative possibilities. Whether you are building a simple title card or a complex data-driven animation, understanding these components is the foundation.

Built-in Layer Types

Every layer in a Rendervid template is defined as a JSON object with a type field. The type determines the available properties and rendering behavior. Below is a detailed reference for each of the 8 built-in layer types.

Text Layer

The text layer is the most feature-rich primitive in Rendervid. It renders styled text with full control over typography, alignment, color, effects, and animation.

Typography properties:

Rendervid ships with 100+ Google Fonts built in. You can use any of them by specifying the fontFamily property without needing to load external stylesheets.

Alignment properties:

Styling and effects:

• color and backgroundColor for basic coloring
• textShadow for drop shadows
• textStroke for outlined text
• textDecoration for underline, strikethrough
• textTransform for uppercase, lowercase, capitalize
• maxLines with automatic ellipsis truncation
• Built-in typewriter effect for character-by-character text reveal

{
  "type": "text",
  "text": "Welcome to Rendervid",
  "x": 100,
  "y": 200,
  "width": 800,
  "height": 100,
  "fontSize": 64,
  "fontFamily": "Montserrat",
  "fontWeight": 700,
  "color": "#FFFFFF",
  "textAlign": "center",
  "verticalAlign": "middle",
  "textShadow": "2px 2px 8px rgba(0,0,0,0.5)"
}

For advanced text animations like the typewriter effect, combine the text layer with keyframe animations or use the dedicated TypewriterEffect component .

Image Layer

The image layer displays raster and vector images with flexible sizing and cropping options.

Key properties:

Supported formats: PNG, JPEG, WebP, SVG, GIF

{
  "type": "image",
  "source": "https://example.com/hero-banner.png",
  "x": 0,
  "y": 0,
  "width": 1920,
  "height": 1080,
  "fit": "cover",
  "position": "center center"
}

The fit property works like CSS object-fit:

• cover – scales the image to fill the layer, cropping excess
• contain – scales to fit entirely within the layer, with possible letterboxing
• fill – stretches the image to match the layer dimensions exactly
• none – renders the image at its native resolution

Video Layer

The video layer embeds video clips into your composition with full playback control.

Key properties:

{
  "type": "video",
  "source": "https://cdn.example.com/background-clip.mp4",
  "x": 0,
  "y": 0,
  "width": 1920,
  "height": 1080,
  "startTime": 5.0,
  "playbackRate": 1.0,
  "muted": true,
  "loop": true
}

Use startTime to skip intros or jump to a specific point in the source footage. Combine with playbackRate for slow-motion (0.5) or time-lapse (2.0) effects.

Shape Layer

The shape layer draws vector shapes with fills, strokes, gradients, and rounded corners.

Shape types:

Styling properties:

• fill – solid color or gradient
• stroke – border color
• strokeWidth – border thickness
• borderRadius – rounded corners for rectangles
• Gradients: both linear and radial gradient fills

{
  "type": "shape",
  "shapeType": "rectangle",
  "x": 100,
  "y": 100,
  "width": 400,
  "height": 300,
  "borderRadius": 16,
  "fill": {
    "type": "linear",
    "colors": ["#6366F1", "#8B5CF6"],
    "angle": 135
  },
  "stroke": "#FFFFFF",
  "strokeWidth": 2
}

For custom shapes, use the path type with standard SVG path data:

{
  "type": "shape",
  "shapeType": "path",
  "path": "M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80",
  "fill": "#EC4899",
  "stroke": "none"
}

Audio Layer

The audio layer adds audio tracks to your composition with volume control, fading, and a full effects chain.

Key properties:

Audio effects chain:

Rendervid includes a built-in effects processing pipeline. Available effects:

• EQ – equalization for tone shaping
• Compressor – dynamic range compression
• Reverb – spatial reverberation
• Delay – echo/delay effect
• Gain – volume boost or attenuation
• High-pass filter – remove low frequencies
• Low-pass filter – remove high frequencies
• Panning – stereo positioning (left/right)

{
  "type": "audio",
  "source": "https://cdn.example.com/background-music.mp3",
  "volume": 0.7,
  "fadeIn": 2.0,
  "fadeOut": 3.0,
  "effects": [
    { "type": "highpass", "frequency": 200 },
    { "type": "compressor", "threshold": -24, "ratio": 4 },
    { "type": "reverb", "wet": 0.3, "decay": 2.5 },
    { "type": "gain", "value": 0.8 }
  ],
  "pan": -0.3
}

The effects are processed in order, allowing you to build sophisticated audio processing chains. Use pan values from -1 (full left) to 1 (full right) for stereo positioning.

Group Layer

The group layer is a container that holds child layers. Transforms applied to the group affect all children, making it easy to move, scale, rotate, or animate complex multi-layer compositions as a single unit.

Key properties:

{
  "type": "group",
  "x": 200,
  "y": 150,
  "rotation": 5,
  "opacity": 0.9,
  "children": [
    {
      "type": "shape",
      "shapeType": "rectangle",
      "x": 0,
      "y": 0,
      "width": 500,
      "height": 300,
      "fill": "#1E293B",
      "borderRadius": 12
    },
    {
      "type": "text",
      "text": "Card Title",
      "x": 24,
      "y": 24,
      "fontSize": 28,
      "fontWeight": 600,
      "color": "#F8FAFC"
    },
    {
      "type": "text",
      "text": "Supporting description text goes here.",
      "x": 24,
      "y": 64,
      "fontSize": 16,
      "color": "#94A3B8"
    }
  ]
}

Groups are invaluable for organizing complex templates. Use them to create reusable card layouts, lower-thirds, overlays, and other composite elements. The child coordinates are relative to the group’s position.

Lottie Layer

The lottie layer renders Lottie animations exported from After Effects, Figma, or other animation tools.

Key properties:

{
  "type": "lottie",
  "source": "https://cdn.example.com/loading-spinner.json",
  "x": 860,
  "y": 440,
  "width": 200,
  "height": 200,
  "speed": 1.5,
  "loop": true,
  "startFrame": 0,
  "endFrame": 60
}

Lottie layers are ideal for adding polished motion graphics, icons, loading indicators, and branded animations without writing frame-by-frame code. The startFrame and endFrame properties let you trim the animation to play only a specific segment.

Custom Layer

The custom layer is the most powerful layer type in Rendervid. It lets you write arbitrary React components that render frame-by-frame, giving you complete control over the visual output.

There are three deployment types for custom components:

Inline Deployment

Embed JavaScript code directly in your JSON template. Best for small, self-contained components.

{
  "type": "custom",
  "deployment": {
    "type": "inline",
    "code": "function Component({ frame, fps, sceneDuration, layerSize, props }) { const progress = frame / (fps * sceneDuration); const size = 50 + progress * 100; return React.createElement('div', { style: { width: size, height: size, borderRadius: '50%', backgroundColor: props.color || '#6366F1', display: 'flex', alignItems: 'center', justifyContent: 'center' } }); }"
  },
  "props": {
    "color": "#EC4899"
  }
}

URL Deployment

Load a component from an external URL such as a CDN. Best for reusable components shared across templates.

{
  "type": "custom",
  "deployment": {
    "type": "url",
    "url": "https://cdn.example.com/components/animated-counter.js"
  },
  "props": {
    "startValue": 0,
    "endValue": 1000,
    "prefix": "$",
    "color": "#10B981"
  }
}

Reference Deployment

Use a pre-registered component by name. Best for components from the @rendervid/components package or custom registries.

{
  "type": "custom",
  "deployment": {
    "type": "reference",
    "name": "AnimatedLineChart"
  },
  "props": {
    "data": [10, 25, 40, 35, 60, 80, 72, 95],
    "lineColor": "#6366F1",
    "gradientOpacity": 0.3
  }
}

Every custom component receives a standard set of props:

Custom components also support schema validation for props, ensuring that templates pass the correct data types and required fields to each component.

Pre-built React Components

The @rendervid/components package ships with a set of production-ready components you can use immediately in your templates.

AnimatedLineChart

Renders animated line charts with smooth gradient fills, configurable data points, axis labels, and animated draw-in effects. Ideal for data-driven video content like reports, dashboards, and presentations.

Key props: data, lineColor, gradientOpacity, strokeWidth, labels, animationStyle

AuroraBackground

Creates a mesmerizing northern lights (aurora borealis) effect using layered gradients and fluid motion. Perfect for atmospheric backgrounds, intro sequences, and ambient visuals.

Key props: colors, speed, intensity, blur

WaveBackground

Generates fluid wave animations with configurable colors, amplitudes, and frequencies. Use it for stylish backgrounds, music visualizers, or ocean-themed content.

Key props: waveCount, colors, amplitude, frequency, speed

SceneTransition

Provides 17 professional transition types for moving between scenes. Includes wipes, fades, zooms, slides, and more. Each transition is frame-accurate and configurable.

Key props: transitionType, duration, direction, easing

TypewriterEffect

Renders character-by-character text reveal with a blinking cursor. Supports configurable typing speed, cursor style, and delay between words. Great for code demos, chat simulations, and dramatic text reveals.

Key props: text, typingSpeed, cursorChar, cursorBlinkRate, startDelay

Custom Component Development

Building your own custom components is where Rendervid truly shines. Any visual effect you can create with JavaScript and CSS can become a Rendervid component.

Component Structure

A Rendervid custom component is a standard JavaScript function that receives props and returns a React element. The key difference from typical React components is that rendering is frame-driven rather than event-driven.

function MyComponent({ frame, fps, sceneDuration, layerSize, props }) {
  // Calculate animation progress (0 to 1)
  const totalFrames = fps * sceneDuration;
  const progress = frame / totalFrames;

  // Use progress to drive animations
  const opacity = Math.min(progress * 2, 1);
  const scale = 0.5 + progress * 0.5;

  return React.createElement("div", {
    style: {
      width: layerSize.width,
      height: layerSize.height,
      opacity: opacity,
      transform: `scale(${scale})`,
      display: "flex",
      alignItems: "center",
      justifyContent: "center",
      color: props.color || "#FFFFFF",
      fontSize: props.fontSize || 48,
      fontWeight: 700,
    },
  }, props.text || "Hello, Rendervid!");
}

Available Props

Every custom component receives these standard props:

• frame – The current frame number, starting at 0. This is your primary animation driver.
• fps – Frames per second (commonly 30 or 60). Use it to convert frames to seconds.
• sceneDuration – Duration of the current scene in seconds. Multiply by fps for total frame count.
• layerSize – An object with width and height in pixels, matching the layer dimensions defined in the template.
• props – An object containing any custom properties defined in the template JSON.

The React.createElement() Pattern

Since Rendervid components run in a rendering environment, they use React.createElement() rather than JSX. The pattern is straightforward:

// JSX equivalent: <div className="container"><span>Hello</span></div>
React.createElement("div", { className: "container" },
  React.createElement("span", null, "Hello")
);

Props Schema Validation

You can define a schema for your component’s props to validate data at template load time:

MyComponent.schema = {
  text: { type: "string", required: true },
  color: { type: "string", default: "#FFFFFF" },
  fontSize: { type: "number", default: 48, min: 8, max: 200 },
  animate: { type: "boolean", default: true },
};

Example: Particle System

A particle system component that simulates 150+ particles with physics:

function ParticleExplosion({ frame, fps, sceneDuration, layerSize, props }) {
  const particleCount = props.particleCount || 150;
  const gravity = props.gravity || 0.5;
  const time = frame / fps;

  const particles = [];
  for (let i = 0; i < particleCount; i++) {
    const angle = (i / particleCount) * Math.PI * 2;
    const speed = 2 + Math.random() * 4;
    const x = layerSize.width / 2 + Math.cos(angle) * speed * time * 60;
    const y = layerSize.height / 2 + Math.sin(angle) * speed * time * 60
              + gravity * time * time * 100;
    const opacity = Math.max(0, 1 - time / sceneDuration);
    const size = 3 + Math.random() * 5;

    particles.push(
      React.createElement("div", {
        key: i,
        style: {
          position: "absolute",
          left: x,
          top: y,
          width: size,
          height: size,
          borderRadius: "50%",
          backgroundColor: props.color || "#F59E0B",
          opacity: opacity,
        },
      })
    );
  }

  return React.createElement("div", {
    style: {
      position: "relative",
      width: layerSize.width,
      height: layerSize.height,
      overflow: "hidden",
    },
  }, ...particles);
}

Example: Animated Counter

A number counting animation that interpolates between start and end values:

function AnimatedCounter({ frame, fps, sceneDuration, layerSize, props }) {
  const progress = Math.min(frame / (fps * sceneDuration), 1);
  const eased = 1 - Math.pow(1 - progress, 3); // ease-out cubic
  const value = Math.round(
    props.startValue + (props.endValue - props.startValue) * eased
  );
  const formatted = value.toLocaleString();

  return React.createElement("div", {
    style: {
      width: layerSize.width,
      height: layerSize.height,
      display: "flex",
      alignItems: "center",
      justifyContent: "center",
      fontSize: props.fontSize || 72,
      fontWeight: 800,
      color: props.color || "#FFFFFF",
      fontFamily: "Inter, sans-serif",
    },
  }, (props.prefix || "") + formatted + (props.suffix || ""));
}

For more on how custom components fit into the broader template structure, see the Template System documentation .

Template Editor

The @rendervid/editor package provides a full-featured visual template editor, enabling non-developers and developers alike to build Rendervid templates without writing JSON by hand.

Timeline-Based Editing

The editor features a multi-track timeline where each layer is represented as a block that can be dragged, resized, and repositioned. Adjust start times, durations, and layer ordering visually. Zoom in for frame-level precision or zoom out for a high-level overview.

Layer Management Panel

A dedicated panel lists all layers in the composition with drag-and-drop reordering, visibility toggles, lock controls, and grouping. Add new layers from a component palette that includes all 8 built-in types and any registered custom components.

Property Panel

Select any layer to view and edit its properties in a structured form. The property panel adapts to the layer type, showing only relevant fields. Color pickers, sliders, dropdowns, and text inputs make it easy to tweak every detail. Changes are reflected immediately in the preview.

Undo/Redo History

Every change is recorded in a history stack with full undo and redo support. Navigate through your edit history confidently, knowing you can always revert to a previous state.

Real-Time Preview

The editor includes an embedded Player component that renders the template in real time as you make changes. Preview the full composition at any point during editing without needing to export or render.

Player Component

The @rendervid/player package provides a standalone React component for previewing Rendervid templates in the browser.

React Integration

Install and embed the player in any React application:

import { Player } from "@rendervid/player";

function Preview({ template }) {
  return (
    <Player
      template={template}
      width={1920}
      height={1080}
      onComplete={() => console.log("Playback finished")}
    />
  );
}

Keyboard Shortcuts

The player supports built-in keyboard controls for efficient previewing:

Speed Control

Adjust playback speed from 0.25x (quarter speed) to 4x (quadruple speed). Slow-motion playback is useful for reviewing animations frame by frame, while fast-forward helps scan through longer compositions.

Callbacks and Events

The player exposes callbacks for programmatic control:

Use these callbacks to synchronize the player with external UI elements, analytics, or interactive experiences.

Component Gallery

These example custom components demonstrate the range of what is possible with Rendervid’s custom layer type. Each one is built using the same React.createElement() pattern described above.

Particle Explosion

A physics-based particle system with 150+ particles, configurable gravity, color, and explosion radius. Particles spawn from a central point and arc outward with realistic motion.

Wave Visualization

Audio-reactive wave patterns that respond to frequency data. Multiple wave layers with configurable amplitude, frequency, and color create a dynamic, organic visual.

Neon Text Effects

Glowing text with animated neon light effects, including flicker, pulse, and color cycling. Customizable glow radius, colors, and animation speed.

Holographic Interface

A sci-fi inspired holographic UI with scanning lines, data readouts, grid overlays, and animated UI elements. Ideal for tech-themed videos and futuristic intros.

3D Cube Rotation

A hardware-accelerated CSS 3D cube with textured faces and smooth rotation. Uses CSS perspective and transform3d for performant 3D rendering without WebGL.

Data Visualization Dashboard

A multi-chart dashboard component featuring animated bar charts, line graphs, and stat counters. Data-driven and configurable for reports, presentations, and data storytelling.

Additional custom component examples include:

• Animated Counter – number counting animation with easing functions
• Progress Ring – circular progress indicator with configurable arc and colors
• Typewriter – text typing animation with cursor and variable speed

Next Steps

• Learn about the Rendervid Template System for structuring scenes and compositions
• Explore AI Integration to generate templates with natural language
• See the Deployment guide for rendering and exporting final videos
• Return to the Rendervid overview for a high-level introduction