# alyssaxuu/screenity architecture

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

- Interactive diagram: https://gitdiagram.com/alyssaxuu/screenity
- Repository: https://github.com/alyssaxuu/screenity

## Overview

Screenity is a Chrome screen-recording and annotation extension. Its main workflow is configuring a capture in the extension UI, starting and controlling capture through the background process, recording media locally or through the cloud recorder, then playing, editing, and exporting the result. The README also documents camera effects, drawing and blur tools, alarms, and Google Drive saving. The tree and sampled handlers support the major components, but many runtime links are not shown in the excerpts; uncertain wiring is omitted.

Main entry points: [`src/pages/Background/messaging/handlers.js`](https://github.com/alyssaxuu/screenity/blob/master/src/pages/Background/messaging/handlers.js) (Message handlers), [`src/pages/Content/Content.jsx`](https://github.com/alyssaxuu/screenity/blob/master/src/pages/Content/Content.jsx) (Capture UI), [`src/pages/Background/recording/startRecording.js`](https://github.com/alyssaxuu/screenity/blob/master/src/pages/Background/recording/startRecording.js) (Capture orchestration), [`src/pages/Recorder/Recorder.jsx`](https://github.com/alyssaxuu/screenity/blob/master/src/pages/Recorder/Recorder.jsx) (Local recorder)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_interface["Extension interface"]
  node_content["Capture UI<br/>[Content.jsx]"]
  node_popup["Settings popup<br/>[PopupContainer.jsx]"]
  node_annotations["Annotations<br/>[Canvas.jsx]"]
  node_camera["Camera effects<br/>[Camera.jsx]"]
end

subgraph group_capture["Capture and recording"]
  node_captureflow["Capture orchestration<br/>[startRecording.js]"]
  node_captureutils["Media acquisition"]
  node_recorder["Local recorder<br/>[Recorder.jsx]"]
  node_cloudrecorder["Cloud recorder<br/>[CloudRecorder.jsx]"]
end

subgraph group_media["Media and editing"]
  node_chunks[("Chunk storage<br/>[chooseWriter.js]")]
  node_editor["Editor interface<br/>[EditorApp.jsx]"]
  node_editorops["Editor operations<br/>[editorOps.js]"]
  node_transforms["Video transforms<br/>[videoConverter.ts]"]
  node_download["Download page<br/>[Download.jsx]"]
end

subgraph group_platform["Extension services"]
  node_background["Background process<br/>[index.js]"]
  node_bgmessages["Message handlers<br/>[handlers.js]"]
  node_alarms["Recording alarms<br/>[handleAlarm.js]"]
end

subgraph group_cloud["Cloud features"]
  node_drive["Drive saving"]
  node_micupload["Separated audio upload"]
end

node_user(("User"))
node_chrome["Chrome extension APIs"]
node_cloudservice["Screenity services"]

node_user -->|"configures"| node_popup
node_user -->|"starts capture"| node_content
node_user -->|"annotates"| node_annotations
node_popup -->|"sets options"| node_content
node_content -->|"sends commands"| node_bgmessages
node_bgmessages -->|"starts recording"| node_captureflow
node_bgmessages -->|"acquires stream"| node_captureutils
node_captureflow -->|"starts local capture"| node_recorder
node_captureflow -->|"starts cloud capture"| node_cloudrecorder
node_recorder -->|"writes chunks"| node_chunks
node_cloudrecorder -->|"stores media"| node_chunks
node_cloudrecorder -->|"uploads audio"| node_micupload
node_micupload -.->|"posts audio"| node_cloudservice
node_recorder -->|"reports completion"| node_bgmessages
node_bgmessages -->|"opens editor"| node_editor
node_editor -->|"requests edits"| node_editorops
node_editorops -->|"processes video"| node_transforms
node_editor -->|"reads recording"| node_chunks
node_user -->|"exports"| node_download
node_bgmessages -->|"handles alarms"| node_alarms
node_bgmessages -->|"saves to Drive"| node_drive
node_drive -.->|"uploads video"| node_cloudservice
node_background -->|"registers handlers"| node_bgmessages
node_background -->|"uses extension APIs"| node_chrome
node_content -->|"reads settings"| node_chrome
node_camera -->|"uses camera APIs"| node_chrome

click node_content "https://github.com/alyssaxuu/screenity/blob/master/src/pages/Content/Content.jsx"
click node_popup "https://github.com/alyssaxuu/screenity/blob/master/src/pages/Content/popup/PopupContainer.jsx"
click node_annotations "https://github.com/alyssaxuu/screenity/blob/master/src/pages/Content/canvas/Canvas.jsx"
click node_camera "https://github.com/alyssaxuu/screenity/blob/master/src/pages/Camera/Camera.jsx"
click node_background "https://github.com/alyssaxuu/screenity/blob/master/src/pages/Background/index.js"
click node_bgmessages "https://github.com/alyssaxuu/screenity/blob/master/src/pages/Background/messaging/handlers.js"
click node_alarms "https://github.com/alyssaxuu/screenity/blob/master/src/pages/Background/alarms/handleAlarm.js"
click node_captureflow "https://github.com/alyssaxuu/screenity/blob/master/src/pages/Background/recording/startRecording.js"
click node_captureutils "https://github.com/alyssaxuu/screenity/blob/master/src/pages/utils/acquireDisplayMedia.js"
click node_recorder "https://github.com/alyssaxuu/screenity/blob/master/src/pages/Recorder/Recorder.jsx"
click node_cloudrecorder "https://github.com/alyssaxuu/screenity/blob/master/src/pages/CloudRecorder/CloudRecorder.jsx"
click node_chunks "https://github.com/alyssaxuu/screenity/blob/master/src/pages/Recorder/recorderStorage/chooseWriter.js"
click node_editor "https://github.com/alyssaxuu/screenity/blob/master/src/pages/EditorApp/EditorApp.jsx"
click node_editorops "https://github.com/alyssaxuu/screenity/blob/master/src/pages/EditorApp/editorOps.js"
click node_transforms "https://github.com/alyssaxuu/screenity/blob/master/src/pages/Editor/mediabunny/lib/videoConverter.ts"
click node_download "https://github.com/alyssaxuu/screenity/blob/master/src/pages/Download/Download.jsx"
click node_drive "https://github.com/alyssaxuu/screenity/blob/master/src/pages/Background/drive/handleSaveToDrive.js"
click node_micupload "https://github.com/alyssaxuu/screenity/blob/master/src/pages/CloudRecorder/uploadMicToStorage.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_content,node_popup,node_annotations,node_camera,node_user,node_cloudservice toneBlue
class node_captureflow,node_captureutils,node_recorder,node_cloudrecorder toneAmber
class node_chunks,node_editor,node_editorops,node_transforms,node_download,node_chrome toneMint
class node_background,node_bgmessages,node_alarms toneRose
class node_drive,node_micupload toneIndigo
```

## Components

### Extension interface

- [Capture UI](https://github.com/alyssaxuu/screenity/blob/master/src/pages/Content/Content.jsx): `src/pages/Content/Content.jsx`
- [Settings popup](https://github.com/alyssaxuu/screenity/blob/master/src/pages/Content/popup/PopupContainer.jsx): `src/pages/Content/popup/PopupContainer.jsx`
- [Annotations](https://github.com/alyssaxuu/screenity/blob/master/src/pages/Content/canvas/Canvas.jsx): `src/pages/Content/canvas/Canvas.jsx`
- [Camera effects](https://github.com/alyssaxuu/screenity/blob/master/src/pages/Camera/Camera.jsx): `src/pages/Camera/Camera.jsx`

### Capture and recording

- [Capture orchestration](https://github.com/alyssaxuu/screenity/blob/master/src/pages/Background/recording/startRecording.js): `src/pages/Background/recording/startRecording.js`
- [Media acquisition](https://github.com/alyssaxuu/screenity/blob/master/src/pages/utils/acquireDisplayMedia.js): `src/pages/utils/acquireDisplayMedia.js`
- [Local recorder](https://github.com/alyssaxuu/screenity/blob/master/src/pages/Recorder/Recorder.jsx): `src/pages/Recorder/Recorder.jsx`
- [Cloud recorder](https://github.com/alyssaxuu/screenity/blob/master/src/pages/CloudRecorder/CloudRecorder.jsx): `src/pages/CloudRecorder/CloudRecorder.jsx`

### Media and editing

- [Chunk storage](https://github.com/alyssaxuu/screenity/blob/master/src/pages/Recorder/recorderStorage/chooseWriter.js): `src/pages/Recorder/recorderStorage/chooseWriter.js`
- [Editor interface](https://github.com/alyssaxuu/screenity/blob/master/src/pages/EditorApp/EditorApp.jsx): `src/pages/EditorApp/EditorApp.jsx`
- [Editor operations](https://github.com/alyssaxuu/screenity/blob/master/src/pages/EditorApp/editorOps.js): `src/pages/EditorApp/editorOps.js`
- [Video transforms](https://github.com/alyssaxuu/screenity/blob/master/src/pages/Editor/mediabunny/lib/videoConverter.ts): `src/pages/Editor/mediabunny/lib/videoConverter.ts`
- [Download page](https://github.com/alyssaxuu/screenity/blob/master/src/pages/Download/Download.jsx): `src/pages/Download/Download.jsx`

### Extension services

- [Background process](https://github.com/alyssaxuu/screenity/blob/master/src/pages/Background/index.js): `src/pages/Background/index.js`
- [Message handlers](https://github.com/alyssaxuu/screenity/blob/master/src/pages/Background/messaging/handlers.js): `src/pages/Background/messaging/handlers.js`
- [Recording alarms](https://github.com/alyssaxuu/screenity/blob/master/src/pages/Background/alarms/handleAlarm.js): `src/pages/Background/alarms/handleAlarm.js`

### Cloud features

- [Drive saving](https://github.com/alyssaxuu/screenity/blob/master/src/pages/Background/drive/handleSaveToDrive.js): `src/pages/Background/drive/handleSaveToDrive.js`
- [Separated audio upload](https://github.com/alyssaxuu/screenity/blob/master/src/pages/CloudRecorder/uploadMicToStorage.js): `src/pages/CloudRecorder/uploadMicToStorage.js`

### Other components

- **User**
- **Chrome extension APIs**
- **Screenity services**

## Connections

- User → Settings popup: configures
- User → Capture UI: starts capture
- User → Annotations: annotates
- Settings popup → Capture UI: sets options
- Capture UI → Message handlers: sends commands
- Message handlers → Capture orchestration: starts recording
- Message handlers → Media acquisition: acquires stream
- Capture orchestration → Local recorder: starts local capture
- Capture orchestration → Cloud recorder: starts cloud capture
- Local recorder → Chunk storage: writes chunks
- Cloud recorder → Chunk storage: stores media
- Cloud recorder → Separated audio upload: uploads audio
- Separated audio upload → Screenity services: posts audio
- Local recorder → Message handlers: reports completion
- Message handlers → Editor interface: opens editor
- Editor interface → Editor operations: requests edits
- Editor operations → Video transforms: processes video
- Editor interface → Chunk storage: reads recording
- User → Download page: exports
- Message handlers → Recording alarms: handles alarms
- Message handlers → Drive saving: saves to Drive
- Drive saving → Screenity services: uploads video
- Background process → Message handlers: registers handlers
- Background process → Chrome extension APIs: uses extension APIs
- Capture UI → Chrome extension APIs: reads settings
- Camera effects → Chrome extension APIs: uses camera APIs