---
title: "App Templates"
description: "App Templates serve as the scaffolding engine for the Fumadocs ecosystem, enabling the rapid generation of consistent, production-ready documentation sites. By defining structured, framework-specif..."
last_updated: "2026-07-02T09:46:39.082487+00:00"
canonical_url: "https://www.doc0.dev/docs/e8872a72-1909-479c-b585-dc74c6e26726/technical/developer-tools/app-templates"
---

<details>
<summary>Relevant source files</summary>

The following files were used as context for generating this wiki page:

- [packages/create-app/src/plugins/orama-cloud.ts](https://github.com/blade47/fumadocs/blob/main/packages/create-app/src/plugins/orama-cloud.ts)
- [packages/create-app/src/bin.ts](https://github.com/blade47/fumadocs/blob/main/packages/create-app/src/bin.ts)
- [packages/base-ui/src/components/dialog/search.tsx](https://github.com/blade47/fumadocs/blob/main/packages/base-ui/src/components/dialog/search.tsx)
- [packages/create-app/src/transform/index.ts](https://github.com/blade47/fumadocs/blob/main/packages/create-app/src/transform/index.ts)
- [packages/create-app/src/plugins/ai.ts](https://github.com/blade47/fumadocs/blob/main/packages/create-app/src/plugins/ai.ts)
- [packages/create-app/src/index.ts](https://github.com/blade47/fumadocs/blob/main/packages/create-app/src/index.ts)
- [packages/create-app/src/plugins/next-use-takumi.ts](https://github.com/blade47/fumadocs/blob/main/packages/create-app/src/plugins/next-use-takumi.ts)
- [packages/create-app/src/plugins/biome.ts](https://github.com/blade47/fumadocs/blob/main/packages/create-app/src/plugins/biome.ts)
- [packages/preview/src/components/ai/search.tsx](https://github.com/blade47/fumadocs/blob/main/packages/preview/src/components/ai/search.tsx)
- [packages/radix-ui/src/components/dialog/search.tsx](https://github.com/blade47/fumadocs/blob/main/packages/radix-ui/src/components/dialog/search.tsx)
- [packages/create-app/src/constants.ts](https://github.com/blade47/fumadocs/blob/main/packages/create-app/src/constants.ts)
- [packages/cli/src/commands/customise.ts](https://github.com/blade47/fumadocs/blob/main/packages/cli/src/commands/customise.ts)
- [packages/create-app/src/transform/tanstack-start.ts](https://github.com/blade47/fumadocs/blob/main/packages/create-app/src/transform/tanstack-start.ts)
- [packages/create-app/src/plugins/biome.base.json](https://github.com/blade47/fumadocs/blob/main/packages/create-app/src/plugins/biome.base.json)
- [packages/create-app/scripts/sync.ts](https://github.com/blade47/fumadocs/blob/main/packages/create-app/scripts/sync.ts)
- [packages/create-app/src/plugins/next-use-src.ts](https://github.com/blade47/fumadocs/blob/main/packages/create-app/src/plugins/next-use-src.ts)
- [packages/create-app/src/plugins/biome.next.json](https://github.com/blade47/fumadocs/blob/main/packages/create-app/src/plugins/biome.next.json)
- [packages/create-app/template/+orama-cloud/@app/components/search.tsx](https://github.com/blade47/fumadocs/blob/main/packages/create-app/template/%2Borama-cloud/%40app/components/search.tsx)
- [packages/create-app/src/plugins/oxlint.ts](https://github.com/blade47/fumadocs/blob/main/packages/create-app/src/plugins/oxlint.ts)
- [packages/create-app/src/plugins/eslint.ts](https://github.com/blade47/fumadocs/blob/main/packages/create-app/src/plugins/eslint.ts)
- [packages/base-ui/src/contexts/search.tsx](https://github.com/blade47/fumadocs/blob/main/packages/base-ui/src/contexts/search.tsx)
- [packages/create-app/tsdown.config.ts](https://github.com/blade47/fumadocs/blob/main/packages/create-app/tsdown.config.ts)
- [packages/preview/src/layouts/config.tsx](https://github.com/blade47/fumadocs/blob/main/packages/preview/src/layouts/config.tsx)
- [packages/create-app-versions/package.json](https://github.com/blade47/fumadocs/blob/main/packages/create-app-versions/package.json)
- [packages/create-app/src/auto-install.ts](https://github.com/blade47/fumadocs/blob/main/packages/create-app/src/auto-install.ts)
- [packages/create-app/tsconfig.json](https://github.com/blade47/fumadocs/blob/main/packages/create-app/tsconfig.json)
- [packages/create-app/.oxlintrc.json](https://github.com/blade47/fumadocs/blob/main/packages/create-app/.oxlintrc.json)
- [packages/create-app/vitest.config.ts](https://github.com/blade47/fumadocs/blob/main/packages/create-app/vitest.config.ts)
- [packages/cli/src/commands/shared.ts](https://github.com/blade47/fumadocs/blob/main/packages/cli/src/commands/shared.ts)
- [packages/base-ui/registry/index.ts](https://github.com/blade47/fumadocs/blob/main/packages/base-ui/registry/index.ts)
</details>

App Templates serve as the scaffolding engine for the Fumadocs ecosystem, enabling the rapid generation of consistent, production-ready documentation sites. By defining structured, framework-specific blueprints (e.g., Next.js, Waku, React Router, TanStack Start), these templates encapsulate complex configuration logic, dependency management, and routing setups into a unified, interactive CLI experience.

The primary problem solved by App Templates is the "first-mile" friction in modern web development. When starting a documentation project, developers face numerous choices regarding build systems, linter configurations, search providers, and AI integration. App Templates automate these decisions by allowing developers to select their preferred configuration during initialization, ensuring that the generated project adheres to project-wide best practices while significantly reducing manual setup time.

Architecturally, the template system acts as a plugin-based orchestration layer. When an app is generated, the system creates a context representing the destination directory and chosen template, then sequentially invokes registered plugins. Each plugin can manipulate the filesystem, modify `package.json` dependencies, or transform existing source code (e.g., injecting search dialog providers into a root layout) via an Abstract Syntax Tree (AST) transformer. This design facilitates extensibility; adding a new feature like AI chat or a specific linter becomes a matter of registering a plugin that hooks into the template lifecycle.

## Project Lifecycle and Generation Flow

The template generation flow is managed by the `create()` function in `packages/create-app/src/index.ts`. The process follows a strict sequential pipeline that ensures modular, predictable output.

```mermaid
flowchart TD
    A["User initiates<br>CLI Command"] --> B["Group Prompts<br>(name, template, plugins)"]
    B --> C["Plugin Orchestration"]
    C --> D["File Copying<br>(base template structure)"]
    D --> E["Package.json Initialization"]
    E --> F["Plugin afterWrite()<br>AST Transformations"]
    F --> G["Dependency Install &<br>Git Initialization"]
```

Sources: [packages/create-app/src/bin.ts:56-282](https://github.com/blade47/fumadocs/blob/main/packages/create-app/src/bin.ts#L56-L282), [packages/create-app/src/index.ts:64-126](https://github.com/blade47/fumadocs/blob/main/packages/create-app/src/index.ts#L64-L126)

## Template Plugin System

Plugins are the primary extension mechanism for template modification. A `TemplatePlugin` defines lifecycle hooks that allow modifications at specific stages of the project generation lifecycle.

| Hook | Responsibility |
| :--- | :--- |
| `template()` | Dynamically modifies template info (e.g., changing `appDir` to `src`). |
| `packageJson()` | Merges dependencies and scripts into `package.json` before writing. |
| `readme()` | Appends documentation or instructions to `README.md`. |
| `afterWrite()` | Executes side effects, filesystem operations, or AST modifications. |

Sources: [packages/create-app/src/index.ts:51-62](https://github.com/blade47/fumadocs/blob/main/packages/create-app/src/index.ts#L51-L62)

> [!TIP]
> The `afterWrite` hook is the most powerful plugin lifecycle point. Because files are already persisted to the filesystem, plugins can reliably use AST transformers to inject imports or components into existing files.

## AST Transformation Mechanism

To maintain project integrity during configuration, the system utilizes AST transformation (via `ts-morph`) rather than simple string injection. This ensures that generated code is syntactically correct and respects existing project structures.

The core transformer functionality is encapsulated in `packages/create-app/src/transform/index.ts`. For instance, when adding a search provider, the `rootProvider` function scans for a `RootProvider` component and safely injects the search prop without overwriting existing configuration.

```typescript
// Example: Adding search dialog using AST injection
await rootProvider(this, (mod) => mod.addSearchDialog('@/components/search'));
```

Sources: [packages/create-app/src/transform/index.ts:17-55](https://github.com/blade47/fumadocs/blob/main/packages/create-app/src/transform/index.ts#L17-L55)

> [!WARNING]
> AST injections verify if a property (e.g., `search`) already exists before attempting to inject a new one. This guard prevents duplicate definitions, which would cause runtime errors or configuration conflicts.

## Search Solution Integration

App Templates provide specialized logic for search implementations, most notably for Orama Cloud. This requires both client-side components and server-side synchronization scripts to ensure search indexes remain current.

The `oramaCloud()` plugin handles this by:
1. Copying search components into the app directory.
2. Registering an API route for index exports.
3. Generating a `scripts/sync-content.ts` utility that fetches the rendered `static.json` and pushes it to Orama Cloud via an authenticated request.

Sources: [packages/create-app/src/plugins/orama-cloud.ts:8-107](https://github.com/blade47/fumadocs/blob/main/packages/create-app/src/plugins/orama-cloud.ts#L8-L107)

## Configuration and Version Control

Dependency versions are centralized to ensure consistency across template variations. The `packages/create-app/src/constants.ts` file consolidates versioning from workspace packages, preventing version drift when a new dependency is introduced.

| Resource | Scope |
| :--- | :--- |
| `sourceDir` | Source templates directory for scaffolding files. |
| `templates` | Array of `TemplateInfo` objects defining supported scaffolds. |
| `depVersions` | Computed dependency mapping used during `package.json` creation. |

Sources: [packages/create-app/src/constants.ts:8-88](https://github.com/blade47/fumadocs/blob/main/packages/create-app/src/constants.ts#L8-L88)

> [!NOTE]
> Workspace dependencies defined in `package.json` as `workspace:*` are automatically resolved to specific versions from `depVersions` during the initialization of `package.json` inside the `create` flow.

## AI Chat Integration

AI integration is implemented as an optional plugin that installs component dependencies via the CLI registry and modifies the documentation layout to include an `AISearch` component.

The `addAIChat` flow follows:
1. `installer.install('ai/provider')`: Installs specific UI components for the chosen AI provider.
2. `createSourceFile(filePath)`: Parses the existing layout file.
3. `element.setBodyText(...)`: Prepends the `AISearch` component to the `DocsLayout` content children.
4. `file.addImportDeclarations(...)`: Injects necessary components and hook imports.

Sources: [packages/create-app/src/plugins/ai.ts:39-109](https://github.com/blade47/fumadocs/blob/main/packages/create-app/src/plugins/ai.ts#L39-L109)

## Related

- [Command Line Interface](https://www.doc0.dev/docs/e8872a72-1909-479c-b585-dc74c6e26726/technical/developer-tools/command-line-interface)


## Sitemap

See the full [sitemap](https://www.doc0.dev/docs/e8872a72-1909-479c-b585-dc74c6e26726/llms.txt) for all pages in this wiki.