Skip to content

README.md

Latest commit

 

History

History
250 lines (192 loc) · 6.95 KB

README.md

File metadata and controls

250 lines (192 loc) · 6.95 KB
Raw

Anatsui

A professional-grade collaborative design tool inspired by Figma, built with Rust/WebAssembly for maximum performance.

Anatsui Rust Bun License

🎨 Overview

Anatsui is a modern collaborative design tool that pushes the boundaries of what's possible in a web browser. Unlike traditional web-based design tools, Anatsui uses:

  • Rust + WebAssembly for the rendering engine (instead of C++)
  • WebGL2 for GPU-accelerated 2D graphics
  • Vector Networks (Figma's innovation) instead of traditional paths
  • CRDT-inspired sync for seamless real-time collaboration
  • Bun for lightning-fast development and runtime

Named after El Anatsui, the renowned Ghanaian sculptor known for transforming simple materials into extraordinary art.

✨ Features

  • High-Performance Rendering: Rust/WASM core with WebGL2 for smooth 60fps
  • Real-time Collaboration: Multiple users can edit simultaneously
  • Vector Networks: Advanced path editing with any-to-any connections
  • Modern UI: React + TypeScript with Tailwind CSS
  • Infinite Canvas: Smooth panning and zooming
  • Design Tools: Rectangle, ellipse, line, frame, text, and pen tools
  • Layer System: Full layer management with visibility and locking
  • Properties Panel: Edit position, size, fill, stroke, and more

🏗️ Architecture

anatsui/
├── packages/
│   └── core/               # Rust/WASM rendering engine
│       ├── src/
│       │   ├── document/   # Document model with fractional indexing
│       │   ├── geometry/   # Vector networks implementation
│       │   ├── renderer/   # WebGL2 renderer with shaders
│       │   ├── multiplayer/# Sync engine and messaging
│       │   └── tools.rs    # Design tools (select, draw, etc.)
│       └── Cargo.toml
├── apps/
│   ├── web/               # React frontend
│   │   ├── src/
│   │   │   ├── components/# UI components
│   │   │   ├── store/     # Zustand state management
│   │   │   └── types/     # TypeScript types
│   │   └── package.json
│   └── server/            # Bun WebSocket server
│       └── src/
│           └── index.ts   # Multiplayer server
├── docs/
│   ├── ARCHITECTURE.md    # Technical architecture
│   └── TECHNICAL_INSIGHTS.md # Figma research
└── package.json           # Monorepo root

🚀 Quick Start

Prerequisites

  • Bun v1.0+ (for package management and server)
  • Rust v1.70+ (for WASM core)
  • wasm-pack (for building WASM)

Installation

# Clone the repository
git clone https://github.com/your-username/anatsui.git
cd anatsui

# Install dependencies
bun install

Building the WASM Core

# Navigate to the core package
cd packages/core

# Build for web (release mode)
wasm-pack build --target web --release

# Or for development (faster builds)
wasm-pack build --target web --dev

Running the Development Server

# Start the web app (from project root)
cd apps/web
bun dev

# In a separate terminal, start the multiplayer server
cd apps/server
bun dev

Open http://localhost:3000 in your browser.

📖 Documentation

Core Concepts

Document Model

The document is stored as a property-level map: Map<ObjectID, Map<Property, Value>>. This enables:

  • Fine-grained conflict resolution
  • Efficient syncing (only changed properties)
  • Property-level undo/redo

Vector Networks

Unlike traditional SVG paths (sequences of points), vector networks are graphs where any point can connect to any other. This allows:

  • Complex shapes from simple primitives
  • Non-destructive boolean operations
  • Intuitive direct manipulation

Rendering Pipeline

  1. Document changes trigger re-renders
  2. Nodes are sorted by z-index (fractional indexing)
  3. Geometry is tessellated using Lyon
  4. WebGL draws with custom shaders

Multiplayer Sync

  • Property-level last-writer-wins (LWW)
  • Fractional indexing for ordering
  • WebSocket for real-time updates
  • Optimistic updates with acknowledgements

Keyboard Shortcuts

Key Tool
V Select
F Frame
R Rectangle
O Ellipse
L Line
P Pen
T Text
H Hand (pan)
⌘/Ctrl + = Zoom in
⌘/Ctrl + - Zoom out
⌘/Ctrl + 0 Reset zoom

🛠️ Development

Project Structure

Package Description
@anatsui/core Rust/WASM rendering engine
@anatsui/web React frontend application
@anatsui/server Bun WebSocket server

Available Scripts

# Root level
bun dev          # Start web dev server
bun build        # Build all packages
bun test         # Run tests

# WASM Core (packages/core)
wasm-pack build  # Build WASM
cargo test       # Run Rust tests
cargo clippy     # Lint Rust code
cargo doc        # Generate docs

# Web App (apps/web)
bun dev          # Start dev server
bun build        # Production build
bun preview      # Preview production build

# Server (apps/server)
bun dev          # Start with hot reload
bun start        # Production start

Tech Stack

  • Rendering: Rust, wasm-bindgen, WebGL2
  • Math: glam (linear algebra)
  • Tessellation: Lyon (path tessellation)
  • Text: fontdue (font rendering)
  • Serialization: serde + serde_json
  • Frontend: React 18, TypeScript, Tailwind CSS
  • State: Zustand
  • Build: Vite, wasm-pack
  • Runtime: Bun

🧪 Testing

# Rust unit tests
cd packages/core
cargo test

# TypeScript tests (when implemented)
bun test

📦 Building for Production

# Build WASM core (optimized)
cd packages/core
wasm-pack build --target web --release

# Build frontend
cd apps/web
bun build

# Build server
cd apps/server
bun build

🤝 Contributing

Contributions are welcome! Please read our contributing guidelines before submitting a PR.

  1. Fork the repository
  2. Create your feature branch (git checkout -b feature/amazing-feature)
  3. Commit your changes (git commit -m 'Add some amazing feature')
  4. Push to the branch (git push origin feature/amazing-feature)
  5. Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

  • Figma for pioneering browser-based design tools
  • Evan Wallace for the technical blog posts
  • El Anatsui for inspiring the project name
  • The Rust/WASM community for excellent tooling

Built with ❤️ and Rust