Crate bevy_react 

Drive bevy_ui from a React app running on an embedded V8 (deno_core) runtime. The bridge is deliberately tiny: two channels and two ops connect a dedicated JS thread to Bevy.

The public entry point is ReactUiPlugin: add it to your Bevy App, pointing it at a built JS bundle, and the library owns the JS thread, the op/event channels, the UI root, and (optionally) hot reload.

use bevy::prelude::*;
use bevy_react::ReactUiPlugin;

App::new()
    .add_plugins(DefaultPlugins)
    .add_plugins(ReactUiPlugin::new("path/to/dist/app.js"))
    .run();

The protocol and js_thread modules are exposed for advanced use (custom integrations, headless tests); most users only need ReactUiPlugin.

Re-exports

pub use animations::ReactUiAnimationsPlugin;

pub use canvas::CanvasSurface;

pub use filters::ReactFilter;

pub use portal::PortalCamera;

pub use portal::RenderMode;

pub use portal::RenderTarget;

pub use portal::RenderTargetSpec;

pub use portal::RenderTargets;

pub use portal::Resolution;

pub use surface::SurfacePointer;

pub use surface::SurfaceSpec;

pub use surface::SurfaceVirtualPointer;

pub use surface::Surfaces;

Modules

animations

ReactUiAnimationsPlugin — a Reanimated-style animation engine for bevy-react.

background_image

The backgroundImage style: an image painted as part of a node’s own background stack — over backgroundColor and backgroundGradient, under the node’s content (bevy_ui’s fixed per-node paint order) — by inserting an ImageNode on the same entity. Never NodeImageMode::Auto, so the image contributes nothing to layout and a late-loading asset causes no reflow.

canvas

The canvas host element: an arbitrary anti-aliased vector drawing surface.

filters

Filter wire types, built-in filters, and the filter registry: the layer-based filter style chain.

js_threadNon-WebAssembly

The dedicated JS thread: owns the V8 isolate, runs the React bundle, and exposes the ops that form the whole Rust<->JS boundary.

layer

Auto-promotion of UI subtrees to composited layers.

portal

The portal host element: a UI rectangle that displays an offscreen render target — the live (or snapshot) output of a Bevy camera drawing into a GPU texture.

protocol

The wire protocol shared between the JS reconciler and the Bevy side.

surface

The surface host element: the inverse of crate::portal. Where a portal draws an offscreen Bevy camera into the React UI, a surface renders a React UI subtree out into an offscreen Image the app can drape over any 3D mesh/material (a diegetic monitor, a control panel, a curved hologram — with the app’s own shader on top).

svg

The SVG subsystem: parse SVG documents and rasterize them to pixels.

Structs

Anchor

The wire form of an <anchor>’s anchor prop: the Bevy entity to follow (as Entity::to_bits()), an optional world-space offset, and optional distance-based scaling. Pure-serde, like the rest of crate::protocol.

AnchorScaling

Distance-based scaling config for an anchored overlay. The applied scale is clamp(1 + factor * (base_distance / distance - 1), min, max), so the overlay renders at scale 1 when the camera is exactly base_distance away, grows as it gets closer, and shrinks farther out — bounded by min/max.

Anchored

Component stamped (by the main reconciler) on any <anchor> element. Carries the followed entity, world-space offset, and optional distance scaling. Requires Visibility so the system can hide the overlay when its anchor is behind the camera, and UiTransform so it can apply the distance scale.

DevtoolsConfigdevtools

Devtools configuration, passed to ReactUiPlugin::devtools. Every field has a default (DevtoolsConfig::default() is exactly what an app gets without calling .devtools(...) at all), so construct it with struct-update syntax:

Fonts

Fonts loaded from the plugin config, resolved to handles at startup. The default backs every <text> run; named entries are selected per element via the fontFamily style prop. Empty (unconfigured) → Bevy’s built-in font.

OpApplyStats

Live instrumentation of the apply_js_ops hot path. Updated once per frame that applies at least one reconciler op (empty frames leave it untouched), so a benchmark driver — or any consumer — can poll applied_count to detect “my flushed batch has landed” and read the timing of the most recent batch.

PointerCapture

Whether the React UI currently owns the mouse pointer. Refreshed every frame in PointerCaptureSet; world-input systems (a 3D camera controller, picking, …) should consult it and ignore the mouse when it reports captured, so a UI drag or click doesn’t also drive the scene.

PointerCaptureSet

System set in which PointerCapture is refreshed each frame. Order your world-input systems .after(PointerCaptureSet) so they see this frame’s state.

RawRequest

The raw wire form of a request crossing JS → Bevy: a correlation id, the request name, and the JSON payload. Routed by [ReactRequestRegistry].

ReactEvents

System param for sending ReactEvents to the React app.

ReactMessage

A named, JSON-valued signal sent from the React app to Bevy.

ReactUiPlugin

Adds a React-driven bevy_ui layer to a Bevy App.

Request

What a request handler observes: the deserialized payload plus a Responder to reply with. Observe it with On<Request<T>>.

Responder

Replies to a single React request, correlated by id.

ScrollbarConfig

Stamped on a scroll container (from its scrollbar style field) when the spec is visible; removed when it’s "none"/absent. Read by [sync_scrollbars], which spawns/despawns the Bevy widget entities that render the bar.

ScrollbarPartStyle

The honest, dedicated style for one scrollbar part (track or thumb). Not the full Style: Bevy’s ScrollbarThumb has no Node and owns its own size/position, so only these four visual fields map through — listing exactly them keeps the API from silently ignoring width/padding/flex/gradients/etc. (The track is a real Node, but v1 keeps both parts symmetric.)

Enums

HorizontalEdge

Which edge the vertical bar sits on.

ScrollbarPosition

Whether the bar reserves layout space or floats over content.

ScrollbarSpec

The decoded scrollbar style field: "none", "default", or a styled object.

UvChannel

Which of a mesh’s UV sets a surface texture is mapped to. Re-exported from bevy_mesh so apps pass the same value to the material’s *_channel fields and to SurfacePointer. An enum to define which UV attribute to use for a texture.

VerticalEdge

Which edge the horizontal bar sits on.

Traits

ReactAppExt

Registers typed React message payloads on a Bevy App.

ReactEvent

A typed payload Bevy sends to React as a named event. Out-only — it is never deserialized on the Rust side, so it derives Serialize (not Deserialize).

ReactPayload

A typed payload a React emit(NAME, value) call deserializes into.

ReactRequest

A typed request payload a React request(NAME, value) call deserializes into, paired with the typed reply it resolves to.

RequestEvent

Lets ReactAppExt::add_react_request_handler recover the request type T from an On<Request<T>> observer, whose event type is Request<T>.

Attribute Macros

react_event

Turn a struct into a typed React event payload (a Bevy → React broadcast).

react_filter

Turn a named-field struct into a typed custom filter for the layer-based filter style chain.

react_message

Turn a struct into a typed React message payload.

react_request

Turn a struct into a typed React request payload (a React → Bevy call that awaits a typed reply).