Getting Started
Relevant source files
The following files were used as context for generating this wiki page:
DOTORIXEL is a cross-platform 2D pixel art editor designed with a learning-first approach. It utilizes a shared Rust core to power logic across different platforms, including a Svelte-based web interface and an Apple native shell (macOS and iPadOS). The project is currently progressing through Milestone 2, focusing on production-quality UI/UX.
The editor is built to be accessible directly in the browser or via native applications, providing tools for drawing, color management, and project persistence. Developers can contribute to the project by working with a modern tech stack that includes Rust/WASM, TypeScript, SvelteKit, and SwiftUI.
Sources: README.md:3-5, CLAUDE.md:3-5, issues/013-apple-native-catchup.md:12-19
Tech Stack Overview
The architecture of DOTORIXEL is centered around a shared Rust core that handles heavy-duty logic such as canvas pixel storage, tool algorithms, and viewport mathematics. This core is exposed to different platforms through specific bindings.
| Component | Technology | Platform | Notes |
|---|---|---|---|
| Core Logic | Rust | Shared | Canvas storage, tools (pencil, fill, etc.), undo/redo |
| Web UI | SvelteKit + TypeScript | Web | Uses adapter-static for SPA deployment |
| Web Rendering | Canvas2D | Web | MVP rendering; WebGL2 planned for future |
| Native UI | SwiftUI | Apple | Targets macOS and iPadOS |
| Native Rendering | Metal | Apple | High-performance GPU rendering |
| Bindings (Web) | wasm-pack (WASM) | Web | Connects Rust core to TypeScript |
| Bindings (Apple) | UniFFI (Swift) | Apple | Generates Swift bindings from Rust |
Sources: CLAUDE.md:7-19, README.md:34-46, issues/013-apple-native-catchup.md:12-19
Shared Logic and Bindings Architecture
The following diagram illustrates how the shared Rust core provides functionality to both the Web and Apple native shells.
The core logic handles coordinate transforms, pixel manipulation, and tool algorithms (like Bresenham line drawing) without framework dependencies.
Sources: CLAUDE.md:144-149, issues/013-apple-native-catchup.md:12-22
Environment Setup
To begin development on DOTORIXEL, specific prerequisites must be met based on the target platform.
Prerequisites
- Web Development:
- Apple Native Development:
Sources: README.md:48-57
Installation and Local Development
The project uses bun exclusively for package management and script execution.
# Install dependencies
bun install
# Start development server
# This builds WASM automatically and starts the SvelteKit dev server
bun run dev
The web editor will be available at http://localhost:5173.
Sources: README.md:59-65
Development Workflow
Script Commands
A variety of commands are available via bun run to facilitate development, testing, and UI previewing.
| Command | Description |
|---|---|
dev | Build WASM and start the development server |
build | Build WASM and create a production build |
wasm:build | Build the WASM module only |
check | Run svelte-check for type checking |
test | Run unit tests using Vitest |
storybook | Start Storybook for component preview (port 6006) |
test:e2e | Run Playwright end-to-end tests |
Sources: README.md:67-78, tasks/records/037-landing-page.md:41
Task Management
Implementation tasks are managed through a structured workflow in the tasks/ directory.
- Todo List:
tasks/todo.mdcontains the full list of remaining items. - Progress Tracking:
tasks/progress.mdtracks the current active task and next steps. - Completion Log:
tasks/done.mdrecords finished tasks with dates and references.
When a task is started, developers are expected to use the /task-start skill, and upon completion, update the corresponding issue file in issues/ and the done.md log.
Sources: CLAUDE.md:21-39
Branching and Commits
- Branches: Work must be done on a dedicated work branch, never directly on
main(except for design-only.pentasks). - Commits: Use Conventional Commits format (e.g.,
feat: add flood fill tool).
Sources: CLAUDE.md:51-66
Architecture Principles
DOTORIXEL follows specific architectural guidelines to ensure maintainability and portability.
- Declarative Logic: Prefer data transformations over mutations.
- High Cohesion, Low Coupling: Group code by what changes together (e.g., tool logic, state, and cursor behavior belong together).
- Self-Contained Core: Core logic (math, pixel manipulation) must have no DOM or framework dependencies to allow portability between WASM and native Swift bindings.
- Fail at the Boundary: Validate inputs (I/O, user input) where they enter the system, and trust the core logic to operate on validated data.
Sources: CLAUDE.md:76-80, CLAUDE.md:144-149, CLAUDE.md:152-155
Localization (i18n)
The project uses Paraglide.js for internationalization, supporting English, Korean, and Japanese.
- Routing: Language is managed via URL path routing (e.g.,
/en/,/ko/,/ja/). - Detection: Browser language detection is handled at the framework level via Paraglide's
preferredLanguagestrategy. - Implementation: UI strings are replaced with
m.*()function calls referencing JSON message catalogs inmessages/.
Sources: CLAUDE.md:17, tasks/records/036-i18n-paraglide.md:12-25, tasks/records/037-landing-page.md:46-52
Summary
To get started with DOTORIXEL, set up the required toolchains for Rust and either Bun (for web) or Xcode (for Apple native). Use the provided bun scripts to manage the build process and follow the task-based workflow defined in the repository to ensure consistent development practices across the shared Rust core and its platform-specific shells.