Dioxus is a recently-released 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 looks and feels just like React, so if you know React, then you'll feel right at home.
We also fixed and improved a bunch of stuff - check out the full list down below.
When Dioxus was initially released, we had very simple support for logging Dioxus elements out as TUI elements. In the past month or so, @Demonthos really stepped up and made the new crate a reality.
The new TUI renderer even supports mouse movements, keyboard input, async tasks, borders, and a ton more.
New Router
We totally revamped the router, switching away from the old yew-router approach to the more familiar React-Router . It's less type-safe but provides more flexibility and support for beautiful URLs.
Apps with routers are really simple now. It's easy to compose the "Router", a "Route", and "Links" to define how your app is laid out:
We're also using hooks to parse the URL parameters and segments so you can interact with the router from anywhere deeply nested in your app.
Give a big thanks to @autarch for putting in all the hard work to make this new router a reality.
The Router guide is available here - thanks to @dogedark .
Fermi for Global State Management
Managing state in your app can be challenging. Building global state management solutions can be even more challenging. For the first big attempt at building a global state management solution for Dioxus, we chose to keep it simple and follow in the footsteps of the Recoil.JS project.
Fermi uses the concept of "Atoms" for global state. These individual values can be get/set from anywhere in your app. Using state with Fermi is basically as simple as use_state.
Inline Props Macro
For internal components, explicitly declaring props structs can become tedious. That's why we've built the new inline_props macro. This macro lets you inline your props definition right into your component function arguments.
Simply add the inline_props macro to your component:
You won't be able to document each field or attach attributes so you should refrain from using it in libraries.
Props optional fields
Sometimes you don't want to specify every value in a component's props, since there might a lot. That's why the Props macro now supports optional fields. You can use a combination of default, strip_option, and optional to tune the exact behavior of properties fields.
Dioxus Web Speed Boost
We've changed how DOM patching works in Dioxus-Web; now, all of the DOM manipulation code is written in TypeScript and shared between our web, desktop, and mobile runtimes.
On an M1-max, the "create-rows" operation used to take 45ms. Now, it takes a mere 17ms - 3x faster than React. We expect an upcoming optimization to bring this number as low as 3ms.
Under the hood, we have a new string interning engine to cache commonly used tags and values on the Rust <-> JS boundary, resulting in significant performance improvements.
Overall, Dioxus apps are even more snappy than before.
Before and after:
Dioxus Desktop Window Context
A very welcome change, thanks AGAIN to @mrxiaozhuox is support for imperatively controlling the desktop window from your Dioxus code.
A bunch of new methods were added:
Minimize and maximize window
Close window
Focus window
Enable devtools on the fly
And more!
In addition, Dioxus Desktop now autoresolves asset locations, so you can easily add local images, JS, CSS, and then bundle it into an .app without hassle.
You can now build entirely borderless desktop apps:
CLI Tool
Thanks to the amazing work by @mrxiaozhuox , our CLI tool is fixed and working better than ever. The Dioxus-CLI sports a new development server, an HTML to RSX translation engine, a cargo fmt-style command, a configuration scheme, and much more.
Unlike its counterpart, Trunk.rs, the dioxus-cli supports running examples and tests, making it easier to test web-based projects and showcase web-focused libraries.
Async Improvements
Working with async isn't the easiest part of Rust. To help improve things, we've upgraded async support across the board in Dioxus.
First, we upgraded the use_future hook. It now supports dependencies, which let you regenerate a future on the fly as its computed values change. It's never been easier to add datafetching to your Rust Web Apps:
Additionally, we added better support for coroutines. You can now start, stop, resume, and message with asynchronous tasks. The coroutine is automatically exposed to the rest of your app via the Context API. For the vast majority of apps, Coroutines can satisfy all of your state management needs:
All New Features
We've covered the major headlining features, but there were so many more!
A new router @autarch
Fermi for global state management
Translation of docs and Readme into Chinese @mrxiaozhuox
2.5x speedup by using JS-based DOM manipulation (3x faster than React)
Beautiful documentation overhaul
InlineProps macro allows definition of props within a component's function arguments
Improved dev server, hot reloading for desktop and web apps @mrxiaozhuox
Templates: desktop, web, web/hydration, Axum + SSR, and more @mrxiaozhuox
Web apps ship with console_error_panic_hook enabled, so you always get tracebacks
Enhanced Hydration and server-side-rendering (recovery, validation)
Optional fields for component properties
Introduction of the EventHandler type
Improved use_state hook to be closer to react
Improved use_ref hook to be easier to use in async contexts
New use_coroutine hook for carefully controlling long-running async tasks
Prevent Default attribute
Provide Default Context allows injection of global contexts to the top of the app
push_future now has a spawn counterpart to be more consistent with rust
Add gap and gap_row attributes @FruitieX
File Drag n Drop support for Desktop
Custom handler support for desktop
Forms now collect all their values in oninput/onsubmit
Async tasks now are dropped when components unmount
Right-click menus are now disabled by default
Fixes
Windows support improved across the board
Linux support improved across the board
Bug in Calculator example
Improved example running support
A ton more! Dioxus is now much more stable than it was at release!
Breaking Changes and Migrations
UseState is not Copy - but now supports Clone for use in async. for_async has been removed
UseFuture and UseEffect now take dependency tuples
UseCoroutine is now exposed via the context API and takes a receiver
Async tasks are canceled when components are dropped
The ContextAPI no longer uses RC to share state - anything that is Clone can be shared
Community Additions
Looking Forward
Dioxus is still under rapid, active development. We'd love for you to get involved! For the next release, we're looking to add:
Native WGPU renderer support
A query library like react-query
Multiwindow desktop app support
Full LiveView integrations for Axum, Warp, and Actix
A builder pattern for elements (no need for rsx!)
Autoformatting of rsx! code (like cargo fmt)
Improvements to the VSCode Extension
If you're interested in building an app with Dioxus, make sure to check us out on:
