html_to_bevy 0.8.5

A procedural macro to generate Bevy UI code from HTML-like syntax
Documentation

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. You can optionally put the associated bevy component's visibility before writing the tag name.

String variables can be used when styling elements to make them more reusable. Elements inherit their parent's variable values, unless the value is reset.

Example

In this example, a generic User tag is made, with children FName and LName. FName and LName use variables in their text content, but in other parts of the code, these value can be set on the User tag.

html!(
    <head>
    <style>
        User {
        }
        Name {
            Node {
                column_gap: Val::Px(10.),
                ..default()
            };
        }
        FName {
            $fname = "Error";
            Text::from(String::from($fname));
        }
        LName {
            $lname = "Error";
            Text::from(String::from($lname));
        }
    </style>
    </head>
    <User>
        <Name>
            <FName></FName><LName></LName>
        </Name>
    </User>
);
html!(
    <head>
    <style>
    Container {
        Node {
            flex_direction: FlexDirection::Column,
            ..default()
        };
    }
    </style>
    </head>
    <Container>
        <User fname="John" lname="Smith" />
        <User fname="Jane" lname="Smith" />
    </Container>
);

What It Generates

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