Components
Built-in Svelte components you can use inside .svx content.
Callout
Use .svx instead of .md for any page that needs live components.
Frontmatter and sidecar .meta.json both work on .svx files too.
Component imports only work in .svx — plain .md files can’t have a script block.
Don’t nest a Callout inside another Callout — styling assumes one level.
Import path: $lib/components/Callout.svelte, added at the top of the .svx file’s script block alongside your other imports.
Tabs
bun install
bun run devSteps
Add a markdown file
Create content/example.md with frontmatter or a sidecar .meta.json.
Register it in the sidebar
Folders pick up ordering automatically from each page’s order field, so a flat page needs no extra step.
Preview it
Run bun run dev and visit /docs/example.
Cards
Card takes an optional icon prop — any name from the page icon set below.
Auto-populated
Pass auto instead of children and Cards lists the current page’s siblings — same parent, in sidebar order — pulling each one’s title, description, icon, and link from the page tree. Useful on a section’s landing page so its children never need to be listed twice.
(the grid above is live — it’s this page’s own siblings in the sidebar)
Page icons
Set icon: <name> in a page’s frontmatter, or icon on a _meta.json item, to show one of these next to that page in the sidebar and its <h1>. See Writing Content and Navigation.
rocketbookgearterminalcodefolderfilepackagezapshieldlayersstarflagkeylocklightbulbglobetargetImport PageIcon from $lib/icons/PageIcon.svelte directly if you want one inline in prose; everywhere else (frontmatter, _meta.json, the Card icon prop) just takes the name as a string.
Collapse
Why mdsvex instead of raw Markdown?
It compiles Markdown straight to Svelte components, so .svx files can mix prose with live components without a separate MDX runtime.
FileTree
content
- _meta.json
- introduction.md
deployment
- index.md
- _meta.json
- svelte.config.js
ImageZoom
Click any screenshot to open it full-size in an overlay; click again (or press Escape) to close it:
Import path: $lib/components/ImageZoom.svelte. Takes src, alt, and optional width/height — set those two to the source image’s real dimensions so the layout doesn’t shift once it loads.
Bleed
Break wide content (a table, a diagram, a screenshot) out of the prose column’s side padding:
bun install && bun run dev
pnpm install && pnpm dev
deno task install && deno task dev(runs across all three package managers)
That’s the full component set.