tauri-remote-ui 0.12.0

A Tauri plugin that exposes the application’s UI to a web browser, allowing full interaction while the native app continues running. This enables frontend debug, end-to-end UI testing using existing web-based testing tools without requiring modifications to the app itself.
docs.rs failed to build tauri-remote-ui-0.12.0
Please check the build logs for more information.
See Builds for ideas on how to fix a failed build, or Metadata for how to configure docs.rs builds.
If you believe this is docs.rs' fault, open an issue.

Tauri Remote UI

Tauri Remote UI is a plugin that allows you to expose your Tauri application's UI to any web browser, enabling seamless remote interaction for development and end-to-end testing. The plugin bridges your native app and commercial browsers, letting you use standard web automation tools for testing and debugging—without modifying your app's logic.

Badges

Crates.io Version NPM Version

Features

  • Remote UI Exposure: Interact with your Tauri app from any browser.
  • Seamless Development: Enable Development debug attachment for fronend debugging.
  • Seamless E2E Testing: Use existing web automation/testing tools.
  • Automatic Transport Switching: IPC for WebView, WebSocket for browsers—handled transparently.
  • Customizable Security: Control and secure remote access as needed.
  • Future Compatibility For Test Migration: When CEF-RS becomes available, the same E2E tests (e.g., written with Playwright or similar tools that use the Chromium debug port) will work seamlessly in debug mode, ensuring long-term support for modern testing workflows.

Completed Features

Javascript

  • api/core - invoke
  • api/event - listen
  • api/app
    • defaultWindowIcon,fetchDataStoreIdentifiers,getBundleType,
    • getIdentifier,getName,getTauriVersion,
    • getVersion,hide,removeDataStore,
    • setDockVisibility,setTheme,show

Rust

  • emit - Emit method is updated to handle in this plugin.

Operation Flow

  • WebView: Uses IPC for communication between frontend and backend.
  • Commercial Browser: Uses WebSocket (WS) for remote frontend-backend communication.
  • Automatic Switching: The Rust backend plugin and npm frontend wrapper handle transport selection automatically.
  • Security: The exposure of the web app can be secured and customized by the end user.

Usage

  1. Install the Rust plugin in your Tauri project cargo add tauri-remote-ui.
  2. Initialize the Rust plugin
pub fn run() {
    tauri::Builder::default()
        .plugin(tauri_remote_ui::init())
        .invoke_handler(tauri::generate_handler![
            increment,
            decrement,
            enable_server,
            disable_server,
            exit_app,
        ])
        .setup(|app| {
            app.manage(Arc::new(RwLock::new(Counter { now: 0 })));
            Ok(())
        })
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}
  1. Replace Emitter trait
use tauri::Emitter;
webview_window.emit(data)

To

use tauri_remote_ui::EmitterExt;
webview_window.emit(data).await
  1. Start/Stop Server
async fn enable_server(app: AppHandle) -> String {
    match app.start_remote_ui(RemoteUiConfig::default().set_port(Some(9090))).await {
        Ok(()) => format!("Server Started."),
        Err(err) => format!("Server Error {:?}", err),
    }
}
async fn disable_server(app: AppHandle) -> String {
    match app.stop_remote_ui().await {
        Ok(()) => format!("Server Stoped"),
        Err(err) => format!("Server Error {:?}", err),
    }
}
  1. Install the NPM plugin in your frontend npm i tauri-remote-ui.
  2. Replace the NPM package
import { invoke } from "@tauri-apps/api/core";
import { listen } from "@tauri-apps/api/event";

To

import { invoke } from "tauri-remote-ui/api/core";
import { listen } from "tauri-remote-ui/api/event";
  1. Development WebSocket Proxy /remote_ui_ws proxy remote_ui url ws to your dev server like vite.
  2. Enable Source Map and update lauch.json setup in vscode to debug frontend

Plugin Development

  • Build Rust: cargo build
  • Build JS: cd guest-js && pnpm build
  • Example app: See examples/tauri-app/

License

MIT