# jaydee1430/pixo architecture

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

## Overview

Pixo is a browser-local image editing workspace: users choose a tool, load an image, edit or convert it, and export a result; the editor also supports revisions and batch work. The map separates the tool hub, editing UI, image-processing runtime, and workspace state. README capabilities are included where the tree identifies their implementation. Some wiring is unsampled, so uncertain calls—especially between panels, processing helpers, and the worker—are omitted.

Main entry points: [`components/editor/RightPanel.tsx`](https://github.com/jaydee1430/pixo/blob/main/components/editor/RightPanel.tsx) (Tool panels), [`components/editor/EditorShell.tsx`](https://github.com/jaydee1430/pixo/blob/main/components/editor/EditorShell.tsx) (Editor shell), [`app/page.tsx`](https://github.com/jaydee1430/pixo/blob/main/app/page.tsx) (Tool catalog), [`components/hub/ToolModal.tsx`](https://github.com/jaydee1430/pixo/blob/main/components/hub/ToolModal.tsx) (Tool workspace)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_hub["Tool hub"]
  node_home["Tool catalog<br/>[page.tsx]"]
  node_tooldefs["Tool registry<br/>[tools.ts]"]
  node_modal["Tool workspace<br/>[ToolModal.tsx]"]
end

subgraph group_editor["Editor experience"]
  node_editorpage["Editor route<br/>[page.tsx]"]
  node_shell["Editor shell<br/>[EditorShell.tsx]"]
  node_canvas["Image canvas<br/>[Canvas.tsx]"]
  node_toolrail["Tool rail<br/>[LeftToolRail.tsx]"]
  node_rightpanel["Tool panels<br/>[RightPanel.tsx]"]
  node_crop["Crop controls<br/>[CropPanel.tsx]"]
  node_adjust["Adjustments"]
  node_filters["Filters<br/>[FiltersPanel.tsx]"]
  node_bgremove["Background tools<br/>[BgRemovePanel.tsx]"]
  node_objectremove["Object removal"]
  node_exportpanel["Export controls<br/>[ExportPanel.tsx]"]
end

subgraph group_processing["Image processing"]
  node_ops["Image operations<br/>[ops.ts]"]
  node_bgmodule["Background removal<br/>[bgremove.ts]"]
  node_inpaint["Inpainting<br/>[inpaint.ts]"]
  node_filtermodule["Filter engine<br/>[filters.ts]"]
  node_enhance["Enhancement<br/>[enhance.ts]"]
  node_palette["Palette extraction<br/>[palette.ts]"]
  node_workerclient["Worker client<br/>[workerClient.ts]"]
  node_worker["Image worker<br/>[image.worker.ts]"]
end

subgraph group_workspace["Workspace state"]
  node_validation["Image validation<br/>[validation.ts]"]
  node_editorstore[("Editor state<br/>[editorStore.ts]")]
  node_workspacestore[("Workspace state<br/>[workspaceStore.ts]")]
  node_sessiondb[("Session storage<br/>[sessionDb.ts]")]
end

node_user(("User"))

node_user -->|"chooses tool"| node_home
node_home -->|"reads catalog"| node_tooldefs
node_home -->|"opens tool"| node_modal
node_modal -->|"validates images"| node_validation
node_modal -->|"extracts colors"| node_palette
node_user -->|"opens editor"| node_editorpage
node_editorpage -->|"renders"| node_shell
node_shell -->|"renders image"| node_canvas
node_shell -->|"renders tools"| node_toolrail
node_shell -->|"renders controls"| node_rightpanel
node_rightpanel -->|"shows crop"| node_crop
node_rightpanel -->|"shows adjustments"| node_adjust
node_rightpanel -->|"shows filters"| node_filters
node_rightpanel -->|"shows background"| node_bgremove
node_rightpanel -->|"shows removal"| node_objectremove
node_rightpanel -->|"shows export"| node_exportpanel
node_workspacestore -->|"saves and loads"| node_sessiondb
node_workerclient -->|"dispatches jobs"| node_worker

click node_home "https://github.com/jaydee1430/pixo/blob/main/app/page.tsx"
click node_tooldefs "https://github.com/jaydee1430/pixo/blob/main/lib/tools.ts"
click node_modal "https://github.com/jaydee1430/pixo/blob/main/components/hub/ToolModal.tsx"
click node_validation "https://github.com/jaydee1430/pixo/blob/main/lib/workspace/validation.ts"
click node_editorpage "https://github.com/jaydee1430/pixo/blob/main/app/editor/page.tsx"
click node_shell "https://github.com/jaydee1430/pixo/blob/main/components/editor/EditorShell.tsx"
click node_canvas "https://github.com/jaydee1430/pixo/blob/main/components/editor/Canvas.tsx"
click node_toolrail "https://github.com/jaydee1430/pixo/blob/main/components/editor/LeftToolRail.tsx"
click node_rightpanel "https://github.com/jaydee1430/pixo/blob/main/components/editor/RightPanel.tsx"
click node_crop "https://github.com/jaydee1430/pixo/blob/main/components/editor/panels/CropPanel.tsx"
click node_adjust "https://github.com/jaydee1430/pixo/blob/main/components/editor/panels/AdjustmentsPanel.tsx"
click node_filters "https://github.com/jaydee1430/pixo/blob/main/components/editor/panels/FiltersPanel.tsx"
click node_bgremove "https://github.com/jaydee1430/pixo/blob/main/components/editor/panels/BgRemovePanel.tsx"
click node_objectremove "https://github.com/jaydee1430/pixo/blob/main/components/editor/panels/ObjectRemoverPanel.tsx"
click node_exportpanel "https://github.com/jaydee1430/pixo/blob/main/components/editor/panels/ExportPanel.tsx"
click node_ops "https://github.com/jaydee1430/pixo/blob/main/lib/image/ops.ts"
click node_bgmodule "https://github.com/jaydee1430/pixo/blob/main/lib/image/bgremove.ts"
click node_inpaint "https://github.com/jaydee1430/pixo/blob/main/lib/image/inpaint.ts"
click node_filtermodule "https://github.com/jaydee1430/pixo/blob/main/lib/image/filters.ts"
click node_enhance "https://github.com/jaydee1430/pixo/blob/main/lib/image/enhance.ts"
click node_palette "https://github.com/jaydee1430/pixo/blob/main/lib/image/palette.ts"
click node_workerclient "https://github.com/jaydee1430/pixo/blob/main/lib/workspace/workerClient.ts"
click node_worker "https://github.com/jaydee1430/pixo/blob/main/workers/image.worker.ts"
click node_editorstore "https://github.com/jaydee1430/pixo/blob/main/store/editorStore.ts"
click node_workspacestore "https://github.com/jaydee1430/pixo/blob/main/store/workspaceStore.ts"
click node_sessiondb "https://github.com/jaydee1430/pixo/blob/main/lib/workspace/sessionDb.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_home,node_tooldefs,node_modal,node_user toneBlue
class node_editorpage,node_shell,node_canvas,node_toolrail,node_rightpanel,node_crop,node_adjust,node_filters,node_bgremove,node_objectremove,node_exportpanel toneAmber
class node_ops,node_bgmodule,node_inpaint,node_filtermodule,node_enhance,node_palette,node_workerclient,node_worker toneMint
class node_validation,node_editorstore,node_workspacestore,node_sessiondb toneRose
```

## Components

### Tool hub

- [Tool catalog](https://github.com/jaydee1430/pixo/blob/main/app/page.tsx): `app/page.tsx`
- [Tool registry](https://github.com/jaydee1430/pixo/blob/main/lib/tools.ts): `lib/tools.ts`
- [Tool workspace](https://github.com/jaydee1430/pixo/blob/main/components/hub/ToolModal.tsx): `components/hub/ToolModal.tsx`

### Editor experience

- [Editor route](https://github.com/jaydee1430/pixo/blob/main/app/editor/page.tsx): `app/editor/page.tsx`
- [Editor shell](https://github.com/jaydee1430/pixo/blob/main/components/editor/EditorShell.tsx): `components/editor/EditorShell.tsx`
- [Image canvas](https://github.com/jaydee1430/pixo/blob/main/components/editor/Canvas.tsx): `components/editor/Canvas.tsx`
- [Tool rail](https://github.com/jaydee1430/pixo/blob/main/components/editor/LeftToolRail.tsx): `components/editor/LeftToolRail.tsx`
- [Tool panels](https://github.com/jaydee1430/pixo/blob/main/components/editor/RightPanel.tsx): `components/editor/RightPanel.tsx`
- [Crop controls](https://github.com/jaydee1430/pixo/blob/main/components/editor/panels/CropPanel.tsx): `components/editor/panels/CropPanel.tsx`
- [Adjustments](https://github.com/jaydee1430/pixo/blob/main/components/editor/panels/AdjustmentsPanel.tsx): `components/editor/panels/AdjustmentsPanel.tsx`
- [Filters](https://github.com/jaydee1430/pixo/blob/main/components/editor/panels/FiltersPanel.tsx): `components/editor/panels/FiltersPanel.tsx`
- [Background tools](https://github.com/jaydee1430/pixo/blob/main/components/editor/panels/BgRemovePanel.tsx): `components/editor/panels/BgRemovePanel.tsx`
- [Object removal](https://github.com/jaydee1430/pixo/blob/main/components/editor/panels/ObjectRemoverPanel.tsx): `components/editor/panels/ObjectRemoverPanel.tsx`
- [Export controls](https://github.com/jaydee1430/pixo/blob/main/components/editor/panels/ExportPanel.tsx): `components/editor/panels/ExportPanel.tsx`

### Image processing

- [Image operations](https://github.com/jaydee1430/pixo/blob/main/lib/image/ops.ts): `lib/image/ops.ts`
- [Background removal](https://github.com/jaydee1430/pixo/blob/main/lib/image/bgremove.ts): `lib/image/bgremove.ts`
- [Inpainting](https://github.com/jaydee1430/pixo/blob/main/lib/image/inpaint.ts): `lib/image/inpaint.ts`
- [Filter engine](https://github.com/jaydee1430/pixo/blob/main/lib/image/filters.ts): `lib/image/filters.ts`
- [Enhancement](https://github.com/jaydee1430/pixo/blob/main/lib/image/enhance.ts): `lib/image/enhance.ts`
- [Palette extraction](https://github.com/jaydee1430/pixo/blob/main/lib/image/palette.ts): `lib/image/palette.ts`
- [Worker client](https://github.com/jaydee1430/pixo/blob/main/lib/workspace/workerClient.ts): `lib/workspace/workerClient.ts`
- [Image worker](https://github.com/jaydee1430/pixo/blob/main/workers/image.worker.ts): `workers/image.worker.ts`

### Workspace state

- [Image validation](https://github.com/jaydee1430/pixo/blob/main/lib/workspace/validation.ts): `lib/workspace/validation.ts`
- [Editor state](https://github.com/jaydee1430/pixo/blob/main/store/editorStore.ts): `store/editorStore.ts`
- [Workspace state](https://github.com/jaydee1430/pixo/blob/main/store/workspaceStore.ts): `store/workspaceStore.ts`
- [Session storage](https://github.com/jaydee1430/pixo/blob/main/lib/workspace/sessionDb.ts): `lib/workspace/sessionDb.ts`

### Other components

- **User**

## Connections

- User → Tool catalog: chooses tool
- Tool catalog → Tool registry: reads catalog
- Tool catalog → Tool workspace: opens tool
- Tool workspace → Image validation: validates images
- Tool workspace → Palette extraction: extracts colors
- User → Editor route: opens editor
- Editor route → Editor shell: renders
- Editor shell → Image canvas: renders image
- Editor shell → Tool rail: renders tools
- Editor shell → Tool panels: renders controls
- Tool panels → Crop controls: shows crop
- Tool panels → Adjustments: shows adjustments
- Tool panels → Filters: shows filters
- Tool panels → Background tools: shows background
- Tool panels → Object removal: shows removal
- Tool panels → Export controls: shows export
- Workspace state → Session storage: saves and loads
- Worker client → Image worker: dispatches jobs