Your frontend. Our video engine.

Start with something you can use

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 and extract the ZIP.
2. Open a terminal in the extracted folder and run npm install.
3. Copy .env.example to .env and set VIDMOAT_API_KEY.
4. Run npm run dev and open http://127.0.0.1:3210.

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

# Start the app
npm run dev

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 hosted example accepts only a key belonging to your signed-in account; it keeps the secret in memory until disconnect or reload. The downloaded app reads the key on its Node server.

Follow the implementation

• src/Editor.tsx: the same interface used by the hosted demo.
• src/PreviewPlayer.tsx: an origin-checked iframe using 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 fixed API origin, allowed routes, request limits and a server-held key.
• src/styles.css: responsive controls and 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, launches media proxy jobs or loads private font libraries. Use media your browser can play. Uploads are capped at 32 MB; import a public URL for larger media, subject to your plan’s limit. Project lists have a Load more control. 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 authorization, CSRF protection and rate limits. Use OAuth for another user’s projects. Keep the API key and .env on the server. Do not expose the local proxy with a shared account key.