Getting started

Supported Tauri Version

This plugin requires Tauri 2.0 or later.

Install

Install the Rust crate by adding the following to your Cargo.toml file:

src-tauri/Cargo.toml

[dependencies]
tauri-plugin-valtio = "2"

Install the JavaScript package with your preferred package manager:

npm

npm install @tauri-store/valtio

pnpm

pnpm add @tauri-store/valtio

deno

deno add npm:@tauri-store/valtio

bun

bun add @tauri-store/valtio

yarn

yarn add @tauri-store/valtio

Usage

1. Enable the required permissions in your capabilities file:

src-tauri/capabilities/valtio.json

{
  "identifier": "valtio",
  "windows": ["*"],
  "permissions": ["valtio:default", "core:event:default"]
}

2. Register the plugin with Tauri:

src-tauri/src/lib.rs

tauri::Builder::default()
  .plugin(tauri_plugin_valtio::init())
  .run(tauri::generate_context!())
  .expect("error while running tauri application");

3. Create a store:

src/stores/counter.ts

import { store } from '@tauri-store/valtio';

export const counterStore = store('counter', { counter: 0 });

export const increment = () => {
  counterStore.state.counter++;
};

4. Start it:

await counterStore.start();

TIP

Stores won't be saved nor synchronized until you start them, but you can enable the autoStart option to make them start automatically.

5. Use the store in your React components:

import { useSnapshot } from 'valtio';
import { counterStore, increment } from '@/stores/counter';

export default function MyComponent() {
  // `state` is the actual valtio proxy.
  const snap = useSnapshot(counterStore.state);

  return (
    <div>
      <p>Counter: {snap.counter}</p>
      <button type="button" onClick={increment}>
        <span>Increment</span>
      </button>
    </div>
  );
}