Introducing Dioxus v0.1 ✨

Jan 3, 2022

@jkelleyrtp, @alexkirsz

After many months of work, we're very excited to release the first version of Dioxus!

Dioxus is a new library for building interactive user interfaces (GUI) with Rust. It is built around a Virtual DOM, making it portable for the web, desktop, server, mobile, and more.

Dioxus has the following design goals:

Familiar: Offer a React-like mental model and API surface
Robust: Avoid runtime bugs by moving rules and error handling into the type system
Performant: Scale to the largest apps and the largest teams
Productive: Comprehensive inline documentation, fast recompiles, and deeply integrated tooling
Extensible: Reusable hooks and components that work on every platform

Dioxus is designed to be familiar for developers already comfortable with React paradigms. Our goal is to ensure a smooth transition from TypeScript/React without having to learn any major new concepts.

To give you an idea of what Dioxus looks like, here's a simple counter app:

use dioxus::prelude::*;

fn main() {
	dioxus::desktop::launch(app)
}

fn app(cx: Scope) -> Element {
    let mut count = use_state(&cx, || 0);

    cx.render(rsx! {
        h1 { "Count: {count}" }
        button { onclick: move |_| count += 1, "+" }
        button { onclick: move |_| count -= 1, "-" }
    })
}

This simple counter is a complete desktop application, running at native speeds on a native thread. Dioxus automatically shuttles all events from the WebView runtime into the application code. In our app, we can interact natively with system APIs, run multi-threaded code, and do anything a regular native Rust application might do. Running cargo build --release will compile a portable binary that looks and feels the same on Windows, macOS, and Linux. We can then use cargo-bundle to bundle our binary into a native .app/.exe/.deb.

Dioxus supports many of the same features React does including:

Server-side-rendering, pre-rendering, and hydration
Mobile, desktop, and web support
Suspense, fibers, coroutines, and error handling
Hooks, first-class state management, components
Fragments, conditional rendering, and custom elements

However, some things are different in Dioxus:

Automatic memoization (opt-out rather than opt-in)
No effects - effectual code can only originate from actions or coroutines
Suspense is implemented as hooks - not deeply ingrained within Dioxus Core
Async code is explicit with a preference for coroutines instead

As a demo, here's our teaser example running on all our current supported platforms:

This very site is built with Dioxus, and the source code is available here.

To get started with Dioxus, check out any of the "Getting Started" guides for your platform of choice, or check out the GitHub Repository for more details.

Show me some examples of what can be built!

Why should I use Rust and Dioxus for frontend?

We believe that Rust's ability to write high-level and statically typed code should make it easier for frontend teams to take on even the most ambitious of projects. Rust projects can be refactored fearlessly: the powerful type system prevents an entire class of bugs at compile-time. No more cannot read property of undefined ever again! With Rust, all errors must be accounted for at compile time. You cannot ship an app that does not — in some way — handle its errors.

Difference from TypeScript/React:

TypeScript is still fundamentally JavaScript. If you've written enough TypeScript, you might be bogged down with lots of configuration options, lack of proper support for "go-to-source," or incorrect ad-hoc typing. With Rust, strong types are built-in, saving tons of headache like cannot read property of undefined.

By using Rust, we gain:

Strong types for every library
Immutability by default
A simple and intuitive module system
Integrated documentation (go to source actually goes to source instead of the .d.ts file)
Advanced pattern matching
Clean, efficient, composable iterators
Inline built-in unit/integration testing
High quality error handling
Flexible standard library and traits
Powerful macro system
Access to the crates.io ecosystem

Dioxus itself leverages this platform to provide the following guarantees:

Correct use of immutable data structures
Guaranteed handling of errors and null-values in components
Native performance on mobile
Direct access to system IO

And much more. Dioxus makes Rust apps just as fast to write as React apps, but affords more robustness, giving your frontend team greater confidence in making big changes in shorter timespans.

Semantically, TypeScript-React and Rust-Dioxus are very similar. In TypeScript, we would declare a simple component as:

type CardProps = {
  title: string,
  paragraph: string,
};

const Card: FunctionComponent<CardProps> = (props) => {
  let [count, set_count] = use_state(0);
  return (
    <aside>
      <h2>{props.title}</h2>
      <p> {props.paragraph} </p>
	  <button onclick={() => set_count(count + 1)}> Count {count} </button>
    </aside>
  );
};

