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.

Notes on SvelteKit

SvelteKit is an application framework powered by Svelte. SvelteKit applications consume Svelte components.

Components should be made in Svelte and imported in a SvelteKit application.

References