freya

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.

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.

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();