How saketsaurav19/pixelite works
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: App.tsx Application shell · index.ts Editing tools · useStore.ts Editor state · LightManager.ts GPU lighting
Components 23
Editor application
- Application shell
src/App.tsx - Editor interface
src/components/MenuBar/MenuBar.tsx - Editor state
src/store/useStore.ts - Document and history
src/store/slices/documentSlice.ts
Canvas editing
- Canvas renderer
src/components/Canvas/Canvas.tsx - Canvas interactions
src/components/Canvas/Events/interactionHandlers.ts - Editing tools
src/tools/index.ts - Selection tools
src/tools/Selection/index.ts - Painting and retouching
src/tools/Painting/paintingTools.ts - Vector and artboards
src/tools/Artboard/artboardTool.ts
Document workflow
- Image import
src/services/import/ImportEngine.ts - PDF rendering
src/services/import/PdfiumManager.ts - File operations
src/services/file/FileSystemService.ts - Image export
src/services/export/ExportEngine.ts - Recent projects
src/services/storage/RecentProjectsStorage.ts
Effects and AI
- Image filters
src/services/image/FilterService.ts - GPU lighting
src/utils/webgpu/LightManager.ts - AI depth estimate
src/utils/ml/DepthProcessor.ts
Sharing and collaboration
- Cloud services
src/utils/cloudServices.ts - Collaboration sync
src/services/collaboration/collaborationSync.ts - WebRTC collaboration
src/services/collaboration/WebRTCCollaborationService.ts - Script engine
src/services/advanced/ScriptEngine.ts
Other components
- Editor user
Connections 15
- 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