Web Engine Docs
Preparing documentation
Documentation0%
Use the search bar to quickly find any topic
Content
Search
Examples
Ready
Web Engine v0.1.0-alpha
Edit this page on GitHub
Last updated: 1/15/2026
Was this page helpful?
Preparing documentation
Use the search bar to quickly find any topic
title: "Runtime Library" description: "Embed the engine like a library in ~10 lines — the world, systems, scheduler, and RAF loop arrive pre-wired, without any editor dependencies." breadcrumbs:
import { createEngine } from '@web-engine-dev/core';
import { createSceneEntity } from '@web-engine-dev/core/ecs';
import { Transform } from '@web-engine-dev/core/engine/ecs/components';
import { addComponent } from 'bitecs';
const engine = createEngine({ autoStart: true });
const world = engine.world;
const eid = createSceneEntity(world);
addComponent(world, Transform, eid);
Transform.position.y[eid] = 1;
createEngine returns a minimal runtime facade. It hides scheduler setup and loop management while still giving you direct access to the ECS world. You get the convenience of a framework without losing the control expected by engine engineers.
world: the bitECS world instance (reuse across frames)start()/stop(): control the RAF loopstep(delta): manual stepping (headless/tests)registerSystems(defs): add custom systems before startingdispose(): stop, reset scheduler, and clear worldisRunning(): runtime state flagimport type { EngineRuntimeOptions } from '@web-engine-dev/core';
const options: EngineRuntimeOptions = {
qualityPreset: 'high', // apply quality defaults
systems: undefined, // optional ResolvedSystemConfig
playState: 'playing', // playing | paused | stopped
autoStart: false, // call start() yourself if false
onError: (err) => console.error(err),
};
qualityPreset: use listQualityPresets() from @web-engine-dev/core/runtime to discover IDs.systems: pass a resolved SystemConfig if you need to toggle culling, debug overlays, HiZ occlusion, etc.playState: set to 'paused' for editor-like stepping; the scheduler skips simulation when paused.onError: capture fatal loop errors (e.g., worker failures) and decide whether to restart.Use createRenderer(type, canvas, config, state) from @web-engine-dev/core/engine/rendering/RendererFactory for WebGL/WebGPU. React/R3F users should keep using @web-engine-dev/game-ui, which wraps the renderer and wires it to hooks and suspense-friendly components.
isWebGPUSupported() is true; fall back to WebGL otherwise.powerPreference: 'high-performance' for desktops; omit on mobile to reduce battery drain.contextLoss callbacks to rebuild post-process pipelines after WebGL context loss.Initialize Rapier via the physics bridge. For browser runtimes: initPhysicsBridgeAsync(). For headless/server: import from @web-engine-dev/core/headless and skip DOM entirely while preserving deterministic stepping.
setPhysicsEngineType('rapier') if you swap backends.PhysicsSystem in your system manifest or rely on defaults from initSystems().MAX_PHYSICS_BODIES_PER_FRAME from engine/Constants.import { hydrateScene } from '@web-engine-dev/core';
import type { EditorSerializedScene } from '@web-engine-dev/core';
async function load(json: string) {
const scene: EditorSerializedScene = JSON.parse(json);
await hydrateScene(scene); // registers entities/components into the active world
}
@web-engine-dev/core/headless for Node/worker contexts (no DOM/WebGL).step(delta) instead of start() to drive ticks from your server loop.engine/network/protocol for snapshot/packet handling.onError to createEngine to capture loop failures.StructuredLogger and performanceMonitor from @web-engine-dev/core/logging and /perf for telemetry.memoryTracker from /perf/MemoryTracker.The @web-engine-dev/core/editor entry exposes editor-only utilities (file system bridge, editing locks, widget registry). Studio registries for commands/menus now live inside apps/studio/src/registries.
import { fileSystem, editingLocks, WidgetTypeRegistry } from '@web-engine-dev/core/editor';
React/R3F?
Use @web-engine-dev/game-ui for ready-made React/R3F bindings (GameRuntime, HUD widgets). It consumes the same core runtime API shown above and stays tree-shakeable so pure runtime builds stay lean.
Headless / server
Import @web-engine-dev/core/headless for Node/worker contexts; it skips browser-only deps.