PUBLIC BETA

a documentation
that just works.

A modern documentation framework that works. One config file, zero boilerplate.

Get Started

GET THE GITHUB

Quick Start

Up and running in minutes

Easily scaffold your docs with the CLI. It auto-detects your framework and scaffolds everything.

Setup beautiful documentation in seconds

Or set up manually

Install

Add the core packages to your Next.js project.

shell
Terminal

pnpm add @farming-labs/docs @farming-labs/theme @farming-labs/next

Configure

One file. Theme, metadata, components, icons — everything.

docs.config.ts
Config

import { defineDocs } from "@farming-labs/docs";
import { pixelBorder } from "@farming-labs/theme/pixel-border";

export default defineDocs({
  entry: "docs",
  theme: pixelBorder(),
  metadata: {
    titleTemplate: "%s – My Docs",
  },
});

Next Config

Wrap your config with withDocs(). Handles MDX, routing, and search.

next.config.ts
Next Config

import { withDocs } from "@farming-labs/next/config";

export default withDocs({});

Root Layout

Wrap your app with RootProvider for search, theme switching, and AI.

app/layout.tsx
Root Layout

import { RootProvider } from "@farming-labs/theme";
import "./global.css";

export default function RootLayout({ children }) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body>
        <RootProvider>{children}</RootProvider>
      </body>
    </html>
  );
}

In app/global.css, import your theme's CSS so docs styling applies (e.g. @import "@farming-labs/theme/default/css"; — use the path that matches your theme).

Write docs

Create MDX files under app/docs/. Frontmatter for metadata. That's it.

app/docs/getting-started/page.mdx
MDX Page

---
title: "Getting Started"
description: "Set up in 5 minutes"
icon: "rocket"
---

# Getting Started

Write your content in **MDX** with
frontmatter for metadata.

```ts title="auth.ts"
export const auth = betterAuth({
  database: { provider: "postgresql" },
});
```

See the full installation walkthrough for all generated files and options.

Install

Add the core packages to your SvelteKit project.

shell
Terminal

pnpm add @farming-labs/docs @farming-labs/svelte @farming-labs/svelte-theme

Configure

One config file. Theme, metadata, navigation — everything.

docs.config.ts
Config

import { defineDocs } from "@farming-labs/docs";
import { fumadocs } from "@farming-labs/svelte-theme";

export default defineDocs({
  entry: "docs",
  contentDir: "docs",
  theme: fumadocs(),
  metadata: {
    titleTemplate: "%s – My Docs",
  },
});

Server

Create the server helper. Handles loading, search, and AI.

src/lib/docs.server.ts
Server

import { createDocsServer } from "@farming-labs/svelte/server";
import config from "./docs.config";

export const { load, GET, POST } = createDocsServer(config);

Write docs

Create Markdown files under docs/. That's it.

docs/getting-started/page.md
Markdown Page

---
title: "Getting Started"
description: "Set up in 5 minutes"
icon: "rocket"
---

# Getting Started

Write your content in **Markdown** with
frontmatter for metadata.

```ts title="auth.ts"
export const auth = betterAuth({
  database: { provider: "postgresql" },
});
```

Routes

Three small files for layout, server loader, and page.

src/routes/docs/+layout.svelte

<script>
  import { DocsLayout } from "@farming-labs/svelte-theme";
  import config from "../../lib/docs.config";
  let { data, children } = $props();
</script>

<DocsLayout tree={data.tree} {config}>
  {@render children()}
</DocsLayout>

Install

Add the core packages to your Astro project.

shell
Terminal

pnpm add @farming-labs/docs @farming-labs/astro @farming-labs/astro-theme

Configure

One config file. Theme, metadata, navigation — everything.

docs.config.ts
Config

import { defineDocs } from "@farming-labs/docs";
import { fumadocs } from "@farming-labs/astro-theme";

export default defineDocs({
  entry: "docs",
  contentDir: "docs",
  theme: fumadocs(),
  metadata: {
    titleTemplate: "%s – My Docs",
  },
});

Server

Create the server helper. Handles loading, search, and AI.

src/lib/docs.server.ts
Server

import { createDocsServer } from "@farming-labs/astro/server";
import config from "./docs.config";

export const { load, GET, POST } = createDocsServer(config);

Write docs

Create Markdown files under docs/. That's it.

docs/getting-started/page.md
Markdown Page

---
title: "Getting Started"
description: "Set up in 5 minutes"
icon: "rocket"
---

# Getting Started

Write your content in **Markdown** with
frontmatter for metadata.

```ts title="auth.ts"
export const auth = betterAuth({
  database: { provider: "postgresql" },
});
```

Routes

Index page, catch-all route, and API endpoint.

src/pages/docs/index.astro

---
import DocsLayout from "@farming-labs/astro-theme/src/components/DocsLayout.astro";
import DocsContent from "@farming-labs/astro-theme/src/components/DocsContent.astro";
import config from "../../lib/docs.config";
import { load } from "../../lib/docs.server";
import "@farming-labs/astro-theme/css";

const data = await load(Astro.url.pathname);
---

<html lang="en">
  <head><title>{data.title} – Docs</title></head>
  <body>
    <DocsLayout tree={data.tree} config={config}>
      <DocsContent data={data} config={config} />
    </DocsLayout>
  </body>
</html>

Install

Add the core packages to your Nuxt project.

shell
Terminal

pnpm add @farming-labs/docs @farming-labs/nuxt @farming-labs/nuxt-theme

Configure

One config file. Theme, metadata, navigation — everything.

docs.config.ts
Config

import { defineDocs } from "@farming-labs/docs";
import { fumadocs } from "@farming-labs/nuxt-theme/fumadocs";

