Skip to content
VIDMOATDocs

Editor starter

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

Try the editor starterThe hosted version, connected to your account with a key you paste.Download the sourceA 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#

  1. Install Node.js 22.10 or later

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

  2. Install dependencies

    Shell
    npm install

  3. Add your key

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

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

  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 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.

Follow the implementation#

FileWhat it is
src/Editor.tsxThe same interface the hosted demo uses.
src/PreviewPlayer.tsxAn origin-checked iframe running the real app compositor, with play, pause, seeking and document refresh.
src/model.tsCommand builders and bounded render polling.
src/main.tsxBrowser-to-server transport.
server.mjsA local server with a fixed API origin, allowed routes, request limits and a server-held key.
src/styles.cssResponsive 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 for other people's projects. Never expose the local proxy with a shared account key.