What is kitr
The mental model for kitr in five minutes: platforms, packages, kits and providers, and what it is built on.
kitr is an opinionated TypeScript and React framework for apps on every platform, with the tools already chosen and wired. You write one app/ folder, and one CLI (kitr add, kitr dev, kitr build) sets everything up.
Each package wraps a library you may already know, such as TanStack Router, React Hook Form or h3. The glossary defines every other word.
The four words in detail
Platform. A platform is where the app runs: a website, an API server, a desktop window, a phone. You list platforms in kitrrc.ts, and kitr build builds each into dist/<name>/.
Package. A package is published as @kitr/<name>, and you import from it. The import gives you the upstream library unchanged, plus a few helpers.
Kit. A kit is only a shortcut: afterwards you add and remove packages like any other project. Kits lists them all.
Provider. A provider is a small object with hooks that run in order at startup. kitrrc.ts lists them, so you can read your project's startup in one file.
One app, several platforms
The same app/ can run in more than one place. This kitrrc.ts has a website and an API:
// kitrrc.ts
import { defineKitrConfig } from '@kitr/kitr/app'
import { server } from '@kitr/server'
import { web } from '@kitr/web'
export default defineKitrConfig({
packages: ['@kitr/router', '@kitr/query'],
providers: [
() => import('@kitr/router/provider'),
() => import('@kitr/query/provider'),
],
platforms: {
site: web({ mode: 'ssr' }),
api: server({ runtime: 'node' }),
},
})
kitr dev site api runs both, and kitr build writes dist/site/ and dist/api/. The shape of the file is on Configuration.
Built on libraries you know
kitr re-exports these libraries and adds a thin layer: one import path, one data contract and one startup order.
| kitr piece | Upstream library | What kitr adds |
|---|---|---|
@kitr/router |
TanStack Router | A route table in app/routes.ts, requireAuth(), can() |
@kitr/query |
TanStack Query | Contracts and cache effects |
@kitr/forms |
React Hook Form | Schema validation, server errors mapped to fields |
@kitr/state |
Zustand | Stores that are safe with server rendering |
@kitr/web |
Vite and TanStack Start | Static, spa, ssr and pwa modes |
@kitr/server |
h3 and srvx | An API server with request context |
The native shells are web views around your app, not React Native. The auth package runs sessions, passwords and users inside your own API, or connects to Better Auth or another provider you already have.