export default defineDocs({
  entry: "docs",
  contentDir: "docs",
  theme: fumadocs(),
  metadata: {
    titleTemplate: "%s – My Docs",
  },
});

Nuxt Config

Import the theme CSS and configure Nitro server assets.

nuxt.config.ts
Nuxt Config

export default defineNuxtConfig({
  css: ["@farming-labs/nuxt-theme/fumadocs/css"],
  nitro: {
    serverAssets: [
      { baseName: "docs", dir: "../docs" },
    ],
  },
});

Server API

One handler for docs loading, search, and AI.

server/api/docs.ts
API Handler

import { defineDocsHandler } from "@farming-labs/nuxt/server";
import config from "../../docs.config";

export default defineDocsHandler(config, useStorage);

Write docs

Create Markdown files under docs/. That's it.

docs/getting-started/page.md
Markdown Page

---
title: "Getting Started"
description: "Set up in 5 minutes"
icon: "rocket"
---

# Getting Started

Write your content in **Markdown** with
frontmatter for metadata.

```ts title="auth.ts"
export const auth = betterAuth({
  database: { provider: "postgresql" },
});
```

Page Route

A single Vue page that handles all doc routes.

pages/docs/[...slug].vue
Doc Page

<script setup lang="ts">
import { DocsLayout, DocsContent } from "@farming-labs/nuxt-theme";
import config from "~/docs.config";

const route = useRoute();
const pathname = computed(() => route.path);

const { data } = await useFetch("/api/docs", {
  query: { pathname },
  watch: [pathname],
});
</script>

<template>
  <DocsLayout :tree="data.tree" :config="config">
    <DocsContent :data="data" :config="config" />
  </DocsLayout>
</template>

Themes

More themes. Your choice.

Pick a preset or build your own with createTheme(). Override any styles from config.

Default

Clean, neutral palette with standard border radius

@import "@farming-labs/theme/default/css";

Darksharp

All-black, sharp corners, no rounded edges

@import "@farming-labs/theme/darksharp/css";

Pixel Border

Inspired by better-auth.com — refined dark UI

@import "@farming-labs/theme/pixel-border/css";

Colorful

Faithful clone of the fumadocs default neutral theme

@import "@farming-labs/theme/colorful/css";

Shiny

Clerk docs-inspired — clean, polished purple accents

@import "@farming-labs/theme/shiny/css";

DarkBold

Pure monochrome design — clean, bold, minimal

@import "@farming-labs/theme/darkbold/css";

GreenTree

Mintlify-inspired — emerald green, Inter font, modern

@import "@farming-labs/theme/greentree/css";

Hardline

Original hard-edge preset with square corners and strong borders

@import "@farming-labs/theme/hardline/css";

Concrete

Louder brutalist variant with offset shadows and poster-style contrast

@import "@farming-labs/theme/concrete/css";

docs.config.ts
Custom Colors

theme: pixelBorder({
  ui: {
    colors: {
      primary: "oklch(0.72 0.19 149)",     // green
      accent: "hsl(220 80% 60%)",          // blue
    },
  },
}),

expore themes Showcase

Configuration

One file. Full control.

docs.config.ts
Full Example

import { defineDocs } from "@farming-labs/docs";
import { pixelBorder } from "@farming-labs/theme/pixel-border";
import { Rocket, BookOpen, Code } from "lucide-react";

export default defineDocs({
  entry: "docs",
  theme: pixelBorder({
    ui: {
      colors: { primary: "oklch(0.72 0.19 149)" },
      typography: {
        font: {
          h1: { size: "2.25rem", weight: 700 },
          body: { size: "0.975rem", lineHeight: "1.8" },
        },
      },
    },
  }),

  nav: {
    title: <div style={{ display: "flex", gap: 8 }}>
      <Rocket size={14} /> My Docs
    </div>,
  },

  icons: {
    rocket: <Rocket size={16} />,
    book: <BookOpen size={16} />,
    code: <Code size={16} />,
  },
  sidebar: {
    banner: (
      <div>
        <h2>Welcome to the docs</h2>
        <p>This is a banner</p>
      </div>
    ),
    flat: false,
    collapsible: true,  
    footer: (
      <div>
        <p>This is a footer</p>
      </div>
    ),
  },
  components: { MyCustomCallout },

  breadcrumb: { enabled: true },
  themeToggle: { enabled: false, default: "dark" },
  ai: {
    enabled: true,
    mode: "floating",
    floatingStyle: "full-modal",
    apiKey: process.env.OPENAI_API_KEY,
    maxResults: 5,
    aiLabel: "DocsBot",
    suggestedQuestions: [
      "How do I get started?",
      "What themes are available?",
      "How do I create a custom component?",
      "How do I configure the sidebar?",
    ],
    model: {
      models: [
        { id: "gpt-4o-mini", label: "GPT-4o mini (fast)" },
        { id: "gpt-4o", label: "GPT-4o (quality)" },
      ],
      defaultModel: "gpt-4o-mini",
    },
  },
  pageActions: {
    copyMarkdown: { enabled: true },
    openDocs: {
      enabled: true,
      providers: [
        { name: "ChatGPT", urlTemplate: "https://chatgpt.com/?q={url}" },
      ],
    },
  },

  metadata: {
    titleTemplate: "%s – Docs",
    description: "My documentation site",
  },
});

a documentationthat just works.

Up and running in minutes

Install

Configure

Next Config

Root Layout

Write docs

Install

Configure

Server

Write docs

Routes

Install

Configure

Server

Write docs

Routes

Install

Configure

Nuxt Config

Server API

Write docs

Page Route

More themes. Your choice.

Default

Darksharp

Pixel Border

Colorful

Shiny

DarkBold

GreenTree

Hardline

Concrete

One file. Full control.

a documentation
that just works.