Remotion Rendering Server for React Video Editor

A ready-to-run rendering backend that complements the open-source designcombo/react-video-editor. This project exposes a lightweight HTTP API powered by Remotion so you can render video compositions created in the React editor without leaving your Node.js stack.

Why this repo exists

• The original React Video Editor focuses on the client editing experience; it does not ship with a renderer. This repository fills that gap.
• Remotion handles frame-accurate rendering of React components—here it is wrapped in an Express server with job management and download endpoints.
• The server is designed as a learning playground you can extend for production (swap in Redis, add authentication, forward metrics, etc.).

Features

• Remotion-powered rendering of compositions defined in src/index.js (default id MyComposition).
• Express REST API with endpoints for queuing renders, polling progress, listing jobs, and downloading outputs.
• Progress tracking including percentage updates and human-readable ETA formatting.
• Configurable outputs with support for codecs, audio settings, and CRF overrides.
• Modular store layer (src/engine/store/use-store.ts) ready for plugging in persistent state.

Quick start

1. Install dependencies:

   npm install

2. Launch the renderer API (default port 4004):

   npm run render

3. Hit the health endpoint to confirm the service is up:

   curl http://localhost:4004/health

4. Kick off a render using the editor payload exported from react-video-editor:

   curl -X POST http://localhost:4004/render \
     -H 'Content-Type: application/json' \
     -d '{
       "design": {
         "compositionId": "MyComposition",
         "props": {
           "title": "Hello Remotion",
           "subtitle": "Rendered on the server"
         }
       }
     }'

5. Poll status or download the finished video when status becomes completed:

   curl http://localhost:4004/render/<jobId>
   curl -L http://localhost:4004/download/<jobId> --output video.mp4

Available scripts

• npm run render – start the Express rendering server defined in render.js.
• npm run start – open the Remotion Studio locally (useful for iterating on compositions).
• npm run build – CLI render using Remotion for the default MyComposition.

HTTP API overview

Endpoint	Method	Description
/health	GET	Service heartbeat with timestamp metadata.
/render	POST	Queue a new render job. Provide a design object matching the editor payload.
/render/:jobId	GET	Retrieve status, progress, ETA, and download link when ready.
/download/:jobId	GET	Stream the rendered MP4 once the job completes.
/jobs	GET	List all jobs held in memory (useful during development).
/render/:jobId	DELETE	Clean up a finished or failed job, removing generated files.

See docs/rendering-api.md for payload details, environment variables, and production hardening tips.

Working with Remotion compositions

• Edit src/index.js to register your compositions. MyComposition is the default and mirrors the editor output.
• Assets referenced by the composition (images, fonts, audio) should live in the public/ folder so Remotion can resolve them during rendering.
• Update render.js if you need to change the default compositionId, codec, or output directory per job.

Integrating with react-video-editor

• Export the serialized design from the editor and POST it to the /render endpoint under the design key.
• Use the /render/:jobId endpoint to power a progress UI in your application.
• Subscribe to the jobs map or replace it with Redis/PostgreSQL if you require persistence across restarts.

Roadmap ideas

• Persist job metadata in a database for restart safety.
• Add authentication or API keys before exposing the service publicly.
• Containerise the renderer with a GPU-enabled base image for faster exports.
• Offer a WebSocket/SSE stream for live progress (see api.js for an experimental approach).

Contributing

We welcome updates, bug fixes, and new ideas. If you extend this renderer or integrate it in a novel workflow, please open an issue or submit a pull request—community improvements help everyone using the React Video Editor ecosystem.

Credits

Huge thanks to the team behind designcombo/react-video-editor for open-sourcing an extraordinary timeline editor. This repository simply contributes a complementary rendering server so your React Video Editor projects can go from composition to finished media.

License

This sample is released under the MIT License. See the LICENSE file for the full text.