Svelte

Source file extensions: .svelte

Svelte is a radical new approach to building user interfaces. Whereas traditional frameworks like React and Vue do the bulk of their work in the browser, Svelte shifts that work into a compile step that happens when you build your app.

Component

index.svelte

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

<h1>Hello {name}!</h1>

Stories

Svelte components can be used in stories through an object.

import Counter from './index.svelte';

export const story1 = () => Counter;

export const story2 = () => ({
  Component: Counter,
  props: {
    count: 5,
  },
});

Documentation

Use markdown with Svelte components using MDsveX.

Web Component

Svelte can generate Web Components.

Just add <svelte:options tag="my-element" /> on top of your svelte component. Replace my-element with the custom element name that you want to be defined.

The compiler will detect this tag and setup Svelte's Compiler to generate a Web Component.

See Svelte's Custom Element API for more information.