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


Make sure to add Freya and Dioxus as dependencies:

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

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


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

    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:

fn main() {
fn app() -> Element {
        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:

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

        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.