Getting Started

Get started with x

Create a new x project, learn the project structure, and build your first page.

Create a project

The fastest way to start is with the project scaffolder. See Installation for prerequisites and template options. Quick version:

bun create thexjs-app@latest my-app
cd my-app
bun run dev

Press Enter at the template prompt to use default (recommended) — a single home page. Your app will be running at http://localhost:3000.

Manual setup

If you prefer to set up manually, create a directory and add x:

mkdir my-app && cd my-app
bun init -y
bun add @thexjs/core
cat << EOF > x.config.ts
import { defineConfig } from "@thexjs/core";
export default defineConfig({
pagesDir: "src/pages",
});
EOF

Project structure

A typical x project looks like this:

my-app/
x.config.ts
src/
pages/  // File-based routes
      index.tsx
      about.tsx
      _404.tsx
      blog/
        [slug].tsx
layouts/ // Nested layouts
      main.tsx
api/    // API routes
      hello.ts
actions/ // Server functions
      greet.ts
content/  // Markdown content
    posts/
      hello-world.md

Your first page

Create src/pages/index.tsx with a simple component:

export default function Home() {  return (    <div>      <h1 className="text-4xl font-bold">Hello x!</h1>      <p className="text-muted-foreground">Welcome to your new app.</p>    </div>  );}

Running the dev server

Start the development server with hot reload:

x dev
[x] resolving routes...
[x] found 3 routes in 12ms
[x] dev server running at http://localhost:3000

The dev server watches your src/ directory and automatically reloads when files change.