Famiq - UI Development in Bevy engine

Bevy engine is a modern, data-driven game engine built in Rust, designed with simplicity, speed, and flexibility in mind. Powered by the Entity-Component-System (ECS) architecture. It’s free and open-source, making it accessible to everyone from hobbyists to professional game developers.

Bevy UI is a bevy's plugin for managing UI in the engine. It's fast, flexible, and seamlessly integrates with Bevy’s ECS model. However, there’s one major challenge, the code can quickly become deeply nested and redundant. Writing UI elements in Bevy often requires explicit hierarchies, making simple UI layouts feel verbose.

Famiq - Simplify UI development in Bevy engine

Famiq is a newborn UI library buit on top of Bevy UI by providing default widgets and a simple way to manage styles.

Instead of writing Rust code for styling, developers can define styles in a well known JSON file (similar to css). These styles are then parsed into Bevy's native UI styles, significantly reducing boilerplate code.

• Simple: Follows Bevy's philosophy—widgets are just Rust functions
• Clean: Styles can be defined in a JSON file, reducing boilerplate code
• Widgets: Includes useful default widgets like button, modal, progress bar and more.
• Flexible: Just like in HTML/CSS, styles can be applied using id or classes
• Hot-reload: Hot-Reload can be enabled. When it's enabled, any changes made to JSON file will reflect the running app without needing to re-compile.

Example of a simple button & text

let btn = fa_button(&mut builder, "Press me").build();
let txt = fa_text(&mut builder, "Hello World").build();

want to change button's background color? want to change text's color? you can simply give them an id or class and write the style inside JSON file.

let btn = fa_button(&mut builder, "Press me").id("#btn").build();
let txt = fa_text(&mut builder, "Hello World").id("#txt").build();

{
  "#btn": {
    "background_color": "green"
  },
  "#txt": {
    "color": "blue"
  }
}

That is it!

See simple counter app using famiq

Famiq is still in early stage of development, meaning improvements and optimization are needed, feedbacks & contributions are always welcomed. Currently, it supports bevy 0.15.x onward.

Goals in future:

• Add more useful default widgets
• Improve documentation
• Improve overall performance

Github: https://github.com/MuongKimhong/famiq
Documentation: https://muongkimhong.github.io/famiq/
Crateio: https://crates.io/crates/famiq