Writing with MDX

In short

MDX is Markdown with JSX components. Use Visual mode for most edits; switch to Source for precise control. Page metadata lives in Page settings, not frontmatter.

Markdown basics

In Source mode (and in mixed Visual/content areas), standard Markdown works:

# headings through ######
Bold and italic
Lists, blockquotes, horizontal rules
Fenced code blocks with language tags
Links [text](url)

Headings in Markdown map to styled typography in the preview.

JSX components

Insert Aveiro components as tags:

<Feedback variant="info" title="Tip" description="Use Feedback for callouts." marginBottom={2} />

<Button href="/signup" variant="primary">Get started</Button>

Rules of thumb:

Use registered component names from the Components catalog
Boolean props can be bare: compact not compact="true"
Spacing props use numeric tokens: marginBottom={2} (rem-based in the platform)
Self-close simple blocks: <Line marginY={2} />

Layout primitives

Structural Once UI tags (Row, Column, Grid, Text, Heading) compose custom sections in MDX. Prefer catalog blocks when a customize UI exists — faster and safer.

Tables

Use the Table component with headers and rows props — pipe Markdown tables are not rendered in Aveiro MDX today.

<Table
  headers={["Feature", "Status"]}
  rows={[
    ["Analytics", "Live"],
    ["Automation", "Coming soon"],
  ]}
  marginBottom={2}
/>

Avoid in MDX	Use instead
title / summary / tag frontmatter for editor pages	Page settings panel
Raw HTML layout divs	Row, Column, or catalog components
Unregistered component names	Catalog blocks or ask Quasar to fix

Writing with MDX

Markdown basics

JSX components

Layout primitives

Tables

Markdown basics

JSX components

Layout primitives

Tables

What not to put in MDX

Code blocks

SmartLink

When to use Source mode

Writing with MDX

Markdown basics

JSX components

Layout primitives

Tables

Markdown basics

JSX components

Layout primitives

Tables

What not to put in MDX

Code blocks

SmartLink

When to use Source mode

Related guides