In Dioxus, we would define the same component in a similar fashion:

#[derive(Props, PartialEq)]
struct CardProps {
	title: String,
	paragraph: String
}

static Card: Component<CardProps> = |cx| {
	let mut count = use_state(&cx, || 0);
	cx.render(rsx!(
		aside {
			h2 { "{cx.props.title}" }
			p { "{cx.props.paragraph}" }
			button { onclick: move |_| count+=1, "Count: {count}" }
		}
	))
};

However, we recognize that not every project needs Rust - many are fine with JavaScript! We also acknowledge that Rust/Wasm/Dioxus does not fix "everything that is wrong with frontend development." There are always going to be new patterns, frameworks, and languages that solve these problems better than Rust and Dioxus.

As a general rule of thumb, Dioxus is for you if:

your app will become very large
you need to share code across many platforms
you want a fast way to build for desktop
you want to avoid electron or need direct access to hardware
you're tired of JavaScript tooling

Today, to publish a Dioxus app, you don't need NPM/WebPack/Parcel/etc. Dioxus simply builds with cargo, and for web builds, Dioxus happily works with the popular trunk project.

Show me more

Here, we'll dive into some features of Dioxus and why it's so fun to use. The guide serves as a deeper and more comprehensive look at what Dioxus can do.

Building a new project is simple

To start a new project, all you need is Cargo, which comes with Rust. For a simple desktop app, all we'll need is the dioxus crate with the appropriate desktop feature. We start by initializing a new binary crate:

$ cargo init dioxus_example
$ cd dioxus_example

We then add a dependency on Dioxus to the Cargo.toml file, with the "desktop" feature enabled:

[dependencies]
dioxus = { version = "*", features = ["desktop"] }

We can add our counter from above.

use dioxus::prelude::*;

fn main() {
	dioxus::desktop::launch(app)
}

fn app(cx: Scope) -> Element {
    let mut count = use_state(&cx, || 0);

    cx.render(rsx! {
        h1 { "Count: {count}" }
        button { onclick: move |_| count += 1, "+" }
        button { onclick: move |_| count -= 1, "-" }
    })
}

And voilà! We can cargo run our app

Support for JSX-style templating

Dioxus ships with a templating macro called RSX, a spin on React's JSX. RSX is very similar to regular struct syntax for Rust so it integrates well with your IDE. If used with Rust-Analyzer (not tested anywhere else) RSX supports code-folding, block selection, bracket pair colorizing, autocompletion, symbol renaming — pretty much anything you would expect from writing regular struct-style code.

rsx! {
	div { "Hello world" }
	button {
		onclick: move |_| log::info!("button pressed"),
		"Press me"
	}
}

If macros aren't your style, you can always drop down to the factory API:

LazyNodes::new(|f| {
	f.fragment([
		f.element(div, [f.text("hello world")], [], None, None)
		f.element(
			button,
			[f.text("Press Me")],
			[on::click(move |_| log::info!("button pressed"))],
			None,
			None
		)
	])
})

The rsx! macro generates idiomatic Rust code that uses the factory API — no different than what you'd write by hand yourself.

To make it easier to work with RSX, we've built a small VSCode extension with useful utilities. This extension provides a command that converts a selected block of HTML into RSX so you can easily reuse existing web templates.

Dioxus is perfected for the IDE

Note: all IDE-related features have only been tested with [Rust-Analyzer](https://github.com/rust-analyzer/...

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Bug Fixes

Commit Statistics

Commit Details

Introducing Dioxus v0.1 ✨

Show me some examples of what can be built!

Why should I use Rust and Dioxus for frontend?

Difference from TypeScript/React:

Show me more

Building a new project is simple

Support for JSX-style templating

Dioxus is perfected for the IDE

Releases: DioxusLabs/dioxus

v0.1.7

Bug Fixes

Commit Statistics

Commit Details

Dioxus v0.1.0

Introducing Dioxus v0.1 ✨

Show me some examples of what can be built!

Why should I use Rust and Dioxus for frontend?

Difference from TypeScript/React:

Show me more

Building a new project is simple

Support for JSX-style templating

Dioxus is perfected for the IDE