> Agent-readable docs index: /llms.txt. Download /docs.zip to grep all markdown files locally.

---
"$schema": https://holocron.so/frontmatter.json
title: Quickstart
description: Get your docs site running in under a minute.
icon: zap
---

# Quickstart

<Aside>
  <Info>
    **Requirements:** Node.js 18+ and a package manager (pnpm, npm, yarn, or bun).
  </Info>
</Aside>

<Steps>
  <Step title="Install dependencies" icon="download">
    Add the Holocron Vite plugin and its peer dependencies:

    ```bash
    pnpm add @holocron.so/vite react react-dom vite
    ```
  </Step>

  <Step title="Create vite.config.ts" icon="settings">
    The plugin auto-adds Spiceflow, Tailwind CSS, and React. No extra setup needed.

    ```ts
    import { defineConfig } from 'vite'
    import { holocron } from '@holocron.so/vite'

    export default defineConfig({
      plugins: [holocron({ pagesDir: './src' })],
    })
    ```
  </Step>

  <Step title="Create docs.jsonc" icon="file-json">
    Define your site name and navigation structure:

    ```jsonc
    {
      "name": "My Docs",
      "colors": { "primary": "#6366f1" },
      "navigation": [
        {
          "group": "Getting Started",
          "pages": ["index"]
        }
      ]
    }
    ```
  </Step>

  <Step title="Write your first page" icon="pencil">
    Create an `index.mdx` file in the `src/` directory:

    ```mdx
    ---
    title: Welcome
    description: My documentation site.
    ---

    # Welcome

    This is my first Holocron page.
    ```
  </Step>

  <Step title="Start the dev server" icon="play">
    ```bash
    npx vite
    ```

    Open `http://localhost:5173` and you should see your docs site with hot reload.
  </Step>
</Steps>

## Build for production

```bash
npx vite build
```

Start the production server:

```bash
node dist/rsc/index.js
```

## Project structure

A minimal Holocron project looks like this:

```diagram
my-docs/
├── src/
│   ├── index.mdx      # your pages
│   └── quickstart.mdx
├── docs.jsonc         # site config and navigation
├── vite.config.ts     # holocron({ pagesDir: './src' })
├── package.json
└── public/            # static assets (logos, images)
```

Set `pagesDir` in the plugin config to tell Holocron where your MDX files live. `'./src'` keeps content separate from config and build artifacts.


---

*Powered by [holocron.so](https://holocron.so)*