Is it possible to use Svelte for templating like handlebars?

Question

My objective is to let end-users build some customization in my app. Can I do something like this? I know this is sometimes also referred to as liquid templates, similar to how handlebar.js works.

app.svelte

<script>
    let name = 'world';
    const template = '<h1> Hello {name} </h1>'
</script>

{@html template}

I'm sorry if this is already answered, but I could not find it.

Link to REPL.

Answer 1

This is a little bit hacky but it will do the trick:

<script>
    let name = 'world';
    let template;
</script>

<div class="d-none" bind:this={template}>
    <h1>Hello {name}</h1>
</div>

{@html template?.innerHTML}

<style>
    .d-none {
        display: none;
    }
</style>

Answer 2

If the template should be a string one solution might be to simply replace the {variable} with the values before displaying via a {@html} element >> REPL
Notice the warning in the SVELTE docs

Svelte does not sanitize expressions before injecting HTML. If the data comes from an untrusted source, you must sanitize it, or you are exposing your users to an XSS vulnerability.

(Inside a component $$props could be used to get the passed values in one object if they were handled seperately)

<script>
    const props = {
        greeting: 'Hello',
        name: 'world'
    }

    let template = '<h1> {greeting} {name} </h1>'
    
    let filledTemplate = Object.entries(props).reduce((template, [key,value]) => {
        return template.replaceAll(`{${key}}`, value)
    },template)
            
</script>

{@html filledTemplate}

Previous solution without string To achieve this I would build a Component for every template and use a <svelte:component> element and a switch to display the selected one > REPL
[App.svelte]

<script>
    import Template1 from './Template1.svelte'
    import Template2 from './Template2.svelte'  

    let selectedTemplate = 'template1'

    const stringToComponent = (str) => {
        switch(str) {
            case 'template1':
                return Template1
            case 'template2':
                return Template2
        }
    }
</script>

<button on:click={() => selectedTemplate = 'template1'}>Template1</button>
<button on:click={() => selectedTemplate = 'template2'}>Template2</button>

<svelte:component this={stringToComponent(selectedTemplate)} adjective={'nice'}/>

[Template.svelte]

<script>
    export let adjective
</script>
<hr>
<h1>This is a {adjective} template</h1>
<hr>

Answer 3

Well, you could do it, but that not what Svelte was designed for.
Svelte was designed to compile the template at build time.

I'd recommend using a template engine (like handlebars) for your use case.

A. Using Handlebars inside Svelte REPL:

<script>
  import Handlebars from 'handlebars';
    
  let name = 'world';
  const template = "<h1> Hello {{name}} </h1>";
  $: renderTemplate = Handlebars.compile(template);
</script>

{@html renderTemplate({ name })}

This of course limits the available syntax to handlebars, and you can't use svelte components inside a handlebar template.

B. Dynamic Svelte syntax templates inside a Svelte app

To be able to use svelte syntax you'll need to run the svelte compiler inside the frontend.
The output the compiler generates is not directly usable so you'll also need to run a bundler or transformer that is able to import the svelte runtime dependencies. Note that this is a separate runtime so using <svelte:component> wouldn't behave as expected, and you need to mount the component as a new svelte app.

In short, you could, but unless you're building a REPL tool you shouldn't.

C. Honourable mentions

• Allow user to write markdown, this gives some flexibility (including using html) and use marked in the frontend to convert it to html.
• Write the string replacements manually {@html template.replace(/\{name\}/, name)}