Svelte Component Rendering

Render Svelte from inside Twig

Built a Svelte component? Render it quickly & easily in Twig and pass in dynamic props. 

composer require symfony/ux-svelte

Read the docs

assets/svelte/src/controllers/PackageSearch.svelte 
<script>
    import PackageList from '../components/PackageList.js';

    export let packages = [];
    let search = '';

    $: filteredPackages = packages.filter(
        uxPackage => uxPackage.humanName.toLowerCase().includes(search.toLowerCase())
    );
</script>

<div>
    <input
        bind:value={search}
        class='form-control'
        type='search'
        placeholder='This search is built in Svelte!'
    />
    <div class='mt-3'>
        <PackageList packages={filteredPackages} />
    </div>
</div>
templates/ux_packages/svelte.html.twig 
{% extends 'base.html.twig' %}

{% block body %}
    <div {{ svelte_component('PackageSearch', {packages: packagesData}) }}>
        Loading...
    </div>
{% endblock %}
Symfony logo

UX Svelte

Loading...

Install It

$ composer require symfony/ux-svelte