DEV Community

Alex Spinov
Alex Spinov

Posted on

Dioxus Has a Free API — React-Like Rust for Web, Desktop, and Mobile

#rust #webdev #webassembly #tutorial

Dioxus is a Rust UI framework inspired by React. One codebase compiles to web (WASM), desktop (native), mobile, and terminal — with hooks, state management, and JSX-like syntax.

Why Dioxus?

  • Cross-platform — web, desktop, mobile, TUI from one codebase
  • React-like — hooks, components, props — familiar patterns
  • Hot reload — instant updates during development
  • Native performance — desktop apps use native webview, not Electron

Quick Start 

cargo install dioxus-cli
dx new myapp
cd myapp
dx serve
Enter fullscreen mode Exit fullscreen mode

Components and State 

use dioxus::prelude::*;

fn app() -> Element {
    let mut count = use_signal(|| 0);

    rsx! {
        div {
            h1 { "Count: {count}" }
            button { onclick: move |_| count += 1, "Increment" }
            button { onclick: move |_| count -= 1, "Decrement" }
        }
    }
}

fn main() {
    dioxus::launch(app);
}
Enter fullscreen mode Exit fullscreen mode

Props and Child Components 

#[component]
fn UserCard(name: String, email: String, admin: bool) -> Element {
    rsx! {
        div { class: "card",
            h3 { "{name}" }
            p { "{email}" }
            if admin {
                span { class: "badge", "Admin" }
            }
        }
    }
}

fn app() -> Element {
    rsx! {
        UserCard {
            name: "Alice".to_string(),
            email: "alice@example.com".to_string(),
            admin: true,
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

Async Data Fetching 

#[component]
fn DogImage() -> Element {
    let future = use_resource(|| async {
        reqwest::get("https://dog.ceo/api/breeds/image/random")
            .await
            .unwrap()
            .json::<DogApi>()
            .await
            .unwrap()
    });

    match &*future.read_unchecked() {
        Some(data) => rsx! {
            img { src: "{data.message}", width: "300px" }
        },
        None => rsx! { p { "Loading..." } },
    }
}
Enter fullscreen mode Exit fullscreen mode

Routing 

#[derive(Routable, Clone)]
enum Route {
    #[route("/")]
    Home {},
    #[route("/users/:id")]
    UserPage { id: u64 },
    #[route("/:..route")]
    NotFound { route: Vec<String> },
}

#[component]
fn Home() -> Element {
    rsx! {
        h1 { "Home" }
        Link { to: Route::UserPage { id: 1 }, "User 1" }
    }
}
Enter fullscreen mode Exit fullscreen mode

Deploy Targets 

# Web (WASM)
dx build --release --platform web

# Desktop (native webview)
dx build --release --platform desktop

# Mobile
dx build --release --platform mobile
Enter fullscreen mode Exit fullscreen mode

Need data for your cross-platform app? Check out my Apify actors for web scraping APIs, or email spinov001@gmail.com for custom data solutions.

Dioxus, Tauri, or Electron — what's your cross-platform pick? Share below!

Top comments (0)