8 unstable releases (3 breaking)

new 0.4.0	Apr 1, 2025
0.3.1	Apr 1, 2025
0.2.2	Apr 1, 2025
0.2.1	Mar 31, 2025
0.1.1	Mar 31, 2025

#2357 in Game dev

164 downloads per month

MIT license

22KB
408 lines

html! Macro

The html! macro creates Bevy UI using HTML-like syntax. It allows for a declarative, structured way to define UI components converted to ECS code at compile time.

Tag Names and Styling

Tag names are optional.

To style or query elements later in your Bevy code, assign a tag name.

To define a style, use the tag name with a hash prefix (like an ID in CSS). You can optionally put the associated bevy component's visibility in parenthesis after writing the tag name.

Example

use bevy::prelude::*;
use bevy_html_macro::html;

fn main() {
    App::new()
        .add_plugins(DefaultPlugins)
        .add_systems(Startup, (setup, Body::spawn).chain())
        .run();
}

html!(
    <head>
        <script>
            #container (pub(crate)) {
                Node {
                    flex_direction: FlexDirection::Column,
                    ..default()
                };
            }
        </script>
    </head>

    <body>
        <container>
            <>"Line 1"</>
            <>"Line 2"</>
        </container>
    </body>
);

fn setup(mut commands: Commands) {
    commands.spawn(Camera2dBundle::default());
}

Panics

This macro will panic at compile time if it fails to parse the input syntax.

What It Generates

It transforms the HTML into ECS code that defines components and spawns nodes with the specified style and attributes.

What It Expands To

The html! macro takes the HTML-like syntax and generates native ECS code for Bevy. For the example above, it expands to this:

#[derive(Component)]
pub(crate) struct Container;

impl Container {
    fn spawn<'a>(
        parent: &'a mut ChildBuilder<'_>,
        asset_server: &Res<AssetServer>,
    ) -> EntityCommands<'a> {
        let mut me = parent.spawn((
            Self,
            Node {
                flex_direction: FlexDirection::Column,
                ..default()
            },
        ));
        me
    }
}
#[derive(Component)]
struct Body;

impl Body {
    fn spawn(mut commands: Commands, asset_server: Res<AssetServer>) {
        commands
            .spawn((
                Self,
                Node {
                    width: Val::Percent(100.),
                    height: Val::Percent(100.),
                    ..default()
                },
            ))
            .with_children(|parent| {
                Container::spawn(parent, &asset_server).with_children(|parent| {
                    parent.spawn(Node::default()).insert(Text::from("Line 1"));
                    parent.spawn(Node::default()).insert(Text::from("Line 2"));
                });
            });
    }
}

Dependencies

~445KB