# diffusionstudio/editor architecture

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

- Interactive diagram: https://gitdiagram.com/diffusionstudio/editor
- Repository: https://github.com/diffusionstudio/editor

## Overview

Diffusion Studio is a code-driven video editor built for both agents and people. The main workflow is: an agent or user opens a project folder, edits its JSX composition or manipulates the visual editor, then inspects media and renders the result. The web editor mounts compositions into an ECS-backed runtime; the desktop app exposes editing and media tools to agents through MCP and CLI interfaces. The README documents these product-level links; sampled source confirms the engine’s runtime systems and the desktop MCP server’s dispatch. Several subsystems are represented by their existing directories because their implementation files were not sampled.

Main entry points: [`apps/web/src/engine/create-engine.ts`](https://github.com/diffusionstudio/editor/blob/main/apps/web/src/engine/create-engine.ts) (Editor engine), [`apps/desktop/src/dapi/server.ts`](https://github.com/diffusionstudio/editor/blob/main/apps/desktop/src/dapi/server.ts) (Desktop MCP server), [`apps/desktop/src/main.ts`](https://github.com/diffusionstudio/editor/blob/main/apps/desktop/src/main.ts) (Desktop application), [`packages/jsx/src/generate.ts`](https://github.com/diffusionstudio/editor/blob/main/packages/jsx/src/generate.ts) (Project composition)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_authoring["Project authoring"]
  node_project["Project composition<br/>[generate.ts]"]
  node_projectfs[("Project files<br/>[fs.ts]")]
  node_reconciler["Composition mount<br/>[document.ts]"]
end

subgraph group_editor["Visual editor"]
  node_webapp["Editor application<br/>[app.tsx]"]
  node_canvas["Canvas and inspector<br/>[canvas.tsx]"]
  node_engine["Editor engine<br/>[create-engine.ts]"]
  node_timeline["Timeline controller<br/>[controller.ts]"]
end

subgraph group_media["Media production"]
  node_runtime["Scene renderer<br/>[render.ts]"]
  node_encoder["Video export<br/>[encoder.ts]"]
  node_generation["Generative assets"]
  node_masking["Object masking<br/>[index.ts]"]
end

subgraph group_agents["Agent access"]
  node_cli["CLI commands<br/>[index.ts]"]
  node_toolcatalog["MCP tool catalog<br/>[index.ts]"]
  node_desktopmcp["Desktop MCP server<br/>[server.ts]"]
  node_agentchat["Agent chat host<br/>[server.ts]"]
  node_media_tools["Media inspection tools<br/>[media-segment.ts]"]
end

subgraph group_desktop["Desktop services"]
  node_desktop["Desktop application<br/>[main.ts]"]
  node_ipc["Desktop IPC bridge<br/>[main-manager.ts]"]
  node_projects["Project management<br/>[projects.ts]"]
end

node_user(("User"))
node_agent(("Coding agent"))
node_external_models{{"AI model services"}}

node_user -->|"opens folder"| node_projectfs
node_agent -->|"issues commands"| node_cli
node_agent -->|"uses MCP tools"| node_desktopmcp
node_cli -->|"exposes same tools"| node_toolcatalog
node_desktopmcp -->|"serves catalog"| node_toolcatalog
node_desktopmcp -.->|"dispatches tools"| node_media_tools
node_agent -.->|"chats with host"| node_agentchat
node_user -->|"edits project"| node_webapp
node_projectfs -->|"stores source"| node_project
node_project -->|"compiles and mounts"| node_reconciler
node_reconciler -->|"mounts into runtime"| node_engine
node_webapp -.->|"presents editor"| node_canvas
node_canvas -.->|"edits scene"| node_engine
node_engine -->|"runs render system"| node_runtime
node_engine -->|"runs timeline system"| node_timeline
node_timeline -->|"updates view state"| node_engine
node_runtime -.->|"provides rendered frames"| node_encoder
node_engine -->|"composes generated assets"| node_generation
node_generation -.->|"requests generation"| node_external_models
node_engine -.->|"supports object masks"| node_masking
node_user -->|"opens desktop app"| node_desktop
node_desktop -->|"handles project requests"| node_projects
node_desktop -->|"registers IPC handlers"| node_ipc
node_ipc -->|"routes requests"| node_desktop
node_desktop -->|"starts MCP server"| node_desktopmcp
node_desktopmcp -.->|"invokes editor tools"| node_engine
node_agent -->|"inspects footage"| node_media_tools
node_user -->|"renders final video"| node_encoder

click node_project "https://github.com/diffusionstudio/editor/blob/main/packages/jsx/src/generate.ts"
click node_projectfs "https://github.com/diffusionstudio/editor/blob/main/apps/web/src/projects/fs.ts"
click node_reconciler "https://github.com/diffusionstudio/editor/blob/main/packages/reconciler/src/document.ts"
click node_webapp "https://github.com/diffusionstudio/editor/blob/main/apps/web/src/app.tsx"
click node_canvas "https://github.com/diffusionstudio/editor/blob/main/apps/web/src/components/canvas/canvas.tsx"
click node_engine "https://github.com/diffusionstudio/editor/blob/main/apps/web/src/engine/create-engine.ts"
click node_timeline "https://github.com/diffusionstudio/editor/blob/main/apps/web/src/engine/timeline/controller.ts"
click node_runtime "https://github.com/diffusionstudio/editor/blob/main/packages/runtime/src/systems/render.ts"
click node_encoder "https://github.com/diffusionstudio/editor/blob/main/packages/encoder/src/encoder.ts"
click node_generation "https://github.com/diffusionstudio/editor/blob/main/apps/web/src/components/genai/use-generate-image.tsx"
click node_masking "https://github.com/diffusionstudio/editor/blob/main/apps/web/src/engine/object-mask/index.ts"
click node_cli "https://github.com/diffusionstudio/editor/blob/main/apps/cli/src/index.ts"
click node_toolcatalog "https://github.com/diffusionstudio/editor/blob/main/packages/dapi/src/index.ts"
click node_desktopmcp "https://github.com/diffusionstudio/editor/blob/main/apps/desktop/src/dapi/server.ts"
click node_agentchat "https://github.com/diffusionstudio/editor/blob/main/packages/agent-chat/src/host/server.ts"
click node_desktop "https://github.com/diffusionstudio/editor/blob/main/apps/desktop/src/main.ts"
click node_ipc "https://github.com/diffusionstudio/editor/blob/main/apps/desktop/src/main-manager.ts"
click node_projects "https://github.com/diffusionstudio/editor/blob/main/apps/desktop/src/projects.ts"
click node_media_tools "https://github.com/diffusionstudio/editor/blob/main/packages/dapi/src/tools/media-segment.ts"

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_project,node_projectfs,node_reconciler,node_user toneBlue
class node_webapp,node_canvas,node_engine,node_timeline toneAmber
class node_runtime,node_encoder,node_generation,node_masking toneMint
class node_cli,node_toolcatalog,node_desktopmcp,node_agentchat,node_media_tools toneRose
class node_desktop,node_ipc,node_projects,node_agent,node_external_models toneIndigo
```

## Components

### Project authoring

- [Project composition](https://github.com/diffusionstudio/editor/blob/main/packages/jsx/src/generate.ts): `packages/jsx/src/generate.ts`
- [Project files](https://github.com/diffusionstudio/editor/blob/main/apps/web/src/projects/fs.ts): `apps/web/src/projects/fs.ts`
- [Composition mount](https://github.com/diffusionstudio/editor/blob/main/packages/reconciler/src/document.ts): `packages/reconciler/src/document.ts`

### Visual editor

- [Editor application](https://github.com/diffusionstudio/editor/blob/main/apps/web/src/app.tsx): `apps/web/src/app.tsx`
- [Canvas and inspector](https://github.com/diffusionstudio/editor/blob/main/apps/web/src/components/canvas/canvas.tsx): `apps/web/src/components/canvas/canvas.tsx`
- [Editor engine](https://github.com/diffusionstudio/editor/blob/main/apps/web/src/engine/create-engine.ts): `apps/web/src/engine/create-engine.ts`
- [Timeline controller](https://github.com/diffusionstudio/editor/blob/main/apps/web/src/engine/timeline/controller.ts): `apps/web/src/engine/timeline/controller.ts`

### Media production

- [Scene renderer](https://github.com/diffusionstudio/editor/blob/main/packages/runtime/src/systems/render.ts): `packages/runtime/src/systems/render.ts`
- [Video export](https://github.com/diffusionstudio/editor/blob/main/packages/encoder/src/encoder.ts): `packages/encoder/src/encoder.ts`
- [Generative assets](https://github.com/diffusionstudio/editor/blob/main/apps/web/src/components/genai/use-generate-image.tsx): `apps/web/src/components/genai/use-generate-image.tsx`
- [Object masking](https://github.com/diffusionstudio/editor/blob/main/apps/web/src/engine/object-mask/index.ts): `apps/web/src/engine/object-mask/index.ts`

### Agent access

- [CLI commands](https://github.com/diffusionstudio/editor/blob/main/apps/cli/src/index.ts): `apps/cli/src/index.ts`
- [MCP tool catalog](https://github.com/diffusionstudio/editor/blob/main/packages/dapi/src/index.ts): `packages/dapi/src/index.ts`
- [Desktop MCP server](https://github.com/diffusionstudio/editor/blob/main/apps/desktop/src/dapi/server.ts): `apps/desktop/src/dapi/server.ts`
- [Agent chat host](https://github.com/diffusionstudio/editor/blob/main/packages/agent-chat/src/host/server.ts): `packages/agent-chat/src/host/server.ts`
- [Media inspection tools](https://github.com/diffusionstudio/editor/blob/main/packages/dapi/src/tools/media-segment.ts): `packages/dapi/src/tools/media-segment.ts`

### Desktop services

- [Desktop application](https://github.com/diffusionstudio/editor/blob/main/apps/desktop/src/main.ts): `apps/desktop/src/main.ts`
- [Desktop IPC bridge](https://github.com/diffusionstudio/editor/blob/main/apps/desktop/src/main-manager.ts): `apps/desktop/src/main-manager.ts`
- [Project management](https://github.com/diffusionstudio/editor/blob/main/apps/desktop/src/projects.ts): `apps/desktop/src/projects.ts`

### Other components

- **User**
- **Coding agent**
- **AI model services**

## Connections

- User → Project files: opens folder (evidence: `README.md`)
- Coding agent → CLI commands: issues commands (evidence: `README.md`)
- Coding agent → Desktop MCP server: uses MCP tools (evidence: `README.md`)
- CLI commands → MCP tool catalog: exposes same tools (evidence: `README.md`)
- Desktop MCP server → MCP tool catalog: serves catalog (evidence: `apps/desktop/src/dapi/server.ts`)
- Desktop MCP server → Media inspection tools: dispatches tools
- Coding agent → Agent chat host: chats with host
- User → Editor application: edits project (evidence: `README.md`)
- Project files → Project composition: stores source (evidence: `README.md`)
- Project composition → Composition mount: compiles and mounts (evidence: `README.md`)
- Composition mount → Editor engine: mounts into runtime (evidence: `README.md`)
- Editor application → Canvas and inspector: presents editor
- Canvas and inspector → Editor engine: edits scene
- Editor engine → Scene renderer: runs render system (evidence: `apps/web/src/engine/create-engine.ts`)
- Editor engine → Timeline controller: runs timeline system (evidence: `apps/web/src/engine/create-engine.ts`)
- Timeline controller → Editor engine: updates view state (evidence: `apps/web/src/engine/timeline/controller.ts`)
- Scene renderer → Video export: provides rendered frames
- Editor engine → Generative assets: composes generated assets (evidence: `README.md`)
- Generative assets → AI model services: requests generation
- Editor engine → Object masking: supports object masks (evidence: `apps/web/src/engine/create-engine.ts`)
- User → Desktop application: opens desktop app (evidence: `README.md`)
- Desktop application → Project management: handles project requests (evidence: `apps/desktop/src/main.ts`)
- Desktop application → Desktop IPC bridge: registers IPC handlers (evidence: `apps/desktop/src/main.ts`)
- Desktop IPC bridge → Desktop application: routes requests (evidence: `apps/desktop/src/main-manager.ts`)
- Desktop application → Desktop MCP server: starts MCP server (evidence: `apps/desktop/src/main.ts`)
- Desktop MCP server → Editor engine: invokes editor tools
- Coding agent → Media inspection tools: inspects footage (evidence: `README.md`)
- User → Video export: renders final video (evidence: `README.md`)