MDsveX Preview (Svelte 5)

This file is meant to help you preview:

Typography (headings, paragraphs, lists, links)
Markdown elements (tables, blockquotes, code)
Embedded HTML
Svelte 5 interactivity inside .svx (buttons, state, conditional UI)

1) Headings & Paragraph Rhythm

Subheading: Comfortable reading width

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo.

Bold text, italic text, and inline code should all look good.

A link example: Svelte docs.

2) Lists

Unordered

Clean bullets
Consistent spacing
Nested list:
- Level 2
- Another item
  - Level 3

Ordered

Step one
Step two
Step three

3) Blockquote

A blockquote should have enough contrast and spacing to feel intentional.

4) Code Blocks

TypeScript

type Mood = "calm" | "focused" | "chaotic";

function greet(name: string, mood: Mood) {
  return `Hello ${name}, you look ${mood} today.`;
}

pnpm add -D mdsvex
pnpm sv add mdsvex

5) Table

Feature	Expectation	Status
Headings	Good hierarchy	✅
Links	Clear style	✅
Code blocks	Syntax highlight	✅ / depends
Interactivity	Buttons update state	✅ (if events work)

6) Interactive Demos (Svelte 5 / runes)

Demo A

Native state + conditional UI

count: 0

Demo B

“Form-ish” state + segmented mood picker

Your name

Hello, Bukhari 👋

Pick a mood

Current mood: focused

Demo C

Tiny list interaction

Finish layout polish
Todo
Add OG tags
Done
Ship the first version
Todo

7) Notes for shadcn-svelte buttons

If you’re using shadcn-svelte’s <Button />, event binding depends on how that component forwards props.

This usually works if the component forwards DOM events:

If it doesn’t forward onclick, fall back to:

8) End

If everything above updates live, your .svx pipeline is interactive-ready.