This rune is part of @refrakt-md/marketing. Install with npm install @refrakt-md/marketing and add "@refrakt-md/marketing" to the packages array in your refrakt.config.json.

Comparison

Transform Markdown into structured comparison matrices. Headings become columns, list items become feature rows, and bold labels automatically align rows across columns.

Basic usage

Each ## heading defines a column. Bold text at the start of list items serves as alignment keys — items with the same bold label across columns appear in the same row.

{% comparison title="Choosing a Framework" %}

## SvelteKit

- **Learning curve** — Low, intuitive template syntax
- **Bundle size** — Compiles away the framework
- **SSR** — Built-in with adapter system
- **TypeScript** — First-class support

## Next.js

- **Learning curve** — Moderate, React knowledge required
- **Bundle size** — Medium, React runtime included
- **SSR** — Built-in with multiple strategies
- **TypeScript** — First-class support

## Astro

- **Learning curve** — Low, HTML-first approach
- **Bundle size** — Zero JS by default
- **SSR** — Built-in, island architecture
- **TypeScript** — First-class support

{% /comparison %}

<section data-field="content-section" data-rune="comparison">
  <h2>Choosing a Framework</h2>
  <meta content="table" data-field="layout">
  <meta content="left" data-field="labels">
  <meta content="true" data-field="collapse">
  <meta content="" data-field="verdict">
  <meta content="" data-field="highlighted">
  <meta content="[&quot;Learning curve&quot;,&quot;Bundle size&quot;,&quot;SSR&quot;,&quot;TypeScript&quot;]" data-field="row-labels">
  <div data-name="grid">
    <div data-field="column" data-rune="comparison-column">
      <span data-name="name">SvelteKit</span>
      <meta content="false" data-field="highlighted">
      <div data-name="body">
        <div data-field="row" data-rune="comparison-row">
          <span data-name="label">Learning curve</span>
          <meta content="text" data-field="row-type">
          <div data-name="body">
            <p>Low, intuitive template syntax</p>
          </div>
        </div>
        <div data-field="row" data-rune="comparison-row">
          <span data-name="label">Bundle size</span>
          <meta content="text" data-field="row-type">
          <div data-name="body">
            <p>Compiles away the framework</p>
          </div>
        </div>
        <div data-field="row" data-rune="comparison-row">
          <span data-name="label">SSR</span>
          <meta content="text" data-field="row-type">
          <div data-name="body">
            <p>Built-in with adapter system</p>
          </div>
        </div>
        <div data-field="row" data-rune="comparison-row">
          <span data-name="label">TypeScript</span>
          <meta content="text" data-field="row-type">
          <div data-name="body">
            <p>First-class support</p>
          </div>
        </div>
      </div>
    </div>
    <div data-field="column" data-rune="comparison-column">
      <span data-name="name">Next.js</span>
      <meta content="false" data-field="highlighted">
      <div data-name="body">
        <div data-field="row" data-rune="comparison-row">
          <span data-name="label">Learning curve</span>
          <meta content="text" data-field="row-type">
          <div data-name="body">
            <p>Moderate, React knowledge required</p>
          </div>
        </div>
        <div data-field="row" data-rune="comparison-row">
          <span data-name="label">Bundle size</span>
          <meta content="text" data-field="row-type">
          <div data-name="body">
            <p>Medium, React runtime included</p>
          </div>
        </div>
        <div data-field="row" data-rune="comparison-row">
          <span data-name="label">SSR</span>
          <meta content="text" data-field="row-type">
          <div data-name="body">
            <p>Built-in with multiple strategies</p>
          </div>
        </div>
        <div data-field="row" data-rune="comparison-row">
          <span data-name="label">TypeScript</span>
          <meta content="text" data-field="row-type">
          <div data-name="body">
            <p>First-class support</p>
          </div>
        </div>
      </div>
    </div>
    <div data-field="column" data-rune="comparison-column">
      <span data-name="name">Astro</span>
      <meta content="false" data-field="highlighted">
      <div data-name="body">
        <div data-field="row" data-rune="comparison-row">
          <span data-name="label">Learning curve</span>
          <meta content="text" data-field="row-type">
          <div data-name="body">
            <p>Low, HTML-first approach</p>
          </div>
        </div>
        <div data-field="row" data-rune="comparison-row">
          <span data-name="label">Bundle size</span>
          <meta content="text" data-field="row-type">
          <div data-name="body">
            <p>Zero JS by default</p>
          </div>
        </div>
        <div data-field="row" data-rune="comparison-row">
          <span data-name="label">SSR</span>
          <meta content="text" data-field="row-type">
          <div data-name="body">
            <p>Built-in, island architecture</p>
          </div>
        </div>
        <div data-field="row" data-rune="comparison-row">
          <span data-name="label">TypeScript</span>
          <meta content="text" data-field="row-type">
          <div data-name="body">
            <p>First-class support</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Choosing a Framework

	SvelteKit	Next.js	Astro
