Skip to main content
integrating-tauri-rust-frontends Integrating Rust/WASM frontend frameworks (Leptos, Yew, Dioxus, Sycamore) with Tauri v2 via Trunk, covering WASM compilation, Cargo.toml and Trunk.toml config, and withGlobalTauri API access. USE WHEN building a Tauri v2 app with a Rust/WASM frontend or wiring up Trunk.
Ir a la instalación Skills Marketplace Descubre y explora habilidades de IA creadas por la comunidad.
Ocupaciones relacionadas SOC
Basado en la clasificación ocupacional SOC
Instalar con Codex o Claude Copia este prompt, pégalo en Codex, Claude u otro asistente, y deja que revise la página de la skill y la instale por ti.
Mostrar detalles del prompt Un comando directo omite el prompt de revisión. Revisa el origen antes de ejecutarlo.
npx skills add https://github.com/Sheshiyer/skill-clusters --skill integrating-tauri-rust-frontendsEl comando permanece en una sola línea. Desplázate horizontalmente para revisarlo antes de copiarlo.
¿Prefieres una copia local? Descarga los archivos que SkillsMP tiene disponibles ahora.
Descargar Zip Descargando... Más de este repositorio Arcplume runs Grok through the Grok Build CLI's own OAuth-authenticated session (grok login) for image generation, with strict preflight validation, secret-safe handling, and headless CLI-driven execution -- no separate XAI_API_KEY billing. Video falls back to the billed xAI API. USE WHEN a user wants to generate an image via a locally logged-in Grok Build CLI session, e.g. 'generate an image with grok', 'use grok build', or 'use my logged-in grok session'.
Shared reference for the Selemene cluster: the two report surfaces (deterministic Rust reports vs. narrative witness-pipeline readings), the @selemene/bridge CLI contract, the output manifest format, and non-prescriptive witnessing tone. USE WHEN deciding which Selemene surface to invoke or when routing between birth/compatibility/transit reports and solo/dyadic readings.
Route Selemene Engine tasks to the right surface: deterministic reports (birth/compatibility/transit) via selemene-core and the @selemene/bridge CLI, or narrative witness readings via selemene-report. USE WHEN the user wants anything under the Selemene/Noesis umbrella but has not named the exact surface.
name integrating-tauri-rust-frontends description Integrating Rust/WASM frontend frameworks (Leptos, Yew, Dioxus, Sycamore) with Tauri v2 via Trunk, covering WASM compilation, Cargo.toml and Trunk.toml config, and withGlobalTauri API access. USE WHEN building a Tauri v2 app with a Rust/WASM frontend or wiring up Trunk. cluster tauri version 1.0.0
Tauri Rust/WASM Frontend Integration
This skill covers integrating Rust-based frontend frameworks with Tauri v2 for building desktop and mobile applications with WASM.
Supported Frameworks
Framework Description Bundler Leptos Reactive Rust framework for building web UIs Trunk Yew Component-based Rust framework Trunk Dioxus Cross-platform UI framework Trunk Sycamore Reactive library for Rust Trunk
All Rust/WASM frontends use Trunk as the bundler/dev server.
Critical Requirements
Static Site Generation (SSG) Only - Tauri does not support server-based solutions (SSR). Use SSG, SPA, or MPA approaches.withGlobalTauri - Must be enabled for WASM frontends to access Tauri APIs via
window.__TAURI__
wasm-bindgen
WebSocket Protocol - Configure ws_protocol = "ws" for hot-reload on mobile development.
Project Structure my-tauri-app/
├── src/
│ ├── main.rs # Rust frontend entry point
│ └── app.rs # Application component
├── src-tauri/
│ ├── src/
│ │ └── main.rs # Tauri backend
│ ├── Cargo.toml # Tauri dependencies
│ └── tauri.conf.json # Tauri configuration
├── index.html # HTML entry point for Trunk
├── Cargo.toml # Frontend dependencies
├── Trunk.toml # Trunk bundler configuration
└── dist/ # Build output (generated)
Configuration Files
Tauri Configuration (src-tauri/tauri.conf.json) {
"build" : {
"beforeDevCommand" : "trunk serve" ,
"devUrl" : "http://localhost:1420" ,
"beforeBuildCommand" : "trunk build" ,
"frontendDist" : "../dist"
} ,
"app" : {
"withGlobalTauri" : true }
}
beforeDevCommand: Runs Trunk dev server before TauridevUrl: URL where Trunk serves the frontend (default: 1420 for Leptos, 8080 for plain Trunk)beforeBuildCommand: Builds WASM bundle before packagingfrontendDist: Path to built frontend assetswithGlobalTauri: Required for WASM - Exposes window.__TAURI__ for API access
Trunk Configuration (Trunk.toml) [build]
target = "./index.html"
dist = "./dist"
[watch]
ignore = ["./src-tauri" ]
[serve]
port = 1420
open = false
[serve.ws]
ws_protocol = "ws"
target: HTML entry point with Trunk directivesignore: Prevents watching Tauri backend changesport: Must match devUrl in tauri.conf.jsonopen = false: Prevents browser auto-open (Tauri handles display)ws_protocol = "ws": Required for mobile hot-reload
Frontend Cargo.toml (Root) [package]
name = "my-app-frontend"
version = "0.1.0"
edition = "2021"
[lib]
crate-type = ["cdylib" , "rlib" ]
[dependencies]
wasm-bindgen = "0.2"
wasm-bindgen-futures = "0.4"
js-sys = "0.3"
web-sys = { version = "0.3" , features = ["Window" , "Document" ] }
tauri-wasm = { version = "2" , features = ["all" ] }
leptos = { version = "0.6" , features = ["csr" ] }
[profile.release]
opt-level = "z"
lto = true
codegen-units = 1
panic = "abort"
crate-type = ["cdylib", "rlib"]: Required for WASM compilationtauri-wasm: Provides Rust bindings to Tauri APIsfeatures = ["csr"]: Client-side rendering for frameworkRelease profile optimized for small WASM binary size
HTML Entry Point (index.html) <!DOCTYPE html >
<html >
<head >
<meta charset ="utf-8" />
<meta name ="viewport" content ="width=device-width, initial-scale=1" />
<title > My Tauri App</title >
<link data-trunk rel ="css" href ="styles.css" />
</head >
<body >
<div id ="app" > </div >
<link data-trunk rel ="rust" href ="." data-wasm-opt ="z" />
</body >
</html >
data-trunk rel="css": Include CSS filesdata-trunk rel="rust": Compile Rust crate to WASMdata-wasm-opt="z": Optimize for size
Leptos Setup
Leptos-Specific Cargo.toml [package]
name = "my-leptos-app"
version = "0.1.0"
edition = "2021"
[lib]
crate-type = ["cdylib" , "rlib" ]
[dependencies]
leptos = { version = "0.6" , features = ["csr" ] }
wasm-bindgen = "0.2"
wasm-bindgen-futures = "0.4"
console_error_panic_hook = "0.1"
tauri-wasm = { version = "2" , features = ["all" ] }
[profile.release]
opt-level = "z"
lto = true
Leptos Main Entry (src/main.rs) use leptos::*;
mod app;
use app::App;
fn main () {
console_error_panic_hook::set_once ();
mount_to_body (|| view! { <App /> });
}
Leptos App Component (src/app.rs) use leptos::*;
use wasm_bindgen::prelude::*;
use wasm_bindgen_futures::spawn_local;
#[wasm_bindgen]
extern "C" {
#[wasm_bindgen(js_namespace = ["window" , "__TAURI__" , "core" ] )]
async fn invoke (cmd: &str , args: JsValue) -> JsValue;
}
#[component]
pub fn App () -> impl IntoView {
let (message, set_message) = create_signal (String ::new ());
let greet = move |_| {
spawn_local (async move {
let args = serde_json::json!({ "name" : "World" });
let args_js = serde_wasm_bindgen::to_value (&args).unwrap ();
let result = invoke ("greet" , args_js).await ;
let greeting : String = serde_wasm_bindgen::from_value (result).unwrap ();
set_message.set (greeting);
});
};
view! {
<main>
<h1>"Welcome to Tauri + Leptos" </h1>
<button on:click=greet>"Greet" </button>
<p>{message}</p>
</main>
}
}
Alternative: Using tauri-wasm Crate use leptos::*;
use tauri_wasm::api::core::invoke;
#[component]
pub fn App () -> impl IntoView {
let (message, set_message) = create_signal (String ::new ());
let greet = move |_| {
spawn_local (async move {
let result : String = invoke ("greet" , &serde_json::json!({ "name" : "World" }))
.await
.unwrap ();
set_message.set (result);
});
};
view! {
<main>
<button on:click=greet>"Greet" </button>
<p>{message}</p>
</main>
}
}
Tauri Backend Command In src-tauri/src/main.rs:
#[tauri::command]
fn greet (name: &str ) -> String {
format! ("Hello, {}! You've been greeted from Rust!" , name)
}
fn main () {
tauri::Builder::default ()
.invoke_handler (tauri::generate_handler![greet])
.run (tauri::generate_context!())
.expect ("error while running tauri application" );
}
Development Commands
cargo install trunk
rustup target add wasm32-unknown-unknown
cd src-tauri && cargo tauri dev
cd src-tauri && cargo tauri build
trunk serve --port 1420
trunk build --release
Mobile Development For mobile platforms, additional configuration is needed:
Trunk.toml for Mobile [serve]
port = 1420
open = false
address = "0.0.0.0"
[serve.ws]
ws_protocol = "ws"
tauri.conf.json for Mobile {
"build" : {
"beforeDevCommand" : "trunk serve --address 0.0.0.0" ,
"devUrl" : "http://YOUR_LOCAL_IP:1420"
}
}
Replace YOUR_LOCAL_IP with your machine's local IP (e.g., 192.168.1.100).
Accessing Tauri APIs from WASM
Method 1: Direct wasm-bindgen (Recommended for control) use wasm_bindgen::prelude::*;
use serde::{Serialize, Deserialize};
#[wasm_bindgen]
extern "C" {
#[wasm_bindgen(js_namespace = ["window" , "__TAURI__" , "core" ] , catch)]
async fn invoke (cmd: &str , args: JsValue) -> Result <JsValue, JsValue>;
#[wasm_bindgen(js_namespace = ["window" , "__TAURI__" , "event" ] )]
async fn listen (event: &str , handler: &Closure<dyn Fn (JsValue)>) -> JsValue;
#[wasm_bindgen(js_namespace = ["window" , "__TAURI__" , "event" ] )]
async fn emit (event: &str , payload: JsValue);
}
async fn call_backend () -> Result <String , String > {
let args = serde_wasm_bindgen::to_value (&serde_json::json!({
"path" : "/some/path"
})).map_err (|e| e.to_string ())?;
let result = invoke ("read_file" , args)
.await
.map_err (|e| format! ("{:?}" , e))?;
serde_wasm_bindgen::from_value (result)
.map_err (|e| e.to_string ())
}
Method 2: Using tauri-wasm Crate use tauri_wasm::api::{core, event, dialog, fs};
let result : MyResponse = core::invoke ("my_command" , &my_args).await ?;
event::listen ("my-event" , |payload| {
}).await ;
event::emit ("my-event" , &payload).await ;
let file = dialog::open (dialog::OpenDialogOptions::default ()).await ?;
let contents = fs::read_text_file ("path/to/file" ).await ?;
Troubleshooting
WASM not loading
Verify withGlobalTauri: true in tauri.conf.json
Check browser console for WASM errors
Ensure wasm32-unknown-unknown target is installed
Hot-reload not working on mobile
Set ws_protocol = "ws" in Trunk.toml
Use address = "0.0.0.0" for mobile access
Verify firewall allows connections on dev port
Tauri APIs undefined
withGlobalTauri must be trueCheck window.__TAURI__ exists in browser console
Verify tauri-wasm version matches Tauri version
Large WASM binary size
Enable release profile optimizations
Use opt-level = "z" for size optimization
Enable LTO with lto = true
Consider wasm-opt post-processing
Trunk build fails
Check Cargo.toml has crate-type = ["cdylib", "rlib"]
Verify index.html has correct data-trunk directives
Ensure no server-side features enabled in framework
Version Compatibility Component Version Tauri 2.x Trunk 0.17+ Leptos 0.6+ wasm-bindgen 0.2.x tauri-wasm 2.x
Always match tauri-wasm version with your Tauri version.
