How to Create Dynamic Components in Svelte

To dynamically render components in Svelte, use the svelte:component element.

<script>
  import ExperimentOne from './ExperimentOne.svelte';
  import ExperimentTwo from './ExperimentTwo.svelte';

  let component = (Math.random() * 100) > 50 ? 
    ExperimentTwo :
    ExperimentOne;
</script>

<svelte:component this={component} />

You can pass the component to render as the this property. Whenever its value changes, the component is destroyed and then recreated. If this is falsy, no component will be rendered.

Looking into Svelte 3Quickstart by creating a retro board in Svelte from scratchSvelte 3 promises a radical new approach to building user interfaces. Since it is a compiler, it works fundamentally different from other big frameworks...Learn More