Common Resource Types

Tauri's resource system lets you ship files alongside your application that the webview frontend or the Rust backend can use at runtime. JSON configuration, custom fonts, local images, AI model weights, HTML templates — these are all files that would normally require a server or manual placement, but Tauri makes them part of the bundle.

This page catalogs the most common types you will bundle, with patterns for adding them to your configuration, loading them in React, and reading them from Rust. It assumes you understand the basics of adding resources (covered in Adding Resources). If you are new to the resources field in tauri.conf.json, review that page first.

JSON and Configuration Files

Ship a settings.json or defaults.toml that your app can fetch without touching a network. The frontend can read it via the asset protocol, and the Rust backend can open it directly from the resource directory.

Bundling configuration files

Assume you have a file at resources/config/settings.json. Register it in tauri.conf.json:

{
  "bundle": {
    "resources": [
      "resources/config/**"
    ]
  }
}

The glob pattern includes everything under resources/config/. After a build, the file ends up inside the application bundle and is accessible through the asset:// protocol.

Loading from the frontend

In your React code, use the asset protocol URL directly. The base is asset://localhost. For a file at resources/config/settings.json, the full URL becomes asset://localhost/config/settings.json — the top-level resources/ directory is stripped from the path.

import { useEffect, useState } from "react";
interface AppConfig {
  theme: string;
  apiBase: string;
}
export default function App() {
  const [config, setConfig] = useState<AppConfig | null>(null);
  useEffect(() => {
    fetch("asset://localhost/config/settings.json")
      .then((res) => res.json())
      .then(setConfig)
      .catch(console.error);
  }, []);
  if (!config) return <p>Loading configuration…</p>;
  return (
    <div style={{ background: config.theme === "dark" ? "#111" : "#fff" }}>
      <p>API base: {config.apiBase}</p>
    </div>
  );
}

The fetch call succeeds because Tauri registers a custom protocol handler. You don't need convertFileSrc for this case — the asset URL works directly in production and during tauri dev. During development, Tauri serves resource files from the same resources directory, so the same URL behaves identically.

Reading from the Rust backend

When you need the configuration file from a Rust command, use app.path().resource_dir() to construct the full path. This is safer than hard‑coding because the resource directory location changes between development and production.

#[tauri::command]
fn read_settings(app: tauri::AppHandle) -> Result<String, String> {
    let resource_dir = app.path().resource_dir().map_err(|e| e.to_string())?;
    let settings_path = resource_dir.join("config/settings.json");
    std::fs::read_to_string(&settings_path)
        .map_err(|e| format!("Failed to read settings: {}", e))
}
fn main() {
    tauri::Builder::default()
        .invoke_handler(tauri::generate_handler![read_settings])
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}

The path config/settings.json mirrors the file’s location inside the resources/ directory — just as with the frontend URL, the resources/ prefix is not part of the resolved path.

Fonts

Custom fonts bundled as resources let you ship a complete design without an internet connection. The webview can load them through CSS @font-face declarations pointing to asset URLs.

Including font files

Place your .woff2 (or .ttf) fonts in a resource directory, e.g., resources/fonts/, and register them:

{
  "bundle": {
    "resources": [
      "resources/fonts/**"
    ]
  }
}

Loading the font in CSS

Inside your global CSS file (imported by your React app), declare the font face using the asset protocol:

