bevy-platform-web

Bevy web platform

When to use

Load this when the same app should run in a browser. Packaging pipelines are not specified here.

ECS shape

Features opened: web (browser APIs, wasm32 only), webgl2 (limitations so Wasm can use WebGL2), webgpu (overrides webgl2; Wasm with WebGPU only).
Asset note: http and https features enable remote asset download and warn about security. web_asset_cache caches downloads and currently never invalidates entries.
Clipboard: clipboard_image says it is not supported on WASM.
Window: the same Window component describes the canvas. Set canvas, fit_canvas_to_parent, and resolution on the primary window.

Feature choice

Need	Bevy path
Browser build	`wasm32-unknown-unknown`. Enable `webgl2` or `webgpu` in Cargo; those two features conflict.
Graphics backend	`webgl2` or `webgpu`. Enable one.
Remote assets	`http` or `https`. `web_asset_cache` stores downloads and does not invalidate them.

Scope

The canvas is a Window. Point canvas at a DOM id and turn on fit_canvas_to_parent so the canvas tracks its parent.
webgl2 and webgpu are Cargo features. They are not components. Enable one of them for a wasm32 target.
clipboard_image is not available on wasm. Text clipboard stays on the window APIs that default features already include.

Examples

[dependencies]
bevy = { version = "0.20", features = ["webgl2"] }

Open the primary window on a canvas element and keep it sized to that element's parent.

use bevy::window::{PrimaryWindow, WindowResolution};

fn main() {
    App::new()
        .add_plugins(DefaultPlugins.set(WindowPlugin {
            primary_window: Some(Window {
                title: "Browser".into(),
                canvas: Some("#bevy".into()),
                fit_canvas_to_parent: true,
                prevent_default_event_handling: true,
                resolution: WindowResolution::new(1280, 720),
                ..default()
            }),
            ..default()
        }))
        .run();
}

A running app can still retarget the canvas and the logical resolution.

use bevy::window::PrimaryWindow;

fn bind_canvas(mut windows: Query<&mut Window, With<PrimaryWindow>>) {
    let Ok(mut window) = windows.single_mut() else {
        return;
    };
    if window.canvas.is_none() {
        window.canvas = Some("#bevy".to_string());
    }
    window.fit_canvas_to_parent = true;
    window.resolution.set(1280.0, 720.0);
}

Load a relative asset path. Remote http URLs need the http or https feature; this path stays inside the asset folder the bundler serves.

fn spawn_sprite(mut commands: Commands, asset_server: Res<AssetServer>) {
    let image = asset_server.load("sprites/player.png");
    commands.spawn((Camera2d, Sprite::from_image(image)));
}

Expert Knowledge Delta

Target: Bevy 0.20+.

Core ECS types: Component, Resource, Query, Commands, Startup, Update, Fixed / FixedMain (bevy::time), .chain(), Plugin, DefaultPlugins, MinimalPlugins. Messages and observers are an ownership slot. See bevy-events-messaging for their APIs. Systems run in parallel unless .chain() orders the ones that conflict.

Who owns state

Piece	Owner	Who may mutate	Schedule
Data on one entity	`Component`	One system via `Query`	`Update` or `FixedMain`
One value for the whole app	`Resource`	One system	`Startup` to insert, then the schedule that reads it
Spawn	`Commands`	The spawning system	`Startup` for the initial world; later schedules for runtime spawn
Order that must not race	`.chain()`	The chained systems only	Same schedule
Plugin boundary	`Plugin`	`build` registers systems and resources	Before the app runs

Borrow rule: two systems that both mutably query the same component must be ordered (.chain()) or split so only one writes. Unrelated systems stay parallel. That is the ECS page rule, not a guess at a system-set API.

Decision

If you need	Do this	Do not
Per-entity data	`Component` + `Query`	A field stored outside the world
App-wide config or clock	`Resource`	Copy the value onto every entity
Stable simulation step	`FixedMain` and the `Fixed` clock	Tie simulation to raw frame `Update`
Startup spawn	`Commands` in `Startup`	Spawn from a render system
Browser canvas	`Window.canvas` and `fit_canvas_to_parent`	A title-only window with no canvas id
Graphics backend	Exactly one of `webgl2` or `webgpu`	Enabling both Cargo features
Cross-system notice that is not shared state	Message or observer slot in `bevy-events-messaging`	A new event type invented in this file
An API outside the documented set	Check the official documentation	A made-up crate or API

Load references/ecs-ownership.md for the ownership table.

NEVER

Do not pin /0.20.0/ in docs URLs. WHY: links stay on latest; the 0.20 target is stated once in prose.
Do not mutably query the same component from two unordered systems. WHY: the schedule runs systems in parallel unless .chain() orders them.
Do not invent a physics, navigation, networking, or XR crate here. WHY: this skill only names documented Bevy crates and modules.
Do not name another engine's HTML export presets in Bevy Cargo features. WHY: the browser target is wasm32-unknown-unknown plus webgl2 or webgpu.
Do not import another engine's node types into Bevy systems. WHY: those types are not components and will not schedule.
No invented APIs or unnamed third-party crates as the chosen solver. WHY: this skill only names documented Bevy crates and modules.

Reference

Official links stay on unversioned latest pages. The library pin on bevy-master stays 0.20.0.

Official Documentation

Assets - Official asset catalog. No third-party crate was selected.
Examples - Example tree on the latest branch.
ECS - Component, systems, Query, Startup, Update, and .chain().
Plugins - Plugin, DefaultPlugins, MinimalPlugins, and add_plugins.

Related Skills

Prerequisites

bevy-master - Hub and schedules.
bevy-ecs-composition - Components and systems.
bevy-platform-desktop - Window component shared with desktop.

Complements

godot-platform-web - Godot package for browser builds.

Downstream / consumers

None yet.

Master

bevy-master - Bevy router.