Skip to content
Hexel StudioDocs

Introduction

What this site is, how a page is built, and where each piece lives.

On this page

This is the Hexel Studio documentation site. It is a Next.js app that turns MDX files into pages, styled with the same tokens as hexelstudio.com and Orbit. The pages in this starter document the site itself; replace them with product docs as you go.

Quickstart

Run the site locally and publish your first page.

Components

Callouts, cards, steps, tabs and accordions.

How a page is built

  1. You write content/docs/<section>/<page>.mdx, with a title in its frontmatter.
  2. You list the page in docs.config.ts, which decides its tab, its group and its place in the order.
  3. At build time each page is compiled once to HTML. Shiki highlights the code, headings get anchors, and the table of contents is collected.
  4. The same build writes the search index, llms.txt, and a Markdown copy of every page.

The result is static: no page renders on request, so the site is fast and cheap to serve.

What is on a page

PartWhere it comes from
Tabs in the headernavigation.tabs in docs.config.ts
Sidebar groupsThe groups of the current tab
Breadcrumb, title and descriptionThe tab and group, plus the page frontmatter
Copy pageThe page's Markdown, served at the same URL plus .md
On this pageThe page's ## and ### headings
Previous and nextThe page order inside the tab

Where things live

Project layout
app/                 Routes: landing page, doc pages, search.json, llms.txt, .md copies
components/brand/    Wordmark, product marks and buttons, copied from the homepage
components/docs/     Header, sidebar, search, table of contents, page actions
components/mdx/      Components that pages can use without importing them
content/docs/        The pages
docs.config.ts       Navigation, search suggestions and the landing page
lib/                 Content loading, the MDX pipeline, navigation and search