Canvas Engine

A stripped-down 2D game/simulation engine template. Clone this to start any new project with a modern stack and zero boilerplate.

Stack

Layer	Tech
UI	React 18 + TypeScript
Styling	Tailwind CSS v4 + shadcn/ui (57 components)
ECS	bitecs (high-performance, SoA layout)
Physics	Matter.js (2D rigid body)
Rendering	Canvas2D (bring your own renderer)
State	Valtio (proxy-based reactive state)
Build	Vite + HMR
Icons	Lucide React

Quick Start

# Clone template
git clone git@github.com:I-Alpha/Canvas-engine.git my-project
cd my-project
rm -rf .git && git init

# Install & run
yarn install
yarn dev

Opens at http://localhost:3000.

Rename the project in package.json and index.html to match your game.

Project Structure

src/
├── client/
│   ├── main.tsx                    # Entry point (mounts React)
│   ├── ui/
│   │   ├── App.tsx                 # App shell (start here)
│   │   ├── components/ui/          # 57 shadcn/ui components
│   │   ├── hooks/                  # use-mobile, use-toast
│   │   ├── lib/utils.ts            # cn() helper
│   │   └── styles/globals.css      # Tailwind + dark theme
│   └── systems/
│       ├── Camera.ts               # Pan/zoom camera
│       └── SpatialHash.ts          # Fast neighbor lookup
├── shared/
│   ├── core/MathUtils.ts           # lerp, clamp, distance, seeded RNG, etc.
│   └── ecs/
│       ├── world.ts                # bitecs world init/reset
│       ├── components/components.ts # Generic ECS components
│       ├── queries.ts              # Pre-defined entity queries
│       └── systems/
│           ├── inputSystem.ts      # Keyboard state tracker
│           └── movementSystem.ts   # Velocity → position + damping

ECS Components (built-in)

• Transform — x, y, rotation
• Velocity — vx, vy, angularVelocity
• Render — shape, size, color (RGB), alpha
• Mass — value
• Health — current, max
• ParentEntity — parent (hierarchy)
• PlayerControlled — playerId
• AIControlled — behaviorType, targetEntityId
• Collectible — resourceType, amount, collectRadius
• PhysicsBody — bodyId (Matter.js link)

Add your own at the bottom of components.ts.

UI Components (shadcn/ui)

All 57 components are pre-installed in src/client/ui/components/ui/: button, dialog, tabs, slider, select, dropdown-menu, toast, card, table, progress, checkbox, switch, tooltip, and more.

Usage:

import { Button } from '@/components/ui/button';
import { Slider } from '@/components/ui/slider';

Path Aliases

Alias	Path
@	src/client/ui
@shared	src/shared
@ecs	src/shared/ecs
@systems	src/shared/ecs/systems
@client	src/client

Scripts

yarn dev          # Dev server with HMR
yarn build        # Production build
yarn preview      # Preview production build
yarn type-check   # TypeScript check
yarn lint         # ESLint
yarn format       # Prettier