SVOCS
Esc

Start typing to search the docs

Components

Built-in Svelte components you can use inside .svx content.

2 min read · 347 words

View as Markdown

Callout

Info

Use `.svx` instead of `.md` for any page that needs live components.

Tip

Frontmatter and sidecar `.meta.json` both work on `.svx` files too.

Warning

Component imports only work in `.svx` — plain `.md` files can't have a script block.

Danger

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 dev

Steps

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 — no extra step for a flat page.

Preview it

Run bun run dev and visit /docs/example.

Cards

Getting Started Bootstrap your first SVOCS site. Deployment Ship to Cloudflare Pages or GitHub Pages. GitHub Source and issue tracker.

Collapse

Why mdsvex instead of raw Markdown?

It compiles Markdown straight to Svelte components, so .svx files can mix prose with live, interactive components — no separate MDX runtime required.

FileTree

  • content
    • _meta.json
    • introduction.md
    • deployment
      • index.md
      • _meta.json
  • svelte.config.js

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.