Editframe logo

Documentation

React Components

Editframe provides React wrapper components for all core elements, allowing you to use Editframe in React applications with full TypeScript support and React-friendly APIs.

Architecture

The React components are thin wrappers around the underlying web components, providing:

  • TypeScript type definitions
  • React-friendly prop names (camelCase instead of kebab-case)
  • Ref forwarding for direct DOM access
  • Event handler props
  • Children support

Basic Usage

import { Timegroup, Video, Audio, Image } from '@editframe/react';

function MyVideoEditor() {
  return (
    <Timegroup mode="sequence" className="w-[1920px] h-[1080px]">
      <Video src="/intro.mp4" />
      <Image src="/title.jpg" duration="3s" />
      <Video src="/main.mp4" />
      <Audio src="/music.mp3" />
    </Timegroup>
  );
}

Installation

npm install @editframe/react

Examples

React examples are shown throughout the Elements documentation. All element examples include both HTML and React code examples.

Next Steps