# numpy-byte/codeframe architecture

> Architecture diagram of the GitHub repository numpy-byte/codeframe, 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/numpy-byte/codeframe
- Repository: https://github.com/numpy-byte/codeframe

## Overview

CodeFrame is a desktop code-to-image app. The main workflow is to capture clipboard content or enter code in the sidebar, configure its appearance, render a preview, then copy or save the result. The graph also preserves documented export formats, global-hotkey capture, settings persistence, and preview controls. The README documents several capabilities whose implementation is not shown in the excerpts; their links are included only where the documented workflow supports them.

Main entry points: [`app.py`](https://github.com/numpy-byte/codeframe/blob/main/app.py) (Desktop app), [`core/clipboard.py`](https://github.com/numpy-byte/codeframe/blob/main/core/clipboard.py) (Clipboard reader), [`ui/sidebar.py`](https://github.com/numpy-byte/codeframe/blob/main/ui/sidebar.py) (Source controls), [`core/renderer.py`](https://github.com/numpy-byte/codeframe/blob/main/core/renderer.py) (Code renderer)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_capture["Capture and input"]
  node_desktop_app["Desktop app<br/>[app.py]"]
  node_clipboard_reader["Clipboard reader<br/>[clipboard.py]"]
  node_source_controls["Source controls<br/>[sidebar.py]"]
  node_hotkey["Global hotkey<br/>[app.py]"]
end

subgraph group_customize["Customize and preview"]
  node_render_controls["Render controls<br/>[sidebar.py]"]
  node_preview["Live preview<br/>[preview.py]"]
end

subgraph group_output["Rendering and export"]
  node_renderer["Code renderer<br/>[renderer.py]"]
  node_exporter["Image exporter<br/>[exporter.py]"]
end

subgraph group_preferences["Preferences"]
  node_preferences[("User preferences<br/>[config.py]")]
end

node_user(("User"))
node_editor["Code editor"]
node_system_clipboard["System clipboard"]
node_saved_file["Exported image"]

node_user -->|"copies code"| node_editor
node_editor -->|"writes text"| node_system_clipboard
node_user -->|"operates"| node_desktop_app
node_system_clipboard -->|"provides content"| node_clipboard_reader
node_desktop_app -->|"reads clipboard"| node_clipboard_reader
node_clipboard_reader -->|"returns payload"| node_desktop_app
node_user -->|"presses shortcut"| node_hotkey
node_hotkey -->|"queues snap"| node_desktop_app
node_user -->|"enters code"| node_source_controls
node_source_controls -->|"provides source"| node_desktop_app
node_user -->|"adjusts options"| node_render_controls
node_render_controls -->|"signals changes"| node_desktop_app
node_desktop_app -->|"renders source"| node_renderer
node_renderer -->|"returns image"| node_desktop_app
node_desktop_app -->|"sets preview image"| node_preview
node_user -->|"selects zoom"| node_preview
node_user -->|"requests export"| node_desktop_app
node_desktop_app -->|"exports image"| node_exporter
node_exporter -->|"writes PNG, JPEG, or SVG"| node_saved_file
node_desktop_app -->|"copies image"| node_system_clipboard
node_desktop_app -->|"loads and saves settings"| node_preferences

click node_desktop_app "https://github.com/numpy-byte/codeframe/blob/main/app.py"
click node_clipboard_reader "https://github.com/numpy-byte/codeframe/blob/main/core/clipboard.py"
click node_source_controls "https://github.com/numpy-byte/codeframe/blob/main/ui/sidebar.py"
click node_hotkey "https://github.com/numpy-byte/codeframe/blob/main/app.py"
click node_render_controls "https://github.com/numpy-byte/codeframe/blob/main/ui/sidebar.py"
click node_preview "https://github.com/numpy-byte/codeframe/blob/main/ui/preview.py"
click node_renderer "https://github.com/numpy-byte/codeframe/blob/main/core/renderer.py"
click node_exporter "https://github.com/numpy-byte/codeframe/blob/main/core/exporter.py"
click node_preferences "https://github.com/numpy-byte/codeframe/blob/main/utils/config.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_desktop_app,node_clipboard_reader,node_source_controls,node_hotkey,node_user toneBlue
class node_render_controls,node_preview toneAmber
class node_renderer,node_exporter toneMint
class node_preferences toneRose
class node_editor,node_system_clipboard,node_saved_file toneIndigo
```

## Components

### Capture and input

- [Desktop app](https://github.com/numpy-byte/codeframe/blob/main/app.py): `app.py`
- [Clipboard reader](https://github.com/numpy-byte/codeframe/blob/main/core/clipboard.py): `core/clipboard.py`
- [Source controls](https://github.com/numpy-byte/codeframe/blob/main/ui/sidebar.py): `ui/sidebar.py`
- [Global hotkey](https://github.com/numpy-byte/codeframe/blob/main/app.py): `app.py`

### Customize and preview

- [Render controls](https://github.com/numpy-byte/codeframe/blob/main/ui/sidebar.py): `ui/sidebar.py`
- [Live preview](https://github.com/numpy-byte/codeframe/blob/main/ui/preview.py): `ui/preview.py`

### Rendering and export

- [Code renderer](https://github.com/numpy-byte/codeframe/blob/main/core/renderer.py): `core/renderer.py`
- [Image exporter](https://github.com/numpy-byte/codeframe/blob/main/core/exporter.py): `core/exporter.py`

### Preferences

- [User preferences](https://github.com/numpy-byte/codeframe/blob/main/utils/config.py): `utils/config.py`

### Other components

- **User**
- **Code editor**
- **System clipboard**
- **Exported image**

## Connections

- User → Code editor: copies code
- Code editor → System clipboard: writes text
- User → Desktop app: operates
- System clipboard → Clipboard reader: provides content
- Desktop app → Clipboard reader: reads clipboard
- Clipboard reader → Desktop app: returns payload
- User → Global hotkey: presses shortcut
- Global hotkey → Desktop app: queues snap
- User → Source controls: enters code
- Source controls → Desktop app: provides source
- User → Render controls: adjusts options
- Render controls → Desktop app: signals changes
- Desktop app → Code renderer: renders source
- Code renderer → Desktop app: returns image
- Desktop app → Live preview: sets preview image
- User → Live preview: selects zoom
- User → Desktop app: requests export
- Desktop app → Image exporter: exports image
- Image exporter → Exported image: writes PNG, JPEG, or SVG
- Desktop app → System clipboard: copies image
- Desktop app → User preferences: loads and saves settings