The native-first framework for modern web apps.
A high-performance full-stack web framework that compiles JSX to native Web Components, with signals for reactive state updates.
React19 · DOM renderer
Build time
On state change
React Compiler adds build-time memoization. React renders affected components and commits necessary DOM changes.
Official docs →
AFWCustom elements + signals
Build time
On state change
Custom elements manage component lifecycles; signals rerun dependent bindings. No virtual DOM.
Reactivity docs →Runtime performance
Our runtime against the React, Solid and Svelte 5 libraries. Median ms over 3 pooled runs, 4× throttled; lower is better. Recorded 2026-08-01 with the earlier toolchain.
| Operation | afw | react | solid | svelte |
|---|---|---|---|---|
| create 1,000 rows | 261.1 | 274.1 | 244.3 | 257.6 |
| create 10,000 rows | 2627.8 | 3338.6 | 2542.2 | 2548.8 |
| append 1,000 to 1,000 | 295.8 | 286.1 | 270.1 | 267.4 |
| update every 10th (1k) | 91.8 | 93.8 | 108.9 | 92.5 |
| swap 2 rows (1k) | 33 | 246.4 | 31.1 | 31.3 |
| select row (1k) | 26.1 | 27.3 | 30 | 29 |
| remove row (1k) | 40.4 | 39.9 | 37.5 | 36.1 |
| clear 10,000 rows | 178.6 | 260.9 | 164 | 165.3 |
Build cost
Building a static site, not serving one — against Astro, Next.js, TanStack Start and Vite. Peak memory and wall time; lower is better.
| Metric | afw | astro | next | tanstack | vite |
|---|---|---|---|---|---|
| Peak build memory (MB) | 140 | 416 | 1226 | 510 | 260 |
| Build time (s) | 0.3 | 1.2 | 3.8 | 2 | 0.8 |
Capabilities & roadmap
What ships today, and what is planned next.
Compiler-driven SPA engine.
Direct DOM bindings without a virtual DOM tree.
$state, $derived, $effect, $context on fine-grained signals.
$ref to elements; imperative $expose.
Scoped DI with createContext, ContextProvider, and $context — no prop drilling.
Render a subtree into another DOM target; context resolves across the boundary.
Directory routing with client-side navigation.
Shared layouts composed around matching routes.
Client navigation checks and redirects; server auth uses middleware.
Dynamic route imports bundled and split by esdev.
Preload route chunks on hover or when a link enters the viewport.
Pre-render routes to HTML at build time.
MDX pages and components; docs theme included.
String renderers for an app-owned request server; shares the SSG render path.
First paint adopts the server DOM — pages, layouts, lists, conditionals, and islands with rich props.
Native plugin setup is available; embedded AFW templates await their upstream migration.
esdev watches and rebuilds configured targets, refreshing accepted modules or reloading the page.
Global stylesheet edits update in place and keep page state.
esdev hot-swaps JavaScript modules that explicitly accept updates.
Compatible component edits retain state and recover after a compile error; page/layout edits remount route views.
Located compile errors and source maps; runtime errors report through the framework API.
Component testing utilities.
Compile TSX components with macro typings; full editor tooling is in progress.
Component, state, and network inspection.
Processed by esdev from your CSS import; install Tailwind in the app.
Component-scoped class names.
Server middleware for pages, APIs and loader data when included in the request pipeline.
getCookie / setCookie / deleteCookie on @opentf/afw/server — RFC 6265 helpers for middleware, API routes, and loaders.
@opentf/afw-form — nested reactive values, validation and submit state.
File-based route.js / route.ts endpoints — standard Request/Response and dynamic params.
Route loaders (loader.js → router.data across SSR/SSG/SPA) + client-side resource(); queries and actions planned.
@opentf/afw-i18n — URL-prefix locale routing, ICU messages, and Intl formatters (Phase 1).
ARIA helpers and a11y defaults.
Start building
Follow the setup guide to configure and build your first app.