Skip to main content
The createRawSnippet() function creates a snippet programmatically from a render function. This is useful for library authors or when you need to generate snippets dynamically.

​
Import

import { createRawSnippet } from 'svelte';

​
Signature

function createRawSnippet<Params extends unknown[]>(
  fn: (...params: Params) => {
    render: () => string;
    setup?: (element: Element) => void | (() => void);
  }
): Snippet<Params>;

​
Parameters

​
fn
function
required
A function that receives the snippet parameters and returns an object with render and optional setup methods

​
Returns

​
Snippet
Snippet<Params>
A snippet that can be rendered with {@render}

​
Usage

​
Basic snippet

<script>
  import { createRawSnippet } from 'svelte';

  const hello = createRawSnippet(() => ({
    render: () => `<p>Hello, world!</p>`
  }));
</script>

{@render hello()}

​
With parameters

<script>
  import { createRawSnippet } from 'svelte';

  const greet = createRawSnippet((name) => ({
    render: () => `<p>Hello, ${name}!</p>`
  }));
</script>

{@render greet('Alice')}
{@render greet('Bob')}

​
With setup and cleanup

<script>
  import { createRawSnippet } from 'svelte';

  const interactive = createRawSnippet((message) => ({
    render: () => `<button class="dynamic-btn">${message}</button>`,
    setup: (element) => {
      const button = element.querySelector('.dynamic-btn');
      
      const handleClick = () => {
        alert(message);
      };
      
      button.addEventListener('click', handleClick);
      
      // Return cleanup function
      return () => {
        button.removeEventListener('click', handleClick);
      };
    }
  }));
</script>

{@render interactive('Click me!')}

​
Dynamic rendering

<script>
  import { createRawSnippet } from 'svelte';

  function createList(items) {
    return createRawSnippet(() => ({
      render: () => `
        <ul>
          ${items.map(item => `<li>${item}</li>`).join('')}
        </ul>
      `
    }));
  }

  let items = $state(['Apple', 'Banana', 'Orange']);
  let list = $derived(createList(items));
</script>

{@render list()}

​
Library wrapper

// chart-wrapper.js
import { createRawSnippet } from 'svelte';
import Chart from 'chart.js';

export function createChart(config) {
  return createRawSnippet(() => ({
    render: () => `<canvas class="chart"></canvas>`,
    setup: (element) => {
      const canvas = element.querySelector('.chart');
      const chart = new Chart(canvas, config);
      
      return () => {
        chart.destroy();
      };
    }
  }));
}

<script>
  import { createChart } from './chart-wrapper.js';

  const myChart = createChart({
    type: 'bar',
    data: {
      labels: ['Red', 'Blue', 'Yellow'],
      datasets: [{
        label: 'Votes',
        data: [12, 19, 3]
      }]
    }
  });
</script>

{@render myChart()}

​
Notes

  • The render function is called every time the snippet is rendered
  • The setup function is called once after the HTML is inserted into the DOM
  • HTML is inserted as raw HTML (not sanitized)
  • Use with caution - improper use can lead to XSS vulnerabilities
  • Primarily intended for library authors and advanced use cases
  • Regular snippets ({#snippet}) are preferred for normal application code

​
See also

  • Snippets - Declarative snippet syntax
  • Slots - Content projection patterns