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
kitr add desktop appFirst time? Run npm i -g @kitr/kitr once. Inside a project, the global kitr runs your project's own version.
// 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
32 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
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
Start from a kit
A kit sets up the platforms, the packages and a first page in one command.
kitr new my-app --kit desktopFirst 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.