Dioxus 0.3 - Templates, Hot Reloading, LiveView, and more

If you’re new here: Dioxus (dye•ox•us) is a library for building React-like user interface in Rust. Dioxus supports a ton of targets: web, desktop, mobile, TUI, and more. On the web it renders via the DOM and on desktop and mobile you can choose between the WebView DOM, WGPU, or Skia.

Dioxus 0.3 is bringing a lot of fantastic new features:

• Massive performance improvements
• Hot reloading for web and desktop
• Autoformatting for RSX via dioxus fmt
• New LiveView renderer
• Input widgets for TUI
• Lua plugin system for CLI and overhaul of CLI
• Multi window desktop apps and direct access to Tao/Wry
• General improvements to RSX (if chains, for loops, boolean attributes, any values)
• Rusty event types with support for complex techniques like file uploading
• Skia renderer and WGPU renderer
• Chinese and Portuguese translations
• A new landing page

This release represents an absolutely massive jump forward for the Dioxus ecosystem. We hope to ship future features more quickly into stable now that many of the desired breaking changes have been incorporated into the core library.

Templates and performance improvements

We’ve made huge changes underpinning the architecture of Dioxus. The significance of these changes is hard to describe in this simple release document, but we did write a blog post about it here. Now, Dioxus performance is on par with of SolidJS.

Additionally, we’ve reworked how desktop apps stream edits from the native thread into the webview, greatly improving performance.

Hot Reloading

Dioxus can now update how your app looks without recompiling the underlying Rust code. For developers who choose to write their user interfaces with the RSX macro, the Dioxus development server will automatically update the appearance of a running app whenever the macro body is modified.

We’ve found hot reloading to significantly speed up development cycles, making it faster than ever to iterate your app.

Note that hot reloading works by interpreting the body of RSX macro calls. If the hot reloading engine detects a modification unrelated to RSX, then it will force a full refresh of the app.

Autoformatting

Another widely requested feature - autoformatting - is now built into the Dioxus CLI and VSCode Extension. Using the same interpreter engine in hot reloading, your code can now be formatted automatically. This saves a ton of time and ensures consistency between code commits.

Autoformatting can be used via the VSCode Extension which will autoformat as you code.

Or directly for use in CI or non-vscode editors with the dioxus fmt command.

Autoformatting respects some simple rustfmt features but is still in its early stages. If you find any quirks or disagree with the formatting style, feel free to file an issue.

LiveView and LiveComponents

Dioxus 0.3 marks the first official release of dedicated tooling for LiveView. LiveView is a new web-app development paradigm that combines the simplicity of server-side rendering with the rich interactivity of the single-page-application.

Because there’s no frontend build step or need for a dedicated backend, writing LiveView apps is easy. LiveView lets you freely mix database access into your frontend code, saving the hassle of a dedicated backend. LiveView is the fastest way to build a complete app in Rust.

async fn main() {
    let router = Router::new()
        .route("/", get(move || dioxus_liveview::body(addr))
        .route("/app", get(move |ws| dioxus_liveview::render(ws));

    axum::Server::bind("127.0.0.1".parse().unwrap())
        .serve(router.into_make_service())
        .await;
}

fn app(cx: Scope) -> Element {
		let posts = use_db_query(cx, RECENT_POSTS);

		render! {
				for post in posts {
						Post { key: "{post.id}", data: post }
				}
		}
}

TUI Input Widgets

Up to this point, Dioxus rendered into the terminal using just static elements. Now, with the release of Dioxus 0.3, we’re shipping a collection of input widgets for common utilities like buttons, sliders, text inputs, checkboxes, and more. These same widgets provide a basis of functionality for the native renderers we mention below.

Multi-window Desktop Apps

The Dioxus VirtualDom and tao/wry event loop now share the same scheduler, allowing full control of the window and event loop from within your desktop and mobile app. This unlocks everything a typical tauri app might have access to, allowing Dioxus to share more code with the rest of the Tauri ecosystem.

One big advantage of this is the ability to open and close multiple windows from within your Dioxus app. With access to the event loop, you can even get a raw window handle, allowing alternative rendering engines like OpenGL or WGPU.

Lowercase components

We’ve expanded what can be considered a component. Lowercase components are now accepted in the rsx macro provided that they either

• Use the path syntax (ie module::component)
• Container an underscore character

This is a similar restriction as found in other frameworks. Note that you still cannot define a one-word component without referencing it via path syntax. We’re hoping to resolve this soon, but it’s not a very easy problem to solve.

header {}              ❌
module::header {}      ❌
my_header {}           ✅

For Loops, If Chains, and more flexible RSX

We’ve made the rsx macro a lot more flexible with some new features to simplify lists and if statements.

Before, if you wanted to render a list, you’d need to create an iterator and map it to rsx. Now, we apply an automatic transformation of any for loop into an iterator. This should make lists more readable!

for dog in doggos {
	div { key: "{dog.id}",  "Dog: {dog.name}" }
}

Preliminary WGPU renderer

Dioxus 0.3 delivers on another commonly requested feature: native (non-web browser) rendering. This new update brings a very young, very unstable, but surprisingly capable WGPU renderer. This renderer is the culmination of many months of work: collaboration with the Bevy team to revive Taffy (flexbox), integration of the new Vello renderer, and research into highly efficient incremental screen patching.

The renderer is very raw but already capable of rendering HTML, CSS, and responding to user input. We’re actively working on adding accessibility support using the work done by EGUI as inspiration.

Skia Renderer

While not exactly a Dioxus Labs project, we wanted to make sure to call out the new Freya editor for Dioxus which uses Skia instead of Vello. Freya takes a different approach from Dioxus-Native in that instead of adhering to HTML and CSS, it sets its own styling and layout strategy. This has a different learning curve - you can’t take your CSS knowledge with you, but you get a styling system better designed for the job.

Freya is already an amazing piece of technology and has support for things like camera input and infinite canvas.

Completing support for cross-platform events

A common complaint with Dioxus’ event system is its reliance on imperfect web standards. For Dioxus 0.3, we overhauled the public API for events to be more “Rusty.” Instead of shipping our own types like keyboard keys, we now provide an API comfortable for the everyday Rustacean. You can now do mouse position math with euclid, match on keys native to keyboard-types, and get helpful docs with cargo-doc. Dioxus also now provides better support for file upload and drag-and-drop operations by downcasting the native event type if it exists.

Note that the old JS-like API is still available (but deprecated) and will be phased out in a future release of Dioxus.

Lua Plugin System for CLI

The CLI has been overhauled with a ton of new features and improved ergonomics. One major improvement to the CLI is the addition of a Lua-based plugin system. In the future we to expand the plugin system to any WASI-compatible modules but have simply opted for Lua support in the short term while we figure out the API.

Translations

The community seems to really enjoy Dioxus! And they want their friends to know about Dioxus, too! But, our guides have not been available in every language that developers want. In this release, we’re adding two new languages to our guide:

• Chinese provided by @mrxiaozhuox
• Portuguese provided by @whoeverdidthis

A new landing page and better docs

If you haven’t already noticed, our homepage is cleaner, more direct, and a bit more eye-catching. Check it out if you haven’t!

As part of our translation and Rust-ification work, @renis has overhauled our guide to be more familiar for Rust developers. This skips some of the boilerplate (IE install Rust) and gets straight into the action of building Dioxus apps.

Community Projects

• Styled components
• Opinionated starter pack
• Icon pack
• Caesar cyhper
• LED Strip controller
• GTK Renderer
• Formalize
• Story diagrammer
• Table crate
• Dioxus Helmet
• Skia renderer
• Use fetch
• Bevy Integration