Learning curve	Low, intuitive template syntax	Moderate, React knowledge required	Low, HTML-first approach
Bundle size	Compiles away the framework	Medium, React runtime included	Zero JS by default
SSR	Built-in with adapter system	Built-in with multiple strategies	Built-in, island architecture
TypeScript	First-class support	First-class support	First-class support

<section data-field="content-section" class="rf-comparison rf-comparison--table" data-rune="comparison" data-density="full">
  <h2 class="rf-comparison__title">Choosing a Framework</h2>
  <div class="rf-comparison__table-wrapper">
    <table class="rf-comparison__table">
      <thead>
        <tr>
          <th class="rf-comparison__label-col"></th>
          <th>SvelteKit</th>
          <th>Next.js</th>
          <th>Astro</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th class="rf-comparison__row-label" scope="row">Learning curve</th>
          <td class="rf-comparison__cell">
            <p>Low, intuitive template syntax</p>
          </td>
          <td class="rf-comparison__cell">
            <p>Moderate, React knowledge required</p>
          </td>
          <td class="rf-comparison__cell">
            <p>Low, HTML-first approach</p>
          </td>
        </tr>
        <tr>
          <th class="rf-comparison__row-label" scope="row">Bundle size</th>
          <td class="rf-comparison__cell">
            <p>Compiles away the framework</p>
          </td>
          <td class="rf-comparison__cell">
            <p>Medium, React runtime included</p>
          </td>
          <td class="rf-comparison__cell">
            <p>Zero JS by default</p>
          </td>
        </tr>
        <tr>
          <th class="rf-comparison__row-label" scope="row">SSR</th>
          <td class="rf-comparison__cell">
            <p>Built-in with adapter system</p>
          </td>
          <td class="rf-comparison__cell">
            <p>Built-in with multiple strategies</p>
          </td>
          <td class="rf-comparison__cell">
            <p>Built-in, island architecture</p>
          </td>
        </tr>
        <tr>
          <th class="rf-comparison__row-label" scope="row">TypeScript</th>
          <td class="rf-comparison__cell">
            <p>First-class support</p>
          </td>
          <td class="rf-comparison__cell">
            <p>First-class support</p>
          </td>
          <td class="rf-comparison__cell">
            <p>First-class support</p>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</section>

Highlighted column

Use the highlighted attribute to visually emphasize a recommended column. Add verdict for a summary below the comparison.

{% comparison highlighted="refrakt.md" verdict="refrakt.md gives you the power of AI without sacrificing ownership or portability." %}

## refrakt.md

- **Content ownership** — Your content stays yours, portable Markdown
- **Theme system** — Switch themes instantly, same content renders differently
- **Output** — Real SvelteKit, not proprietary runtime
- **AI role** — AI generates reusable themes, not throwaway sites

## Wix AI

- **Content ownership** — ~~Content locked in Wix platform~~
- **Theme system** — ~~Templates only~~, no real theme swapping
- **Output** — Proprietary Wix runtime
- **AI role** — AI generates a single site layout

## Framer AI

- **Content ownership** — ~~Content lives in Framer~~
- **Theme system** — ~~Visual-first~~, design tool not content system
- **Output** — Framer runtime
- **AI role** — AI assists with layout and copy

{% /comparison %}

<section data-field="content-section" data-rune="comparison">
  <meta content="table" data-field="layout">
  <meta content="left" data-field="labels">
  <meta content="true" data-field="collapse">
  <meta content="refrakt.md gives you the power of AI without sacrificing ownership or portability." data-field="verdict">
  <meta content="refrakt.md" data-field="highlighted">
  <meta content="[&quot;Content ownership&quot;,&quot;Theme system&quot;,&quot;Output&quot;,&quot;AI role&quot;]" data-field="row-labels">
  <div data-name="grid">
    <div data-field="column" data-rune="comparison-column">
      <span data-name="name">refrakt.md</span>
      <meta content="true" data-field="highlighted">
      <div data-name="body">
        <div data-field="row" data-rune="comparison-row">
          <span data-name="label">Content ownership</span>
          <meta content="text" data-field="row-type">
          <div data-name="body">
            <p>Your content stays yours, portable Markdown</p>
          </div>
        </div>
        <div data-field="row" data-rune="comparison-row">
          <span data-name="label">Theme system</span>
          <meta content="text" data-field="row-type">
          <div data-name="body">
            <p>Switch themes instantly, same content renders differently</p>
          </div>
        </div>
        <div data-field="row" data-rune="comparison-row">
          <span data-name="label">Output</span>
          <meta content="text" data-field="row-type">
          <div data-name="body">
            <p>Real SvelteKit, not proprietary runtime</p>
          </div>
        </div>
        <div data-field="row" data-rune="comparison-row">
          <span data-name="label">AI role</span>
          <meta content="text" data-field="row-type">
          <div data-name="body">
            <p>AI generates reusable themes, not throwaway sites</p>
          </div>
        </div>
      </div>
    </div>
    <div data-field="column" data-rune="comparison-column">
      <span data-name="name">Wix AI</span>
      <meta content="false" data-field="highlighted">
      <div data-name="body">
        <div data-field="row" data-rune="comparison-row">
          <span data-name="label">Content ownership</span>
          <meta content="negative" data-field="row-type">
          <div data-name="body">
            <p>
              <s>Content locked in Wix platform</s>
            </p>
          </div>
        </div>
        <div data-field="row" data-rune="comparison-row">
          <span data-name="label">Theme system</span>
          <meta content="negative" data-field="row-type">
          <div data-name="body">
            <p>
              <s>Templates only</s>
              , no real theme swapping
            </p>
          </div>
        </div>
        <div data-field="row" data-rune="comparison-row">
          <span data-name="label">Output</span>
          <meta content="text" data-field="row-type">
          <div data-name="body">
            <p>Proprietary Wix runtime</p>
          </div>
        </div>
        <div data-field="row" data-rune="comparison-row">
          <span data-name="label">AI role</span>
          <meta content="text" data-field="row-type">
          <div data-name="body">
            <p>AI generates a single site layout</p>
          </div>
        </div>
      </div>
    </div>
    <div data-field="column" data-rune="comparison-column">
      <span data-name="name">Framer AI</span>
      <meta content="false" data-field="highlighted">
      <div data-name="body">
        <div data-field="row" data-rune="comparison-row">
          <span data-name="label">Content ownership</span>
          <meta content="negative" data-field="row-type">
          <div data-name="body">
            <p>
              <s>Content lives in Framer</s>
            </p>
          </div>
        </div>
        <div data-field="row" data-rune="comparison-row">
          <span data-name="label">Theme system</span>
          <meta content="negative" data-field="row-type">
          <div data-name="body">
            <p>
              <s>Visual-first</s>
              , design tool not content system
            </p>
          </div>
        </div>
        <div data-field="row" data-rune="comparison-row">
          <span data-name="label">Output</span>
          <meta content="text" data-field="row-type">
          <div data-name="body">
            <p>Framer runtime</p>
          </div>
        </div>
        <div data-field="row" data-rune="comparison-row">
          <span data-name="label">AI role</span>
          <meta content="text" data-field="row-type">
          <div data-name="body">
            <p>AI assists with layout and copy</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

	refrakt.mdRecommended	Wix AI	Framer AI
Content ownership	Your content stays yours, portable Markdown	~~Content locked in Wix platform~~	~~Content lives in Framer~~
Theme system	Switch themes instantly, same content renders differently	~~Templates only~~, no real theme swapping	~~Visual-first~~, design tool not content system
Output	Real SvelteKit, not proprietary runtime	Proprietary Wix runtime	Framer runtime
AI role	AI generates reusable themes, not throwaway sites	AI generates a single site layout	AI assists with layout and copy

refrakt.md gives you the power of AI without sacrificing ownership or portability.

<section data-field="content-section" class="rf-comparison rf-comparison--table" data-rune="comparison" data-density="full">
  <div class="rf-comparison__table-wrapper">
    <table class="rf-comparison__table">
      <thead>
        <tr>
          <th class="rf-comparison__label-col"></th>
          <th class="rf-comparison__col-header--highlighted">
            refrakt.md
            <span class="rf-comparison__recommended-badge">Recommended</span>
          </th>
          <th>Wix AI</th>
          <th>Framer AI</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th class="rf-comparison__row-label" scope="row">Content ownership</th>
          <td class="rf-comparison__cell rf-comparison__cell--highlighted">
            <p>Your content stays yours, portable Markdown</p>
          </td>
          <td class="rf-comparison__cell">
            <span class="rf-comparison__negative">
              <p>
                <s>Content locked in Wix platform</s>
              </p>
            </span>
          </td>
          <td class="rf-comparison__cell">
            <span class="rf-comparison__negative">
              <p>
                <s>Content lives in Framer</s>
              </p>
            </span>
          </td>
        </tr>
        <tr>
          <th class="rf-comparison__row-label" scope="row">Theme system</th>
          <td class="rf-comparison__cell rf-comparison__cell--highlighted">
            <p>Switch themes instantly, same content renders differently</p>
          </td>
          <td class="rf-comparison__cell">
            <span class="rf-comparison__negative">
              <p>
                <s>Templates only</s>
                , no real theme swapping
              </p>
            </span>
          </td>
          <td class="rf-comparison__cell">
            <span class="rf-comparison__negative">
              <p>
                <s>Visual-first</s>
                , design tool not content system
              </p>
            </span>
          </td>
        </tr>
        <tr>
          <th class="rf-comparison__row-label" scope="row">Output</th>
          <td class="rf-comparison__cell rf-comparison__cell--highlighted">
            <p>Real SvelteKit, not proprietary runtime</p>
          </td>
          <td class="rf-comparison__cell">
            <p>Proprietary Wix runtime</p>
          </td>
          <td class="rf-comparison__cell">
            <p>Framer runtime</p>
          </td>
        </tr>
        <tr>
          <th class="rf-comparison__row-label" scope="row">AI role</th>
          <td class="rf-comparison__cell rf-comparison__cell--highlighted">
            <p>AI generates reusable themes, not throwaway sites</p>
          </td>
          <td class="rf-comparison__cell">
            <p>AI generates a single site layout</p>
          </td>
          <td class="rf-comparison__cell">
            <p>AI assists with layout and copy</p>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  <p class="rf-comparison__verdict">refrakt.md gives you the power of AI without sacrificing ownership or portability.</p>
</section>

Cards layout

Use layout="cards" for side-by-side cards. Ideal for pricing comparisons or when columns have different content lengths.

{% comparison highlighted="Pro" layout="cards" %}

## Free

- **Projects** — 1
- **AI generations** — 5 per month
- **Themes** — Community only
- **Support** — Community forum

## Pro

- **Projects** — Unlimited
- **AI generations** — Unlimited
- **Themes** — Community + Premium
- **Support** — Priority email

