# ul2imate/pdf-editor architecture

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

- Interactive diagram: https://gitdiagram.com/ul2imate/pdf-editor
- Repository: https://github.com/ul2imate/pdf-editor

## Overview

This is a browser-based PDF editor. The main workflow is selecting a PDF, opening it in the editing workspace, rendering and annotating pages, then downloading an exported document. The sampled code shows the app shell, file selection, canvas editing and export path; the README documents additional editing capabilities whose implementation details were not sampled. An optional backend text-extraction call is present, although the product is described as local-first.

Main entry points: [`src/components/canvas.tsx`](https://github.com/ul2imate/pdf-editor/blob/main/src/components/canvas.tsx) (PDF canvas), [`src/App.tsx`](https://github.com/ul2imate/pdf-editor/blob/main/src/App.tsx) (App and routing), [`src/components/mainPage.tsx`](https://github.com/ul2imate/pdf-editor/blob/main/src/components/mainPage.tsx) (PDF selection), [`src/components/controls.tsx`](https://github.com/ul2imate/pdf-editor/blob/main/src/components/controls.tsx) (Page controls)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_ingestion["Document ingestion"]
  node_landing["PDF selection<br/>[mainPage.tsx]"]
end

subgraph group_workspace["Editing workspace"]
  node_app["App and routing<br/>[App.tsx]"]
  node_canvas["PDF canvas<br/>[canvas.tsx]"]
  node_controls["Page controls<br/>[controls.tsx]"]
  node_pdfjs["PDF.js"]
end

subgraph group_editing["Editing capabilities"]
  node_fabric["Fabric canvas"]
  node_textedit["In-place text editing<br/>[canvas.tsx]"]
  node_drawing["Drawing and shapes<br/>[canvas.tsx]"]
  node_properties["Annotation properties<br/>[setting.tsx]"]
  node_textapi["Text extraction API<br/>[api.ts]"]
end

subgraph group_output["Export"]
  node_export["PDF export<br/>[pdfExport.ts]"]
  node_download["Browser download<br/>[pdfExport.ts]"]
end

node_user(("User"))
node_backend["Optional backend"]

node_user -->|"selects PDF"| node_landing
node_landing -->|"sets file and URL"| node_app
node_app -->|"opens editor"| node_canvas
node_app -->|"renders controls"| node_controls
node_controls -->|"invokes navigation and export"| node_app
node_canvas -->|"loads and renders PDF"| node_pdfjs
node_canvas -->|"creates annotations"| node_fabric
node_canvas -->|"manages text edits"| node_textedit
node_canvas -->|"manages vector marks"| node_drawing
node_properties -->|"updates selected objects"| node_fabric
node_canvas -.->|"requests extraction"| node_textapi
node_textapi -.->|"posts PDF"| node_backend
node_canvas -->|"passes edits and annotations"| node_export
node_export -->|"creates PDF download"| node_download
node_download -->|"delivers file"| node_user

click node_app "https://github.com/ul2imate/pdf-editor/blob/main/src/App.tsx"
click node_landing "https://github.com/ul2imate/pdf-editor/blob/main/src/components/mainPage.tsx"
click node_canvas "https://github.com/ul2imate/pdf-editor/blob/main/src/components/canvas.tsx"
click node_controls "https://github.com/ul2imate/pdf-editor/blob/main/src/components/controls.tsx"
click node_textedit "https://github.com/ul2imate/pdf-editor/blob/main/src/components/canvas.tsx"
click node_drawing "https://github.com/ul2imate/pdf-editor/blob/main/src/components/canvas.tsx"
click node_properties "https://github.com/ul2imate/pdf-editor/blob/main/src/components/setting.tsx"
click node_textapi "https://github.com/ul2imate/pdf-editor/blob/main/src/services/api.ts"
click node_export "https://github.com/ul2imate/pdf-editor/blob/main/src/utils/pdfExport.ts"
click node_download "https://github.com/ul2imate/pdf-editor/blob/main/src/utils/pdfExport.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_landing,node_user toneBlue
class node_app,node_canvas,node_controls,node_pdfjs toneAmber
class node_fabric,node_textedit,node_drawing,node_properties,node_textapi toneMint
class node_export,node_download toneRose
class node_backend toneIndigo
```

## Components

### Document ingestion

- [PDF selection](https://github.com/ul2imate/pdf-editor/blob/main/src/components/mainPage.tsx): `src/components/mainPage.tsx`

### Editing workspace

- [App and routing](https://github.com/ul2imate/pdf-editor/blob/main/src/App.tsx): `src/App.tsx`
- [PDF canvas](https://github.com/ul2imate/pdf-editor/blob/main/src/components/canvas.tsx): `src/components/canvas.tsx`
- [Page controls](https://github.com/ul2imate/pdf-editor/blob/main/src/components/controls.tsx): `src/components/controls.tsx`
- **PDF.js**

### Editing capabilities

- **Fabric canvas**
- [In-place text editing](https://github.com/ul2imate/pdf-editor/blob/main/src/components/canvas.tsx): `src/components/canvas.tsx`
- [Drawing and shapes](https://github.com/ul2imate/pdf-editor/blob/main/src/components/canvas.tsx): `src/components/canvas.tsx`
- [Annotation properties](https://github.com/ul2imate/pdf-editor/blob/main/src/components/setting.tsx): `src/components/setting.tsx`
- [Text extraction API](https://github.com/ul2imate/pdf-editor/blob/main/src/services/api.ts): `src/services/api.ts`

### Export

- [PDF export](https://github.com/ul2imate/pdf-editor/blob/main/src/utils/pdfExport.ts): `src/utils/pdfExport.ts`
- [Browser download](https://github.com/ul2imate/pdf-editor/blob/main/src/utils/pdfExport.ts): `src/utils/pdfExport.ts`

### Other components

- **User**
- **Optional backend**

## Connections

- User → PDF selection: selects PDF
- PDF selection → App and routing: sets file and URL
- App and routing → PDF canvas: opens editor
- App and routing → Page controls: renders controls
- Page controls → App and routing: invokes navigation and export
- PDF canvas → PDF.js: loads and renders PDF
- PDF canvas → Fabric canvas: creates annotations
- PDF canvas → In-place text editing: manages text edits
- PDF canvas → Drawing and shapes: manages vector marks
- Annotation properties → Fabric canvas: updates selected objects
- PDF canvas → Text extraction API: requests extraction
- Text extraction API → Optional backend: posts PDF
- PDF canvas → PDF export: passes edits and annotations
- PDF export → Browser download: creates PDF download
- Browser download → User: delivers file