vite-plugin-ox-content-svelte

Svelte integration for Ox Content - embed Svelte 5 components in Markdown.

Installation

pnpm add vite-plugin-ox-content-svelte svelte @sveltejs/vite-plugin-svelte

Usage

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

export default defineConfig({
  plugins: [
    svelte(),
    oxContentSvelte({
      srcDir: 'docs',
      // Auto-discover components with glob pattern
      components: './src/components/*.svelte',
    }),
  ],
});

Options

components

• Type: string | string[] | Record<string, string>

Components to register for use in Markdown. Supports:

Glob Pattern (Recommended)

// Single pattern
components: './src/components/*.svelte'

// Multiple patterns
components: ['./src/components/*.svelte', './src/ui/*.svelte']

Component names are derived from file names in PascalCase:

• counter.svelte → Counter

• my-button.svelte → MyButton

Explicit Map

components: {
  Counter: './src/components/Counter.svelte',
  Alert: './src/components/Alert.svelte',
}

runes

• Type: boolean

• Default: true

Enable Svelte 5 Runes mode.

Using Components in Markdown

# My Page

Here's an interactive counter:

<Counter initial={5} />

And an alert:

<Alert type="warning">
  This is a warning message!
</Alert>

Example Component (Svelte 5 Runes)

<!-- src/components/Counter.svelte -->
<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>

<style>
  .counter {
    display: inline-flex;
    gap: 8px;
    align-items: center;
  }
</style>

Virtual Modules

• virtual:ox-content-svelte/runtime - Svelte-specific runtime

• virtual:ox-content-svelte/components - Registered components

import { mount, unmount } from 'virtual:ox-content-svelte/runtime';
import components from 'virtual:ox-content-svelte/components';

HMR

Components are hot-reloaded when modified. Svelte's built-in HMR is supported.

Svelte 5 Features

This plugin is designed for Svelte 5 and supports:

• Runes: $state, $derived, $effect, $props

• Snippets: {#snippet} and {@render}

• New event syntax: onclick instead of on:click