## Team

- **Projects** — Unlimited
- **AI generations** — Unlimited
- **Themes** — All + private library
- **Support** — Dedicated Slack

{% /comparison %}

<section data-field="content-section" data-rune="comparison">
  <meta content="cards" data-field="layout">
  <meta content="left" data-field="labels">
  <meta content="true" data-field="collapse">
  <meta content="" data-field="verdict">
  <meta content="Pro" data-field="highlighted">
  <meta content="[&quot;Projects&quot;,&quot;AI generations&quot;,&quot;Themes&quot;,&quot;Support&quot;]" data-field="row-labels">
  <div data-name="grid">
    <div data-field="column" data-rune="comparison-column">
      <span data-name="name">Free</span>
      <meta content="false" data-field="highlighted">
      <div data-name="body">
        <div data-field="row" data-rune="comparison-row">
          <span data-name="label">Projects</span>
          <meta content="text" data-field="row-type">
          <div data-name="body">
            <p>1</p>
          </div>
        </div>
        <div data-field="row" data-rune="comparison-row">
          <span data-name="label">AI generations</span>
          <meta content="text" data-field="row-type">
          <div data-name="body">
            <p>5 per month</p>
          </div>
        </div>
        <div data-field="row" data-rune="comparison-row">
          <span data-name="label">Themes</span>
          <meta content="text" data-field="row-type">
          <div data-name="body">
            <p>Community only</p>
          </div>
        </div>
        <div data-field="row" data-rune="comparison-row">
          <span data-name="label">Support</span>
          <meta content="text" data-field="row-type">
          <div data-name="body">
            <p>Community forum</p>
          </div>
        </div>
      </div>
    </div>
    <div data-field="column" data-rune="comparison-column">
      <span data-name="name">Pro</span>
      <meta content="true" data-field="highlighted">
      <div data-name="body">
        <div data-field="row" data-rune="comparison-row">
          <span data-name="label">Projects</span>
          <meta content="text" data-field="row-type">
          <div data-name="body">
            <p>Unlimited</p>
          </div>
        </div>
        <div data-field="row" data-rune="comparison-row">
          <span data-name="label">AI generations</span>
          <meta content="text" data-field="row-type">
          <div data-name="body">
            <p>Unlimited</p>
          </div>
        </div>
        <div data-field="row" data-rune="comparison-row">
          <span data-name="label">Themes</span>
          <meta content="text" data-field="row-type">
          <div data-name="body">
            <p>Community + Premium</p>
          </div>
        </div>
        <div data-field="row" data-rune="comparison-row">
          <span data-name="label">Support</span>
          <meta content="text" data-field="row-type">
          <div data-name="body">
            <p>Priority email</p>
          </div>
        </div>
      </div>
    </div>
    <div data-field="column" data-rune="comparison-column">
      <span data-name="name">Team</span>
      <meta content="false" data-field="highlighted">
      <div data-name="body">
        <div data-field="row" data-rune="comparison-row">
          <span data-name="label">Projects</span>
          <meta content="text" data-field="row-type">
          <div data-name="body">
            <p>Unlimited</p>
          </div>
        </div>
        <div data-field="row" data-rune="comparison-row">
          <span data-name="label">AI generations</span>
          <meta content="text" data-field="row-type">
          <div data-name="body">
            <p>Unlimited</p>
          </div>
        </div>
        <div data-field="row" data-rune="comparison-row">
          <span data-name="label">Themes</span>
          <meta content="text" data-field="row-type">
          <div data-name="body">
            <p>All + private library</p>
          </div>
        </div>
        <div data-field="row" data-rune="comparison-row">
          <span data-name="label">Support</span>
          <meta content="text" data-field="row-type">
          <div data-name="body">
            <p>Dedicated Slack</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Free

Projects
1
AI generations
5 per month
Themes
Community only
Support
Community forum

Recommended

Pro

Projects
Unlimited
AI generations
Unlimited
Themes
Community + Premium
Support
Priority email

Team

