Bevy Hui

Maintain robust logical structure in Bevy while swiftly iterating on designs using hot reloading. Create reusable components in the style of Web Components.

Github crates.io

Bevy_hui is my solution to create developer friendly UI for the bevy engine. It's main focus is hot reloading pseudo html to bevy_ui.

At it's core its a custom Html parser with a syntax compiler.

Bevy_hui Cheatsheet

Default nodes

Basic Values

Basic Style Attributes

Conditional Styles

transition animation in combination with ease and delay

Events

Special Integration Helpers

These are local to the template and cannot be referenced outside.

Custom tags

Any attribute marked with tag:my_value="" can be accessed on the Tag Component owned by the node. It's just a HashMap. Great for passing args in combination with events. Checkout ui example to play a custom sound, defined by a tag on enter.

Binding Functions & Custom Components

fn setup_templates(
    mut cmd: Commands,
    server: Res<AssetServer>,
    mut html_funcs: HtmlFunctions,
    mut html_comps: HtmlComponents,
) {

    // function
    html_funcs.register("hello_world", |In(entity): In<Entity>|{
        println!("hello world");
    });

    // component
    html_comps.register("panel", server.load("panel.html"));


    // component with spawn function
    html_comps.register("slider", server.load("slider.html"), |mut entity_commands|{
        entity_commands.inser(SliderState(0.));
    });

    // advanced function using tags
    html_funcs.register("play_beep", play_beep);
}

fn play_beep(
    In(entity): In<Entity>,
    tags: Query<&Tags>,
    mut cmd: Commands,
    server: Res<AssetServer>,
) {
    let Some(path) = tags
        .get(entity)
        .ok()
        .and_then(|t| t.get("source").map(|s| s.to_string()))
    else {
        return;
    };

    cmd.spawn((
        AudioPlayer(server.load(&path)),
        PlaybackSettings::ONCE,
    ));
}