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 curve | Learning curve — Low, intuitive template syntax | Learning curve — Moderate, React knowledge required | Learning curve — Low, HTML-first approach |
| Bundle size | Bundle size — Compiles away the framework | Bundle size — Medium, React runtime included | Bundle size — Zero JS by default |
| SSR | SSR — Built-in with adapter system | SSR — Built-in with multiple strategies | SSR — Built-in, island architecture |
| TypeScript | TypeScript — First-class support | TypeScript — First-class support | TypeScript — 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 Recommended | Wix AI | Framer AI | |
|---|---|---|---|
| Content ownership | Content ownership — Your content stays yours, portable Markdown | Content ownership — | Content ownership — |
| Theme system | Theme system — Switch themes instantly, same content renders differently | Theme system — | Theme system — |
| Output | Output — Real SvelteKit, not proprietary runtime | Output — Proprietary Wix runtime | Output — Framer runtime |
| AI role | AI role — AI generates reusable themes, not throwaway sites | AI role — AI generates a single site layout | AI 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
| 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 |