Tauri
Windows, macOS and Linux as a small Rust binary on the webview the operating system provides. Downloads measured in megabytes, not hundreds of them.
- Windows
- macOS
- Linux
kitr add tauri appFirst time? Run npm i -g @kitr/kitr once. Inside a project, the global kitr runs your project's own version.
// app/commands.ts
import { commandQuery, defineCommands } from '@kitr/tauri/client'
type Commands = { greet: (args: { name: string }) => string }
export const commands = defineCommands<Commands>()
export const greeting = commandQuery(commands.greet, 'greet')
await commands.greet({ name: 'kitr' })Small and light
No browser ships with the app, so installers are small and memory use is low. The webview differs between Windows, macOS and Linux, so test on each.
Typed Rust commands
defineCommands() types your Rust commands for the app, and commandQuery turns one into a cached query like any other.
Events both ways
useTauriEvent() listens to events Rust emits, and emitTauri() sends one back. Both do nothing in a plain browser, so the web build is unchanged.
Checked before you build
Builds need the Rust toolchain. kitr doctor checks for it, and the Rust project lives in platforms/app/src-tauri for you to edit.
Same commands as every platform
Every platform answers to kitr dev, kitr build and kitr start, by the name you gave it. Leave the name off to run them all.
- kitr dev app
- the Tauri window over the Vite dev server
- kitr build app
- tauri build: a native bundle per OS
- kitr doctor
- checks the Rust toolchain
Electron or Tauri?
Both run the same app/ and register the same platform and storage drivers, so switching is one line in kitrrc.ts. A project keeps one of the two. Electron is the default we recommend.
| Electron | Tauri | |
|---|---|---|
| Ships with | Its own Chromium | The OS webview |
| Installer size | Larger (a browser inside) | Small |
| Rendering | Identical on every OS | Can differ between OSes |
| Native side | Node, over typed IPC | Rust commands and events |
| Build needs | Node only | The Rust toolchain |
Packages that work here
32 packages run on Tauri. Each one is a single kitr add away.
Switch to native hereTheir drivers switch to the native APIs underneath, with no code change.
Data fetching
App state
Backend
Interface
- 3dRender 3D scenes and models that stay smooth on phones and fall back when WebGL is missing.
- animationAnimate components and page changes, and respect the visitor's reduced-motion setting.
- i18nTranslate your app into several languages with typed keys.
- tableShow rows of data with sorting, paging and filters that stay in the URL.
- tailwindStyle with Tailwind CSS classes, already set up with kitr's colours.
- themeLight, dark and system themes with no flash on load, design tokens, and the components you copy into your app.
- toastShow short messages like "Saved" or "Could not send" from anywhere in your app, even outside React.
Device features
- filesLet people open, save and pick files on any platform, with a download fallback in older browsers.
- nativeClipboard, share sheet, haptics, location, camera and fingerprint unlock, each with a web fallback.
- notificationsAsk for permission and show local or scheduled notifications that open the right page when tapped.
- secure-storageKeep login tokens and secrets in the phone or computer's secure vault instead of plain storage.
Analytics & errors
- analyticsCount page views and button clicks, and send them to the analytics service you choose.
- consentAsk for cookie and tracking consent once, and hold analytics and error reports until people agree.
- monitoringCatch errors in the browser and on the server, and see which user hit them and what they did first.
Developer tools
- devtoolsA panel that shows what every package is doing, opened by a button, a shortcut or a gesture. On in development; one flag ships it.
- loggerWrite readable logs in development and structured logs in production.
- mocksFake your API while you build the frontend or run tests.
- testingTest components and API routes with everything already wired up.
Learn more
A step-by-step guide for Tauri is being written. Until then the platform guide below walks through it.
Start from a kit
A kit sets up the platforms, the packages and a first page in one command.
kitr new my-app --kit tauriFirst time? Run npm i -g @kitr/kitr once. Inside a project, the global kitr runs your project's own version.
Add another platform
Platforms share the app/ folder, so adding one is a command, not a rewrite.