Configuration

The petit.config.json file controls your site's appearance, navigation, and features. It lives at your project root.

Full example

Here is a config file using every available option:

{
  "title": "My Project",
  "logo": "logo.png",
  "repository": "https://github.com/user/repo",
  "branch": "main",
  "siteUrl": "https://docs.example.com",
  "deploy": "node",
  "defaultScheme": "dark",
  "schemeSwitcher": true,
  "theme": "default",
  "fonts": {
    "sans": "Inter",
    "mono": "JetBrains Mono"
  },
  "maxWidth": "lg",
  "sidebarPosition": "left",
  "toc": true,
  "credits": true,
  "sidebar": [
    { "label": "Getting Started", "path": "./docs/getting-started" },
    { "label": "API Reference", "path": "./docs/api" },
    { "label": "Examples", "path": "./docs/examples" }
  ]
}

Only title is required. Everything else has sensible defaults.

Options

PetitConfig

Property	Type	Default	Description
`title`	`string`	`required`	Site title in the sidebar header
`logo`	`string`	`-`	Logo filename, resolved from media directory
`mediaDir`	`string`	`auto`	Path to media/images directory, relative to config
`repository`	`string`	`-`	GitHub URL, adds "Edit on GitHub" links
`branch`	`string`	`"main"`	Git branch for "Edit on GitHub" links
`siteUrl`	`string`	`-`	Production URL, enables SEO (sitemap, OG images, llms.txt)
`deploy`	`"node" \\| "cloudflare" \\| "netlify" \\| "vercel" \\| "bun"`	`"node"`	Deploy target platform (see deployment guide)
`defaultScheme`	`"dark" \\| "light" \\| "system"`	`"system"`	Color scheme on first visit
`schemeSwitcher`	`boolean`	`true`	Show the light/dark toggle
`theme`	`string`	`"default"`	Theme preset for colors and fonts
`themeOverrides`	`ThemeConfig`	`-`	Override CSS variables per color scheme
`fonts`	`{ sans?: string, mono?: string }`	`-`	Custom Google Fonts for body and code text
`maxWidth`	`"sm" \\| "md" \\| "lg" \\| "xl"`	`"lg"`	Content area max width
`sidebarPosition`	`"left" \\| "right" \\| "center"`	`"left"`	Sidebar placement
`toc`	`boolean`	`true`	Show "On this page" table of contents
`credits`	`boolean`	`false`	Show "Created with petit" link at the bottom of the sidebar
`sidebar`	`SidebarItem[]`	`[]`	Navigation structure (see below)

Each sidebar entry has a label and an optional path. Paths point directly to folders containing .md files, relative to the config file:

{
  "sidebar": [
    { "label": "Getting Started", "path": "./docs/getting-started" },
    { "label": "Reference" },
    { "label": "Core", "path": "./docs/reference/core" },
    { "label": "Plugins", "path": "./docs/reference/plugins" }
  ]
}

"Reference" here is a visual divider. "Core" and "Plugins" each list the pages found in their directories.

In a monorepo you can pull docs from multiple locations:

{
  "sidebar": [
    { "label": "Getting Started", "path": "./docs/getting-started" },
    { "label": "Core API", "path": "./packages/core/docs" },
    { "label": "CLI", "path": "./packages/cli/docs" }
  ]
}

Subdirectories inside each path are automatically discovered as nested categories, up to three levels deep. See the routing reference for details on nested categories, page ordering, frontmatter fields, and draft pages.

Themes

Petit ships with 18 built-in themes. Set the theme option in your config:

{
  "theme": "claude"
}

See the themes reference for the full list, live previews, and customization options.

Full example

Options

Sidebar

Themes

Search Documentation