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:

terminal

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:

terminal

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",
apiDir: "src/api",       // optional: API routes
actionsDir: "src/actions", // optional: server functions
});
EOF

Project structure

A typical X project looks like this:

file tree

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:

src/pages/index.tsx

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:

terminal

x dev
[x] dev server starting...
✓ dev server running at http://localhost:3000

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

Routing Back to docs