Introduction

What is x?

x is a full-stack React framework built on Bun. File-based routing, SSR, static generation, API routes, server functions, islands, and a content layer all live in one process, with zero orchestration.

Why x exists

Most stacks split concerns across multiple tools: a bundler, a server, a static host, a separate API layer. x keeps everything in one Bun process. Drop a file in src/pages, get a route. Mark a page static and it prerenders at build time. Leave it as server mode and it renders per request. API routes and server functions live alongside your pages, with the same types and the same runtime.

The packages

x ships as a set of focused npm packages. You typically install @thexjs/cli and @thexjs/core through the project scaffolder; add @thexjs/env when you need validated environment variables, and @thexjs/adapter-vercel to deploy to Vercel.

@thexjs/core

Rendering engine: routing, SSR/SSG, islands, server functions, content, data layer.

@thexjs/cli

The x command: dev server, production build, and start.

@thexjs/env

Type-safe environment variable validation with fail-fast errors.

A minimal page

Every x app starts with file-based routes. Here is the simplest possible page:

src/pages/index.tsx

import type { RouteProps } from "@thexjs/core";export const mode = "static";export default function HomePage({}: RouteProps) {  return <h1>Hello from x</h1>;}

Run x dev and visit http://localhost:3000. That is the entire loop.

Static vs server

Pages default to server-rendered (SSR). Opt into build-time prerendering per page:

route mode

export const mode: "static" | "server" = "static";

Static pages ship as plain HTML in .x/client/ and deploy to any static host. Server pages need a running Bun process via x start.

Install x Back to docs