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 ssrFirst time? Run npm i -g @kitr/kitr once. Inside a project, the global kitr runs your project's own version.
// kitrrc.ts
import { defineKitrConfig } from '@kitr/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
34 packages run on web. Each one is a single kitr add away.
Built for the webOnly meaningful where pages are HTML.
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.
- platformKnow where your app is running, whether it is online or in the background, and handle the back button and deep links.
- secure-storageKeep login tokens and secrets in the phone or computer's secure vault instead of plain storage.
- storageSave small values in the browser or in cookies with types, and read the same cookies on the server.
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. Kits with web: app, fullstack, site, saas, realtime.
kitr new my-app --kit appFirst 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.