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

Choosing a Framework

SvelteKit Next.js Astro
Learning curveLearning curve — Low, intuitive template syntaxLearning curve — Moderate, React knowledge requiredLearning curve — Low, HTML-first approach
Bundle sizeBundle size — Compiles away the frameworkBundle size — Medium, React runtime includedBundle size — Zero JS by default
SSRSSR — Built-in with adapter systemSSR — Built-in with multiple strategiesSSR — Built-in, island architecture
TypeScriptTypeScript — First-class supportTypeScript — First-class supportTypeScript — First-class support

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 %}
refrakt.md RecommendedWix AI Framer AI
Content ownershipContent ownership — Your content stays yours, portable MarkdownContent ownershipContent locked in Wix platformContent ownershipContent lives in Framer
Theme systemTheme system — Switch themes instantly, same content renders differentlyTheme systemTemplates only, no real theme swappingTheme systemVisual-first, design tool not content system
OutputOutput — Real SvelteKit, not proprietary runtimeOutput — Proprietary Wix runtimeOutput — Framer runtime
AI roleAI role — AI generates reusable themes, not throwaway sitesAI role — AI generates a single site layoutAI role — AI assists with layout and copy

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

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

Free

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

Pro

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

Team

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

Attributes

AttributeTypeDefaultDescription
titlestringComparison title displayed above the matrix
highlightedstringColumn name to visually emphasize as recommended
layoutstringtableDisplay variant: table or cards
labelsstringleftRow label position: left or hidden
collapsestringtrueCollapse to cards on mobile
verdictstringSummary text shown below the comparison

Markdown reinterpretation

MarkdownInterpretation
## HeadingColumn header — the thing being compared
List itemFeature row for that column
**Bold text** at start of list itemRow alignment label
Text after boldFeature description
~~Strikethrough~~Negative indicator — limitation or missing capability
BlockquoteCallout badge within a column