# p2r3/convert architecture

> Architecture diagram of the GitHub repository p2r3/convert, 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/p2r3/convert
- Repository: https://github.com/p2r3/convert
- Video tour (about a minute): https://gitdiagram.com/p2r3/convert/video

## Overview

Convert.to.it is a browser-based universal file converter. Users add a file, choose or accept a detected input format, select an output format, and convert; the runtime searches for a chain of handlers and attempts it step by step, then the UI offers the resulting file for download. The graph captures this workflow plus handler registration, format metadata, and the documented format-search capabilities. The README and sampled source support the main orchestration; unsampled converter and graph internals are represented only at their documented entry points.

Main entry points: [`src/ui/pages/Conversion/index.tsx`](https://github.com/p2r3/convert/blob/master/src/ui/pages/Conversion/index.tsx) (Format selection), [`src/main.ts`](https://github.com/p2r3/convert/blob/master/src/main.ts) (Conversion coordinator), [`src/ui/pages/Upload/index.tsx`](https://github.com/p2r3/convert/blob/master/src/ui/pages/Upload/index.tsx) (File upload), [`src/Converter.ts`](https://github.com/p2r3/convert/blob/master/src/Converter.ts) (Conversion dispatcher)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_interface["User interface"]
  node_ui["UI shell<br/>[index.tsx]"]
  node_upload["File upload<br/>[index.tsx]"]
  node_drop["Drop overlay<br/>[index.tsx]"]
  node_conversion["Format selection<br/>[index.tsx]"]
  node_explorer["Format explorer<br/>[index.tsx]"]
end

subgraph group_orchestration["Conversion orchestration"]
  node_appstate["Selection state<br/>[main.ts]"]
  node_main["Conversion coordinator<br/>[main.ts]"]
  node_pathgraph["Conversion path search<br/>[TraversionGraph.ts]"]
end

subgraph group_formats["Format handling"]
  node_registry["Handler registry<br/>[index.ts]"]
  node_formatmodel["Format definitions<br/>[FormatHandler.ts]"]
  node_handlers["Conversion handlers"]
end

subgraph group_runtime["Execution runtime"]
  node_converter["Conversion dispatcher<br/>[Converter.ts]"]
  node_worker["Worker execution<br/>[Converter.ts]"]
end

node_user(("User"))
node_browser["Browser files"]

node_user -->|"chooses file"| node_upload
node_user -->|"drops file"| node_drop
node_browser -->|"provides file"| node_upload
node_browser -->|"provides file"| node_drop
node_upload -->|"stores selection"| node_appstate
node_drop -->|"stores selection"| node_appstate
node_ui -->|"renders"| node_upload
node_ui -->|"renders"| node_conversion
node_conversion -->|"shows formats"| node_explorer
node_conversion -->|"requests conversion"| node_main
node_conversion -->|"reads selection"| node_appstate
node_main -->|"initializes handlers"| node_registry
node_registry -->|"loads handlers"| node_handlers
node_handlers -->|"defines formats"| node_formatmodel
node_main -->|"searches paths"| node_pathgraph
node_main -->|"dispatches steps"| node_converter
node_converter -.->|"offloads work"| node_worker
node_converter -->|"invokes handler"| node_handlers
node_main -->|"returns output"| node_conversion
node_conversion -->|"downloads result"| node_browser

click node_ui "https://github.com/p2r3/convert/blob/master/src/ui/index.tsx"
click node_upload "https://github.com/p2r3/convert/blob/master/src/ui/pages/Upload/index.tsx"
click node_drop "https://github.com/p2r3/convert/blob/master/src/ui/components/FullPageDropOverlay/index.tsx"
click node_conversion "https://github.com/p2r3/convert/blob/master/src/ui/pages/Conversion/index.tsx"
click node_explorer "https://github.com/p2r3/convert/blob/master/src/ui/components/Conversion/FormatExplorer/index.tsx"
click node_appstate "https://github.com/p2r3/convert/blob/master/src/main.ts"
click node_main "https://github.com/p2r3/convert/blob/master/src/main.ts"
click node_pathgraph "https://github.com/p2r3/convert/blob/master/src/TraversionGraph.ts"
click node_converter "https://github.com/p2r3/convert/blob/master/src/Converter.ts"
click node_registry "https://github.com/p2r3/convert/blob/master/src/handlers/index.ts"
click node_formatmodel "https://github.com/p2r3/convert/blob/master/src/FormatHandler.ts"
click node_handlers "https://github.com/p2r3/convert/tree/master/src/handlers"
click node_worker "https://github.com/p2r3/convert/blob/master/src/Converter.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_ui,node_upload,node_drop,node_conversion,node_explorer,node_user,node_browser toneBlue
class node_appstate,node_main,node_pathgraph toneAmber
class node_registry,node_formatmodel,node_handlers toneMint
class node_converter,node_worker toneRose
```

## Components

### User interface

- [UI shell](https://github.com/p2r3/convert/blob/master/src/ui/index.tsx): `src/ui/index.tsx`
- [File upload](https://github.com/p2r3/convert/blob/master/src/ui/pages/Upload/index.tsx): `src/ui/pages/Upload/index.tsx`
- [Drop overlay](https://github.com/p2r3/convert/blob/master/src/ui/components/FullPageDropOverlay/index.tsx): `src/ui/components/FullPageDropOverlay/index.tsx`
- [Format selection](https://github.com/p2r3/convert/blob/master/src/ui/pages/Conversion/index.tsx): `src/ui/pages/Conversion/index.tsx`
- [Format explorer](https://github.com/p2r3/convert/blob/master/src/ui/components/Conversion/FormatExplorer/index.tsx): `src/ui/components/Conversion/FormatExplorer/index.tsx`

### Conversion orchestration

- [Selection state](https://github.com/p2r3/convert/blob/master/src/main.ts): `src/main.ts`
- [Conversion coordinator](https://github.com/p2r3/convert/blob/master/src/main.ts): `src/main.ts`
- [Conversion path search](https://github.com/p2r3/convert/blob/master/src/TraversionGraph.ts): `src/TraversionGraph.ts`

### Format handling

- [Handler registry](https://github.com/p2r3/convert/blob/master/src/handlers/index.ts): `src/handlers/index.ts`
- [Format definitions](https://github.com/p2r3/convert/blob/master/src/FormatHandler.ts): `src/FormatHandler.ts`
- [Conversion handlers](https://github.com/p2r3/convert/tree/master/src/handlers): `src/handlers`

### Execution runtime

- [Conversion dispatcher](https://github.com/p2r3/convert/blob/master/src/Converter.ts): `src/Converter.ts`
- [Worker execution](https://github.com/p2r3/convert/blob/master/src/Converter.ts): `src/Converter.ts`

### Other components

- **User**
- **Browser files**

## Connections

- User → File upload: chooses file
- User → Drop overlay: drops file
- Browser files → File upload: provides file
- Browser files → Drop overlay: provides file
- File upload → Selection state: stores selection
- Drop overlay → Selection state: stores selection
- UI shell → File upload: renders
- UI shell → Format selection: renders
- Format selection → Format explorer: shows formats
- Format selection → Conversion coordinator: requests conversion
- Format selection → Selection state: reads selection
- Conversion coordinator → Handler registry: initializes handlers
- Handler registry → Conversion handlers: loads handlers
- Conversion handlers → Format definitions: defines formats
- Conversion coordinator → Conversion path search: searches paths
- Conversion coordinator → Conversion dispatcher: dispatches steps
- Conversion dispatcher → Worker execution: offloads work
- Conversion dispatcher → Conversion handlers: invokes handler
- Conversion coordinator → Format selection: returns output
- Format selection → Browser files: downloads result
