Video Canvas Renderer

A standalone React component for rendering video editing canvas from JSON data. Supports both interactive editor mode and static render mode for screenshot generation.

Installation

npm install video-canvas-renderer

Usage

Render Mode (for screenshots/video generation)

import React from 'react';
import { Canvas } from 'video-canvas-renderer';

const templateData = {
  settings: {
    aspect_ratio: "16:9",
    scenes: [
      {
        id: "scene1",
        elements: [
          {
            id: "img1",
            type: "image",
            properties: {
              src: "https://example.com/image.jpg",
              position: { x: 100, y: 100 },
              size: { width: 200, height: 150 },
              rotation: 0,
              opacity: 1
            }
          }
        ]
      }
    ]
  }
};

function App() {
  return (
    <Canvas 
      templateData={templateData}
      selectedScene="scene1"
      mode="render"
      scale={1}
    />
  );
}

Editor Mode (for interactive editing)

import React, { useState } from 'react';
import { Canvas } from 'video-canvas-renderer';

function App() {
  const [selectedItem, setSelectedItem] = useState(null);
  
  return (
    <Canvas 
      templateData={templateData}
      selectedScene="scene1"
      mode="editor"
      selectedItem={selectedItem}
      onSelectItem={setSelectedItem}
      onPropertyChange={(property, value) => {
        // Handle property changes
        console.log(`Property ${property} changed to:`, value);
      }}
      showZoomControls={true}
    />
  );
}

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | templateData | object | - | JSON data containing scenes and elements | | selectedScene | string | - | ID of the active scene to render | | mode | 'editor' \| 'render' | 'render' | Render mode: interactive or static | | selectedItem | object | - | Currently selected item (editor mode) | | onSelectItem | function | - | Called when an item is selected (editor mode) | | onPropertyChange | function | - | Called when element properties change (editor mode) | | scale | number | 1 | Canvas scale factor | | showZoomControls | boolean | false | Show zoom controls (editor mode) |

Template Data Structure

{
  "settings": {
    "aspect_ratio": "16:9",
    "scenes": [
      {
        "id": "scene1",
        "name": "Scene 1",
        "elements": [
          {
            "id": "element1",
            "type": "image",
            "properties": {
              "src": "https://example.com/image.jpg",
              "position": { "x": 100, "y": 100 },
              "size": { "width": 200, "height": 150 },
              "rotation": 0,
              "opacity": 1
            }
          }
        ],
        "settings": {
          "background_color": "#ffffff"
        }
      }
    ]
  }
}

Supported Aspect Ratios

• 16:9 (default)
• 9:16
• 1:1
• 4:3
• 3:4
• 2.35:1
• 2:1
• 1.85:1
• 256:135
• 21:9
• 19.5:9

License

MIT