Ctrl k

Search...

Sign up

Built with Aveiro

Ctrl k

Search...

Sign up

Built with Aveiro

Components

Writing with MDX

Markdown plus JSX components in Source mode — syntax basics and Aveiro conventions.

Updated by Quasar 24d ago

Component Categories

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: 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.

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}
/>

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

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

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

What not to put in MDX

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

Legal/marketing static files in the repo may use frontmatter differently; site pages in the editor use DB metadata.

Code blocks

Fenced blocks render with syntax highlighting:

```bash
npm install
```

Inline code uses single backticks for short snippets.

SmartLink

Prefer SmartLink for internal navigation — resolves site routes correctly in templates:

<SmartLink href="/guides/quickstart" suffixIcon="chevronRight">Quickstart</SmartLink>

When to use Source mode

Bulk text find/replace
Paste MDX from Quasar or external docs
Fine-tune props without a customize form
Debug broken blocks

Switch back to Visual to confirm layout.

```bash
npm install
```

<SmartLink href="/guides/quickstart" suffixIcon="chevronRight">Quickstart</SmartLink>

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