Supported Frontend Templates

The create-tauri-app scaffolding tool ships with a curated set of frontend templates so you don’t have to wire up a Tauri project from scratch. These templates cover the frameworks you are most likely to reach for when building a desktop app, along with a few Rust-native options that let you write your frontend logic in the same language as the backend. Every template is pre-configured to work with Tauri v2’s build pipeline — the dev server, asset handling, and window integration all work out of the box.

When you run the interactive prompt, your choices cascade through three decisions: the language ecosystem, the specific UI template, and (for JavaScript/TypeScript) whether you want TypeScript or plain JavaScript. The templates also have shortcut names you can pass directly to the --template flag for non-interactive use — those names appear in each section below.

JavaScript and TypeScript Templates

All JavaScript/TypeScript templates (except Angular) use Vite under the hood for development and bundling. This keeps the project structure familiar if you’ve used create-vite before: a top-level index.html, a src directory with your application code, and a vite.config.ts that Tauri’s init command extends automatically. The Tauri backend lives in the adjacent src-tauri directory, completely separate from your frontend tooling.

Template presets at a glance

The Angular template always uses TypeScript; there is no plain JavaScript variant.

Vanilla

The Vanilla template gives you a single index.html page with a linked JavaScript or TypeScript file and a minimal CSS stylesheet. There is no component model, no state management library, and no build-step magic beyond what Vite provides — just a plain web page that Tauri loads into its native window. This is the lightest possible starting point and a good sandbox for experimenting with Tauri’s native APIs without any framework opinions getting in the way.

vanilla-ts/
├── index.html
├── package.json
├── tsconfig.json
├── vite.config.ts
└── src/
    ├── main.ts
    └── style.css

You import Tauri’s JavaScript API in main.ts exactly as you would in any other framework:

// src/main.ts
import { invoke } from "@tauri-apps/api/core";
document.querySelector<HTMLButtonElement>("#greet")?.addEventListener("click", () => {
  invoke("greet", { name: "Tauri" }).then(console.log);
});

No extra dependencies, no JSX — just the platform.

Vue

The Vue template scaffolds a Vue 3 project with the Composition API and <script setup> syntax enabled by default. The generated App.vue includes Tauri’s greet example so you can verify the IPC bridge works immediately.

<!-- src/App.vue -->
<script setup lang="ts">
import { ref } from "vue";
import { invoke } from "@tauri-apps/api/core";
const name = ref("");
const greeting = ref("");
async function greet() {
  greeting.value = await invoke("greet", { name: name.value });
}
</script>

You get the same Vite-based hot-reload experience in the Tauri window — change a component, save, and the window updates without a full restart.

Svelte

The Svelte template uses Svelte 4 (or optionally Svelte 5 with runes, depending on the package version at creation time) with Vite’s Svelte plugin. The entry point is a standard src/main.ts that mounts an App.svelte component. Because Svelte compiles away at build time, the final Tauri binary has no virtual DOM overhead — only the actual DOM mutations your app needs.

React

The React template generates a project with React 18+ and Vite’s React plugin. It includes a functional App component that demonstrates calling a Tauri command through the @tauri-apps/api package.

react-ts/
├── index.html
├── package.json
├── tsconfig.json
├── vite.config.ts
└── src/
    ├── App.tsx
    ├── App.css
    ├── main.tsx
    └── vite-env.d.ts

A typical App.tsx after scaffolding:

// src/App.tsx
import { useState } from "react";
import { invoke } from "@tauri-apps/api/core";
function App() {
  const [name, setName] = useState("");
  const [greeting, setGreeting] = useState("");
  async function greet() {
    setGreeting(await invoke("greet", { name }));
  }
  return (
    <div>
      <input value={name} onChange={(e) => setName(e.target.value)} />
      <button onClick={greet}>Greet</button>
      <p>{greeting}</p>
    </div>
  );
}
export default App;

React’s ecosystem — React Router, TanStack Query, Zustand — all work inside a Tauri window the same way they do in a browser.

SolidJS

The Solid template provides a fine-grained reactive setup with Vite’s Solid plugin. It looks similar to React at a glance (JSX, components) but compiles to direct DOM updates with no virtual DOM. This can be a measurable advantage when you need to keep the render thread lightweight while Tauri’s Rust backend does heavy work.

Angular

The Angular template is the odd one out: it uses the Angular CLI instead of Vite, and it forces TypeScript. The scaffolded project includes a standalone component with Tauri’s greet command wired up.

