Basics

#Introduction

Dioxus is a developer-friendly framework that empowers developers to ship cross-platform apps with one codebase. You write your apps in Rust, style them with HTML/CSS, enhance them with native APIs, and distribute them as platform-native bundles.

We’ve worked to push forward Rust itself, developing technologies like Subsecond Rust hot-reloading, WASM bundle-splitting, linker-based asset bundling, and a modular WGPU-based HTML/CSS renderer.

The Dioxus syntax is similar to React’s JSX markup, borrowing React’s component and hooks approach. All components are Rust functions that take Properties, define state with hooks, and return an Element. We only support markup declared with the rsx! {} macro; this ensures your app is automatically optimized and supports our powerful devtools.

#[component]
fn Component(name: String) -> Element {
    let mut count = use_signal(|| 0);

    rsx! {
        em { "Hello, {name}" }
        p { "Count: {count}" }
    }
}

#Install

#Windows

With binstall:

Set-ExecutionPolicy Unrestricted -Scope Process; iex (iwr "https://raw.githubusercontent.com/cargo-bins/cargo-binstall/main/install-from-binstall-release.ps1").Content

Install (or update):

cargo binstall dioxus-cli

#Project

Create a new project (accept default values):

dx new dioxus-basic