# dvdr-coder/obsidiancut architecture

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

- Interactive diagram: https://gitdiagram.com/dvdr-coder/obsidiancut
- Repository: https://github.com/dvdr-coder/obsidiancut

## Overview

Obsidian Cut is a browser-based multitrack video, slideshow, and audio editor with a Python/FFmpeg rendering backend and a separate HJSON batch-automation tool. The main workflow is to assemble media on a timeline, preview and refine it, then export through the backend; Quick Render offers a simpler export page. The graph preserves documented advanced editing, audio, grading, and automation capabilities. Some subsystem links rely on the README; unsampled implementation details are not inferred.

Main entry points: [`src/App.tsx`](https://github.com/dvdr-coder/obsidiancut/blob/main/src/App.tsx) (Editor App), [`src/components/TimelineEditor.tsx`](https://github.com/dvdr-coder/obsidiancut/blob/main/src/components/TimelineEditor.tsx) (Timeline Editor), [`src/components/PreviewCanvas.tsx`](https://github.com/dvdr-coder/obsidiancut/blob/main/src/components/PreviewCanvas.tsx) (Canvas Preview), [`server.ts`](https://github.com/dvdr-coder/obsidiancut/blob/main/server.ts) (HTTP Gateway)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_editing["Editing Workspace"]
  node_editor["Editor App<br/>[App.tsx]"]
  node_media["Media Bin<br/>[MediaBin.tsx]"]
  node_timeline["Timeline Editor<br/>[TimelineEditor.tsx]"]
  node_inspector["Clip Inspector"]
  node_preview["Canvas Preview<br/>[PreviewCanvas.tsx]"]
  node_types["Editor Data Types<br/>[editor.ts]"]
  node_timeline_math["Timeline Math<br/>[timelineMath.ts]"]
end

subgraph group_studios["Creative Studios"]
  node_title_controls["Title Controls"]
  node_title_renderer["Title Renderer<br/>[titleRenderer.ts]"]
  node_grading["Color Grading"]
  node_plugin_sandbox["Plugin Sandbox<br/>[pluginSandbox.ts]"]
  node_fusion["Fusion VFX"]
  node_keyframes["Keyframe Editor"]
  node_fairlight["Fairlight Audio"]
  node_audio_meter["Audio Meter<br/>[AudioMeterBar.tsx]"]
  node_spectrum["Spectrum Visualizer"]
  node_multimaster["MultiMaster Studio"]
  node_transitions["Transition Library"]
end

subgraph group_rendering["Rendering and Delivery"]
  node_quick_render["Quick Render"]
  node_export["Export Controls<br/>[ExportModal.tsx]"]
  node_gateway["HTTP Gateway<br/>[server.ts]"]
  node_engine["Render Engine<br/>[engine.py]"]
  node_ffmpeg["FFmpeg"]
end

subgraph group_automation["Batch Automation"]
  node_batch_cli["AutoEngine CLI<br/>[cli.py]"]
  node_manifest_parser["HJSON Parser<br/>[hjson_parser.py]"]
  node_batch_wrapper["Batch Wrapper<br/>[wrapper.py]"]
end

node_user(("Editor User"))

node_user -->|"edits in"| node_editor
node_editor -->|"presents"| node_media
node_editor -->|"presents"| node_timeline
node_editor -->|"presents"| node_inspector
node_editor -->|"presents"| node_preview
node_timeline -->|"drives preview"| node_preview
node_editor -->|"uses"| node_types
node_timeline -->|"uses"| node_types
node_timeline -->|"uses"| node_timeline_math
node_inspector -->|"resolves transitions"| node_timeline_math
node_editor -->|"renders export titles"| node_title_renderer
node_title_controls -->|"uses"| node_types
node_preview -->|"evaluates timeline"| node_timeline_math
node_preview -->|"runs sandbox stage"| node_plugin_sandbox
node_grading -->|"sanitizes effects"| node_plugin_sandbox
node_fusion -->|"uses graph editor"| node_keyframes
node_fairlight -->|"shows meters"| node_audio_meter
node_fairlight -->|"shows spectrum"| node_spectrum
node_spectrum -->|"computes bands"| node_timeline_math
node_editor -->|"offers studio"| node_multimaster
node_editor -->|"offers library"| node_transitions
node_editor -->|"offers page"| node_quick_render
node_editor -->|"opens export"| node_export
node_export -->|"submits render"| node_gateway
node_quick_render -->|"submits render"| node_gateway
node_gateway -->|"proxies render jobs"| node_engine
node_engine -->|"renders media"| node_ffmpeg
node_batch_cli -->|"parses manifests"| node_manifest_parser
node_batch_cli -->|"runs batches"| node_batch_wrapper
node_batch_wrapper -->|"uses render engine"| node_engine
node_batch_wrapper -.->|"uploads and submits"| node_gateway

click node_editor "https://github.com/dvdr-coder/obsidiancut/blob/main/src/App.tsx"
click node_media "https://github.com/dvdr-coder/obsidiancut/blob/main/src/components/MediaBin.tsx"
click node_timeline "https://github.com/dvdr-coder/obsidiancut/blob/main/src/components/TimelineEditor.tsx"
click node_inspector "https://github.com/dvdr-coder/obsidiancut/blob/main/src/components/ClipInspectorPanel.tsx"
click node_preview "https://github.com/dvdr-coder/obsidiancut/blob/main/src/components/PreviewCanvas.tsx"
click node_types "https://github.com/dvdr-coder/obsidiancut/blob/main/src/types/editor.ts"
click node_timeline_math "https://github.com/dvdr-coder/obsidiancut/blob/main/src/utils/timelineMath.ts"
click node_title_controls "https://github.com/dvdr-coder/obsidiancut/blob/main/src/components/TitleStyleControls.tsx"
click node_title_renderer "https://github.com/dvdr-coder/obsidiancut/blob/main/src/utils/titleRenderer.ts"
click node_grading "https://github.com/dvdr-coder/obsidiancut/blob/main/src/components/ColorGradingPlugin.tsx"
click node_plugin_sandbox "https://github.com/dvdr-coder/obsidiancut/blob/main/src/utils/pluginSandbox.ts"
click node_fusion "https://github.com/dvdr-coder/obsidiancut/blob/main/src/components/FusionVfxStudio.tsx"
click node_keyframes "https://github.com/dvdr-coder/obsidiancut/blob/main/src/components/KeyframeGraphEditor.tsx"
click node_fairlight "https://github.com/dvdr-coder/obsidiancut/blob/main/src/components/FairlightAudioStudio.tsx"
click node_audio_meter "https://github.com/dvdr-coder/obsidiancut/blob/main/src/components/AudioMeterBar.tsx"
click node_spectrum "https://github.com/dvdr-coder/obsidiancut/blob/main/src/components/AudioSpectrumVisualizer.tsx"
click node_multimaster "https://github.com/dvdr-coder/obsidiancut/blob/main/src/components/MultiMasterEditStudio.tsx"
click node_transitions "https://github.com/dvdr-coder/obsidiancut/blob/main/src/components/TransitionLibraryPanel.tsx"
click node_quick_render "https://github.com/dvdr-coder/obsidiancut/blob/main/src/components/QuickRenderPage.tsx"
click node_export "https://github.com/dvdr-coder/obsidiancut/blob/main/src/components/ExportModal.tsx"
click node_gateway "https://github.com/dvdr-coder/obsidiancut/blob/main/server.ts"
click node_engine "https://github.com/dvdr-coder/obsidiancut/blob/main/backend/engine.py"
click node_batch_cli "https://github.com/dvdr-coder/obsidiancut/blob/main/autoengine/cli.py"
click node_manifest_parser "https://github.com/dvdr-coder/obsidiancut/blob/main/autoengine/hjson_parser.py"
click node_batch_wrapper "https://github.com/dvdr-coder/obsidiancut/blob/main/autoengine/wrapper.py"

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_editor,node_media,node_timeline,node_inspector,node_preview,node_types,node_timeline_math,node_user toneBlue
class node_title_controls,node_title_renderer,node_grading,node_plugin_sandbox,node_fusion,node_keyframes,node_fairlight,node_audio_meter,node_spectrum,node_multimaster,node_transitions toneAmber
class node_quick_render,node_export,node_gateway,node_engine,node_ffmpeg toneMint
class node_batch_cli,node_manifest_parser,node_batch_wrapper toneRose
```

## Components

### Editing Workspace

- [Editor App](https://github.com/dvdr-coder/obsidiancut/blob/main/src/App.tsx): `src/App.tsx`
- [Media Bin](https://github.com/dvdr-coder/obsidiancut/blob/main/src/components/MediaBin.tsx): `src/components/MediaBin.tsx`
- [Timeline Editor](https://github.com/dvdr-coder/obsidiancut/blob/main/src/components/TimelineEditor.tsx): `src/components/TimelineEditor.tsx`
- [Clip Inspector](https://github.com/dvdr-coder/obsidiancut/blob/main/src/components/ClipInspectorPanel.tsx): `src/components/ClipInspectorPanel.tsx`
- [Canvas Preview](https://github.com/dvdr-coder/obsidiancut/blob/main/src/components/PreviewCanvas.tsx): `src/components/PreviewCanvas.tsx`
- [Editor Data Types](https://github.com/dvdr-coder/obsidiancut/blob/main/src/types/editor.ts): `src/types/editor.ts`
- [Timeline Math](https://github.com/dvdr-coder/obsidiancut/blob/main/src/utils/timelineMath.ts): `src/utils/timelineMath.ts`

### Creative Studios

- [Title Controls](https://github.com/dvdr-coder/obsidiancut/blob/main/src/components/TitleStyleControls.tsx): `src/components/TitleStyleControls.tsx`
- [Title Renderer](https://github.com/dvdr-coder/obsidiancut/blob/main/src/utils/titleRenderer.ts): `src/utils/titleRenderer.ts`
- [Color Grading](https://github.com/dvdr-coder/obsidiancut/blob/main/src/components/ColorGradingPlugin.tsx): `src/components/ColorGradingPlugin.tsx`
- [Plugin Sandbox](https://github.com/dvdr-coder/obsidiancut/blob/main/src/utils/pluginSandbox.ts): `src/utils/pluginSandbox.ts`
- [Fusion VFX](https://github.com/dvdr-coder/obsidiancut/blob/main/src/components/FusionVfxStudio.tsx): `src/components/FusionVfxStudio.tsx`
- [Keyframe Editor](https://github.com/dvdr-coder/obsidiancut/blob/main/src/components/KeyframeGraphEditor.tsx): `src/components/KeyframeGraphEditor.tsx`
- [Fairlight Audio](https://github.com/dvdr-coder/obsidiancut/blob/main/src/components/FairlightAudioStudio.tsx): `src/components/FairlightAudioStudio.tsx`
- [Audio Meter](https://github.com/dvdr-coder/obsidiancut/blob/main/src/components/AudioMeterBar.tsx): `src/components/AudioMeterBar.tsx`
- [Spectrum Visualizer](https://github.com/dvdr-coder/obsidiancut/blob/main/src/components/AudioSpectrumVisualizer.tsx): `src/components/AudioSpectrumVisualizer.tsx`
- [MultiMaster Studio](https://github.com/dvdr-coder/obsidiancut/blob/main/src/components/MultiMasterEditStudio.tsx): `src/components/MultiMasterEditStudio.tsx`
- [Transition Library](https://github.com/dvdr-coder/obsidiancut/blob/main/src/components/TransitionLibraryPanel.tsx): `src/components/TransitionLibraryPanel.tsx`

### Rendering and Delivery

- [Quick Render](https://github.com/dvdr-coder/obsidiancut/blob/main/src/components/QuickRenderPage.tsx): `src/components/QuickRenderPage.tsx`
- [Export Controls](https://github.com/dvdr-coder/obsidiancut/blob/main/src/components/ExportModal.tsx): `src/components/ExportModal.tsx`
- [HTTP Gateway](https://github.com/dvdr-coder/obsidiancut/blob/main/server.ts): `server.ts`
- [Render Engine](https://github.com/dvdr-coder/obsidiancut/blob/main/backend/engine.py): `backend/engine.py`
- **FFmpeg**

### Batch Automation

- [AutoEngine CLI](https://github.com/dvdr-coder/obsidiancut/blob/main/autoengine/cli.py): `autoengine/cli.py`
- [HJSON Parser](https://github.com/dvdr-coder/obsidiancut/blob/main/autoengine/hjson_parser.py): `autoengine/hjson_parser.py`
- [Batch Wrapper](https://github.com/dvdr-coder/obsidiancut/blob/main/autoengine/wrapper.py): `autoengine/wrapper.py`

### Other components

- **Editor User**

## Connections

- Editor User → Editor App: edits in (evidence: `README.md`)
- Editor App → Media Bin: presents (evidence: `src/App.tsx`)
- Editor App → Timeline Editor: presents (evidence: `src/App.tsx`)
- Editor App → Clip Inspector: presents (evidence: `src/App.tsx`)
- Editor App → Canvas Preview: presents (evidence: `src/App.tsx`)
- Timeline Editor → Canvas Preview: drives preview (evidence: `README.md`)
- Editor App → Editor Data Types: uses (evidence: `src/App.tsx`)
- Timeline Editor → Editor Data Types: uses (evidence: `src/components/TimelineEditor.tsx`)
- Timeline Editor → Timeline Math: uses (evidence: `src/components/TimelineEditor.tsx`)
- Clip Inspector → Timeline Math: resolves transitions (evidence: `src/components/ClipInspectorPanel.tsx`)
- Editor App → Title Renderer: renders export titles (evidence: `src/App.tsx`)
- Title Controls → Editor Data Types: uses (evidence: `src/components/TitleStyleControls.tsx`)
- Canvas Preview → Timeline Math: evaluates timeline (evidence: `src/components/PreviewCanvas.tsx`)
- Canvas Preview → Plugin Sandbox: runs sandbox stage (evidence: `src/components/PreviewCanvas.tsx`)
- Color Grading → Plugin Sandbox: sanitizes effects (evidence: `src/components/ColorGradingPlugin.tsx`)
- Fusion VFX → Keyframe Editor: uses graph editor (evidence: `src/components/FusionVfxStudio.tsx`)
- Fairlight Audio → Audio Meter: shows meters (evidence: `src/components/FairlightAudioStudio.tsx`)
- Fairlight Audio → Spectrum Visualizer: shows spectrum (evidence: `src/components/FairlightAudioStudio.tsx`)
- Spectrum Visualizer → Timeline Math: computes bands (evidence: `src/components/AudioSpectrumVisualizer.tsx`)
- Editor App → MultiMaster Studio: offers studio (evidence: `src/App.tsx`)
- Editor App → Transition Library: offers library (evidence: `src/App.tsx`)
- Editor App → Quick Render: offers page (evidence: `src/App.tsx`)
- Editor App → Export Controls: opens export (evidence: `src/App.tsx`)
- Export Controls → HTTP Gateway: submits render (evidence: `README.md`)
- Quick Render → HTTP Gateway: submits render (evidence: `README.md`)
- HTTP Gateway → Render Engine: proxies render jobs (evidence: `README.md`)
- Render Engine → FFmpeg: renders media (evidence: `README.md`)
- AutoEngine CLI → HJSON Parser: parses manifests (evidence: `autoengine/cli.py`)
- AutoEngine CLI → Batch Wrapper: runs batches (evidence: `autoengine/cli.py`)
- Batch Wrapper → Render Engine: uses render engine (evidence: `autoengine/wrapper.py`)
- Batch Wrapper → HTTP Gateway: uploads and submits (evidence: `autoengine/wrapper.py`)