platform

Know where your app is running, whether it is online or in the background, and handle the back button and deep links.

Device featuresClientServer

What it is

@kitr/platform tells components where they run: web, desktop or mobile, which OS, online or not, in the foreground or not, with which safe areas. Hooks like usePlatform and useOnline replace user-agent checks; <Only> and perPlatform() pick what to render.

Runs on both sides, with safe defaults during server rendering. For the camera or biometrics, use native.

Install

kitr add platform

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

Adds @kitr/platform, its provider and config/platform.ts. The desktop, tauri and mobile packages add it for you. Every change.

Quick start

usePlatform() returns the platform service. Render it to see what kitr detected:

// app/components/platform-badge.tsx
import { usePlatform } from '@kitr/platform/react'

export function PlatformBadge() {
  const platform = usePlatform()
  return (
    <span>
      {platform.type} · {platform.os}
      {platform.native ? ' · native' : ''}
    </span>
  )
}

In Chrome on a Mac it shows web · macos. In the iOS simulator, mobile · ios · native. In an Electron window, desktop · macos · native. Next in the guide: Show where the app runs.

Built on

@kitr/platform is built on the kitr driver registry. Each platform package registers a PlatformDriver for the place it runs, and the service wraps whichever one is active, filling every gap with a browser default:

Platform package Driver
Web The browser: navigator.onLine, visibility, the History API.
Mobile Capacitor: app state, back button, deep links, safe areas.
Desktop Electron: app version, external links, exit.
Tauri Tauri: the same through its plugins.

kitr adds the service, the hooks, the server defaults, form-factor breakpoints and a devtools panel.

Problems it solves

Further reading