angular/
├── angular.json
├── package.json
├── tsconfig.json
└── src/
    ├── index.html
    ├── main.ts
    └── app/
        ├── app.component.ts
        ├── app.component.html
        └── app.component.css

Because Angular manages its own build, you do not get a vite.config.ts. The Tauri CLI still detects the dev server URL and build command from tauri.conf.json, which create-tauri-app fills in correctly for Angular projects.

Preact

Preact is a 3 kB alternative to React with the same modern API. The Preact template uses Vite’s Preact plugin and aliases react imports to preact/compat so most React libraries work without changes. If your app’s bundle size matters and you still want a React-like developer experience, this is the template to reach for.

Rust Frontend Templates

When you choose “Rust (cargo)” as your frontend language, you stay in a single-language stack: both the Tauri backend and the UI logic are written in Rust, compiled to WebAssembly, and served through a thin HTML shell. These templates use Trunk as the bundler — Trunk handles compiling Rust to Wasm, linking your assets, and starting a dev server that Tauri can point to.

You need the wasm32-unknown-unknown target installed:

rustup target add wasm32-unknown-unknown

Missing this target is the most common reason a Rust-frontend template fails to build.

Vanilla (Rust)

The Rust-variant of Vanilla is not a Rust UI framework. It generates a project that builds an HTML/JS frontend using Cargo’s build tooling and Trunk. You still write HTML, CSS, and JavaScript, but the tooling lives entirely in the Cargo ecosystem — no separate package.json or Node.js required. This is the right choice when you want a web-based frontend but prefer to manage the project with Cargo alone.

Yew

Yew is a component-based framework inspired by React and Elm. It uses a virtual DOM, JSX-like syntax via the yew::html! macro, and an actor-based architecture for message passing. A Yew template gives you a main.rs with a functional component that can call Tauri commands through wasm-bindgen.

yew/
├── Cargo.toml
├── Trunk.toml
├── index.html
└── src/
    └── main.rs

Inside main.rs:

use yew::prelude::*;
#[function_component(App)]
fn app() -> Html {
    let counter = use_state(|| 0);
    let onclick = {
        let counter = counter.clone();
        Callback::from(move |_| counter.set(*counter + 1))
    };
    html! {
        <div>
            <p>{ *counter }</p>
            <button {onclick}>{"Increment"}</button>
        </div>
    }
}
fn main() {
    yew::Renderer::<App>::new().render();
}

The interaction between Yew components and Tauri’s Rust backend happens through commands exposed with #[tauri::command] and called from the frontend via wasm-bindgen wrappers. Both sides are Rust, so you can share types and logic across the boundary without serialisation gymnastics.

Leptos

Leptos is a fine-grained reactive framework built on signals. There is no virtual DOM — mutations go straight to the real DOM nodes. The template sets up a Leptos app with leptos::mount_to_body and a root component. Leptos’s reactive system makes it natural to mirror Tauri state that changes over time, like a streaming file download or a WebSocket message.

Sycamore

Sycamore is another reactive Rust framework, similar in spirit to SolidJS. It also compiles to direct DOM updates and uses a signal-based reactivity model. The template gives you a Sycamore App component inside main.rs, ready to call Tauri commands.

.NET Template: Blazor

The Blazor template lets you build the entire frontend in C# using Blazor WebAssembly. It scaffolds a .NET project that compiles your Razor components to WebAssembly and loads them inside Tauri’s WebView. You need the .NET SDK (8.0 or later) installed.

blazor/
├── BlazorApp.csproj
├── Program.cs
├── _Imports.razor
├── wwwroot/
│   └── index.html
└── Pages/
    └── Index.razor

The Tauri backend (Rust) and the Blazor frontend (C#) are separate processes that communicate over Tauri’s IPC bridge. The Blazor template configures the dev server URL automatically, so cargo tauri dev launches the .NET project alongside the Rust backend.

Community Templates

Beyond the official list, the Tauri community maintains a growing collection of templates for frameworks like Next.js, Nuxt, SvelteKit, and others. These live in the Awesome Tauri repository. You can use a community template by passing its GitHub path to create-tauri-app:

npm create tauri-app@latest my-app -- --template github:username/repo

Community templates are not tested as part of Tauri’s CI, so they may lag behind the latest Tauri v2 releases. Always check the template’s README for its supported Tauri version.

The template you choose shapes your development experience — the component model, the reactivity system, the build tooling, and the language you write day-to-day. All templates produce the same outcome: a working Tauri v2 project with a live dev server and a production build pipeline. Explore CLI flags for running these templates in Running create-tauri-app, or learn how your project files are laid out in Key Files and Directories Explained.