Projects
Unlimited
AI generations
Unlimited
Themes
All + private library
Support
Dedicated Slack

<section data-field="content-section" class="rf-comparison rf-comparison--cards" data-rune="comparison" data-density="full">
  <div class="rf-comparison__cards">
    <div class="rf-comparison-card">
      <h3 class="rf-comparison-card__name">Free</h3>
      <ul class="rf-comparison-card__rows">
        <li class="rf-comparison-card__row">
          <strong>Projects</strong>
          <p>1</p>
        </li>
        <li class="rf-comparison-card__row">
          <strong>AI generations</strong>
          <p>5 per month</p>
        </li>
        <li class="rf-comparison-card__row">
          <strong>Themes</strong>
          <p>Community only</p>
        </li>
        <li class="rf-comparison-card__row">
          <strong>Support</strong>
          <p>Community forum</p>
        </li>
      </ul>
    </div>
    <div class="rf-comparison-card rf-comparison-card--highlighted">
      <div class="rf-comparison-card__badge">Recommended</div>
      <h3 class="rf-comparison-card__name">Pro</h3>
      <ul class="rf-comparison-card__rows">
        <li class="rf-comparison-card__row">
          <strong>Projects</strong>
          <p>Unlimited</p>
        </li>
        <li class="rf-comparison-card__row">
          <strong>AI generations</strong>
          <p>Unlimited</p>
        </li>
        <li class="rf-comparison-card__row">
          <strong>Themes</strong>
          <p>Community + Premium</p>
        </li>
        <li class="rf-comparison-card__row">
          <strong>Support</strong>
          <p>Priority email</p>
        </li>
      </ul>
    </div>
    <div class="rf-comparison-card">
      <h3 class="rf-comparison-card__name">Team</h3>
      <ul class="rf-comparison-card__rows">
        <li class="rf-comparison-card__row">
          <strong>Projects</strong>
          <p>Unlimited</p>
        </li>
        <li class="rf-comparison-card__row">
          <strong>AI generations</strong>
          <p>Unlimited</p>
        </li>
        <li class="rf-comparison-card__row">
          <strong>Themes</strong>
          <p>All + private library</p>
        </li>
        <li class="rf-comparison-card__row">
          <strong>Support</strong>
          <p>Dedicated Slack</p>
        </li>
      </ul>
    </div>
  </div>
</section>

Attributes

Attribute	Type	Default	Description
`title`	string		Comparison title displayed above the matrix
`highlighted`	string		Column name to visually emphasize as recommended
`layout`	string	`table`	Display variant: `table` or `cards`
`labels`	string	`left`	Row label position: `left` or `hidden`
`collapse`	string	`true`	Collapse to cards on mobile
`verdict`	string		Summary text shown below the comparison

Markdown reinterpretation

Markdown	Interpretation
`## Heading`	Column header — the thing being compared
List item	Feature row for that column
`Bold text` at start of list item	Row alignment label
Text after bold	Feature description
`~~Strikethrough~~`	Negative indicator — limitation or missing capability
Blockquote	Callout badge within a column

Common attributes

All block runes share these attributes for layout and theming.

Attribute	Type	Default	Description
`width`	`string`	`content`	Page grid width: `content`, `wide`, or `full`
`spacing`	`string`	—	Vertical spacing: `flush`, `tight`, `default`, `loose`, or `breathe`
`inset`	`string`	—	Horizontal padding: `flush`, `tight`, `default`, `loose`, or `breathe`
`tint`	`string`	—	Named colour tint from theme configuration
`tint-mode`	`string`	`auto`	Colour scheme override: `auto`, `dark`, or `light`
`bg`	`string`	—	Named background preset from theme configuration

Section header

Comparison supports an optional eyebrow, headline, and blurb above the section above the comparison table. Place a short paragraph or heading before the main content to use them. See Page sections for the full syntax.

Rune Catalog

Content

Layout

Code & Data

Site

Marketing

Docs

Storytelling

Places

Business

Learning

Design

Media

Plan