---
title: Introduction
description: What this site is, how a page is built, and where each piece lives.
url: https://hexelstudio.com/docs/get-started/introduction
---

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.

<CardGroup cols={2}>
  <Card title="Quickstart" icon="rocket" href="https://hexelstudio.com/docs/get-started/quickstart">
    Run the site locally and publish your first page.
  </Card>
  <Card title="Components" icon="blocks" href="https://hexelstudio.com/docs/authoring/components">
    Callouts, cards, steps, tabs and accordions.
  </Card>
</CardGroup>

## 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

| Part | Where it comes from |
| --- | --- |
| Tabs in the header | `navigation.tabs` in `docs.config.ts` |
| Sidebar groups | The `groups` of the current tab |
| Breadcrumb, title and description | The tab and group, plus the page frontmatter |
| **Copy page** | The page's Markdown, served at the same URL plus `.md` |
| **On this page** | The page's `##` and `###` headings |
| Previous and next | The page order inside the tab |

<Note>
  A file in `content/docs` that is not listed in `docs.config.ts` is not published. The build names it in a warning, so nothing goes missing silently.
</Note>

## Where things live

```text 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
```