Quickstart

This guide creates a ready-made React app with the video editor in it. One command creates the app and saves your license key. The app is a small "video studio": you pick a format, edit a short animated video in the editor, and download it as an MP4 file.

Already have an app, or use another framework? Go to Add the editor to your own app.

PrerequisitesCopy Anchor Link

• Node.js 20 or later, and npm.
• A license key. Sign up for free to get one. The key works on localhost without any change.
• A desktop browser. The editor runs in the browser.

Create the starter appCopy Anchor Link

npx @layermetry/react-video-editor-starter my-video-editor

cd my-video-editor
npm install

npm run dev

If you pressed Enter instead of pasting a key, the app shows a box where you paste it. A pasted key is saved in that browser, and the app uses it before the key in .env. To remove it, press Use a different key. You can also put the key in .env yourself:

VITE_LAYERMETRY_LICENSE_KEY=your-key

The app shows three formats: Reel (9:16), Post (1:1) and YouTube (16:9). Pick one. The video editor opens with a ready-made 8-second video, with animated text and shapes. Change it, press Export, and then press Save & Exit. The finished MP4 file downloads to your computer, and the app returns to the three formats.

If the key is wrong or has expired, the app shows "The editor could not start" with a button to try a different key.

Where to change the appCopy Anchor Link

The code is in the src folder of the starter.

This is the part of App.tsx that opens the editor:

<VideoEditor
  licenseKey={licenseKey}
  defaultTemplate={format.template}
  onExport={download}
  onClose={() => setFormat(null)}
  renderLicenseBlocked={(state) => <Blocked message={state.message} onReset={reset} />}
/>

• licenseKey is your key.
• defaultTemplate is the video the editor opens with, from designs.ts.
• onExport receives the finished MP4 file. The starter downloads it. In your own app, upload it to your server instead.
• onClose runs when the user closes the editor.
• renderLicenseBlocked shows the starter's own screen when the key is refused.

Add the editor to your own appCopy Anchor Link

These steps add the editor to an app you already have, or to a new empty project. For Next.js, Vue, Svelte and other frameworks, see Frameworks.

Prerequisites for these stepsCopy Anchor Link

The React example below uses a new Vite project, which needs Node.js 20.19 or later, or 22.12 or later.

If you do not have a project yet, create an empty one for the framework you use.

npm create vite@latest my-editor -- --template react-ts
cd my-editor
npm install

Install the packageCopy Anchor Link

Install the SDK in the project folder.

npm install @layermetry/media-editor

The package has no runtime dependencies. It carries its own copy of React, so a page without React can use it.

Add a license keyCopy Anchor Link

The editor does not start without a license key. You pass the key as licenseKey.

Replace 'YOUR_LICENSE_KEY' in the next step with your own key. If the key is missing or not valid, the page shows "License Validation Failed" instead of the editor.

Render the editorCopy Anchor Link

Add the editor to the page. The editor fills the element that contains it. In these examples, that element covers the whole browser window.

import { VideoEditor } from '@layermetry/media-editor/react';

function handleExport(file: File) {
  // Upload the file to your server here.
  console.log(`Exported ${file.name}: ${file.size} bytes, ${file.type}`);
}

function handleClose() {
  console.log('The editor was closed');
}

export default function App() {
  return (
    <div style={{ position: 'fixed', inset: 0 }}>
      <VideoEditor
        licenseKey="YOUR_LICENSE_KEY"
        onExport={handleExport}
        onClose={handleClose}
      />
    </div>
  );
}

npm run dev

The page shows the video editor with an empty canvas.

View full size

Handle the exportCopy Anchor Link

The editor gives you the finished video through onExport. Your code decides where the file goes.

To try it, press Add text above the canvas, press Export, and then press Save & Exit. The editor renders the video and calls onExport with an MP4 File. Then it calls onClose.

The browser console shows the two messages from the example:

Exported exported-video-70075c6f-b087-4909-84f3-c25dcc2bcdce.mp4: 35019 bytes, video/mp4
The editor was closed

The editor also calls onClose when the user presses the close button. Remove or hide the editor in your page when onClose runs.

To keep the video, upload the file to your own server in handleExport. See Export for progress events and file formats.

Next stepsCopy Anchor Link