# finxz24/pixel-animation-tool architecture

> Architecture diagram of the GitHub repository finxz24/pixel-animation-tool, 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/finxz24/pixel-animation-tool
- Repository: https://github.com/finxz24/pixel-animation-tool

## Overview

pixelStar is a browser-based pixel-art and animation editor. A user creates or opens a project, edits pixels across layers and frames with drawing and selection tools, then saves or exports the result. The React shell mounts the imperative editor engine; input and menus dispatch editing actions, which update the project model and trigger rendering and autosave. Timeline, color, zoom, reference-image, and project-library features provide distinct supporting workflows. The README documents these capabilities; some subsystem wiring is not shown in the sampled source, so uncertain links are omitted.

Main entry points: [`src/core/menus.js`](https://github.com/finxz24/pixel-animation-tool/blob/main/src/core/menus.js) (Editor Menus), [`src/core/input.js`](https://github.com/finxz24/pixel-animation-tool/blob/main/src/core/input.js) (Input Handling), [`src/core/model.js`](https://github.com/finxz24/pixel-animation-tool/blob/main/src/core/model.js) (Project Model), [`src/core/persistence.js`](https://github.com/finxz24/pixel-animation-tool/blob/main/src/core/persistence.js) (Project Persistence)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_shell["App Shell"]
  node_app["React Shell<br/>[App.jsx]"]
  node_boot["Editor Boot<br/>[boot.js]"]
  node_state["Editor State<br/>[state.js]"]
end

subgraph group_editing["Pixel Editing"]
  node_input["Input Handling<br/>[input.js]"]
  node_drawing["Drawing Tools<br/>[drawing.js]"]
  node_selection["Selection Tools<br/>[selection.js]"]
  node_model["Project Model<br/>[model.js]"]
  node_color["Color Tools<br/>[color.js]"]
end

subgraph group_animation["Animation Workspace"]
  node_timeline["Frames and Layers<br/>[timeline.js]"]
  node_render["Canvas Rendering<br/>[render.js]"]
end

subgraph group_projects["Project Lifecycle"]
  node_projects["Projects Page<br/>[projectsPage.js]"]
  node_menus["Editor Menus<br/>[menus.js]"]
  node_library["Project Library<br/>[library.js]"]
  node_persistence[("Project Persistence<br/>[persistence.js]")]
  node_export["Import and Export<br/>[export.js]"]
end

subgraph group_support["Canvas Support"]
  node_references["Reference Images<br/>[references.js]"]
  node_zoom["Pan and Zoom<br/>[zoom.js]"]
  node_perf["Render Cache<br/>[perf.js]"]
end

node_user(("Artist"))

node_user -->|"uses editor"| node_app
node_app -->|"starts editor"| node_boot
node_boot -->|"initializes"| node_state
node_input -->|"dispatches tools"| node_drawing
node_input -->|"dispatches selection"| node_selection
node_input -->|"changes frames"| node_timeline
node_input -->|"controls view"| node_zoom
node_drawing -->|"edits cels"| node_model
node_drawing -->|"updates color"| node_color
node_drawing -->|"autosaves"| node_persistence
node_selection -->|"edits cels"| node_model
node_timeline -->|"changes project"| node_model
node_timeline -->|"autosaves"| node_persistence
node_render -->|"reads project"| node_model
node_render -->|"renders colors"| node_color
node_render -->|"uses display pixels"| node_perf
node_render -->|"autosaves changes"| node_persistence
node_menus -->|"opens projects"| node_projects
node_menus -->|"manages library"| node_library
node_menus -->|"resizes sprite"| node_timeline
node_menus -->|"exports files"| node_export
node_menus -->|"saves and opens"| node_persistence
node_menus -->|"undoes and saves"| node_model
node_projects -->|"creates projects"| node_library
node_projects -->|"loads projects"| node_persistence
node_projects -->|"creates project"| node_model
node_input -->|"moves overlays"| node_references

click node_app "https://github.com/finxz24/pixel-animation-tool/blob/main/src/App.jsx"
click node_boot "https://github.com/finxz24/pixel-animation-tool/blob/main/src/core/boot.js"
click node_state "https://github.com/finxz24/pixel-animation-tool/blob/main/src/core/state.js"
click node_input "https://github.com/finxz24/pixel-animation-tool/blob/main/src/core/input.js"
click node_drawing "https://github.com/finxz24/pixel-animation-tool/blob/main/src/core/drawing.js"
click node_selection "https://github.com/finxz24/pixel-animation-tool/blob/main/src/core/selection.js"
click node_model "https://github.com/finxz24/pixel-animation-tool/blob/main/src/core/model.js"
click node_color "https://github.com/finxz24/pixel-animation-tool/blob/main/src/core/color.js"
click node_timeline "https://github.com/finxz24/pixel-animation-tool/blob/main/src/core/timeline.js"
click node_render "https://github.com/finxz24/pixel-animation-tool/blob/main/src/core/render.js"
click node_projects "https://github.com/finxz24/pixel-animation-tool/blob/main/src/core/projectsPage.js"
click node_menus "https://github.com/finxz24/pixel-animation-tool/blob/main/src/core/menus.js"
click node_library "https://github.com/finxz24/pixel-animation-tool/blob/main/src/core/library.js"
click node_persistence "https://github.com/finxz24/pixel-animation-tool/blob/main/src/core/persistence.js"
click node_export "https://github.com/finxz24/pixel-animation-tool/blob/main/src/core/export.js"
click node_references "https://github.com/finxz24/pixel-animation-tool/blob/main/src/core/references.js"
click node_zoom "https://github.com/finxz24/pixel-animation-tool/blob/main/src/core/zoom.js"
click node_perf "https://github.com/finxz24/pixel-animation-tool/blob/main/src/core/perf.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_app,node_boot,node_state toneBlue
class node_input,node_drawing,node_selection,node_model,node_color toneAmber
class node_timeline,node_render toneMint
class node_projects,node_menus,node_library,node_persistence,node_export toneRose
class node_references,node_zoom,node_perf,node_user toneIndigo
```

## Components

### App Shell

- [React Shell](https://github.com/finxz24/pixel-animation-tool/blob/main/src/App.jsx): `src/App.jsx`
- [Editor Boot](https://github.com/finxz24/pixel-animation-tool/blob/main/src/core/boot.js): `src/core/boot.js`
- [Editor State](https://github.com/finxz24/pixel-animation-tool/blob/main/src/core/state.js): `src/core/state.js`

### Pixel Editing

- [Input Handling](https://github.com/finxz24/pixel-animation-tool/blob/main/src/core/input.js): `src/core/input.js`
- [Drawing Tools](https://github.com/finxz24/pixel-animation-tool/blob/main/src/core/drawing.js): `src/core/drawing.js`
- [Selection Tools](https://github.com/finxz24/pixel-animation-tool/blob/main/src/core/selection.js): `src/core/selection.js`
- [Project Model](https://github.com/finxz24/pixel-animation-tool/blob/main/src/core/model.js): `src/core/model.js`
- [Color Tools](https://github.com/finxz24/pixel-animation-tool/blob/main/src/core/color.js): `src/core/color.js`

### Animation Workspace

- [Frames and Layers](https://github.com/finxz24/pixel-animation-tool/blob/main/src/core/timeline.js): `src/core/timeline.js`
- [Canvas Rendering](https://github.com/finxz24/pixel-animation-tool/blob/main/src/core/render.js): `src/core/render.js`

### Project Lifecycle

- [Projects Page](https://github.com/finxz24/pixel-animation-tool/blob/main/src/core/projectsPage.js): `src/core/projectsPage.js`
- [Editor Menus](https://github.com/finxz24/pixel-animation-tool/blob/main/src/core/menus.js): `src/core/menus.js`
- [Project Library](https://github.com/finxz24/pixel-animation-tool/blob/main/src/core/library.js): `src/core/library.js`
- [Project Persistence](https://github.com/finxz24/pixel-animation-tool/blob/main/src/core/persistence.js): `src/core/persistence.js`
- [Import and Export](https://github.com/finxz24/pixel-animation-tool/blob/main/src/core/export.js): `src/core/export.js`

### Canvas Support

- [Reference Images](https://github.com/finxz24/pixel-animation-tool/blob/main/src/core/references.js): `src/core/references.js`
- [Pan and Zoom](https://github.com/finxz24/pixel-animation-tool/blob/main/src/core/zoom.js): `src/core/zoom.js`
- [Render Cache](https://github.com/finxz24/pixel-animation-tool/blob/main/src/core/perf.js): `src/core/perf.js`

### Other components

- **Artist**

## Connections

- Artist → React Shell: uses editor
- React Shell → Editor Boot: starts editor
- Editor Boot → Editor State: initializes
- Input Handling → Drawing Tools: dispatches tools
- Input Handling → Selection Tools: dispatches selection
- Input Handling → Frames and Layers: changes frames
- Input Handling → Pan and Zoom: controls view
- Drawing Tools → Project Model: edits cels
- Drawing Tools → Color Tools: updates color
- Drawing Tools → Project Persistence: autosaves
- Selection Tools → Project Model: edits cels
- Frames and Layers → Project Model: changes project
- Frames and Layers → Project Persistence: autosaves
- Canvas Rendering → Project Model: reads project
- Canvas Rendering → Color Tools: renders colors
- Canvas Rendering → Render Cache: uses display pixels
- Canvas Rendering → Project Persistence: autosaves changes
- Editor Menus → Projects Page: opens projects
- Editor Menus → Project Library: manages library
- Editor Menus → Frames and Layers: resizes sprite
- Editor Menus → Import and Export: exports files
- Editor Menus → Project Persistence: saves and opens
- Editor Menus → Project Model: undoes and saves
- Projects Page → Project Library: creates projects
- Projects Page → Project Persistence: loads projects
- Projects Page → Project Model: creates project
- Input Handling → Reference Images: moves overlays