---
title: "Components"
description: "Author interactive Svelte components inside SVX and MDX-style documentation pages."
---

> Documentation Index
> Fetch the complete documentation index at: https://svedocs.pwp.sh/llms.txt
> Use this file to discover all available pages before exploring further.

# Components

<script>
  let target = 'SvelteKit';
</script>

# Components

Use `.svx` or `.mdx` when a documentation page needs live Svelte components. The page still participates in the same routing, navigation, search, and SEO flow as Markdown.

## Interactive authoring

<Callout tone="edge">
  Components can be injected by the `svedocs()` Vite plugin and used directly in authoring files.
</Callout>

<button class="sd-button" type="button" on:click={() => (target = target === 'SvelteKit' ? 'Cloudflare' : 'SvelteKit')}>
  Toggle {target}
</button>

The component above is compiled as Svelte, not rendered through a React MDX runtime.

```ts title="component-authoring.ts" {1}
export const runtime = 'svelte';
export const framework = 'svedocs';
```

## When to use it

- Small interactive examples.
- Localized demos and callouts.
- Layout-sensitive snippets that should stay inside the docs theme.

Source: https://svedocs.pwp.sh/docs/writing/components