uē-tôo

A toolkit for interactive HTML canvas applications

Overview • Packages • Examples • Development

Packages

ue-too is organized into modular packages:

• @ue-too/being - Finite state machine
• @ue-too/board - Canvas viewport management with pan, zoom, and rotate functionality
• @ue-too/math - Mathematical utilities for 2D point operations, transformations, and calculations
• @ue-too/animate - Animation system for smooth transitions and keyframe animations
• @ue-too/dynamics - 2D physics engine with collision detection, rigid bodies, and constraints
• @ue-too/curve - Curve and path tools including Bézier curves, lines, and composite paths
• @ue-too/border - Geographic projection utilities (great circle, rhumb line, map projections)
• @ue-too/ecs - Entity Component System architecture support

Install Individual Packages

# Install specific packages you need
npm install @ue-too/board @ue-too/math @ue-too/animate

Examples

A live website containing the examples is available here.

This monorepo includes comprehensive examples demonstrating various packages and integrations:

Core Examples

• Base Example - Basic canvas viewport management functionality
• Navigation Example - Advanced navigation controls with keyboard shortcuts
• Ruler Example - Measurement tools and overlays
• Camera Animation - Smooth camera transitions on mouse click
• Image Example - Drawing an image on the pannable and zoomable canvas

Framework Integrations

• PixiJS Integration
• Konva Integration
• Fabric Integration

Advanced Features

• Physics Example - 2D physics simulation (WIP)
• Collision Example - Collision detection and response (WIP)

Running Examples

To run the examples locally:

# Clone the repository
git clone https://github.com/ue-too/ue-too.git
cd ue-too

# Install dependencies
pnpm install

# Start the development server
pnpm dev:examples

Then, visit http://localhost:5173 to explore all examples.

Development

Prerequisites

• Node.js 22.19.0
• pnpm 10.17.0

Setup

# Clone and install
git clone https://github.com/ue-too/ue-too.git
cd ue-too
pnpm install

# Run tests
pnpm test

# Build all packages
pnpm build

# Start development server
pnpm dev:examples

Refer to the read me of each libary and application for more detail.

Project Structure

ue-too/
├── packages/           # Individual packages
│   ├── board/         # Canvas viewport management
│   ├── math/          # Mathematical utilities
│   ├── animate/       # Animation system
│   ├── dynamics/      # Physics engine
│   ├── curve/         # Curve and path tools
│   ├── border/        # Geographic projections
│   ├── being/         # Entity interfaces
│   └── ecs/           # ECS architecture
├── apps/              # Example applications
│   ├── examples/      # Interactive examples
│   └── b-curve-exp/   # Bézier curve experiment (WIP)
└── scripts/           # Build and deployment scripts

License

MIT License - see LICENSE.txt for details.

Support

• GitHub Issues - Bug reports and feature requests

Currently not accepting contributions yet. If there's any features you want to see, please let me know by creating an issue.