A small, TypeScript-first toolkit for building web apps on native platform primitives — Custom Elements, Shadow DOM, the HTTP server, the Speculation Rules API — with no virtual DOM and minimal runtime.
Every package shares one paradigm: a factory returns a base class you extend,
TC39 decorators register members into per-class registries, and a fluent builder
wires it together. Component(tag), Controller(path), Page(url) and
Test() all feel the same.
@Component.define()
class Counter extends Component("x-counter") {
@Component.prop() count = 0;
@Component.event() inc() { this.count++; }
render() {
return html`<button @click=${this.inc}>${this.count}</button>`;
}
}| Package | What it is |
|---|---|
@youneed/dom |
Reactive components on Custom Elements + Shadow DOM (templates, scoped styles, fine-grained updates, schedulers, tasks). |
@youneed/server |
Tiny typed HTTP server — controllers, schema validation, guards, middleware, content negotiation. |
@youneed/ssr |
Server-side rendering (Declarative Shadow DOM) + the Page entity with first-class Speculation Rules. |
@youneed/dom-router |
Tiny client-side SPA router (hash / history / query modes). |
@youneed/devtools |
Floating inspector — component tree, time-travel, scheduler swap, plus Page/Routes/Map tabs. |
@youneed/vite-plugin |
Makes the framework work under Vite (lowers TC39 decorators). |
@youneed/test |
Class + decorator test framework in the same paradigm. |
create-youneedpackage |
Scaffolder for new workspace packages. |
The dependency graph is shallow: dom has none; ssr builds on dom + server;
devtools builds on dom + ssr. Pick only what you need.
pnpm install
pnpm build # build every package
pnpm typecheck
pnpm test # run each package's testsThe examples/ folder demonstrates each package end to end:
pnpm examples:serve:dom # client-side components → http://localhost:8080
pnpm examples:server # HTTP server (controllers, guards, middleware)
pnpm examples:ssr # SSR a component to Declarative Shadow DOM
pnpm examples:pages # Pages + Speculation Rules + devtools
pnpm examples:video # islands: SSR markup + client state (hydration)
pnpm examples:vite:dev # React + Vue + our framework, one Vite pageSee examples/ for the full list (router, crud, styles, portal,
tailwind, cascade, priority, …).
The framework uses TC39 standard decorators (@Component.define()), which no
browser runs natively yet and which Vite's oxc/esbuild leave untransformed at
their default target. When bundling with Vite, add
@youneed/vite-plugin so they're lowered. Running with
tsx / node --import tsx (as the examples and tests do) handles them out of the box.
MIT