# Editor starter

> A working, downloadable React video editor you can run locally and adapt: your frontend, our video engine.

- [Try the editor starter](https://developer.vidmoat.com/developer/editor-demo): The hosted version, connected to your account with a key you paste.
- [Download the source](https://developer.vidmoat.com/docs/starters/vidmoat-video-editor.zip): A ZIP with the React app and its small Node server.

## What it does

Create a landscape, portrait or square project. Upload footage, images or audio; add a title; select clips to adjust their start, duration and source in-point. Play, pause and scrub the live app player, then export an MP4. Saved edits refresh the player automatically. Every operation goes through the documented public API.

## Run it on your computer

### Step 1: Install Node.js 22.10 or later

Then extract the ZIP and open a terminal in the extracted folder.

### Step 2: Install dependencies

```bash
npm install
```

### Step 3: Add your key

Copy `.env.example` to `.env` and set `VIDMOAT_API_KEY`.

```bash .env
# Server only, never browser code
VIDMOAT_API_KEY=your_scoped_key
PORT=3210
```

### Step 4: Start it

Run `npm run dev` and open `http://127.0.0.1:3210`.

## Use the right scopes

Create a key in [Apps & keys](https://developer.vidmoat.com/developer/apps) with `account.read`, `projects.read`, `projects.write`, `media.write`, `render.read` and `render.write` (the **Build & render** preset covers them). The hosted example accepts only a key belonging to your signed-in account and keeps it in memory until you disconnect or reload. The downloaded app reads the key on its Node server.

> **Note.** Test keys save real projects, uploads and edits, and frame previews show the actual timeline. Exports return a sample file. A live key is needed to export your actual edit; normal export allowances apply. This starter never triggers AI generation.

## Follow the implementation

| File | What it is |
| --- | --- |
| `src/Editor.tsx` | The same interface the hosted demo uses. |
| `src/PreviewPlayer.tsx` | An origin-checked iframe running the real app compositor, with play, pause, seeking and document refresh. |
| `src/model.ts` | Command builders and bounded render polling. |
| `src/main.tsx` | Browser-to-server transport. |
| `server.mjs` | A local server with a fixed API origin, allowed routes, request limits and a server-held key. |
| `src/styles.css` | Responsive controls in Vidmoat's orange brand styling. |

## Know the boundaries

This is a single-user starter with a selectable clip list and live canvas playback. It has no undo history or animation controls. The embedded player reads only the document you send; it never receives your API key, loads or saves account projects, starts media proxy jobs or loads private font libraries. Uploads are capped at 32 MB; import a public URL for larger media, within your plan's limit. The render watcher pauses after three minutes; "Check export" resumes the same job.

The local server binds to `127.0.0.1` and rejects foreign origins. Before making it a public service, add sign-in, per-user authorisation, CSRF protection and rate limits, and use [OAuth](https://developer.vidmoat.com/developer/docs/authentication) for other people's projects. Never expose the local proxy with a shared account key.

> **Warning.** Edits save directly. Start with a new project. If a write times out, refresh the project or check the render job before repeating it: a lost response does not mean the operation failed.

---

Source: https://developer.vidmoat.com/developer/docs/editor-starter
Previous: [Video preview](https://developer.vidmoat.com/developer/docs/preview.md)
Next: [Errors and retries](https://developer.vidmoat.com/developer/docs/errors.md)
All documentation: https://developer.vidmoat.com/llms-full.txt