Introduction

Freya is native GUI library built on top of 🧬 Dioxus and powered by 🎨 Skia, for 🦀 Rust.

⚠️ It's currently work in progress and not usable for production, but you can already play with it!

You can join the Discord server if you have any question or issue.

You can also see the API Reference.

#![allow(unused)]
fn main() {
fn app(cx: Scope) -> Element {
    let mut count = use_state(cx, || 0);

    render!(
        container {
            height: "100%",
            width: "100%",
            background: "rgb(35, 35, 35)",
            color: "white",
            padding: "12.5",
            onclick: move |_| count += 1,
            label { "Click to increase -> {count}" }
        }
    )
}
}

Check out the examples in the Freya repository to learn more.

About

Freya is built on top of Dioxus, it provides a renderer powered by Skia, alongside a set of elements, components, hooks and testing utilities.

Why 🧬 Dioxus?

Dioxus is heavily influenced by React, resulting in a streamlined process for creating complex components without the need for excessive code.

This sets it apart from other Rust libraries, where equivalent components often require a significant amount of additional code.

Why 🎨 Skia?

Skia is a battle-tested and well maintained graphics library, and there are even some rusty bindings.

Environment Setup

Make sure you have Rust and your OS dependencies installed.

sudo apt install build-essential libssl-dev pkg-config cmake libgtk-3-dev libclang-dev

Don't hesitate to contribute so other distros can be added here.

MacOS

No setup required. But feel free to add more if we miss something.

Basic app

Let's start by creating a simple project.

Creating the project

mkdir freya-app
cd freya-app
cargo init

Cargo.toml

Make sure to add Freya and Dioxus as dependencies:

[package]
name = "freya-app"
version = "0.1.0"
edition = "2021"

[dependencies]
freya = { git="https://github.com/marc2332/freya" }
dioxus = { git="https://github.com/DioxusLabs/dioxus", rev="49c5a5043a16fc82210af146c345793dd448e519"}

src/main.rs

And paste this code in your main.rs file.

#![cfg_attr(
    all(not(debug_assertions), target_os = "windows"),
    windows_subsystem = "windows"
)]

use freya::prelude::*;

fn main() {
    launch(app);
}

fn app(cx: Scope) -> Element {
    let mut count = use_state(cx, || 0);

    render!(
        container {
            height: "100%",
            width: "100%",
            background: "rgb(35, 35, 35)",
            color: "white",
            padding: "12",
            onclick: move |_| count += 1,
            label { "Click to increase -> {count}" }
        }
    )
}

Running

Simply run with cargo:

cargo run

Hot reload

Freya supports Dioxus hot reload, this means you can update the layout and styling of your app on the fly, without having to compile any rust code.

Setup

Just before launching your app, you need to initialize the hot-reload context:

fn main() {

    dioxus_hot_reload::hot_reload_init!(Config::<FreyaCtx>::default());

    launch(app);
}

That's it!

Freya Docs