Blocks & components

Doxbrix pages are built from blocks. In the block editor you insert them from the slash palette (press <kbd>/</kbd> on a new line, type to filter, press <kbd>Enter</kbd>); under the hood each block has an MDX-style tag you can also write directly or use in docs-as-code. This page is the complete reference, grouped the same way as the slash palette.

Palette at a glance

The palette groups every block into sections. Type the shortcut after <kbd>/</kbd> to jump straight to a block:

Callouts

Draw attention to important information. Six variants — insert with /info, /note, etc.:

<Note>General note for context.</Note>
<Tip>A helpful best-practice suggestion.</Tip>
<Info>Neutral, informational detail.</Info>
<Check>A success or confirmation message.</Check>
<Warning>Caution — something to be careful about.</Warning>
<Danger>Critical alert for destructive or breaking actions.</Danger>

Lists

Bullet, numbered, and checkbox lists (/list, /ordered, /task):

- Bullet item
  - Nested item

1. First step
2. Second step

- [x] Done
- [ ] To do

Steps

A numbered, sequential procedure (/steps). Each <Step> has a title and can contain block content (paragraphs, code, callouts, images) on its own lines:

<Steps>
<Step title="Install the CLI">
Run the installer and confirm it is on your PATH.
</Step>
<Step title="Authenticate">Run `dxb login` and paste your token.</Step>
</Steps>

Tabs

Switchable panels (/tabs) — use the label attribute. A <Tab> can hold block content, including paragraphs, code, and callouts:

<Tabs>
<Tab label="macOS">Install with Homebrew: `brew install dxb`</Tab>
<Tab label="Windows">Download the installer.</Tab>
</Tabs>

Accordion & Expandable

Collapsible content. An Accordion (/accordion) holds one or more <AccordionItem> entries (great for FAQs); an Expandable (/expand) is a single collapsible region:

<Accordion>
<AccordionItem title="What is a space?">A top-bar section of your project.</AccordionItem>
<AccordionItem title="Can I have several?">Yes — most projects have two to five.</AccordionItem>
</Accordion>

<Expandable title="Show advanced options">Hidden details go here.</Expandable>

Cards

Navigational cards (/card) with an emoji icon, title, and optional href. Group them in a <CardGroup> (/cards, set cols); a single <Card> also works standalone:

<CardGroup cols="2">
<Card title="Quickstart" icon="🚀" href="/get-started/quickstart">Get going fast.</Card>
<Card title="Concepts" icon="🧱" href="/get-started/core-concepts">Learn the model.</Card>
</CardGroup>

Columns

Side-by-side layout (/col2, /col3, /col4). Set cols; each <Column> can hold block content:

<Columns cols="2">
<Column>Left content.</Column>
<Column>Right content.</Column>
</Columns>

Code

Code block

Fence a block with three backticks and a language name for syntax highlighting (/code) — bash, typescript, python, go, json, sql, yaml, and dozens more. For example, a TypeScript block renders like this:

export function publish(id: string) {
  return api.pages.publish(id)
}

Code group

The same command for multiple tools (/codegroup) — uses <CodeTab label="…">:

<CodeGroup>
<CodeTab label="npm">npm install @doxbrix/sdk</CodeTab>
<CodeTab label="pnpm">pnpm add @doxbrix/sdk</CodeTab>
</CodeGroup>

Terminal

A shell session (/terminal):

<Terminal>$ dxb push</Terminal>

Visual blocks

<Badge color="green">New</Badge>
<Icon emoji="⚡" size="lg">Fast</Icon>
<Frame url="https://example.com" title="Live example" />

• Badge (/badge) — a small colored pill label (color).
• Icon (/icon) — a large emoji with an optional label (emoji, size).
• Frame (/frame) — a browser-style frame around a URL (url, title).

Media

<Image src="https://…/diagram.png" alt="Architecture diagram" caption="How requests flow" />
<Video url="https://www.youtube.com/watch?v=…" />
<Embed src="https://www.loom.com/share/…" />
<File name="report.pdf" url="https://…/report.pdf" fileType="pdf" />

• Image (/image) — an image with alt and an optional caption. (This is the block for screenshots and diagrams — not <Frame>, which frames a URL.)
• Video (/video) — a YouTube, Vimeo, or Loom url.
• Embed (/embed) — an iframe/URL embed (src).
• File (/file) — a downloadable file (name, url, fileType).

Changelog

A structured release-note entry (/update) — type (e.g. new), version, and date:

<Update type="new" version="2.1.0" date="June 8, 2026">
Shipped the new Writing Copilot.
</Update>

See the Changelog for a page built from these.

Diagrams & math

<Mermaid>graph TD; A[Draft] --> B[Review] --> C[Published];</Mermaid>
<Math>e = mc^2</Math>
<Excalidraw url="https://excalidraw.com/#json=…" />

The diagram palette also offers ready-made Mermaid starters — flowchart, sequence, ER, Gantt, class, pie, and state — plus a blank Mermaid block (/mermaid). /math renders a KaTeX equation; /excalidraw embeds an Excalidraw whiteboard.

API reference

For documenting endpoints (/api) — covered in detail in API reference pages:

<ApiEndpoint method="POST" path="/users" baseUrl="https://api.example.com" summary="Create a user">
<Param name="name" in="body" type="string" required>Display name</Param>
<Response status="200" contentType="application/json" description="Created">
{ "id": "u_123" }
</Response>
</ApiEndpoint>

There are also <ParameterTable> (/params) and <ResponseExample> (/response) blocks for standalone parameter and response documentation.

Standard Markdown

Everything standard works too: headings (#–######), **bold**, *italic*, ` inline code , links, bullet/numbered/task lists, tables, blockquotes, ---` dividers, and fenced code. See Formatting & media.

Next steps