Getting Started

I encourage you to first learn about Dioxus, when you are done you can continue here. Also make sure you have the followed the Setup guide.

Now, let's start by creating a hello world project.

Creating the project

mkdir freya-app
cd freya-app
cargo init


Let's add Freya and Dioxus, but this last one with only 2 features selected as we don't want to pull unnecessary dependencies.

name = "freya-app"
version = "0.1.0"
edition = "2021"

freya = "0.2"
dioxus = { version = "0.5", features = ["macro", "hooks"], default-features = false }


You pass your root (usually named app) component to the launch function, which will open the window and then render your component.

    all(not(debug_assertions), target_os = "windows"),
    windows_subsystem = "windows"

use freya::prelude::*;

fn main() {
    launch(app); // Be aware that this will block the thread

Let's define our root component:

fn main() {
fn app() -> Element {

    // RSX is a special syntax to define the UI of our components
    // Here we simply show a label element with some text
        label { "Hello, World!" }

Components in Freya are just functions that return an Element and might receive some properties as arguments.

Let's make it stateful by using Signals from Dioxus:

fn main() {
fn app() -> Element {
    // `use_signal` takes a callback that initializes the state
    // No matter how many times the component re runs, 
    // the initialization callback will only run once at the first component run
    let mut state = use_signal(|| 0); 

    // Because signals are copy, we can move them into closures
    let onclick = move |_| {
        // Signals provide some mutation shortcuts for certain types
        state += 1;
        // But we could do as well
        *state.write() += 1;

    // You subscribe to a signal by calling it (`signal()`), 
    // calling the `read()` method, or just embedding it into the RSX.
    // Everytime the signal is mutated the component function will rerun
    // because it has been subscribed, this will end up producing a 
    // new `Element` with the updated counter.
    println!("{}", state());

        label { 
            "State is {state}"


Simply run with cargo:

cargo run

Nice! You have created your first Freya app.

You can learn more with the examples in the repository.