# rickysetiawan99/remotion-studio architecture

> Architecture diagram of the GitHub repository rickysetiawan99/remotion-studio, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-28). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/rickysetiawan99/remotion-studio
- Repository: https://github.com/rickysetiawan99/remotion-studio

## Overview

MotionCraft Studio is a browser-based video authoring and rendering app. A creator generates a scene composition from a topic or edits/imports JSON in the studio, previews it on the canvas, and submits it for MP4 rendering; assets can also be uploaded. The server coordinates AI generation, rendering, and procedural audio, while the Remotion composition turns scenes into animated video. Vibe presets and music/SFX synthesis are meaningful supporting capabilities. The README is empty, and sampled excerpts are partial, so uncertain wiring is omitted.

Main entry points: [`server.js`](https://github.com/rickysetiawan99/remotion-studio/blob/master/server.js) (HTTP API), [`public/js/studio.js`](https://github.com/rickysetiawan99/remotion-studio/blob/master/public/js/studio.js) (Studio UI), [`lib/music.mjs`](https://github.com/rickysetiawan99/remotion-studio/blob/master/lib/music.mjs) (Music synthesis), [`lib/sfx.mjs`](https://github.com/rickysetiawan99/remotion-studio/blob/master/lib/sfx.mjs) (SFX synthesis)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_authoring["Authoring and preview"]
  node_studio["Studio UI<br/>[studio.js]"]
  node_canvas["Canvas preview<br/>[canvas-renderer.js]"]
  node_webapp["Studio interface<br/>[index.html]"]
end

subgraph group_server["Studio server"]
  node_server["HTTP API<br/>[server.js]"]
  node_mediafiles[("Uploaded and rendered files<br/>[server.js]")]
end

subgraph group_render["Video rendering"]
  node_entry["Remotion entry<br/>[index.ts]"]
  node_root["Composition registration<br/>[Root.tsx]"]
  node_composition["Scene renderer<br/>[Composition.tsx]"]
  node_mp4["Rendered MP4<br/>[server.js]"]
end

subgraph group_audio["Procedural audio"]
  node_vibes["Vibe presets<br/>[vibe-tokens.mjs]"]
  node_music["Music synthesis<br/>[music.mjs]"]
  node_sfx["SFX synthesis<br/>[sfx.mjs]"]
  node_voices["Synth voices<br/>[voices.mjs]"]
  node_dsp["Audio DSP<br/>[dsp.mjs]"]
end

node_creator(("Creator"))
node_ai["LLM endpoint"]

node_creator -->|"uses"| node_webapp
node_webapp -->|"loads"| node_studio
node_studio -->|"requests generation"| node_server
node_server -.->|"requests script"| node_ai
node_studio -->|"previews composition"| node_canvas
node_canvas -->|"requests audio preview"| node_server
node_studio -->|"uploads assets"| node_server
node_server -->|"writes assets"| node_mediafiles
node_server -->|"reads and deletes renders"| node_mediafiles
node_studio -->|"requests render"| node_server
node_server -->|"resolves preset"| node_vibes
node_server -->|"generates soundtrack"| node_music
node_server -->|"generates cues"| node_sfx
node_music -->|"synthesizes instruments"| node_voices
node_sfx -->|"synthesizes effects"| node_voices
node_music -->|"processes audio"| node_dsp
node_sfx -->|"processes audio"| node_dsp
node_server -->|"bundles composition"| node_entry
node_entry -->|"registers root"| node_root
node_root -->|"registers video"| node_composition
node_server -->|"renders scenes"| node_composition
node_server -->|"writes render"| node_mp4
node_studio -->|"opens render"| node_mediafiles

click node_studio "https://github.com/rickysetiawan99/remotion-studio/blob/master/public/js/studio.js"
click node_canvas "https://github.com/rickysetiawan99/remotion-studio/blob/master/public/js/canvas-renderer.js"
click node_webapp "https://github.com/rickysetiawan99/remotion-studio/blob/master/public/index.html"
click node_server "https://github.com/rickysetiawan99/remotion-studio/blob/master/server.js"
click node_mediafiles "https://github.com/rickysetiawan99/remotion-studio/blob/master/server.js"
click node_vibes "https://github.com/rickysetiawan99/remotion-studio/blob/master/lib/vibe-tokens.mjs"
click node_music "https://github.com/rickysetiawan99/remotion-studio/blob/master/lib/music.mjs"
click node_sfx "https://github.com/rickysetiawan99/remotion-studio/blob/master/lib/sfx.mjs"
click node_voices "https://github.com/rickysetiawan99/remotion-studio/blob/master/lib/voices.mjs"
click node_dsp "https://github.com/rickysetiawan99/remotion-studio/blob/master/lib/dsp.mjs"
click node_entry "https://github.com/rickysetiawan99/remotion-studio/blob/master/src/index.ts"
click node_root "https://github.com/rickysetiawan99/remotion-studio/blob/master/src/Root.tsx"
click node_composition "https://github.com/rickysetiawan99/remotion-studio/blob/master/src/Composition.tsx"
click node_mp4 "https://github.com/rickysetiawan99/remotion-studio/blob/master/server.js"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_studio,node_canvas,node_webapp toneBlue
class node_server,node_mediafiles toneAmber
class node_entry,node_root,node_composition,node_mp4 toneMint
class node_vibes,node_music,node_sfx,node_voices,node_dsp toneRose
class node_creator,node_ai toneIndigo
```

## Components

### Authoring and preview

- [Studio UI](https://github.com/rickysetiawan99/remotion-studio/blob/master/public/js/studio.js): `public/js/studio.js`
- [Canvas preview](https://github.com/rickysetiawan99/remotion-studio/blob/master/public/js/canvas-renderer.js): `public/js/canvas-renderer.js`
- [Studio interface](https://github.com/rickysetiawan99/remotion-studio/blob/master/public/index.html): `public/index.html`

### Studio server

- [HTTP API](https://github.com/rickysetiawan99/remotion-studio/blob/master/server.js): `server.js`
- [Uploaded and rendered files](https://github.com/rickysetiawan99/remotion-studio/blob/master/server.js): `server.js`

### Video rendering

- [Remotion entry](https://github.com/rickysetiawan99/remotion-studio/blob/master/src/index.ts): `src/index.ts`
- [Composition registration](https://github.com/rickysetiawan99/remotion-studio/blob/master/src/Root.tsx): `src/Root.tsx`
- [Scene renderer](https://github.com/rickysetiawan99/remotion-studio/blob/master/src/Composition.tsx): `src/Composition.tsx`
- [Rendered MP4](https://github.com/rickysetiawan99/remotion-studio/blob/master/server.js): `server.js`

### Procedural audio

- [Vibe presets](https://github.com/rickysetiawan99/remotion-studio/blob/master/lib/vibe-tokens.mjs): `lib/vibe-tokens.mjs`
- [Music synthesis](https://github.com/rickysetiawan99/remotion-studio/blob/master/lib/music.mjs): `lib/music.mjs`
- [SFX synthesis](https://github.com/rickysetiawan99/remotion-studio/blob/master/lib/sfx.mjs): `lib/sfx.mjs`
- [Synth voices](https://github.com/rickysetiawan99/remotion-studio/blob/master/lib/voices.mjs): `lib/voices.mjs`
- [Audio DSP](https://github.com/rickysetiawan99/remotion-studio/blob/master/lib/dsp.mjs): `lib/dsp.mjs`

### Other components

- **Creator**
- **LLM endpoint**

## Connections

- Creator → Studio interface: uses
- Studio interface → Studio UI: loads
- Studio UI → HTTP API: requests generation
- HTTP API → LLM endpoint: requests script
- Studio UI → Canvas preview: previews composition
- Canvas preview → HTTP API: requests audio preview
- Studio UI → HTTP API: uploads assets
- HTTP API → Uploaded and rendered files: writes assets
- HTTP API → Uploaded and rendered files: reads and deletes renders
- Studio UI → HTTP API: requests render
- HTTP API → Vibe presets: resolves preset
- HTTP API → Music synthesis: generates soundtrack
- HTTP API → SFX synthesis: generates cues
- Music synthesis → Synth voices: synthesizes instruments
- SFX synthesis → Synth voices: synthesizes effects
- Music synthesis → Audio DSP: processes audio
- SFX synthesis → Audio DSP: processes audio
- HTTP API → Remotion entry: bundles composition
- Remotion entry → Composition registration: registers root
- Composition registration → Scene renderer: registers video
- HTTP API → Scene renderer: renders scenes
- HTTP API → Rendered MP4: writes render
- Studio UI → Uploaded and rendered files: opens render