Skip to content

Getting started

Client setup

Point the @kolektiv npm scope at Nexus releases and install the router plus a framework adapter.

Keel ships a framework-neutral router (@kolektiv/keel) and seven pack adapters: Svelte 5, React 18/19, Vue 3, Solid 1.9, Preact 10, Lit 3, and Angular 19. Svelte is the default in the examples, not the only option, see Framework adapters.

Client packages resolve from Kolektiv Nexus at repo.kolektiv.computer. Put this in .npmrc at the pack root (or your user ~/.npmrc):

# .npmrc
@kolektiv:registry=https://repo.kolektiv.computer/repository/npm-public/

Resolving does not require Nexus credentials; publishing does.

Current release: 0.1.2. Every adapter is versioned in lockstep with @kolektiv/keel, so pin the same version everywhere. Pick your framework:

package.json, by framework
{
"dependencies": {
  "@kolektiv/keel": "0.1.2",
  "@kolektiv/keel-svelte": "0.1.2",
  "svelte": "^5.16.0"
},
"devDependencies": {
  "@kolektiv/keel-pack": "0.1.2",
  "@sveltejs/vite-plugin-svelte": "^5.0.3",
  "vite": "^6.2.0"
}
}
{
"dependencies": {
  "@kolektiv/keel": "0.1.2",
  "@kolektiv/keel-react": "0.1.2",
  "@tanstack/react-query": "^5.66.0",
  "react": "^19.0.0",
  "react-dom": "^19.0.0"
},
"devDependencies": {
  "@kolektiv/keel-pack": "0.1.2",
  "@types/react": "^19.0.0",
  "@types/react-dom": "^19.0.0",
  "@vitejs/plugin-react": "^4.3.4",
  "vite": "^6.2.0"
}
}
{
"dependencies": {
  "@kolektiv/keel": "0.1.2",
  "@kolektiv/keel-vue": "0.1.2",
  "@tanstack/vue-query": "^5.66.0",
  "vue": "^3.5.13"
},
"devDependencies": {
  "@kolektiv/keel-pack": "0.1.2",
  "@vitejs/plugin-vue": "^5.2.1",
  "vite": "^6.2.0",
  "vue-tsc": "^2.2.0"
}
}
{
"dependencies": {
  "@kolektiv/keel": "0.1.2",
  "@kolektiv/keel-solid": "0.1.2",
  "@tanstack/solid-query": "^5.66.0",
  "solid-js": "^1.9.4"
},
"devDependencies": {
  "@kolektiv/keel-pack": "0.1.2",
  "vite": "^6.2.0",
  "vite-plugin-solid": "^2.11.1"
}
}
{
"dependencies": {
  "@kolektiv/keel": "0.1.2",
  "@kolektiv/keel-preact": "0.1.2",
  "@tanstack/preact-query": "^5.66.0",
  "preact": "^10.25.4"
},
"devDependencies": {
  "@kolektiv/keel-pack": "0.1.2",
  "@preact/preset-vite": "^2.10.1",
  "vite": "^6.2.0"
}
}
{
"dependencies": {
  "@kolektiv/keel": "0.1.2",
  "@kolektiv/keel-lit": "0.1.2",
  "@tanstack/query-core": "^5.66.0",
  "lit": "^3.2.1"
},
"devDependencies": {
  "@kolektiv/keel-pack": "0.1.2",
  "vite": "^6.2.0"
}
}
{
"dependencies": {
  "@angular/common": "^19.0.0",
  "@angular/core": "^19.0.0",
  "@angular/platform-browser": "^19.0.0",
  "@kolektiv/keel": "0.1.2",
  "@kolektiv/keel-angular": "0.1.2",
  "@tanstack/angular-query-experimental": "^5.66.0",
  "@tanstack/query-core": "^5.66.0",
  "rxjs": "^7.8.0"
},
"devDependencies": {
  "@analogjs/vite-plugin-angular": "^1.10.0",
  "@angular/build": "^19.0.0",
  "@angular/compiler-cli": "^19.0.0",
  "@kolektiv/keel-pack": "0.1.2",
  "typescript": "~5.8.3",
  "vite": "^6.2.0"
}
}

TanStack Query ships as the framework-specific package (@tanstack/react-query, @tanstack/vue-query, and so on). Pin it with the adapter above.

Lit and Angular take @tanstack/query-core directly because those adapters build their own controllers/injectables over it.

@kolektiv/keel is the host router (visits, history, prefetch, action()). The adapter package is the framework binding. @kolektiv/keel-pack is the toolchain: keel-scaffold from a live host schema, a Vite plugin (keelPack) that discovers pages and writes a .feb, and keel-pack to zip a dist by hand.

Bootstrap

Scaffold writes src/bootstrap.ts. It reads #__keel_seed, hydrates the TanStack query cache, and mounts the pack entry. The import is the only difference between frameworks:

src/bootstrap.ts
import { bootstrap } from "@kolektiv/keel-svelte"

void bootstrap()
import { bootstrap } from "@kolektiv/keel-react"

void bootstrap()
import { bootstrap } from "@kolektiv/keel-vue"

void bootstrap()
import { bootstrap } from "@kolektiv/keel-solid"

void bootstrap()
import { bootstrap } from "@kolektiv/keel-preact"

void bootstrap()
import { bootstrap } from "@kolektiv/keel-lit"

void bootstrap()
import { bootstrap } from "@kolektiv/keel-angular"

void bootstrap()

bootstrap(options?) accepts the core RouterConfig (onSeed, onError, and the visit defaults). Each adapter’s onSeed hydrates the query cache under ["keel", "page"] first, then calls your onSeed for the initial seed and every applied visit. Angular’s bootstrap also creates the pack-wide zoneless application before core applies the seed.

Next: scaffold a pack. The host half is Host (Ktor).