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

Cargo.toml

Make sure to add Freya and Dioxus as dependencies:

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

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

src/main.rs

In Freya, you run your app by calling a launch method and passing it your root Component:

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

use freya::prelude::*;

fn main() {
    launch(app); // This will block the main thread
}

Let's define our root component, called app:

#![allow(unused)]
fn main() {
fn app() -> Element {
    rsx!(
        label { "Hello, World!" }
    )
}
}

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

Let's make it stateful by using Dioxus Signals:

#![allow(unused)]
fn main() {
fn app() -> Element {
    // `use_signal` takes a callback that initializes the state
    let mut state = use_signal(|| 0); 

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

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

    rsx!(
        label { 
            onclick,
            "State is {state}"
         }
    )
}
}

Running

Simply run with cargo:

cargo run

Nice! You have created your first Freya app.

You can learn more with the examples in the repository.