Desktop
This guide will cover concepts specific to the Dioxus desktop renderer.
Running Javascript
Dioxus provides some ergonomic wrappers over the browser API, but in some cases you may need to access parts of the browser API Dioxus does not expose.
For these cases, Dioxus desktop exposes the use_eval hook that allows you to run raw Javascript in the webview:
use dioxus::prelude::*; fn main() { dioxus_desktop::launch(app); } fn app(cx: Scope) -> Element { // Use eval returns a function that can spawn eval instances let create_eval = use_eval(cx); // You can create as many eval instances as you want let mut eval = create_eval( r#" // You can send messages from JavaScript to Rust with the dioxus.send function dioxus.send("Hi from JS!"); // You can receive messages from Rust to JavaScript with the dioxus.recv function let msg = await dioxus.recv(); console.log(msg); "#, ) .unwrap(); // You can send messages to JavaScript with the send method eval.send("Hi from Rust!".into()).unwrap(); let future = use_future(cx, (), |_| { to_owned![eval]; async move { // You can receive any message from JavaScript with the recv method eval.recv().await.unwrap() } }); match future.value() { Some(v) => cx.render(rsx!( p { "{v}" } )), _ => cx.render(rsx!( p { "hello" } )), } }
Custom Assets
You can link to local assets in dioxus desktop instead of using a url:
use dioxus::prelude::*; fn main() { dioxus_desktop::launch(app); } fn app(cx: Scope) -> Element { cx.render(rsx! { div { img { src: "examples/assets/logo.png" } } }) }
Integrating with Wry
In cases where you need more low level control over your window, you can use wry APIs exposed through the Desktop Config and the use_window hook