# vortexprotocol1633/isplit architecture

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

- Interactive diagram: https://gitdiagram.com/vortexprotocol1633/isplit
- Repository: https://github.com/vortexprotocol1633/isplit

## Overview

iSplit is a client-side browser app for turning images or selected PDF pages into printable, configurable tiles. The user uploads a file, adjusts the source and layout, reviews and selects tiles, then downloads a full or selected-tile PDF or prints. The graph separates source preparation, tiling and preview, and output/state responsibilities within the single JavaScript runtime. README capabilities are retained where source excerpts are incomplete; relationships not evidenced by excerpts or README are omitted.

Main entry points: [`script.js`](https://github.com/vortexprotocol1633/isplit/blob/main/script.js) (App controller), [`index.html`](https://github.com/vortexprotocol1633/isplit/blob/main/index.html) (App interface), [`style.css`](https://github.com/vortexprotocol1633/isplit/blob/main/style.css) (Themes and layout)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_ui["Browser interface"]
  node_interface["App interface<br/>[index.html]"]
  node_app["App controller<br/>[script.js]"]
  node_styles["Themes and layout<br/>[style.css]"]
end

subgraph group_tiling["Source and tiling"]
  node_source["File input<br/>[script.js]"]
  node_pdfjs["PDF.js"]
  node_preparation["Crop and rotate<br/>[script.js]"]
  node_layout["Paper and grid<br/>[script.js]"]
  node_tilecalc["Tile calculation<br/>[script.js]"]
  node_preview["Tile preview<br/>[script.js]"]
  node_selection["Tile selection<br/>[script.js]"]
end

subgraph group_output["Output and preferences"]
  node_tilecanvas["Tile rendering<br/>[script.js]"]
  node_pdfexport["PDF export<br/>[script.js]"]
  node_jspdf["jsPDF"]
  node_printing["Print output<br/>[script.js]"]
  node_settings[("Saved settings<br/>[script.js]")]
end

node_user(("User"))

node_user -->|"uploads and configures"| node_interface
node_interface -->|"drives"| node_app
node_app -->|"handles upload"| node_source
node_source -.->|"renders PDF pages"| node_pdfjs
node_source -.->|"provides source"| node_preparation
node_preparation -.->|"provides prepared image"| node_layout
node_layout -->|"sets grid"| node_tilecalc
node_app -->|"computes tiles"| node_tilecalc
node_app -->|"renders preview"| node_preview
node_preview -->|"toggles tiles"| node_selection
node_app -->|"exports tiles"| node_pdfexport
node_pdfexport -.->|"renders pages"| node_tilecanvas
node_pdfexport -->|"creates PDF"| node_jspdf
node_app -.->|"prints tiles"| node_printing
node_app -->|"saves and restores"| node_settings
node_interface -.->|"uses styling"| node_styles

click node_interface "https://github.com/vortexprotocol1633/isplit/blob/main/index.html"
click node_app "https://github.com/vortexprotocol1633/isplit/blob/main/script.js"
click node_styles "https://github.com/vortexprotocol1633/isplit/blob/main/style.css"
click node_source "https://github.com/vortexprotocol1633/isplit/blob/main/script.js"
click node_preparation "https://github.com/vortexprotocol1633/isplit/blob/main/script.js"
click node_layout "https://github.com/vortexprotocol1633/isplit/blob/main/script.js"
click node_tilecalc "https://github.com/vortexprotocol1633/isplit/blob/main/script.js"
click node_preview "https://github.com/vortexprotocol1633/isplit/blob/main/script.js"
click node_selection "https://github.com/vortexprotocol1633/isplit/blob/main/script.js"
click node_tilecanvas "https://github.com/vortexprotocol1633/isplit/blob/main/script.js"
click node_pdfexport "https://github.com/vortexprotocol1633/isplit/blob/main/script.js"
click node_printing "https://github.com/vortexprotocol1633/isplit/blob/main/script.js"
click node_settings "https://github.com/vortexprotocol1633/isplit/blob/main/script.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_interface,node_app,node_styles,node_user toneBlue
class node_source,node_pdfjs,node_preparation,node_layout,node_tilecalc,node_preview,node_selection toneAmber
class node_tilecanvas,node_pdfexport,node_jspdf,node_printing,node_settings toneMint
```

## Components

### Browser interface

- [App interface](https://github.com/vortexprotocol1633/isplit/blob/main/index.html): `index.html`
- [App controller](https://github.com/vortexprotocol1633/isplit/blob/main/script.js): `script.js`
- [Themes and layout](https://github.com/vortexprotocol1633/isplit/blob/main/style.css): `style.css`

### Source and tiling

- [File input](https://github.com/vortexprotocol1633/isplit/blob/main/script.js): `script.js`
- **PDF.js**
- [Crop and rotate](https://github.com/vortexprotocol1633/isplit/blob/main/script.js): `script.js`
- [Paper and grid](https://github.com/vortexprotocol1633/isplit/blob/main/script.js): `script.js`
- [Tile calculation](https://github.com/vortexprotocol1633/isplit/blob/main/script.js): `script.js`
- [Tile preview](https://github.com/vortexprotocol1633/isplit/blob/main/script.js): `script.js`
- [Tile selection](https://github.com/vortexprotocol1633/isplit/blob/main/script.js): `script.js`

### Output and preferences

- [Tile rendering](https://github.com/vortexprotocol1633/isplit/blob/main/script.js): `script.js`
- [PDF export](https://github.com/vortexprotocol1633/isplit/blob/main/script.js): `script.js`
- **jsPDF**
- [Print output](https://github.com/vortexprotocol1633/isplit/blob/main/script.js): `script.js`
- [Saved settings](https://github.com/vortexprotocol1633/isplit/blob/main/script.js): `script.js`

### Other components

- **User**

## Connections

- User → App interface: uploads and configures (evidence: `README.md`)
- App interface → App controller: drives (evidence: `README.md`)
- App controller → File input: handles upload (evidence: `README.md`)
- File input → PDF.js: renders PDF pages (evidence: `README.md`)
- File input → Crop and rotate: provides source (evidence: `README.md`)
- Crop and rotate → Paper and grid: provides prepared image (evidence: `script.js`)
- Paper and grid → Tile calculation: sets grid (evidence: `script.js`)
- App controller → Tile calculation: computes tiles (evidence: `script.js`)
- App controller → Tile preview: renders preview (evidence: `script.js`)
- Tile preview → Tile selection: toggles tiles (evidence: `script.js`)
- App controller → PDF export: exports tiles (evidence: `script.js`)
- PDF export → Tile rendering: renders pages (evidence: `script.js`)
- PDF export → jsPDF: creates PDF (evidence: `README.md`)
- App controller → Print output: prints tiles (evidence: `README.md`)
- App controller → Saved settings: saves and restores (evidence: `script.js`)
- App interface → Themes and layout: uses styling (evidence: `README.md`)