Project Roadmap
Relevant source files
The following files were used as context for generating this wiki page:
The DOTORIXEL project roadmap outlines the evolutionary path of a learning-first, cross-platform 2D pixel art editor. The project is structured into distinct milestones that transition the application from a functional prototype to a production-grade creative tool. Currently, the project is focused on Milestone 2: Production UIUX, aimed at overhauling the interface for cross-platform stability and professional quality.
The roadmap covers the development of two primary shells: a web-based editor built with SvelteKit and a native Apple shell using SwiftUI and Metal. Both shells share a common core logic written in Rust, which is integrated via WASM for web and UniFFI for Apple platforms.
Sources: README.md:3-12, CLAUDE.md:3-23, issues/013-apple-native-catchup.md:14-20
Milestone Overview
The project progress is tracked through a series of milestones, each adding significant capabilities to the editor.
| Milestone | Status | Focus Areas |
|---|---|---|
| M1: Usable Editor | ✓ Complete | Core drawing tools, color picker, shortcuts, i18n, and basic landing page. |
| M2: Production UIUX | In Progress | Multi-image workflow, design system application, touch/mobile support, and persistence. |
| M3: Serious Work | Planned | Layer system, selection/transforms, JSON project format, and Apple Pencil hover/palm rejection. |
| M4: Animation | Planned | Timeline UI, frame management, onion skinning, and GIF/spritesheet export. |
| M5+: Future | Hypothesis | Game developer features and platform expansions. |
Sources: README.md:14-48, tasks/todo.md:3-33
Completed: Milestone 1 — Usable Editor
Milestone 1 established the foundation of the editor, providing the essential tools required to create pixel art. Key technical achievements included the migration of core logic from TypeScript to Rust to ensure cross-platform consistency.
Core Features
- Drawing Engine: Implementation of pencil, eraser, line, rectangle, circle, and flood fill tools.
- Color Management: HSV color picker with support for foreground/background color swapping.
- Internationalization: Support for English, Korean, and Japanese using Paraglide.js.
- Infrastructure: Setup of the build pipeline using Vite, wasm-pack, and Vitest for testing.
Sources: README.md:16-22, tasks/done.md:40-75, CLAUDE.md:12-23
In Progress: Milestone 2 — Production UIUX
This milestone focuses on transforming the UI from a prototype to a production-quality interface. A major part of this work involves implementing a responsive breakpoint system and a unified design system.
Responsive Layout Strategy
The project uses a four-tier breakpoint system to ensure the editor functions across mobile, tablet, and desktop environments.
The layout transitions from a tabbed interface on mobile to docked panels on desktop.
Key M2 Objectives
- Multi-image Workflow: Implementation of a Workspace class to manage multiple tabs, allowing users to work on several images simultaneously.
- Session Persistence: Auto-save functionality and session restoration to prevent data loss.
- Touch Optimization: Ensuring 44px minimum touch targets and implementing pinch-zoom/two-finger pan for mobile devices.
- Design System: Finalization of the "Pebble" UI theme, characterized by warm earth tones and rounded floating panels.
Sources: tasks/records/040-screen-inventory-breakpoint-matrix.md:10-25, tasks/todo.md:5-18, CLAUDE.md:120-135
Apple Native Shell: Phase 1 Catch-up
While the web shell has reached Milestone 2, the Apple native shell is undergoing a "catch-up" phase to reach feature parity. The native shell utilizes a Metal-based pixel grid renderer for high performance.
Synchronization Strategy
The native shell catch-up is divided into three distinct phases to modernize the SwiftUI layout and connect it to the shared Rust core.
The sequence of bringing the Apple native shell to parity with the web editor.
Sources: issues/013-apple-native-catchup.md:30-80, README.md:58-65
Future Development (Milestones 3 & 4)
Future milestones shift the focus toward advanced creative workflows and animation.
Milestone 3: Editor for Serious Work
- Layer System: Infrastructure for adding, deleting, and reordering layers with visibility and opacity controls.
- Selection Tools: Rectangle selection for moving, copying, and flipping pixel data.
- Project Persistence: Moving from session-based persistence to a formal JSON-based project file format.
Milestone 4: Animation-Capable Editor
- Timeline UI: Frame management and per-frame speed control.
- Onion Skinning: Visualizing adjacent frames for smoother animation transitions.
- Exporting: Support for animated GIF and spritesheet generation.
Sources: tasks/todo.md:20-33, README.md:32-41
Conclusion
The DOTORIXEL roadmap moves from a "Usable Editor" to an "Animation-Capable Editor" by methodically expanding the technical capabilities of its shared Rust core while refining the platform-specific UI shells. By prioritizing a "UI-First" catch-up for the native shell and a "Production UIUX" overhaul for the web, the project ensures a professional and consistent user experience across all supported platforms before introducing complex features like layers and animation.