Desktop
Windows, macOS and Linux in an Electron shell. Chromium ships with the app, so it looks and behaves the same on every machine.
- Windows
- macOS
- Linux
Not on npm yet. @kitr/desktop is held back from the first release while it gets the same polish as the rest. It works from the repository today, and this page describes how it will ship.
// platforms/app/ipc.ts
export type Ipc = {
'app.version': () => string
'dialog.openFile': () => string | null
}
// app/ipc.ts
import { createIpcClient } from 'kitr/desktop/client'
export const ipc = createIpcClient<Ipc>()
const version = await ipc.invoke('app.version')Your app, in a window
The same app/ folder runs in the shell. The main and preload processes live in platforms/app/, and electron-builder packages the installers.
Typed IPC
One schema in platforms/app/ipc.ts: handleIpc() implements it in main and createIpcClient() calls it from your components, typed both ways.
Storage that lives on disk
Storage items write to kitr-storage.json in the app data folder instead of localStorage. Your code does not change.
The recommended desktop shell
What you test is what every user runs. Pick Tauri instead when download size matters more than identical rendering.
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 Electron window, loading Vite on port 3200
- kitr build app
- electron-vite builds main, preload and the app
- kitr start app
- opens the built app
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
23 packages run on desktop. 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
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, toasts, and the components you copy into your app.
Pages & routing
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.
Learn more
A step-by-step guide for desktop is being written. Until then the platform guide below walks through it.
Add another platform
Platforms share the app/ folder, so adding one is a command, not a rewrite.