Overlap Clip Creator

A React component for creating and managing video clips using Overlap's AI technology.

Installation

npm install @overlap.ai/clip-creator

Usage

The ClipCreator component comes with all necessary styles bundled - no additional CSS configuration required.

import { ClipCreator } from '@overlap.ai/clip-creator';

function App() {
  return (
    <div className="container mx-auto p-4">
      <ClipCreator
        primaryColor="#007AFF"  // Your brand color
        companyId="your-company-id"  // From Overlap dashboard
        apiKey="your-api-key"  // From Overlap dashboard
        workflowId="your-workflow-id"  // From Overlap dashboard
        nodeId="your-node-id"  // From Overlap dashboard
      />
    </div>
  );
}

Props

| Prop | Type | Required | Description | |------|------|----------|-------------| | primaryColor | string | No | The primary color used for buttons and accents. Defaults to "#007AFF" | | companyId | string | Yes | Your Overlap company ID | | apiKey | string | Yes | Your Overlap API key | | workflowId | string | Yes | The ID of the workflow to trigger | | nodeId | string | Yes | The ID of the node in the workflow |

Features

• Upload videos or use YouTube URLs
• AI-powered video reframing (16:9 or 9:16)
• Multiple subtitle styles
• Real-time progress tracking
• View and manage previous clips
• Responsive design

Example with Custom Styling

import { ClipCreator } from '@overlap.ai/clip-creator';

function VideoEditor() {
  return (
    <div className="min-h-screen bg-gray-50 py-8">
      <div className="max-w-7xl mx-auto px-4">
        <h1 className="text-2xl font-bold mb-6">Video Editor</h1>
        
        <div className="bg-white rounded-xl overflow-hidden h-[800px]">
          <ClipCreator
            primaryColor="#0066FF"
            companyId="your-company-id"
            apiKey="your-api-key"
            workflowId="your-workflow-id"
            nodeId="your-node-id"
          />
        </div>
      </div>
    </div>
  );
}

Requirements

• React 18 or higher

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

Notes

• Maximum file size is 10GB
• Supported video formats: MP4, WebM, OGG, AVI, MOV

Getting Help

For issues and feature requests, please contact Overlap support or visit our documentation at https://overlap.ai.