Wrappers

ExampleWrapper

A flexible component that displays both rendered Svelte components and their source code side-by-side. Supports name-based lookup or direct component/code props with automatic $lib import replacement.

<script lang="ts">
  import { ExampleWrapper } from 'svelte-rune-highlight';
  import SampleCode from '../../examples/svelteCode.svelte';
  import sampleCodeRaw from '../../examples/svelteCode.svelte?raw';
</script>

<ExampleWrapper component={SampleCode} code={sampleCodeRaw} />

The above code produces the following actual output and code:

<script>
  let count = $state(0);
</script>

<button onclick={() => count++}>
  Count: {count}
</button>

<style>
  button {
    padding: 4px;
    border: 2px solid blue;
    margin: 8px;
    border-radius: 10px;
  }
</style>

MyExampleWrapper

Project-specific wrapper that auto-discovers example components from a directory, simplifying usage to just passing a component name.

If you have multiple files to display, it is possible to use ExampleWrapper. Create MyExampleWrapper as the following:

<script lang="ts">
  import { ExampleWrapper, transformComponents, transformModules } from 'svelte-rune-highlight';
  import type { Component } from 'svelte';

  // Import components dynamically
  const componentModules = import.meta.glob('../examples/*.svelte', {
    eager: true
  }) as Record<string, { default: Component }>;

  // Import source code
  const exampleModules = import.meta.glob('../examples/*.svelte', {
    query: '?raw',
    import: 'default',
    eager: true
  }) as Record<string, string>;

  // Transform both using helper functions
  const components = transformComponents(componentModules);
  const modules = transformModules(exampleModules);

  interface Props {
    name: string;
  }
  let { name }: Props = $props();
</script>

<ExampleWrapper {name} {components} {modules} />

And use this as the following:

<script lang="ts">
  import MyExampleWrapper from '../../utils/MyExampleWrapper.svelte';
</script>

<MyExampleWrapper name="svelteCode" />

The following is the output.

<script>
  let count = $state(0);
</script>

<button onclick={() => count++}>
  Count: {count}
</button>

<style>
  button {
    padding: 4px;
    border: 2px solid blue;
    margin: 8px;
    border-radius: 10px;
  }
</style>