2.6 KiB
2.6 KiB
Image Studio
Image Studio is a Bun + React image editor prototype. It uses a command-driven architecture for document and editor state, a canvas/WebGL renderer layer, and a lightweight React UI for tools, layers, imports, exports, and shortcuts.
Features
- Import images into an artboard
- Save and open versioned project files with embedded, project-owned assets
- Automatic local recovery snapshots after document changes
- Export the active artboard as PNG
- Layer selection and layer sheet
- Select, transform, pan, brush, eraser, chroma key, and magic wand tools
- Mask-edit workflow support
- Undo/redo through command history
- Keyboard shortcuts and pointer/wheel canvas input
Tech stack
- Bun for runtime, package management, tests, and builds
- React 19
- Tailwind CSS 4
- shadcn/ui-style component utilities
- TypeScript
Getting started
Install dependencies:
bun install
Start the development server:
bun dev
Build for production:
bun run build
Run the production server:
bun start
Scripts
| Command | Description |
|---|---|
bun dev |
Start the app with Bun hot reload |
bun run build |
Build the production bundle |
bun start |
Run the production server |
bun test |
Run tests |
bun run lint |
Run ESLint |
Keyboard shortcuts
| Shortcut | Action |
|---|---|
S |
Select tool |
B |
Brush tool |
E |
Eraser tool |
K |
Chroma key tool |
W |
Magic wand tool |
Shift + click |
Add to magic wand selection |
Alt + click |
Subtract from magic wand selection |
P |
Pan tool |
Space |
Hold to pan |
L |
Toggle layers |
Cmd/Ctrl + O |
Open image |
Shift + Cmd/Ctrl + O |
Open project |
Cmd/Ctrl + S |
Save project |
Cmd/Ctrl + Z |
Undo |
Shift + Cmd/Ctrl + Z |
Redo |
Delete / Backspace |
Delete selection |
Project structure
app/ Composition root for app wiring
commands/ Deterministic state changes and command history
core/ Pure document/domain models
editor/ Transient editor state, tools, viewport, selection, store
input/ Keyboard, pointer, wheel, and canvas input resolution
renderer/ Canvas/WebGL rendering and overlays
view/ React UI shell and controls
Architecture notes
State changes flow through commands. React components present state and dispatch user intent, while document/editor mutations are handled by command modules. The renderer consumes document and editor snapshots to draw the canvas and overlays without owning application state.