Platform · web

Web

Static sites, single-page apps and server-rendered apps, all from the same app folder. Installable as a PWA with one option.

  • Static
  • SPA
  • SSR
  • PWA
kitr add web site --mode ssr

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

Read the web guideWhat works here
Built onViteTanStack StartVite PWA
// kitrrc.ts
import { defineKitrConfig } from 'kitr/app'
import { web } from 'kitr/web'

export default defineKitrConfig({
  platforms: {
    www: web({ mode: 'static' }),
    site: web({ mode: 'ssr', pwa: { name: 'Acme', themeColor: '#2D6CF0' } }),
    admin: web({ mode: 'spa', port: 3002 }),
  },
})

Three rendering modes, one option

static prerenders every route to HTML, spa serves one shell with client routing, and ssr renders on request through TanStack Start. Switch with kitr config site mode ssr.

Installable when you want it

pwa: true adds the web manifest and a service worker. useInstallPrompt and useServiceWorker from kitr/web/client show the install button and the update banner.

Search engines read it

kitr add seo writes config/seo.ts: page heads, share previews, the prerender list, the sitemap and robots.txt come from that one file.

As many sites as you need

A marketing site, an app and an admin panel are three named web platforms in one project, each with its own mode and port.

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 site
Vite with hot reload on port 3000
kitr build site
dist/site/client, plus dist/site/server/server.js in ssr mode
kitr start site
serves the build with srvx

Packages that work here

25 packages run on web. Each one is a single kitr add away.

All packages →

Built for the webOnly meaningful where pages are HTML.

seoGive every page a title, a share preview and a sitemap entry so search engines and chat apps show it well.Pages & routingClient Server

Data fetching

App state

Backend

Real-time

Interface

Forms

Auth

Pages & routing

Device features

Analytics & errors

Developer tools

Learn more

GuidesAdd sign-in, end to endUsers, password sign-in, cookie sessions, guarded pages, sessions in server actions and API routes, and permissions checked the same way in the browser and on the server.Build a dashboard on an existing APIA signed-in admin app with a sortable, paged table and a create form, against a backend you already have.Deploy to productionBuild a kitr app, set its environment, run migrations and ship it as static files, one Node process, a Docker image or a Cloudflare Worker.Build a full-stack appOne codebase with server-rendered pages, a database, server actions, a public API and live updates.Add live updatesPush changes from the server to every open screen over typed channels, so lists and details update without a reload.Migrate from Next.jsMove a Next.js App Router project to kitr page by page, with a map from every Next.js concept to its kitr equivalent.Keep several apps in one repositoryA pnpm workspace with a web app, an API server, a shared package of schemas and types, and a private kitr package, all checked and tested together.Test your appA test suite for a kitr app, from permission rules to a real browser, with a test database and a CI workflow that runs it on every push.
DocsPlatform guideInstall, configure, run and ship.API referenceEvery export, with its types.Platforms referenceEvery option, command and the platform contract.
ResourcesTanStack Start The renderer behind ssr and static mode.Vite Dev server and build for every UI platform.Vite PWA What pwa: true sets up underneath.web.dev: Learn PWA Install prompts, offline and updates, explained.

Start from a kit

A kit sets up the platforms, the packages and a first page in one command. Kits with web: app, fullstack, site, saas, realtime.

kitr new my-app --kit app

First time? Run npm i -g 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.

Mix and match →
ServerNode · Bun · DenoSoonDesktopElectronSoonTauriRust + webviewSoonMobileiOS · Android