# saketsaurav19/pixelite architecture

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

- Interactive diagram: https://gitdiagram.com/saketsaurav19/pixelite
- Repository: https://github.com/saketsaurav19/pixelite

## Overview

Pixelite is a browser-based photo editor. Users create or open an image, work on a layered document in the canvas with painting, selection, transform, vector, and retouching tools, then export or save their work. The README also documents AI subject/background tools, GPU lighting, history, and touch support. The graph shows the application, canvas, tools, state, and major service areas; unsampled wiring is omitted, so some documented capabilities appear as subsystem nodes without speculative call edges.

Main entry points: [`src/App.tsx`](https://github.com/saketsaurav19/pixelite/blob/main/src/App.tsx) (Application shell), [`src/tools/index.ts`](https://github.com/saketsaurav19/pixelite/blob/main/src/tools/index.ts) (Editing tools), [`src/store/useStore.ts`](https://github.com/saketsaurav19/pixelite/blob/main/src/store/useStore.ts) (Editor state), [`src/utils/webgpu/LightManager.ts`](https://github.com/saketsaurav19/pixelite/blob/main/src/utils/webgpu/LightManager.ts) (GPU lighting)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Editor application"]
  node_app["Application shell<br/>[App.tsx]"]
  node_ui["Editor interface<br/>[MenuBar.tsx]"]
  node_store["Editor state<br/>[useStore.ts]"]
  node_slices["Document and history<br/>[documentSlice.ts]"]
end

subgraph group_editing["Canvas editing"]
  node_canvas["Canvas renderer<br/>[Canvas.tsx]"]
  node_events["Canvas interactions"]
  node_tools["Editing tools<br/>[index.ts]"]
  node_selection["Selection tools<br/>[index.ts]"]
  node_painting["Painting and retouching<br/>[paintingTools.ts]"]
  node_vector["Vector and artboards<br/>[artboardTool.ts]"]
end

subgraph group_document["Document workflow"]
  node_import["Image import<br/>[ImportEngine.ts]"]
  node_pdf["PDF rendering<br/>[PdfiumManager.ts]"]
  node_file["File operations"]
  node_export["Image export<br/>[ExportEngine.ts]"]
  node_recent[("Recent projects")]
end

subgraph group_effects["Effects and AI"]
  node_filters["Image filters<br/>[FilterService.ts]"]
  node_lighting["GPU lighting<br/>[LightManager.ts]"]
  node_depth["AI depth estimate<br/>[DepthProcessor.ts]"]
end

subgraph group_integrations["Sharing and collaboration"]
  node_cloud["Cloud services<br/>[cloudServices.ts]"]
  node_collab["Collaboration sync"]
  node_rtc["WebRTC collaboration"]
  node_script["Script engine<br/>[ScriptEngine.ts]"]
end

node_user(("Editor user"))

node_user -->|"uses"| node_app
node_app -->|"renders"| node_ui
node_app -->|"reads and updates"| node_store
node_store -->|"composes"| node_slices
node_app -->|"renders"| node_canvas
node_canvas -->|"handles input"| node_events
node_events -->|"dispatches"| node_tools
node_tools -->|"includes"| node_selection
node_tools -->|"includes"| node_painting
node_tools -->|"includes"| node_vector
node_app -->|"initializes"| node_collab
node_lighting -->|"estimates depth"| node_depth
node_lighting -->|"uses light state"| node_store
node_export -->|"downloads blob"| node_file
node_import -->|"renders PDF"| node_pdf

click node_app "https://github.com/saketsaurav19/pixelite/blob/main/src/App.tsx"
click node_ui "https://github.com/saketsaurav19/pixelite/blob/main/src/components/MenuBar/MenuBar.tsx"
click node_store "https://github.com/saketsaurav19/pixelite/blob/main/src/store/useStore.ts"
click node_slices "https://github.com/saketsaurav19/pixelite/blob/main/src/store/slices/documentSlice.ts"
click node_canvas "https://github.com/saketsaurav19/pixelite/blob/main/src/components/Canvas/Canvas.tsx"
click node_events "https://github.com/saketsaurav19/pixelite/blob/main/src/components/Canvas/Events/interactionHandlers.ts"
click node_tools "https://github.com/saketsaurav19/pixelite/blob/main/src/tools/index.ts"
click node_selection "https://github.com/saketsaurav19/pixelite/blob/main/src/tools/Selection/index.ts"
click node_painting "https://github.com/saketsaurav19/pixelite/blob/main/src/tools/Painting/paintingTools.ts"
click node_vector "https://github.com/saketsaurav19/pixelite/blob/main/src/tools/Artboard/artboardTool.ts"
click node_import "https://github.com/saketsaurav19/pixelite/blob/main/src/services/import/ImportEngine.ts"
click node_pdf "https://github.com/saketsaurav19/pixelite/blob/main/src/services/import/PdfiumManager.ts"
click node_file "https://github.com/saketsaurav19/pixelite/blob/main/src/services/file/FileSystemService.ts"
click node_export "https://github.com/saketsaurav19/pixelite/blob/main/src/services/export/ExportEngine.ts"
click node_recent "https://github.com/saketsaurav19/pixelite/blob/main/src/services/storage/RecentProjectsStorage.ts"
click node_filters "https://github.com/saketsaurav19/pixelite/blob/main/src/services/image/FilterService.ts"
click node_lighting "https://github.com/saketsaurav19/pixelite/blob/main/src/utils/webgpu/LightManager.ts"
click node_depth "https://github.com/saketsaurav19/pixelite/blob/main/src/utils/ml/DepthProcessor.ts"
click node_cloud "https://github.com/saketsaurav19/pixelite/blob/main/src/utils/cloudServices.ts"
click node_collab "https://github.com/saketsaurav19/pixelite/blob/main/src/services/collaboration/collaborationSync.ts"
click node_rtc "https://github.com/saketsaurav19/pixelite/blob/main/src/services/collaboration/WebRTCCollaborationService.ts"
click node_script "https://github.com/saketsaurav19/pixelite/blob/main/src/services/advanced/ScriptEngine.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_app,node_ui,node_store,node_slices,node_user toneBlue
class node_canvas,node_events,node_tools,node_selection,node_painting,node_vector toneAmber
class node_import,node_pdf,node_file,node_export,node_recent toneMint
class node_filters,node_lighting,node_depth toneRose
class node_cloud,node_collab,node_rtc,node_script toneIndigo
```

## Components

### Editor application

- [Application shell](https://github.com/saketsaurav19/pixelite/blob/main/src/App.tsx): `src/App.tsx`
- [Editor interface](https://github.com/saketsaurav19/pixelite/blob/main/src/components/MenuBar/MenuBar.tsx): `src/components/MenuBar/MenuBar.tsx`
- [Editor state](https://github.com/saketsaurav19/pixelite/blob/main/src/store/useStore.ts): `src/store/useStore.ts`
- [Document and history](https://github.com/saketsaurav19/pixelite/blob/main/src/store/slices/documentSlice.ts): `src/store/slices/documentSlice.ts`

### Canvas editing

- [Canvas renderer](https://github.com/saketsaurav19/pixelite/blob/main/src/components/Canvas/Canvas.tsx): `src/components/Canvas/Canvas.tsx`
- [Canvas interactions](https://github.com/saketsaurav19/pixelite/blob/main/src/components/Canvas/Events/interactionHandlers.ts): `src/components/Canvas/Events/interactionHandlers.ts`
- [Editing tools](https://github.com/saketsaurav19/pixelite/blob/main/src/tools/index.ts): `src/tools/index.ts`
- [Selection tools](https://github.com/saketsaurav19/pixelite/blob/main/src/tools/Selection/index.ts): `src/tools/Selection/index.ts`
- [Painting and retouching](https://github.com/saketsaurav19/pixelite/blob/main/src/tools/Painting/paintingTools.ts): `src/tools/Painting/paintingTools.ts`
- [Vector and artboards](https://github.com/saketsaurav19/pixelite/blob/main/src/tools/Artboard/artboardTool.ts): `src/tools/Artboard/artboardTool.ts`

### Document workflow

- [Image import](https://github.com/saketsaurav19/pixelite/blob/main/src/services/import/ImportEngine.ts): `src/services/import/ImportEngine.ts`
- [PDF rendering](https://github.com/saketsaurav19/pixelite/blob/main/src/services/import/PdfiumManager.ts): `src/services/import/PdfiumManager.ts`
- [File operations](https://github.com/saketsaurav19/pixelite/blob/main/src/services/file/FileSystemService.ts): `src/services/file/FileSystemService.ts`
- [Image export](https://github.com/saketsaurav19/pixelite/blob/main/src/services/export/ExportEngine.ts): `src/services/export/ExportEngine.ts`
- [Recent projects](https://github.com/saketsaurav19/pixelite/blob/main/src/services/storage/RecentProjectsStorage.ts): `src/services/storage/RecentProjectsStorage.ts`

### Effects and AI

- [Image filters](https://github.com/saketsaurav19/pixelite/blob/main/src/services/image/FilterService.ts): `src/services/image/FilterService.ts`
- [GPU lighting](https://github.com/saketsaurav19/pixelite/blob/main/src/utils/webgpu/LightManager.ts): `src/utils/webgpu/LightManager.ts`
- [AI depth estimate](https://github.com/saketsaurav19/pixelite/blob/main/src/utils/ml/DepthProcessor.ts): `src/utils/ml/DepthProcessor.ts`

### Sharing and collaboration

- [Cloud services](https://github.com/saketsaurav19/pixelite/blob/main/src/utils/cloudServices.ts): `src/utils/cloudServices.ts`
- [Collaboration sync](https://github.com/saketsaurav19/pixelite/blob/main/src/services/collaboration/collaborationSync.ts): `src/services/collaboration/collaborationSync.ts`
- [WebRTC collaboration](https://github.com/saketsaurav19/pixelite/blob/main/src/services/collaboration/WebRTCCollaborationService.ts): `src/services/collaboration/WebRTCCollaborationService.ts`
- [Script engine](https://github.com/saketsaurav19/pixelite/blob/main/src/services/advanced/ScriptEngine.ts): `src/services/advanced/ScriptEngine.ts`

### Other components

- **Editor user**

## Connections

- Editor user → Application shell: uses
- Application shell → Editor interface: renders
- Application shell → Editor state: reads and updates
- Editor state → Document and history: composes
- Application shell → Canvas renderer: renders
- Canvas renderer → Canvas interactions: handles input
- Canvas interactions → Editing tools: dispatches
- Editing tools → Selection tools: includes
- Editing tools → Painting and retouching: includes
- Editing tools → Vector and artboards: includes
- Application shell → Collaboration sync: initializes
- GPU lighting → AI depth estimate: estimates depth
- GPU lighting → Editor state: uses light state
- Image export → File operations: downloads blob
- Image import → PDF rendering: renders PDF