Frontend Freedom: UI Integration

Bring Your Own Framework

One of Tauri’s core philosophies is Frontend Agnostic. This means Tauri doesn’t care if you use React, Vue, Svelte, Angular, Solid, or just plain vanilla HTML and JavaScript. If it compiles to HTML, JS, and CSS, Tauri can run it.

This allows you to stick to the tools you already love without learning a specific ‘Tauri UI’ language.

Configuring tauri.conf.json

To connect your frontend to the Tauri Rust backend, you need to tell Tauri two things: where your dev server is running (for development) and where your built files are located (for production). This is done in the tauri.conf.json file under the build section.

{
  "build": {
    // The command CLI runs before tauri build
    "beforeBuildCommand": "npm run build",
    // The command CLI runs before tauri dev
    "beforeDevCommand": "npm run dev",
    // Where the production assets are located (relative to tauri.conf.json)
    "frontendDist": "../dist",
    // The URL of your local dev server
    "devUrl": "http://localhost:1420"
  }
}

In Tauri v2, frontendDist replaces the older distDir configuration, offering more flexibility for different project structures.

Styling for a Native Feel

A web page behaves differently from a desktop app. Users expect to drag the window by the title bar, but they don’t expect to highlight the text of the UI buttons or see a browser context menu when right-clicking.

1. Window Dragging

To make a custom title bar or header draggable, you don’t need complex JavaScript event listeners. Tauri provides a specific data attribute: data-tauri-drag-region.

<div data-tauri-drag-region class="titlebar">
  <h1>My App</h1>
</div>

When the user clicks and holds anywhere within this div, the OS handles the window movement efficiently.

2. Disabling Text Selection and Zoom

To prevent your app from feeling like a website, apply the following CSS to your body or root element. This stops the user from accidentally selecting UI text or changing the cursor to a text-caret.

body {
  user-select: none;
  cursor: default;
}