Draftly

A high-performance, precision-focused design drafting engine.

---

Draftly is a modern design tool built for rapid ideation and technical visualization. Unlike traditional web editors, Draftly is engine-first, offloading all geometric computation and scene management to a standalone core written in Rust and compiled to WebAssembly.

Project status:
Draftly is a feature-complete design engine.
Core geometry, full-stack persistence, authentication, and dockerized deployment are fully implemented.
Known Issue: Transformation synchronization for multi-selection is currently identified as a bug (coordinate stacking).

---

Real-time geometric drafting powered by Rust + WebAssembly

---

The Core Differentiator: Engine-First

Most web-based design tools are UI-driven. Draftly flips the script:

• Deterministic Geometry: All math happens in Rust for sub-pixel precision.
• Numerically Stable Transforms: Predictable behavior even in complex scenes.
• Performance: Low-overhead rendering pipeline bypassing Virtual DOM bottlenecks.
• System Architecture: Decoupled systems where React manages the UI and Rust owns the "brain."

---

Tech Stack

• System Core: Rust (WASM via wasm-bindgen)
• Graphics: Custom Engine + HTML5 Canvas API
• Frontend: React 19 + TypeScript
• Styling: Tailwind CSS v4 + Framer Motion
• Runtime & API: Bun + Hono
• Database: PostgreSQL 16 + Drizzle ORM
• Infrastructure: Docker Compose (Multi-stage builds)
• Tooling: Biome (Linting/Formatting)

---

Architecture

Draftly maintains a strictly decoupled architecture:

1. Engine (/engine): The Rust core. Handles the scene graph, transforms, snapping math, and hit-testing.
2. Client (/client): React shell. Manages tool state, UI panels, and routes events to the engine.
3. Server (/server): Hono backend for persistence and user authentication.

For a deep dive into the internal mechanics, see the Engine Core Architecture.

---

Getting Started

Prerequisites

• Bun
• Docker (Recommended)

Quick Start (Docker)

Run the entire stack (Client + Server + DB) with a single command:

bun run docker

App will run at http://localhost:5173

Local Development

Run the Client and Server in parallel on your host machine:

# 1. Install dependencies
bun install

# 2. Build the engine
bun run build:engine

# 3. Start dev servers
bun run dev

---

Project Structure

• client/ - React frontend & UI components.
• engine/ - Rust geometry engine & WASM bridge.
• server/ - Hono API for persistence.
• docs/ - Technical specifications and roadmaps.

---

Documentation

• Technical Specification & Roadmap
• Engine Core Deep Dive