Rendering

Docvia compiles Markdown into a RenderOutput tree at build time. The Renderer component renders this tree in your Svelte application.

Basic usage

<script>
  import { Renderer } from "@docvia/renderer-svelte";
  let { data } = $props();
</script>

<Renderer nodes={data.page.content} />

The Renderer is a Svelte 5 component using runes syntax. No client-side JavaScript is shipped unless your content contains interactive components.

Component registry

For interactive components embedded via directives, pass a registry:

<Renderer nodes={data.page.content} registry={registry} />

The registry resolves directive names to Svelte components. It is generated from the components field in docvia.config.ts and exported from virtual:docvia/source.

Renderer props

RenderOutput types

The compiled output is a tree of typed nodes:

Differences from React

The Svelte renderer does not yet support the components prop for tag-level overrides (e.g., replacing <a> or <img> globally). This is a React-specific feature. In Svelte, customize element rendering by extending the Renderer or post-processing the output tree.