Build a web component library with Svelte

Out of the box, Svelte comes with a compiler mode for custom elements. However, building a library with it is extremely involved: you have to supply attribute metadata and configure a build pipeline, with no straightforward way to generate consumer types or render the component on the server.

svebcomponents is a toolkit for boilerplate-free, type-safe, server-renderable web components with Svelte.

boilerplate-free:
- automatically inferred metadata for the Svelte compiler from the type system
type-safe:
- TypeScript declarations and a custom elements manifest
server-renderable:
- an SSR implementation based on Svelte’s server rendering and declarative shadow DOM
- framework integrations for rendering custom elements in Svelte, React, Vue, and Astro (based on Lit’s ElementRenderer API)

How Svelte custom elements work

svebcomponents builds on Svelte’s compiler mode for generating custom elements, extending it only where needed. This Svelte Summit 2025 talk explores the available options, lifecycle, and mechanics behind Svelte-built custom elements.

TL;DR

Svelte compiles the component and an HTMLElement wrapper. The wrapper creates a shadow root, maps element properties and attributes to component props, and mounts the component after the browser connects the element. The customElement metadata in <svelte:options> is used to add names and type converters for attributes.

`component + svebcomponents = package`

A regular TypeScript Svelte component with <svelte:options customElement="element-name"> is all you need to create a full-featured component package with svebcomponents:

<svelte:options customElement="favorite-number" />

<script lang="ts">
  let { value = 0 }: { value?: number } = $props();

  function increment() {
    value += 1;
    $host().dispatchEvent(new CustomEvent("change", { detail: value }));
  }
</script>

<button onclick={increment}>{value}</button>

The svebcomponents CLI reads your package exports to choose build entries. From this source, svebcomponents can generate:

Output	Consumer
standalone browser bundle	HTML and framework apps
element and event declarations	TypeScript and LSPs
`custom-elements.json`	web-component tooling
server renderer	SvelteKit, React, Vue, and Astro adapters