What is Web Engine Dev?

Web Engine Dev is a modular, composable game engine ecosystem for the web, built entirely in TypeScript. It provides 93 packages across 10 categories, each designed to work independently or together. Instead of a monolithic engine that dictates how you build, Web Engine Dev follows a "Bring Your Own Engine" philosophy -- you compose exactly the capabilities you need.

What Can You Build?

Web Engine Dev supports a wide range of interactive applications:

• 2D games -- Sprite-based games with physics, tilemaps, and particle effects using the 2D physics, sprites, and tilemap packages
• 3D games -- PBR rendering, skeletal animation, terrain, and glTF asset loading via the renderer and supporting packages
• Multiplayer games -- Client-server with prediction, rollback netcode, and matchmaking through the netcode packages
• Editor tooling -- A full web-based editor with hierarchy panels, inspectors, asset browsers, and plugin support
• Simulations -- Headless ECS execution, spatial indexing, AI systems, and pathfinding without any rendering
• Embedded experiences -- PWA, mobile, and XR runtime targets for cross-platform deployment

How It Works

At the core is an Entity Component System (ECS) with archetype-based storage. You define components as data, attach them to entities, and write systems that process them. Every other package -- rendering, physics, audio, AI -- integrates through this ECS layer or works standalone.

import { createEngine, Game3DPlugins } from '@web-engine-dev/engine';

const engine = await createEngine({
  canvas: document.querySelector('canvas')!,
  plugins: [...Game3DPlugins],
});

engine.start();

Or use individual packages directly:

import { Vec3, Mat4 } from '@web-engine-dev/math';
import { World, defineComponent } from '@web-engine-dev/ecs';
import { AStarPathfinder, NavigationGrid } from '@web-engine-dev/pathfinding';

Package Ecosystem

The 93 packages are organized into 10 categories with a strict dependency layer system (Layer 0-9), where packages only depend on packages at the same layer or below:

Category	Count	Examples
Core	12	math, ecs, events, scheduler, serialization, scripting
Rendering	12	renderer, shader-compiler, particles, sprites, gltf, terrain
Systems	17	input, audio, physics2d, physics3d, animation, netcode, cloth
Gameplay	5	ai, ai-ml, pathfinding, procgen, state
Infrastructure	16	assets, scene, prefab, save, build, debug, streaming
Meta	14	engine, editor-core, editor-ui, camera, tween, signals
Platform	9	analytics, social, monetization, ugc, publishing, embed
Player	4	i18n, achievements, accessibility, telemetry
Runtime	3	mobile, pwa, xr
Games	1	space-shooter (reference game)

Key Differentiators

TypeScript-Native

The entire codebase is written in TypeScript with strict mode and noUncheckedIndexedAccess enabled. The API uses branded types, discriminated unions, and generic constraints to catch errors at compile time rather than runtime.

WebGPU-First

The renderer runs on WebGPU at runtime. WGSL is the runtime shader format, and compute-driven features such as GPU culling are first-class paths.

Modular and Composable

Every package has a focused responsibility and explicit dependencies. You can use @web-engine-dev/math without pulling in the renderer. You can use @web-engine-dev/pathfinding without the ECS. The umbrella @web-engine-dev/engine package re-exports everything for convenience, but tree-shaking ensures unused modules are excluded from your bundle.

ECS Architecture

The ECS uses archetype-based SoA (Struct of Arrays) columnar storage for cache-friendly iteration. It includes query filters, deferred commands, observers, relations, double-buffered events, and parallel execution support via Web Workers with SharedArrayBuffer.

Next Steps

• Philosophy and Design Principles -- Understand the architectural values
• Feature Overview -- Complete feature matrix by category
• Getting Started -- Install and build your first project
• Core Concepts: ECS -- Learn the Entity Component System