@font-face {
  font-family: "MyCustomFont";
  src: url("asset://localhost/fonts/my-font.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}
body {
  font-family: "MyCustomFont", sans-serif;
}

The browser inside the webview resolves asset://localhost/fonts/my-font.woff2 to the physical file that Tauri serves. There are no CORS restrictions because the resource is loaded from the same origin as the page.

Images

Images bundled as resources can be displayed in <img> tags, used as CSS backgrounds, or processed on the Rust side before being sent to the frontend.

Displaying an image in React

Given an image at resources/images/logo.png, add the resource pattern:

{
  "bundle": {
    "resources": [
      "resources/images/**"
    ]
  }
}

Then use the asset URL directly in JSX:

export default function Header() {
  return (
    <header>
      <img
        src="asset://localhost/images/logo.png"
        alt="App logo"
        style={{ height: 48 }}
      />
      <h1>My Tauri App</h1>
    </header>
  );
}

The image is served by the same protocol handler; no additional configuration is needed.

Processing images in Rust

Sometimes you want to manipulate an image — resize, convert formats, or extract metadata — before displaying it. The Rust backend can read the resource file directly, process it with a crate like image, and return a base64 data URL.

use image::GenericImageView;
#[tauri::command]
fn get_processed_logo(app: tauri::AppHandle) -> Result<String, String> {
    let resource_dir = app.path().resource_dir().map_err(|e| e.to_string())?;
    let logo_path = resource_dir.join("images/logo.png");
    let img = image::open(&logo_path).map_err(|e| e.to_string())?;
    let (width, height) = img.dimensions();
    // Create a base64-encoded PNG data URL
    let mut buffer = std::io::Cursor::new(Vec::new());
    img.write_to(&mut buffer, image::ImageOutputFormat::Png)
        .map_err(|e| e.to_string())?;
    let base64 = base64::encode(buffer.into_inner());
    Ok(format!("data:image/png;base64,{}", base64))
}

The frontend can call this command and use the result as the src of an <img> element. This approach keeps the original file untouched and lets you do on‑the‑fly adjustments without bundling multiple pre‑processed copies.

Audio and Video Files

Media files work the same way. Use the asset protocol in standard HTML5 tags, and the webview handles playback through the operating system’s codecs.

Example: local background music

Include a directory of audio files:

{
  "bundle": {
    "resources": [
      "resources/audio/**"
    ]
  }
}

A React component that plays a background track:

import { useRef, useEffect } from "react";
export default function AudioPlayer() {
  const audioRef = useRef<HTMLAudioElement>(null);
  useEffect(() => {
    audioRef.current?.play().catch(() => {
      // Autoplay may be blocked; handle gracefully
    });
  }, []);
  return (
    <audio ref={audioRef} loop>
      <source src="asset://localhost/audio/ambient.mp3" type="audio/mpeg" />
      Your browser does not support the audio element.
    </audio>
  );
}

For video, use the <video> tag in exactly the same way.

Templates

HTML templates, Mustache files, or Markdown documents can be bundled and rendered at runtime. This is useful for generating reports, emails, or in‑app documentation where the template structure should remain editable without touching the compiled Rust code.

Bundling a simple HTML template

Place resources/templates/welcome.html:

<!DOCTYPE html>
<html>
<body>
  <h1>Welcome, {{username}}!</h1>
  <p>Your account was created on {{date}}.</p>
</body>
</html>

Configuration:

{
  "bundle": {
    "resources": [
      "resources/templates/**"
    ]
  }
}

A Rust command can read the template, replace placeholders, and return the final HTML:

#[tauri::command]
fn render_welcome(app: tauri::AppHandle, username: String) -> Result<String, String> {
    let resource_dir = app.path().resource_dir().map_err(|e| e.to_string())?;
    let template_path = resource_dir.join("templates/welcome.html");
    let template = std::fs::read_to_string(&template_path)
        .map_err(|e| format!("Could not read template: {}", e))?;
    let date = chrono::Local::now().format("%Y-%m-%d").to_string();
    let rendered = template
        .replace("{{username}}", &username)
        .replace("{{date}}", &date);
    Ok(rendered)
}

For more complex templating, use a crate like handlebars or tera. The pattern remains the same: resolve the path, read the file, and process it.

Loading a template from the frontend

If you don’t need Rust‑side processing, fetch the template as text and use a client‑side template engine (or simple string replacement):

import { useEffect, useState } from "react";
export default function WelcomeMessage({ username }: { username: string }) {
  const [html, setHtml] = useState("");
  useEffect(() => {
    fetch("asset://localhost/templates/welcome.html")
      .then((res) => res.text())
      .then((template) => {
        const date = new Date().toISOString().split("T")[0];
        const rendered = template
          .replace("{{username}}", username)
          .replace("{{date}}", date);
        setHtml(rendered);
      });
  }, [username]);
  return <div dangerouslySetInnerHTML={{ __html: html }} />;
}

AI Model Files

Tauri applications that perform local machine‑learning inference need to ship model weights. ONNX files, TensorFlow Lite models, and other formats can be bundled as resources, making the model available offline without a download step.

Including a model

Assuming an ONNX model at resources/models/classifier.onnx:

{
  "bundle": {
    "resources": [
      "resources/models/**"
    ]
  }
}

The Rust backend can load this model using a crate like ort (the Rust ONNX Runtime binding):

use ort::session::Session;
#[tauri::command]
async fn run_inference(app: tauri::AppHandle, input: Vec<f32>) -> Result<Vec<f32>, String> {
    let resource_dir = app.path().resource_dir().map_err(|e| e.to_string())?;
    let model_path = resource_dir.join("models/classifier.onnx");
    let session = Session::builder()
        .map_err(|e| e.to_string())?
        .commit_from_file(model_path)
        .map_err(|e| e.to_string())?;
    // Build input tensor and run inference (details depend on model)
    let input_tensor = ort::value::Tensor::<f32>::from_array(([1, input.len() as i64], input.into_boxed_slice()))
        .map_err(|e| e.to_string())?;
    let outputs = session.run(ort::inputs![input_tensor].map_err(|e| e.to_string())?);
    // Extract result...
    Ok(vec![])
}

Common Pitfalls Across Resource Types

Beyond type‑specific mistakes, a few mistakes cut across every resource type. Spotting them early saves hours of debugging.

Summary

Understanding these common resource types and how to handle them provides a solid foundation for adding arbitrary data to your Tauri application.