Svelte Integration Example#

Demonstrates embedding Svelte 5 components in Markdown.

Setup#

cd examples/integ-svelte
npm install
npm run dev

Configuration#

// vite.config.ts
import { defineConfig } from "vite";
import { svelte } from "@sveltejs/vite-plugin-svelte";
import { oxContentSvelte } from "@ox-content/vite-plugin-svelte";

export default defineConfig({
  plugins: [
    svelte(),
    oxContentSvelte({
      srcDir: "docs",
      ssg: false,
      // Auto-discover all Svelte components
      components: "./src/components/*.svelte",
      // Opt in when .mdx files are rendered as custom page templates.
      mdxDocumentProps: true,
    }),
  ],
});

Components (Svelte 5 Runes)#

Counter#

<script lang="ts">
  interface Props {
    initial?: number;
  }

  let { initial = 0 }: Props = $props();
  let count = $state(initial);
</script>

<div class="counter">
  <button onclick={() => count--}>-</button>
  <span>{count}</span>
  <button onclick={() => count++}>+</button>
</div>

Alert#

<script lang="ts">
  import type { Snippet } from 'svelte';

  interface Props {
    type?: 'info' | 'warning' | 'error' | 'success';
    children: Snippet;
  }

  let { type = 'info', children }: Props = $props();
</script>

<div class="alert alert-{type}">
  {@render children()}
</div>

Usage in Markdown#

# My Documentation

<Counter initial={10} />

<Alert type="warning">
  Be careful with this feature!
</Alert>

MDX Page Template Props#

Custom ssg: false hosts can opt in to render build-time props from .mdx documents during Svelte SSR:

import PostList from "./PostList.svelte";

# Page Template

Hello {title}.

<PostList items={items} />

<script>
  import PageTemplate from '../docs/page-template.mdx';

  const posts = [{ title: 'Ox Content with Svelte', href: '/posts/svelte' }];
</script>

<PageTemplate title="Blog" items={posts} />

Only identifiers and dotted property paths are resolved from Svelte component props. Missing values throw a deterministic SSR error instead of rendering an empty string.

Svelte 5 Features#

This example uses Svelte 5's new features:

$state - Reactive state declaration
$props - Component props
$derived - Computed values
Snippets - Composable template fragments
New event syntax - onclick instead of on:click

File Structure#

integ-svelte/
├── docs/
│   └── index.md
├── src/
│   ├── components/
│   │   ├── Counter.svelte
│   │   └── Alert.svelte
│   ├── App.svelte
│   └── main.ts
├── index.html
├── package.json
├── svelte.config.js
└── vite.config.ts