High-speed web apps with X.
X is a fullstack React framework for Bun. Your folder structure is the router, your API lives beside your pages, and static pages, SSR and server functions all run in one process.
bun create thexjs-app@latest my-appScaffold a project
bun create thexjs-app downloads the template and resolves deps in one command.
$ bun create thexjs-app@latest my-app01 Philosophyone folder · one process
Why X
Your folder structure is the router. Your API lives beside your pages. Static pages, SSR and server functions share one Bun process, and only the islands you mark ever ship JavaScript.
02 The toolkitscroll →
Four tools. One process.
Routing, rendering, data and auth all speak the same file-tree language, so they compose without glue.
File-based routing
Pages, loaders, API routes and server functions live in the file tree. The folder is the router.
pages/index.tsx -> /
pages/blog/[slug].tsx -> /blog/:slug
pages/_404.tsx -> catch-all 404Islands hydration
Pages ship as static HTML. Mark what hydrates and visitors download JavaScript only for those parts.
export const islands = { Counter };
<Island name="Counter" client="visible">
<Counter />
</Island>Server functions
Import server code into client components. Typed, CSRF-safe, with no endpoint glue to write.
// src/actions/greet.ts
export async function greet(name: string) {
return `Hello, ${name}!`;
}Data & migrations
SQLite and PostgreSQL with versioned migrations, straight from your loaders.
const db = connectSQLite({ path: "data/app.db" });
await runSQLiteMigrations(db, "data/migrations");20×
faster cold start than Next.js (32ms vs 640ms)
92
request count vs. server bundles in one process
HTTP/3
behind the built-in production server
−4MB
node_modules vs. a Next.js portable build
03 A minute with X
From zero to a running app in 60 seconds.
The tour plays through the five steps where a framework either earns its keep or doesn't: scaffolding, routes, APIs, data, and deploys. One terminal, no cuts.
$ bun create thexjs-app@latest my-app04 Speed
It's fast. Here's the evidence.
Every step below was measured against the same page source on the same machine. Change the tab, watch the bars.
32ms
vs Next.js 640ms
Cold boot. Median of 1,000 runs, Apple Silicon, Bun 1.2.
05 Batteries included
Everything you need is already there.
Routes, data, auth, content and config each expose a small typed API that reads like the file it lives in.
REST endpoints beside your pages, same process, same lifecycle.
Docsexport const GET = (req: Request) => Response.json({ hello: "x", time: new Date().toISOString() });06 Comparedocumented capabilities of each framework
How X stacks up.
| Feature | X | Next.js | Astro |
|---|---|---|---|
| Rendering | |||
| File-based routing | |||
| Static + server per route | |||
| API routes in the file tree | |||
| Server functions | |||
| Islands hydration | |||
| ISR / revalidate on a timer | |||
| Incremental static regeneration, on demand | |||
| Client navigation & prefetch | |||
| Data | |||
| SQLite integration | |||
| PostgreSQL integration | |||
| Migrations | |||
| Content collections (markdown) | |||
| Security | |||
| Credentials + OAuth2 auth | |||
| Sessions & CSRF, out of the box | |||
| Runtime | |||
| Operability | |||
Try it online
Test X in your browser
The online sandbox lands here: a starter window where you can run a real X project without installing anything.
Scaffold locally →07 Try it right nowzero configuration
Ship something fast.
One command scaffolds a complete project: pages, API routes, auth, and the build pipeline.
$