Components

Docvia supports embedding interactive components directly in Markdown using the directive syntax. Components are registered in your config and hydrated on the client.

Directive syntax

Block directive:

:::counter{initial=42 hydrate="client:load"}
:::

Inline directive:

Check the :badge{text="new"} feature.

Registration

export default defineConfig({
  components: {
    counter: {
      path: "./src/lib/components/Counter.svelte",
      hydrate: true,
      defaultProps: { initial: 0 },
    },
  },
});

Hydration modes

Mode	When	Use case
`hydrate: false`	Never	Static content only
`hydrate: true`	Immediate	Interactive on first paint
`client:idle`	On idle	After main thread is free
`client:visible`	On intersection	When scrolled into view

Live example

Here is an interactive counter embedded via directive:

Count

The counter is server-rendered then hydrated client-side.

Creating components

Components are standard Svelte 5 components:

<script lang="ts">
  let { initial = 0 } = $props();
  let count = $state(initial);
</script>

<div class="counter-card">
  <div class="counter-value">{count}</div>
  <div class="counter-controls">
    <button class="btn" onclick={() => count--}>-</button>
    <button class="btn" onclick={() => count = initial}>Reset</button>
    <button class="btn btn-primary" onclick={() => count++}>+</button>
  </div>
</div>