https://github.com/ue-too/ue-too
toolkit for interactive HTML canvas applications
https://github.com/ue-too/ue-too
2d-canvas-toolkit canvas html-canvas infinite-canvas viewport
Last synced: 4 months ago
JSON representation
toolkit for interactive HTML canvas applications
- Host: GitHub
- URL: https://github.com/ue-too/ue-too
- Owner: ue-too
- License: mit
- Created: 2023-11-23T10:39:56.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2025-12-20T10:59:47.000Z (7 months ago)
- Last Synced: 2025-12-21T23:57:27.761Z (7 months ago)
- Topics: 2d-canvas-toolkit, canvas, html-canvas, infinite-canvas, viewport
- Language: TypeScript
- Homepage: https://ue-too.github.io/ue-too/
- Size: 12.9 MB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.txt
Awesome Lists containing this project
README
uē-tôo
A toolkit for interactive HTML canvas applications
[](https://github.com/niuee/board/actions/workflows/ci-test.yml)
[](https://github.com/niuee/board/blob/main/LICENSE.txt)
Overview •
Documentation •
Packages •
Examples •
Development
## Packages
ue-too is organized into modular packages:
- [**`@ue-too/being`**](https://www.npmjs.com/package/@ue-too/being) 
- Finite state machine
- [**`@ue-too/board`**](https://www.npmjs.com/package/@ue-too/board) 
- Canvas viewport management with pan, zoom, and rotate functionality
- [**`@ue-too/math`**](https://www.npmjs.com/package/@ue-too/math) 
- Mathematical utilities for 2D point operations, transformations, and calculations
- [**`@ue-too/animate`**](https://www.npmjs.com/package/@ue-too/animate) 
- Animation system for smooth transitions and keyframe animations
- [**`@ue-too/dynamics`**](https://www.npmjs.com/package/@ue-too/dynamics) 
- 2D physics engine with collision detection, rigid bodies, and constraints
- [**`@ue-too/curve`**](https://www.npmjs.com/package/@ue-too/curve) 
- Curve and path tools including Bézier curves, lines, and composite paths
- [**`@ue-too/border`**](https://www.npmjs.com/package/@ue-too/border) 
- Geographic projection utilities (great circle, rhumb line, map projections)
- [**`@ue-too/ecs`**](https://www.npmjs.com/package/@ue-too/ecs) 
- Entity Component System architecture support
## Install Individual Packages
```bash
# 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](https://ue-too.github.io/ue-too/).
This monorepo includes comprehensive examples demonstrating various packages and integrations:
### Core Examples
- [**Base Example**](https://ue-too.github.io/ue-too/base/) - Basic canvas viewport with pan, zoom, and rotate
- [**Attach / Detach Example**](https://ue-too.github.io/ue-too/attach-detach/) - Dynamically attach and detach a canvas from the board
- [**Navigation Example**](https://ue-too.github.io/ue-too/navigation/) - Keyboard-driven camera panning via `panByViewPort()`
- [**Ruler Example**](https://ue-too.github.io/ue-too/ruler/) - Measurement ruler overlay that updates with pan and zoom
- [**Camera Animation**](https://ue-too.github.io/ue-too/camera-animation/) - Smooth animated camera transitions on click
- [**Image Example**](https://ue-too.github.io/ue-too/image-example/) - Upload and display an image on the pannable canvas
- [**SVG Example**](https://ue-too.github.io/ue-too/svg/) - Board camera system applied to SVG elements
### Framework Integrations
- [**PixiJS Integration**](https://ue-too.github.io/ue-too/pixi-integration/) - Full-screen PixiJS canvas with board camera controls
- [**Konva Integration**](https://ue-too.github.io/ue-too/konva-integration/) - Konva.js stage synchronized with board camera transforms
- [**Fabric Integration**](https://ue-too.github.io/ue-too/fabric-integration/) - Fabric.js with toggleable movement/selection modes
### Advanced Features
- [**Physics Example**](https://ue-too.github.io/ue-too/physics/) - Four-bar linkage with rigid body physics and constraints
### Running Examples
To run the examples locally:
```bash
# Clone the repository
git clone https://github.com/ue-too/ue-too.git
cd ue-too
# Install dependencies
bun install
# Start the development server
bun dev:examples
```
Then, visit `http://localhost:5173` to explore all examples.
## Development
### Prerequisites
- Bun 1.3.4
### Setup
```bash
# Clone and install
git clone https://github.com/ue-too/ue-too.git
cd ue-too
bun install
# Run tests
bun test
# Build all packages
bun run build
# Start development server
bun 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
│ ├── board-react-adapter/ # React integration for the board package
│ ├── board-vue-adapter/ # Vue integration for the board package
│ ├── board-pixi-integration/ # PixiJS integration for the board package
│ ├── board-pixi-react-integration/ # PixiJS integration for the board package with React
│ ├── board-konva-integration/ # Konva integration for the board package
│ ├── board-fabric-integration/ # Fabric integration for the board package
│ ├── math/ # Mathematical utilities
│ ├── animate/ # Animation system
│ ├── dynamics/ # Physics engine
│ ├── curve/ # Curve and path tools
│ ├── border/ # Geographic projections
│ ├── being/ # Finite state machine
│ └── ecs/ # Entity Component System
├── apps/ # Example applications
│ ├── examples/ # Interactive examples
│ ├── banana/ # A simulation of a railway system using bezier curves. (WIP)
│ ├── blast/ # A tabletop game prototype maker. (WIP)
│ ├── knit/ # A knitting pattern editor. (WIP)
│ └── horse-racing/ # Horse racing canvas prototype. (WIP)
└── scripts/ # Build and deployment scripts
```
## License
MIT License - see [LICENSE.txt](LICENSE.txt) for details.
## Support
- [GitHub Issues](https://github.com/ue-too/ue-too/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.