desktop

Ship the same app to Windows, macOS and Linux in an Electron shell: Chromium ships with the app, so it renders the same everywhere.

PlatformsClientBuilt onelectron-viteelectron-builder

What it is

@kitr/desktop adds an Electron platform. kitr dev opens your app in a window with hot reload, kitr build makes installers, and one Ipc type describes every call between the window and the main process.

The client code also runs in a plain browser, where it stands aside. For a smaller download with Rust behind the window, use tauri.

Install

kitr add desktop app

First time? Run npm i -g @kitr/kitr once. Inside a project, the global kitr runs your project's own version.

Adds @kitr/desktop with Electron, an app platform, platforms/app/ and the typed app/ipc.ts client. Adds router, platform and storage first if missing. Every change.

Quick start

Run the desktop platform. kitr starts Vite, then opens an Electron window on your app:

kitr dev app

First time? Run npm i -g @kitr/kitr once. Inside a project, the global kitr runs your project's own version.

The scaffold already declared an app.version command in platforms/app/ipc.ts and wrote a typed client for the window. Call it from a component:

// app/components/app-version.tsx
import { useEffect, useState } from 'react'
import { ipc } from '#app/ipc'

export function AppVersion() {
  const [version, setVersion] = useState<string>()
  useEffect(() => {
    if (ipc.available) void ipc.invoke('app.version').then(setVersion)
  }, [])
  return <small>{version ? `Acme Orders ${version}` : 'Acme Orders on the web'}</small>
}

In the window the footer reads Acme Orders 0.1.0. In the browser it reads Acme Orders on the web, because ipc.available is false there. Next in the guide: Open your first window.

Built on

Built on Role What kitr adds
Electron Bundles Chromium and Node.js, so the app renders and behaves the same on every machine. The platform contract: kitr dev, kitr build, kitr start and kitr doctor know about the window.
electron-vite Builds the main, preload and renderer bundles with Vite and hot reload. A generated config wired to kitrrc.ts.
electron-builder Produces installers, signs and notarises them. Defaults for app id, targets and output, overridable in config.

kitr adds typed IPC: one Ipc type, handleIpc in main, a safe bridge in preload and ipc.invoke, ipc.send and ipc.on in components.

Problems it solves

For a smaller download on the operating system's own webview, with Rust instead of Node.js behind the window, use Tauri instead.

Further reading