# Bevy_hui [![License: MIT or Apache 2.0](https://img.shields.io/badge/License-MIT%20or%20Apache2-blue.svg)](./LICENSE) [![Crate](https://img.shields.io/crates/v/bevy_hui.svg)](https://crates.io/crates/bevy_hui) Build `bevy_ui` design in pseudo Html. Keep your logic in bevy, while iterating fast on design with hot reloading. Create reusable templates in the style of Web Components. https://github.com/user-attachments/assets/4eb22305-7762-404e-9093-806b6a155ede ## Features - In build support for conditional styles and transitions. Hover animations by default! - Any value can be a dynamic property and injected into a template at runtime. (recursive!) - Simple but effective event system. Register any bevy system via function binding and use it in your templates `on_press="start_game"`. - No widgets, no themes. Just bevy UI serialized with all the tools necessary to build anything in a reusable manor. - Optional `bevy_picking` support: `picking` ``` features = ["picking"] ``` ## Compatibility | bevy | bevy_hui | | ---: | -------: | | 0.17 | main | | 0.16 | 0.4 | | 0.15 | 0.3 | ## Example Like most crates, don't forget to register the plugin! ```rust app.add_plugins(( HuiPlugin, // Optional auto loading. Any template this folder will register as custom component // using the file name. HuiAutoLoadPlugin::new(&["components"]), )); ``` ## Getting Started ([Bevy html syntax Cheatsheet](docs/cheatsheet.md)) Create your first component template with external properties! ```html ``` ## Register your component and make a custom binding To use your new component in any other templates, we have to register it first. You can either use the `HuiAutoLoadPlugin` feature (experimental), which is great for simple components or register the component yourself in a startup system. This also allows for custom spawning functions. With is great if you need to add custom components as well! ```rust fn startup( server: Res, mut html_comps: HtmlComponents, mut html_funcs: HtmlFunctions, ) { // simple register html_comps.register("my_button", server.load("my_button.html")); // advanced register, with spawn functions html_comps.register_with_spawn_fn("my_button", server.load("my_button.html"), |mut entity_commands| { entity_commands.insert(MyCustomComponent); }) // create a system binding that will change the game state. // any (one-shot) system with `In` is valid! // the entity represents the node, the function is called on html_funcs.register("start_game", |In(entity): In, mut state : ResMut> |{ state.set(GameState::Play); }); } ``` ## Putting it all together Time to be creative. Include your component in the next template. ```html ``` ## Spawning your Template Required components make it super simple. ```rust fn setup( mut cmd: Commands, server: Res, ) { cmd.spawn(Camera2dBundle::default()); cmd.spawn(HtmlNode(server.load("menu.html"))); } ``` ## Examples and Widgets Experimental widget crate: [![Crate](https://img.shields.io/crates/v/bevy_hui.svg)](https://crates.io/crates/bevy_hui_widgets) In addition to the base crate there is also the `bevy_hui_widgets` crate. It offers some basic widgets functionality without providing a template. Each Widget requires some kind of setup/hierarchy to work, but the user is in full control over the Template and can style and extend it however they see fit. Imagine html `

Statistics

Topics

Details

Quality Indicators