{"id":21818633,"url":"https://github.com/lommix/bevy_hui","last_synced_at":"2025-04-13T00:46:08.131Z","repository":{"id":257766188,"uuid":"857829350","full_name":"Lommix/bevy_hui","owner":"Lommix","description":"Component based UI crate using Xml/Html with focus on hot reload for the bevy engine.","archived":false,"fork":false,"pushed_at":"2025-01-26T12:14:46.000Z","size":399,"stargazers_count":104,"open_issues_count":4,"forks_count":9,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-04-13T00:46:01.207Z","etag":null,"topics":["bevy-engine","bevy-plugin","html","parser","ui","xml"],"latest_commit_sha":null,"homepage":"","language":"Rust","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Lommix.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE-APACHE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-09-15T18:02:29.000Z","updated_at":"2025-04-09T06:42:38.000Z","dependencies_parsed_at":"2024-09-18T15:46:20.763Z","dependency_job_id":"a8a4e932-3725-41f2-b7a6-22c25168b109","html_url":"https://github.com/Lommix/bevy_hui","commit_stats":null,"previous_names":["lommix/lommix_ui","lommix/bevy_hui"],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Lommix%2Fbevy_hui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Lommix%2Fbevy_hui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Lommix%2Fbevy_hui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Lommix%2Fbevy_hui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Lommix","download_url":"https://codeload.github.com/Lommix/bevy_hui/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248650420,"owners_count":21139672,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bevy-engine","bevy-plugin","html","parser","ui","xml"],"created_at":"2024-11-27T16:14:05.771Z","updated_at":"2025-04-13T00:46:08.097Z","avatar_url":"https://github.com/Lommix.png","language":"Rust","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Bevy_hui\n\n[![License: MIT or Apache 2.0](https://img.shields.io/badge/License-MIT%20or%20Apache2-blue.svg)](./LICENSE)\n[![Crate](https://img.shields.io/crates/v/bevy_hui.svg)](https://crates.io/crates/bevy_hui)\n\nBuild `bevy_ui` design in pseudo Html. Keep your logic in bevy, while iterating fast on design\nwith hot reloading. Create reusable templates in the style of Web Components.\n\nhttps://github.com/user-attachments/assets/4eb22305-7762-404e-9093-806b6a155ede\n\n## Features\n\n- In build support for conditional styles and transitions. Hover animations by default!\n- Any value can be a dynamic property and injected into a template at runtime. (recursive!)\n- Simple but effective event system. Register any bevy system via function binding and use it\n  in your templates `on_press=\"start_game\"`.\n- No widgets, no themes. Just bevy UI serialized with all the tools necessary to build anything\n  in a reusable manor.\n\n## Example\n\nLike most crates, don't forget to register the plugin!\n\n```rust\napp.add_plugins((\n    HuiPlugin,\n    // Optional auto loading. Any template this folder will register as custom component\n    // using the file name.\n    HuiAutoLoadPlugin::new(\u0026[\"components\"]),\n));\n\n```\n\n## Getting Started ([Bevy html syntax Cheatsheet](docs/cheatsheet.md))\n\nCreate your first component template with external properties!\n\n```html\n\u003c!-- /assets/my_button.html--\u003e\n\u003ctemplate\u003e\n    \u003cproperty name=\"action\"\u003egreet\u003c/property\u003e\n    \u003cproperty name=\"text\"\u003ePress me\u003c/property\u003e\n    \u003cproperty name=\"primary\"\u003e#123\u003c/property\u003e\n    \u003cproperty name=\"secondary\"\u003e#503\u003c/property\u003e\n\n    \u003cnode padding=\"10px\"\u003e\n        \u003cbutton\n            id=\"button\"\n            padding=\"5px\"\n            background=\"{primary}\"\n            border_color=\"{primary}\"\n            delay=\"0.2s\"\n            ease=\"cubic_in\"\n            height=\"80px\"\n            width=\"210px\"\n            border=\"10px\"\n            border_radius=\"30px\"\n            hover:height=\"100px\"\n            hover:background=\"{secondary}\"\n            hover:border_color=\"{secondary}\"\n            hover:width=\"230px\"\n            on_press=\"{action}\"\n        \u003e\n            \u003ctext\n                watch=\"button\"\n                font_size=\"20\"\n                font_color=\"#FFF\"\n                hover:font_color=\"#752\"\n            \u003e\n                {text}\n            \u003c/text\u003e\n        \u003c/button\u003e\n    \u003c/node\u003e\n\u003c/template\u003e\n```\n\n## Register your component and make a custom binding\n\nTo use your new component in any other templates, we have to register it first.\nYou can either use the `HuiAutoLoadPlugin` feature (experimental), which\nis great for simple components or register the component yourself in a startup system.\n\nThis also allows for custom spawning functions. With is great if you need to add custom components as well!\n\n```rust\nfn startup(\n    server: Res\u003cAssetServer\u003e,\n    mut html_comps: HtmlComponents,\n    mut html_funcs: HtmlFunctions,\n) {\n    // simple register\n    html_comps.register(\"my_button\", server.load(\"my_button.html\"));\n\n    // advanced register, with spawn functions\n    html_comps.register_with_spawn_fn(\"my_button\", server.load(\"my_button.html\"), |mut entity_commands| {\n        entity_commands.insert(MyCustomComponent);\n    })\n\n    // create a system binding that will change the game state.\n    // any (one-shot) system with `In\u003cEntity\u003e` is valid!\n    // the entity represents the node, the function is called on\n    html_funcs.register(\"start_game\", |In(entity): In\u003cEntity\u003e, mut state : ResMut\u003cNextState\u003cGameState\u003e\u003e |{\n        state.set(GameState::Play);\n    });\n\n```\n\n## Putting it all together\n\nTime to be creative. Include your component in the next template.\n\n```html\n\u003c!-- menu.html --\u003e\n\u003ctemplate\u003e\n    \u003cproperty name=\"title\"\u003eMy Game\u003c/property\u003e\n    ...\n    \u003cimage\n        display=\"grid\"\n        grid_template_columns=\"(2, auto)\"\n        src=\"ui_panel.png\"\n        image_scale_mode=\"10px tile(1) tile(1) 4\"\n    \u003e\n        \u003cmy_button\n            text=\"Start Game\"\n            action=\"start_game\"\n        /\u003e\n        \u003cmy_button\n            text=\"Settings\"\n            action=\"to_settings\"\n        /\u003e\n        \u003cmy_button\n            text=\"Credits\"\n            action=\"to_credits\"\n        /\u003e\n        \u003cmy_button\n            text=\"Exit\"\n            action=\"quit_game\"\n        /\u003e\n    \u003c/image\u003e\n    ...\n\u003c/template\u003e\n```\n\n## Spawning your Template\n\nRequired components make it super simple.\n\n```rust\nfn setup(\n    mut cmd: Commands,\n    server: Res\u003cAssetServer\u003e,\n) {\n    cmd.spawn(Camera2dBundle::default());\n    cmd.spawn(HtmlNode(server.load(\"menu.html\"));\n}\n```\n\n## Examples and Widgets\n\nExperimental widget crate:\n\n[![Crate](https://img.shields.io/crates/v/bevy_hui.svg)](https://crates.io/crates/bevy_hui_widgets)\n\nIn addition to the base crate there is also the `bevy_hui_widgets` crate. It offers some basic\nwidgets functionality without providing a template. Each Widget requires some kind of setup/hierarchy\nto work, but the user is in full control over the Template and can style and extend it however they see\nfit.\n\nImagine html `\u003cselect\u003e`, but you provide the template and style of the underlying buttons and containers.\nCheckout the widget example.\n\n```bash\n# basic menu demo\ncargo run -p example --bin ui\n\n# using the widget helper crate to make some basic widgets like sliders, inputs, selections\ncargo run -p example --bin widgets\n```\n\n## Help wanted\n\nI do not plan to offer any widgets on the templating side, but I would like\nto have common components and system for a general reusable widget toolkit like\nsliders, drop downs, draggable and so on.\n\nCheckout the examples, if you come up with some really cool widgets, I would be happy\nto include them into the upcoming `bevy_hui_widgets` crate.\n\n### More examples\n\nI am not the greatest designer. I am actively looking for some really fancy and cool examples, using\nthis crate to include in the example crate.\n\n## Known limitations and Pitfalls\n\n- Any manual changes to bevy's styling components will be overwritten\n- Do not recursive import. [mem stonks, bug]\n- One root node per component.\n- Reloading a component template sometimes breaks logic on a higher level template. Simply reloading\n  the higher level template fixes this for now. Needs further investigation.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flommix%2Fbevy_hui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flommix%2Fbevy_hui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flommix%2Fbevy_hui/lists"}