Learn Kerf
kerf is TSX that compiles to direct DOM updates. A component runs once, state is a box with a .value, and the compiler names each mistake with a code and a fix. These chapters go from your first component to the server, in order.
Quick start
One command makes an app, and a second runs it:
npm create kerf my-appcd my-app && npx kerf devpnpm, bun and deno work the same way. Installation has every option, and Quick start tours the main ideas in a few minutes.
A component is a function that returns TSX. This one keeps a count in state and shows it. The code is the code running beside it.
Cart 0
import { state } from '@kerf-js/core'import { Badge, Button, Card } from '@kerf-js/veneer'export default function Product() { const inCart = state(0) return ( <Card eyebrow="Coffee" title="House blend, 250 g" > <p> Cart <Badge count>{inCart.value}</Badge> </p> <Button onClick={() => inCart.value++}> Add to cart </Button> </Card> )}Try this: Press Add to cart. Only the badge's text changes: Product itself never runs again.
Chapters
Get started
If you have written React, most of this will read right straight away.
Describing the UI
Kerf is a TypeScript framework for building user interfaces.
Adding interactivity
Some things on the screen change in response to what people do.
Managing state
As your app grows, it pays to be deliberate about where state lives, what shape it has, and how it flows between components.
Escape hatches
So far, everything has stayed inside Kerf: state in boxes, values derived from them, TSX that follows both. That covers most of an app.
Full-stack apps
Everything so far ran in the browser. A real app also has a server: it stores data, knows who is signed in, and sends each page with its data already in…
Styling and veneer
So far you've built components that hold state and respond to events. This chapter is about how they look, and about Veneer, Kerf's UI toolkit.
Testing and tooling
The chapters so far were about building an app. This one is about the tools around it: the tests that tell you it works, the plugins that extend it, the…
Looking for an exact API, a command or a diagnostic code? That is in Reference.