# prem704raj/onlinepdfpro architecture

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

## Overview

OnlinePDFPro is a browser-based PDF and document-tools website. Its principal workflow is choosing a tool, working with a document in the browser, and producing an edited or converted result; the PDF editor has distinct loading, editing, page-management, rendering, and export responsibilities. The README and tool directory also document conversion, OCR, organization, AI, image, QR, and productivity tools. Sampled sources support the editor state/page-management link, browser speech controls, site persistence, and conversion gateway routing; unsampled tool wiring is left unspecified.

Main entry points: [`js/pdf-editor.js`](https://github.com/prem704raj/onlinepdfpro/blob/main/js/pdf-editor.js) (PDF editor), [`services/gateway/app.py`](https://github.com/prem704raj/onlinepdfpro/blob/main/services/gateway/app.py) (Conversion gateway), [`js/app.js`](https://github.com/prem704raj/onlinepdfpro/blob/main/js/app.js) (Site experience), [`cf-worker/pdf-api-proxy.js`](https://github.com/prem704raj/onlinepdfpro/blob/main/cf-worker/pdf-api-proxy.js) (API proxy)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_site["Site and discovery"]
  node_site_app["Site experience<br/>[app.js]"]
  node_tool_catalog["Tool directory<br/>[tools.js]"]
  node_browser_state[("Browser storage<br/>[store.js]")]
end

subgraph group_pdf["PDF editing"]
  node_pdf_editor["PDF editor<br/>[pdf-editor.js]"]
  node_pdf_loader["PDF loading<br/>[pdf-loader.js]"]
  node_editor_state["Editor state<br/>[state.js]"]
  node_page_manager["Page management<br/>[page-manager.js]"]
  node_object_editor["Object editing<br/>[object-editor.js]"]
  node_text_editor["Text editing<br/>[text-editor.js]"]
  node_ocr_editor["OCR editing<br/>[ocr-editor.js]"]
  node_history["Edit history<br/>[history.js]"]
  node_page_renderer["Page rendering<br/>[page-renderer.js]"]
  node_pdf_exporter["PDF export<br/>[exporter.js]"]
end

subgraph group_conversion["Document conversion"]
  node_gateway["Conversion gateway<br/>[app.py]"]
  node_docx_pdf["DOCX to PDF<br/>[app.py]"]
  node_pdf_docx["PDF to DOCX<br/>[modal_app.py]"]
end

subgraph group_extras["Additional tools and services"]
  node_proxy["API proxy<br/>[pdf-api-proxy.js]"]
  node_speech["Text to speech<br/>[tts-engine.js]"]
end

node_visitor(("Visitor"))
node_browser_voice["Browser speech"]
node_supabase[("Supabase")]
node_ai_services["AI providers"]

node_visitor -->|"uses tools"| node_site_app
node_site_app -->|"discovers tools"| node_tool_catalog
node_site_app -->|"persists site data"| node_browser_state
node_visitor -->|"edits PDF"| node_pdf_editor
node_pdf_editor -->|"loads document"| node_pdf_loader
node_pdf_editor -->|"manages pages"| node_page_manager
node_pdf_editor -->|"edits objects"| node_object_editor
node_pdf_editor -->|"edits text"| node_text_editor
node_pdf_editor -->|"handles OCR"| node_ocr_editor
node_pdf_editor -->|"tracks edits"| node_history
node_pdf_editor -->|"renders pages"| node_page_renderer
node_pdf_editor -->|"exports PDF"| node_pdf_exporter
node_page_manager -->|"updates state"| node_editor_state
node_visitor -->|"requests conversion"| node_gateway
node_gateway -->|"routes DOCX to PDF"| node_docx_pdf
node_gateway -->|"routes PDF to DOCX"| node_pdf_docx
node_visitor -->|"provides text"| node_speech
node_speech -->|"speaks text"| node_browser_voice
node_proxy -.->|"forwards AI requests"| node_ai_services
node_proxy -.->|"guards conversion routes"| node_gateway
node_visitor -.->|"uses account features"| node_supabase

click node_site_app "https://github.com/prem704raj/onlinepdfpro/blob/main/js/app.js"
click node_tool_catalog "https://github.com/prem704raj/onlinepdfpro/blob/main/_data/tools.js"
click node_browser_state "https://github.com/prem704raj/onlinepdfpro/blob/main/js/store.js"
click node_pdf_editor "https://github.com/prem704raj/onlinepdfpro/blob/main/js/pdf-editor.js"
click node_pdf_loader "https://github.com/prem704raj/onlinepdfpro/blob/main/js/pdf-editor/pdf-loader.js"
click node_editor_state "https://github.com/prem704raj/onlinepdfpro/blob/main/js/pdf-editor/state.js"
click node_page_manager "https://github.com/prem704raj/onlinepdfpro/blob/main/js/pdf-editor/page-manager.js"
click node_object_editor "https://github.com/prem704raj/onlinepdfpro/blob/main/js/pdf-editor/object-editor.js"
click node_text_editor "https://github.com/prem704raj/onlinepdfpro/blob/main/js/pdf-editor/text-editor.js"
click node_ocr_editor "https://github.com/prem704raj/onlinepdfpro/blob/main/js/pdf-editor/ocr-editor.js"
click node_history "https://github.com/prem704raj/onlinepdfpro/blob/main/js/pdf-editor/history.js"
click node_page_renderer "https://github.com/prem704raj/onlinepdfpro/blob/main/js/pdf-editor/page-renderer.js"
click node_pdf_exporter "https://github.com/prem704raj/onlinepdfpro/blob/main/js/pdf-editor/exporter.js"
click node_gateway "https://github.com/prem704raj/onlinepdfpro/blob/main/services/gateway/app.py"
click node_docx_pdf "https://github.com/prem704raj/onlinepdfpro/blob/main/services/docx2pdf/app.py"
click node_pdf_docx "https://github.com/prem704raj/onlinepdfpro/blob/main/services/pdf2docx/modal_app.py"
click node_proxy "https://github.com/prem704raj/onlinepdfpro/blob/main/cf-worker/pdf-api-proxy.js"
click node_speech "https://github.com/prem704raj/onlinepdfpro/blob/main/js/tts-engine.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_site_app,node_tool_catalog,node_browser_state,node_browser_voice toneBlue
class node_pdf_editor,node_pdf_loader,node_editor_state,node_page_manager,node_object_editor,node_text_editor,node_ocr_editor,node_history,node_page_renderer,node_pdf_exporter,node_supabase toneAmber
class node_gateway,node_docx_pdf,node_pdf_docx toneMint
class node_proxy,node_speech toneRose
class node_visitor,node_ai_services toneIndigo
```

## Components

### Site and discovery

- [Site experience](https://github.com/prem704raj/onlinepdfpro/blob/main/js/app.js): `js/app.js`
- [Tool directory](https://github.com/prem704raj/onlinepdfpro/blob/main/_data/tools.js): `_data/tools.js`
- [Browser storage](https://github.com/prem704raj/onlinepdfpro/blob/main/js/store.js): `js/store.js`

### PDF editing

- [PDF editor](https://github.com/prem704raj/onlinepdfpro/blob/main/js/pdf-editor.js): `js/pdf-editor.js`
- [PDF loading](https://github.com/prem704raj/onlinepdfpro/blob/main/js/pdf-editor/pdf-loader.js): `js/pdf-editor/pdf-loader.js`
- [Editor state](https://github.com/prem704raj/onlinepdfpro/blob/main/js/pdf-editor/state.js): `js/pdf-editor/state.js`
- [Page management](https://github.com/prem704raj/onlinepdfpro/blob/main/js/pdf-editor/page-manager.js): `js/pdf-editor/page-manager.js`
- [Object editing](https://github.com/prem704raj/onlinepdfpro/blob/main/js/pdf-editor/object-editor.js): `js/pdf-editor/object-editor.js`
- [Text editing](https://github.com/prem704raj/onlinepdfpro/blob/main/js/pdf-editor/text-editor.js): `js/pdf-editor/text-editor.js`
- [OCR editing](https://github.com/prem704raj/onlinepdfpro/blob/main/js/pdf-editor/ocr-editor.js): `js/pdf-editor/ocr-editor.js`
- [Edit history](https://github.com/prem704raj/onlinepdfpro/blob/main/js/pdf-editor/history.js): `js/pdf-editor/history.js`
- [Page rendering](https://github.com/prem704raj/onlinepdfpro/blob/main/js/pdf-editor/page-renderer.js): `js/pdf-editor/page-renderer.js`
- [PDF export](https://github.com/prem704raj/onlinepdfpro/blob/main/js/pdf-editor/exporter.js): `js/pdf-editor/exporter.js`

### Document conversion

- [Conversion gateway](https://github.com/prem704raj/onlinepdfpro/blob/main/services/gateway/app.py): `services/gateway/app.py`
- [DOCX to PDF](https://github.com/prem704raj/onlinepdfpro/blob/main/services/docx2pdf/app.py): `services/docx2pdf/app.py`
- [PDF to DOCX](https://github.com/prem704raj/onlinepdfpro/blob/main/services/pdf2docx/modal_app.py): `services/pdf2docx/modal_app.py`

### Additional tools and services

- [API proxy](https://github.com/prem704raj/onlinepdfpro/blob/main/cf-worker/pdf-api-proxy.js): `cf-worker/pdf-api-proxy.js`
- [Text to speech](https://github.com/prem704raj/onlinepdfpro/blob/main/js/tts-engine.js): `js/tts-engine.js`

### Other components

- **Visitor**
- **Browser speech**
- **Supabase**
- **AI providers**

## Connections

- Visitor → Site experience: uses tools
- Site experience → Tool directory: discovers tools
- Site experience → Browser storage: persists site data
- Visitor → PDF editor: edits PDF
- PDF editor → PDF loading: loads document
- PDF editor → Page management: manages pages
- PDF editor → Object editing: edits objects
- PDF editor → Text editing: edits text
- PDF editor → OCR editing: handles OCR
- PDF editor → Edit history: tracks edits
- PDF editor → Page rendering: renders pages
- PDF editor → PDF export: exports PDF
- Page management → Editor state: updates state
- Visitor → Conversion gateway: requests conversion
- Conversion gateway → DOCX to PDF: routes DOCX to PDF
- Conversion gateway → PDF to DOCX: routes PDF to DOCX
- Visitor → Text to speech: provides text
- Text to speech → Browser speech: speaks text
- API proxy → AI providers: forwards AI requests
- API proxy → Conversion gateway: guards conversion routes
- Visitor → Supabase: uses account features