Svelte Webcomponent

dariuszsikorski

Starter pack for anyone who want to write super-tiny webcomponent using svelte

Svelte Web Components Starter

A lightweight starter template for building optimized web components with Svelte 5 and TypeScript. Produces production-ready components with:

20KB minified (ES format)
8KB gzipped
Custom Elements v1 compliant

Features

⚡️ Ultra-lightweight output
🛠 TypeScript-first development
🌐 Universal component format (ES + UMD)
🔧 Built-in Vite optimizations
🎯 CSS isolation per component
📦 Zero-dependency components

Quick Start

Installation

npm install

Development

npm run dev

Production Build

npm run build

Preview Production Build

npm run preview

Usage

Import in HTML

<script type="module" src="/dist/my-web-components.es.js"></script>

<my-component name="Developer"></my-component>

Use in JavaScript

import { MyComponent } from './dist/my-web-components.es.js';

// Components auto-register on import

Building Components

Create new component in src/wc/ ```svelte <svelte:options customElement="my-element" />

Hello {value}

```

Add to src/wc/web-components.ts

export { default as MyElement } from './MyElement.wc.svelte';

Rebuild with npm run build

Package Scripts

Command	Description
`npm run dev`	Start dev server with HMR
`npm run build`	Build production-ready components
`npm run preview`	Locally preview production build
`npm run check`	Validate TypeScript types

Technical Stack

Core Technologies

Svelte 5 (custom elements)
TypeScript 5
Vite 6

Optimization Features

Double minification (Terser + esbuild)
Tree-shaking enabled
CSS auto-scoping
Dead code elimination
Gzip-ready outputs

File Structure

├── src/
│   ├── wc/                   # Web components
│   │   ├── MyComponent.wc.svelte
│   │   └── web-components.ts # Component registry
│   ├── lib/                  # Svelte components
│   ├── App.svelte            # Demo application
│   └── main.ts               # Entry point
├── vite.config.ts            # Build configuration
└── svelte.config.js          # Svelte compiler settings

License

Made with ♥ by Dariusz Sikorski

Top categories