Freya 🦀


Website | Stable Documentation | Discord | Contact
Freya is a cross-platform, native, declarative GUI library for Rust 🦀.
:warning: I recently rewrote a huge percentage of Freya in https://github.com/marc2332/freya/pull/1351, so the main branch differs a lot from the latest stable release.
Components & State
Freya’s component model lets you create reusable UI elements that automatically re-render when the state they depend on changes. Components can hold their own internal state or subscribe to shared state, and they produce UI as their output. Any type that implements the Component trait can be a component, while the root (app) component can simply be a function. Built-in examples include components like Button and Switch.
fn app() -> impl IntoElement {
let mut count = use_state(|| 4);
let counter = rect()
.width(Size::fill())
.height(Size::percent(50.))
.center()
.color((255, 255, 255))
.background((15, 163, 242))
.font_weight(FontWeight::BOLD)
.font_size(75.)
.shadow((0., 4., 20., 4., (0, 0, 0, 80)))
.child(count.read().to_string());
let actions = rect()
.horizontal()
.width(Size::fill())
.height(Size::percent(50.))
.center()
.spacing(8.0)
.child(
Button::new()
.on_press(move |_| {
*count.write() += 1;
})
.child("Increase"),
)
.child(
Button::new()
.on_press(move |_| {
*count.write() -= 1;
})
.child("Decrease"),
);
rect().child(counter).child(actions)
}
|
|
Out of the box components
Freya comes with a set of components out of the box, from simple like Button, Switch, Slider to more complex like VirtualScrollView, Calendar, ColorPicker, etc.
You can check all the examples that start with component_ in the examples folder.
Example of component_input.rs:
Smooth Animations
Create transitions for colors, sizes, positions, and other visual properties. The animation API gives you full control over timing, easing functions, and animation sequences.
Code
use freya::prelude::*;
fn app() -> impl IntoElement {
let mut animation = use_animation(|_| AnimColor::new((246, 240, 240), (205, 86, 86)).time(400));
rect()
.background(&*animation.read())
.expanded()
.center()
.spacing(8.0)
.child(
Button::new()
.on_press(move |_| {
animation.start();
})
.child("Start"),
)
.child(
Button::new()
.on_press(move |_| {
animation.reverse();
})
.child("Reverse"),
)
}
Portal example
Component Portal
Rich Text Editing
Freya provides text editing capabilities that go beyond simple input fields. You can create rich text editors with cursor management, text selection, keyboard shortcuts, custom formatting, virtulization and more.
Code
use freya::prelude::*;
fn app() -> impl IntoElement {
let holder = use_state(ParagraphHolder::default);
let mut editable = use_editable(|| "Hello, World!".to_string(), EditableConfig::new);
let focus = use_focus();