# cyprien63/recordly architecture

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

- Interactive diagram: https://gitdiagram.com/cyprien63/recordly
- Repository: https://github.com/cyprien63/recordly

## Overview

Recordly is an Electron desktop screen recorder and video editor. The main workflow starts with choosing a screen or window, recording media, opening the capture in the editor, editing its timeline and presentation, saving a project, and exporting MP4 or GIF. The graph separates the renderer’s editing/export layers from Electron’s capture and persistence services, and includes documented captioning and extension capabilities. Wiring is based on the README and sampled excerpts; some feature nodes are documented subsystems whose internal connections were not sampled.

Main entry points: [`src/components/video-editor/VideoEditor.tsx`](https://github.com/cyprien63/recordly/blob/main/src/components/video-editor/VideoEditor.tsx) (Video editor), [`electron/ipc/handlers.ts`](https://github.com/cyprien63/recordly/blob/main/electron/ipc/handlers.ts) (IPC handlers), [`electron/ipc/recording`](https://github.com/cyprien63/recordly/tree/main/electron/ipc/recording) (Recording pipeline), [`src/components/video-editor/export/useEditorExportController.ts`](https://github.com/cyprien63/recordly/blob/main/src/components/video-editor/export/useEditorExportController.ts) (Export controller)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_capture["Recording"]
  node_launch["Recording controls<br/>[LaunchWindow.tsx]"]
  node_recording["Recording pipeline"]
  node_nativecapture["Native capture"]
  node_rawmedia["Recorded media"]
end

subgraph group_editor["Editing"]
  node_editor["Video editor<br/>[VideoEditor.tsx]"]
  node_timeline["Timeline editing"]
  node_presentation["Motion and styling"]
  node_webcam["Webcam overlay<br/>[webcamOverlay.ts]"]
  node_captions["Auto captions"]
  node_project["Project lifecycle"]
  node_extensions["Extensions"]
end

subgraph group_output["Export and sharing"]
  node_exportcontrol["Export controller"]
  node_renderer["Media renderer"]
  node_outputfile["MP4 or GIF"]
  node_share["Cloud sharing<br/>[cloudShare.ts]"]
end

subgraph group_runtime["Desktop runtime"]
  node_projectstore[("Project files")]
  node_exportservice["Export service"]
  node_ipc["IPC handlers<br/>[handlers.ts]"]
  node_shareweb["Share service<br/>[index.js]"]
end

node_creator(("Creator"))

node_creator -->|"chooses sources"| node_launch
node_launch -->|"requests recording"| node_ipc
node_ipc -->|"dispatches capture"| node_recording
node_recording -->|"uses platform capture"| node_nativecapture
node_recording -->|"writes recording"| node_rawmedia
node_rawmedia -->|"opens media"| node_editor
node_editor -->|"edits regions"| node_timeline
node_editor -->|"configures appearance"| node_presentation
node_editor -->|"configures overlay"| node_webcam
node_editor -->|"generates captions"| node_captions
node_captions -->|"requests transcription"| node_ipc
node_editor -->|"manages project"| node_project
node_project -->|"saves or loads"| node_ipc
node_ipc -->|"reads and writes"| node_projectstore
node_editor -->|"starts export"| node_exportcontrol
node_exportcontrol -->|"configures render"| node_renderer
node_renderer -.->|"routes native export"| node_exportservice
node_exportcontrol -->|"produces export"| node_outputfile
node_editor -->|"manages extensions"| node_extensions
node_editor -.->|"initiates sharing"| node_share
node_share -.->|"dispatches requests"| node_ipc
node_ipc -.->|"calls service"| node_shareweb

click node_launch "https://github.com/cyprien63/recordly/blob/main/src/components/launch/LaunchWindow.tsx"
click node_recording "https://github.com/cyprien63/recordly/tree/main/electron/ipc/recording"
click node_nativecapture "https://github.com/cyprien63/recordly/tree/main/electron/native"
click node_editor "https://github.com/cyprien63/recordly/blob/main/src/components/video-editor/VideoEditor.tsx"
click node_timeline "https://github.com/cyprien63/recordly/tree/main/src/components/video-editor/timeline"
click node_presentation "https://github.com/cyprien63/recordly/tree/main/src/components/video-editor/videoPlayback"
click node_webcam "https://github.com/cyprien63/recordly/blob/main/src/components/video-editor/webcamOverlay.ts"
click node_captions "https://github.com/cyprien63/recordly/blob/main/src/components/video-editor/captions/useAutoCaptionController.ts"
click node_project "https://github.com/cyprien63/recordly/blob/main/src/components/video-editor/project/useEditorProjectController.ts"
click node_projectstore "https://github.com/cyprien63/recordly/tree/main/electron/ipc/project"
click node_exportcontrol "https://github.com/cyprien63/recordly/blob/main/src/components/video-editor/export/useEditorExportController.ts"
click node_renderer "https://github.com/cyprien63/recordly/tree/main/src/lib/exporter"
click node_exportservice "https://github.com/cyprien63/recordly/tree/main/electron/ipc/export"
click node_ipc "https://github.com/cyprien63/recordly/blob/main/electron/ipc/handlers.ts"
click node_extensions "https://github.com/cyprien63/recordly/blob/main/src/components/video-editor/ExtensionManager.tsx"
click node_share "https://github.com/cyprien63/recordly/blob/main/electron/ipc/register/cloudShare.ts"
click node_shareweb "https://github.com/cyprien63/recordly/blob/main/services/recordly-share/worker/src/index.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_launch,node_recording,node_nativecapture,node_rawmedia toneBlue
class node_editor,node_timeline,node_presentation,node_webcam,node_captions,node_project,node_extensions toneAmber
class node_exportcontrol,node_renderer,node_outputfile,node_share toneMint
class node_projectstore,node_exportservice,node_ipc,node_shareweb toneRose
class node_creator toneIndigo
```

## Components

### Recording

- [Recording controls](https://github.com/cyprien63/recordly/blob/main/src/components/launch/LaunchWindow.tsx): `src/components/launch/LaunchWindow.tsx`
- [Recording pipeline](https://github.com/cyprien63/recordly/tree/main/electron/ipc/recording): `electron/ipc/recording`
- [Native capture](https://github.com/cyprien63/recordly/tree/main/electron/native): `electron/native`
- **Recorded media**

### Editing

- [Video editor](https://github.com/cyprien63/recordly/blob/main/src/components/video-editor/VideoEditor.tsx): `src/components/video-editor/VideoEditor.tsx`
- [Timeline editing](https://github.com/cyprien63/recordly/tree/main/src/components/video-editor/timeline): `src/components/video-editor/timeline`
- [Motion and styling](https://github.com/cyprien63/recordly/tree/main/src/components/video-editor/videoPlayback): `src/components/video-editor/videoPlayback`
- [Webcam overlay](https://github.com/cyprien63/recordly/blob/main/src/components/video-editor/webcamOverlay.ts): `src/components/video-editor/webcamOverlay.ts`
- [Auto captions](https://github.com/cyprien63/recordly/blob/main/src/components/video-editor/captions/useAutoCaptionController.ts): `src/components/video-editor/captions/useAutoCaptionController.ts`
- [Project lifecycle](https://github.com/cyprien63/recordly/blob/main/src/components/video-editor/project/useEditorProjectController.ts): `src/components/video-editor/project/useEditorProjectController.ts`
- [Extensions](https://github.com/cyprien63/recordly/blob/main/src/components/video-editor/ExtensionManager.tsx): `src/components/video-editor/ExtensionManager.tsx`

### Export and sharing

- [Export controller](https://github.com/cyprien63/recordly/blob/main/src/components/video-editor/export/useEditorExportController.ts): `src/components/video-editor/export/useEditorExportController.ts`
- [Media renderer](https://github.com/cyprien63/recordly/tree/main/src/lib/exporter): `src/lib/exporter`
- **MP4 or GIF**
- [Cloud sharing](https://github.com/cyprien63/recordly/blob/main/electron/ipc/register/cloudShare.ts): `electron/ipc/register/cloudShare.ts`

### Desktop runtime

- [Project files](https://github.com/cyprien63/recordly/tree/main/electron/ipc/project): `electron/ipc/project`
- [Export service](https://github.com/cyprien63/recordly/tree/main/electron/ipc/export): `electron/ipc/export`
- [IPC handlers](https://github.com/cyprien63/recordly/blob/main/electron/ipc/handlers.ts): `electron/ipc/handlers.ts`
- [Share service](https://github.com/cyprien63/recordly/blob/main/services/recordly-share/worker/src/index.js): `services/recordly-share/worker/src/index.js`

### Other components

- **Creator**

## Connections

- Creator → Recording controls: chooses sources
- Recording controls → IPC handlers: requests recording
- IPC handlers → Recording pipeline: dispatches capture
- Recording pipeline → Native capture: uses platform capture
- Recording pipeline → Recorded media: writes recording
- Recorded media → Video editor: opens media
- Video editor → Timeline editing: edits regions
- Video editor → Motion and styling: configures appearance
- Video editor → Webcam overlay: configures overlay
- Video editor → Auto captions: generates captions
- Auto captions → IPC handlers: requests transcription
- Video editor → Project lifecycle: manages project
- Project lifecycle → IPC handlers: saves or loads
- IPC handlers → Project files: reads and writes
- Video editor → Export controller: starts export
- Export controller → Media renderer: configures render
- Media renderer → Export service: routes native export
- Export controller → MP4 or GIF: produces export
- Video editor → Extensions: manages extensions
- Video editor → Cloud sharing: initiates sharing
- Cloud sharing → IPC handlers: dispatches requests
- IPC handlers → Share service: calls service