Every Farm.js app serves its pages to people and to AI agents: server-rendered HTML, a Markdown copy of each page, and llms.txt, on by default. Turn on MCP and your server functions become tools agents can call. Bring any agent runtime: Eve and Cloudflare Agents plug in through Farm's open agent runtime contract, and the AI SDK, Mastra, LangGraph, and the OpenAI Agents SDK run in a plain API route. Built on Vite and Nitro, with typed routes, Server Actions, and streaming SSR. React is the default renderer, and beta Preact, Solid, Vue, and Svelte adapters use the same routing and server contracts. See Stability and Support for what 0.1 covers.
## ✨ Built for Full-Stack Products
| Feature | What it gives you |
| ---------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ⚛️ **Custom RSC renderer** | A purpose-built RSC, streaming SSR, and client hydration pipeline, with optional Rust-native rendering for eligible host-only regions through [Strata](https://github.com/farming-labs/strata). |
| 🔄 **Server Actions** | Write mutations next to your components with `"use server"`, form actions, optional encrypted bound arguments, and configurable request security. |
| ⚡ **Blazingly fast development** | Vite-powered startup, on-demand transforms, and fast HMR keep the feedback loop nearly instant. |
| 🧭 **Typed app-directory routing** | Pages, layouts, route groups, dynamic segments, loading states, error boundaries, middleware, and generated route types. |
| 🧩 **Flexible rendering** | Choose streaming SSR, static generation, ISR, PPR, or deferred hydration islands route by route. |
| 🛠️ **Full-stack primitives** | Build with API routes, server functions, middleware, caching, KV storage, cron handlers, OpenAPI, and post-response work. |
| 🔌 **First-party integrations** | Add authentication, billing, email, jobs, AI, API keys, databases, and provider-owned routes through one typed integration model. |
| 🎭 **Renderer choice** | React by default, with Preact, Solid, Vue, and Svelte renderers selected by one line of config — same routes, server functions, and integrations everywhere. |
| 🧪 **AOT React compiler** | An experimental compiler turns eligible components into direct DOM updates that skip reconciliation (~6.8x faster keyed swaps, ~2x less CPU in the [benchmark](./benchmarks/compiler)), falling back to normal React whenever eligibility can't be proven. |
| 🚀 **Production-ready output** | Build deployable server and client output with Nitro-powered adapters and per-route runtime controls. |
| 🎨 **Great defaults** | Start with TypeScript, Tailwind CSS, sensible conventions, and a clean project structure—without assembling the framework yourself. |
> **Experimental native rendering:** Farm.js can automatically send eligible, server-only React subtrees through the [Strata](https://github.com/farming-labs/strata) native renderer while safely falling back to normal React rendering for unsupported trees.
## 🚀 Quick Start
### Try It in Your Browser
No install needed: [open the playground on StackBlitz](https://stackblitz.com/github/farming-labs/farm.js/tree/main/examples/stackblitz?file=src%2Fapp%2Fpage.tsx&title=Farm.js%20Playground) to see server rendering, client islands, and typed server calls in one page.
### Create a New App
```bash
pnpm create @farm.js/app my-app --template basic --typescript
cd my-app
pnpm dev
```
Your app will be running at `http://localhost:3000`!
Use `--list-templates` to choose a ready-to-configure Auth0, Auth.js, Autumn, Clerk, Inngest,
Trigger.dev, Polar, Resend, Stripe, Supabase, Unkey, WorkOS, or AI starter.
### Manual Installation
```bash
npm install @farm.js/core react react-dom
# or
pnpm add @farm.js/core react react-dom
# or
yarn add @farm.js/core react react-dom
```
Create a `farm.config.ts`:
```ts
import { defineConfig } from "@farm.js/core";
export default defineConfig({
deploy: {
target: "vercel",
},
});
```
Farm uses `src` as the source directory by default. Add `srcDir` only when your app uses a
different directory.
`defineFarmConfig` remains available as a deprecated exact alias of `defineConfig`.
Create your first page in `src/app/page.tsx`:
```tsx
export default function HomePage() {
return (
Hello from Farm.js!
);
}
```
> 💡 **Tailwind CSS is pre-configured!** Apps from `create-app` include it, so just use Tailwind classes. In an existing app, install `tailwindcss` and `@tailwindcss/vite` and add `@import "tailwindcss";` to your stylesheet; Farm loads the Vite plugin for you.
Add a root layout in `src/app/layout.tsx`:
```tsx
import type { LayoutProps } from "@farm.js/core";
export default function RootLayout({ children }: LayoutProps) {
return (
{children}
);
}
```
Start the development server:
```bash
npx farm dev
```
## 📁 Project Structure
```
my-farm-app/
├── src/
│ └── app/
│ ├── layout.tsx # Root layout
│ ├── page.tsx # Home page (/)
│ ├── about/
│ │ └── page.tsx # About page (/about)
│ └── users/
│ ├── page.tsx # Users list (/users)
│ └── [id]/
│ └── page.tsx # User profile (/users/123)
├── farm.config.ts
└── package.json
```
## ⚙️ Configuration
Farm.js supports a powerful configuration system via `farm.config.ts`:
```typescript
import { defineConfig } from "@farm.js/core";
export default defineConfig({
experimental: {
serverComponents: true,
},
// Routing
async redirects() {
return [{ source: "/old", destination: "/new", permanent: true }];
},
// Custom headers
async headers() {
return [
{
source: "/:path*",
headers: [{ key: "X-Frame-Options", value: "DENY" }],
},
];
},
// Environment variables
env: {
API_URL: "https://api.example.com",
},
// Plugins
plugins: [
/* your plugins */
],
// And much more...
});
```
See the [configuration docs](https://farmjs.dev/docs/configuration) for all options.
### Route-level Boundaries
Farm.js supports Next.js-style route boundaries with special files inside a route segment:
- `loading.tsx` - Route-level loading UI shown while the segment is suspended
- `error.tsx` - Route-level error UI shown when the segment throws during render
Example structure:
```text
src/app/
layout.tsx
page.tsx
loading.tsx
error.tsx
dashboard/
page.tsx
loading.tsx
error.tsx
```
Required config:
```ts
import { defineConfig } from "@farm.js/core";
export default defineConfig({
experimental: {
serverComponents: true,
},
});
```
How it works:
- `loading.tsx` is used automatically as the Suspense fallback for that segment
- `error.tsx` is used automatically as the error boundary for that segment
- You do not need to import or conditionally render `loading.tsx` in `page.tsx`
- The route must actually suspend to show `loading.tsx` (for example: async server component, async layout, or a child wrapped by Suspense)
- `loading.tsx` and `error.tsx` do not need `'use client'` unless they use client-only features like hooks or browser APIs
Example:
```tsx
// src/app/dashboard/loading.tsx
export default function Loading() {
return
Loading dashboard...
;
}
```
```tsx
// src/app/dashboard/page.tsx
async function SlowContent() {
await new Promise((resolve) => setTimeout(resolve, 2000));
return
Dashboard ready
;
}
export default function DashboardPage() {
return ;
}
```
## 🔌 Plugin System
Extend the framework with plugins: request hooks, HTML transforms, build and dev hooks, browser hooks, typed API routes, and their own database tables.
```typescript
import { definePlugin } from "@farm.js/core";
export const myPlugin = definePlugin({
name: "acme:my-plugin",
runtime: {
before({ request }) {
// Runs before Farm's route handler. Return a Response to answer early.
},
after({ response }) {
// Return a new Response to change headers or the body.
return response;
},
},
render: {
html(html) {
// Rewrite a page's rendered HTML.
return html;
},
},
});
```
See the [Plugin System guide](./PLUGIN_SYSTEM.md) for every plugin option and hook, and [Create a Plugin](https://farmjs.dev/docs/plugins/create-plugin) for walkthroughs.
## 🎯 Core Concepts
### File-based Routing
Farm.js uses Next.js App Router-style file-based routing:
- `page.tsx` - Creates a route
- `layout.tsx` - Shared UI for a route segment
- `[param]/` - Dynamic route segment
- `[...slug]/` - Catch-all route segment
### React Server Components
Server Components run on the server and can directly access databases, file systems, or other server-only resources:
```tsx
// This runs on the server
export default async function BlogPost({ params }: { params: { slug: string } }) {
const post = await getPostFromDatabase(params.slug);
return (
Farming Labs team