Quickstart

In a few minutes you'll have a typed page rendering in the browser — and you'll see the thing that makes Kovo different: a wiring mistake that fails the build instead of reaching production.

Status: pre-v1. Kovo isn't on npm yet. The commands below describe the intended flow and work today inside the Kovo repository as workspace packages. Until packages publish, clone the repo and work in a workspace member — that's all the Tutorial does, and it runs against the real compiler.

1. Scaffold#

pnpm create kovo my-app
cd my-app
pnpm install

You get a deliberately small project: one component, one route's worth of HTML, Tailwind wired through Vite, and the graph-check scripts that make Kovo's verification part of your CI from day one.

2. Run it#

vp dev

Open the page. It's a complete HTML document served from a typed route — no client framework booted, no hydration. View Source and you'll see real markup, not an empty <div id="root">.

3. Add a page#

A route is a plain value. The compiler captures its path as a literal type, so everything that points at it is checked against it:

import { route } from '@kovojs/server';

export const productRoute = route('/products/:id', {
  params: { id: String },
  page({ params }) {
    return `<main><h1>Product ${params.id}</h1></main>`;
  },
});

A <Link to="/products/:id" params={{ id }}> anywhere in your app now typechecks against this route. Rename the path and every link to it turns red under vp check.

4. Watch the compiler catch a bug#

This is the part worth seeing. Make a normal-looking mistake — bind an element to data the query doesn't return:

// the query returns { count: number }
<span>{cart.total}</span> // there is no `total`

Then run the check:

vp check

Instead of a blank render in production, you get a compile error at the binding, naming the fix. This is where Kovo surfaces the mistakes other stacks only reveal at runtime: handler references, form fields, navigation targets, and data-binding paths all live in the type system.

vp check     # typecheck + lint — Kovo's static errors show up here

If you internalize one command, make it vp check.

The commands you'll use daily#

Next steps#

• Thinking in Kovo — how components become self-describing HTML.
• Installation — prerequisites and what the scaffold sets up.
• Tutorial — build a real commerce app end to end.