Layout

Page modes

Every page can set a mode in its frontmatter to control how much of the editorial layout is rendered.

Mode	Left sidebar	Right aside	Editorial grid	Use case
`default`	Yes	Yes	Yes	Standard docs pages
`compact`	Yes	No	Yes (2-column)	Focused docs with a narrow frame
`center`	No	Yes	Yes (2-column)	Focused content without nav
`custom`	No	No	No	Landing pages, custom layouts

wide and frame are accepted for Mintlify compatibility and alias to default.

On a compact site (layout.mode: "compact" in docs.json), every page uses the same narrow frame, so navigating never shifts the layout. See Compact sites.

Compact mode

Use compact to keep the left navigation while removing the optional right aside. The content column keeps its normal reading width, so the full page frame becomes narrower and the header aligns with the content on the right. Compact also sets --sidebar-font-size to 12px (the default is 13px, 14px at xl). Override that token on :root if you want a different size.

1234---
$schema: https://holocron.so/frontmatter.json
mode: "compact"
---

Set the same mode in docs.json to make it the default for the full site. Compact mode removes the right aside, so Ask AI shows as a floating bottom pill. Pages in OpenAPI and MCP tabs keep their right aside and show Ask AI there, except endpoint pages, where the request examples fill the aside and Ask AI stays a pill.

12345{
  "layout": {
    "mode": "compact"
  }
}

See AI Assistant for the floating pill. Authored asides and table-of-contents panels on compact docs pages render in the main column, and the sidebar Ask AI widget stays hidden.

With the default geometry, compact mode derives a 930px frame from the existing layout values:

11200px max width - 230px right aside - 40px column gap = 930px

Compact sites

The compact frame holds two columns. On a compact site every page uses it, and the page mode picks which two:

Page	Width	Columns
No `mode`, `compact`, `default`, `wide`, `frame`	930px	left sidebar + content
`mode: "center"`, including Changelog tabs	930px	content + right aside
404 and MDX error pages	930px	left sidebar + content

The content column is 660px in both shapes, so blog posts and docs pages line up.

  930px compact frame
  ┌──────────┬──────────────────────┐     ┌──────────────────────┬──────────┐
  │ sidebar  │ content              │     │ content              │ aside    │
  └──────────┴──────────────────────┘     └──────────────────────┴──────────┘
  docs pages (any mode but center)        center pages (blog, changelog)

default, wide and frame cannot add a third column inside 930px: the content would shrink to 390px. So on a compact site they behave like compact, and their asides render inline.

Only these pages use a wider frame:

Page	Width	Right aside	Why
Every page in an OpenAPI tab	1200px	Yes	Request and response examples need the rail (460px on endpoint pages)
Every page in an MCP tab	1200px	Yes	Tool examples need the rail. Overview pages keep it for one frame
`mode: "custom"`, including Imageboard tabs	`maxWidth`	No	No editorial grid. The container is 1200px unless `maxWidth` is set

There is no separate compact width setting. Changes to layout.maxWidth or layout.columnGap update the compact frame automatically.

Custom mode

Set mode: "custom" to strip the editorial layout entirely. Only the navbar, tab bar, footer, and mobile navigation are rendered. The content area is a plain container where you control everything with your own HTML and Tailwind classes.

1234---
$schema: https://holocron.so/frontmatter.json
mode: "custom"
---

This is useful for landing pages, pricing pages, or any page where you want full control over the layout. Standard MDX components like code blocks, callouts, and icons still work inside custom pages.

`maxWidth`

Use the maxWidth frontmatter field to constrain the content container width in pixels. The navbar stays full-width; only the content area is narrowed and centered.

12345---
$schema: https://holocron.so/frontmatter.json
mode: "custom"
maxWidth: 700
---

Example landing page

---
mode: "custom"
maxWidth: 800
---

<div className="flex flex-col items-center py-24 gap-6 text-center">

<h1 className="text-5xl font-bold tracking-tight">
  Your Product Name
</h1>

<p className="text-lg text-muted-foreground max-w-xl">
  A short description of what your product does and why it matters.
</p>

<a href="./quickstart" className="no-underline rounded-lg bg-primary px-5 py-2.5 text-sm font-medium text-primary-foreground">
  Get Started
</a>

</div>

Full-width layout

By default Holocron caps the page grid at 1200px. The left sidebar, content column, and right sidebar all live inside that constraint.

You can make the layout span the full viewport by overriding a single CSS variable.

Override `--grid-max-width`

In your style.css file (see Custom CSS):

1234/* style.css */
:root {
  --grid-max-width: 2600px;
}

This pushes the left and right sidebars toward the screen edges. The content column grows to fill the extra space, up to its 720px cap. Any remaining width is distributed as gap between the three columns.

Default (1200px max)
┌────────────────────────────────────────────────────────────────────────────┐
│              ┌───────┐    ┌──────────────┐    ┌───────┐                    │
│              │  nav  │    │   content    │    │ aside │                    │
│              └───────┘    └──────────────┘    └───────┘                    │
└────────────────────────────────────────────────────────────────────────────┘

Full-width (2600px max)
┌────────────────────────────────────────────────────────────────────────────┐
│ ┌───────┐              ┌──────────────┐              ┌───────┐             │
│ │  nav  │              │   content    │              │ aside │             │
│ └───────┘              └──────────────┘              └───────┘             │
└────────────────────────────────────────────────────────────────────────────┘

How the grid works

Holocron's page grid is controlled by four CSS variables:

Variable	Default	Description
`--grid-max-width`	`1200px`	Overall page cap
`--grid-nav-width`	`230px`	Left sidebar (table of contents)
`--grid-sidebar-width`	`230px`	Right sidebar (aside content)
`--grid-gap`	`40px`	Gap between columns

The content column width is derived automatically:

1content = min(720px, max-width - nav - sidebar - 2 × gap)

This means increasing --grid-max-width does not make the content column infinitely wide. It grows until it hits the 720px cap, then the extra space becomes gap.

API pages bump --grid-sidebar-width to 460px when the aside contains RequestExample or ResponseExample. Use <Aside width={N}> for any other fixed size. See Aside.

Aside height and section spacing

A non-full <Aside> shares its vertical space with the section it belongs to (the content between two headings). The section row expands to fit whichever is taller: the main content or the aside. If the aside callout is taller than the section text, you will see extra whitespace below the main content.

To avoid this, keep aside callouts short and only place them in sections with enough body text to match or exceed the aside height.

True edge-to-edge

If you want the grid to always fill the viewport regardless of screen size, use 100vw:

1234/* style.css */
:root {
  --grid-max-width: 100vw;
}

This removes the max-width constraint entirely. The grid stretches on every screen.

Ask AI about this page