Learn weft
weft 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
Once weft is on npm, one command makes an app:
npm create @weft-jsweft isn't on npm yet. For now, run this from a checkout of the repo. Installation has every step, and Quick start tours the main ideas in a few minutes.
node packages/create-weft/scripts/local.mjs new my-appA 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 '@weft-js/core'import { Badge, Button, Card } from '@weft-js/warp'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
A weft app is built from isolated pieces of UI called components.
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 weft: 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 warp
So far you've built components that hold state and respond to events. This chapter is about how they look, and about warp, weft'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.