https://github.com/vidschofelix/vite-plugin-svelte-anywhere

Use Svelte components anywhere
https://github.com/vidschofelix/vite-plugin-svelte-anywhere

svellte vite-plugin web-components

Last synced: 4 months ago
JSON representation

Use Svelte components anywhere

• Host: GitHub
• URL: https://github.com/vidschofelix/vite-plugin-svelte-anywhere
• Owner: vidschofelix
• License: mit
• Created: 2025-01-27T21:09:04.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2025-08-12T00:28:07.000Z (10 months ago)
• Last Synced: 2025-10-14T20:33:21.079Z (8 months ago)
• Topics: svellte, vite-plugin, web-components
• Language: TypeScript
• Homepage: https://svelte-anywhere.dev
• Size: 2.97 MB
• Stars: 23
• Watchers: 1
• Forks: 2
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
![logo](docs/public/logo.png)

# Vite Plugin: Svelte Anywhere

[![NPM Version](https://img.shields.io/npm/v/vite-plugin-svelte-anywhere)](https://www.npmjs.com/package/vite-plugin-svelte-anywhere)

[![NPM Downloads](https://img.shields.io/npm/d18m/vite-plugin-svelte-anywhere)](https://img.shields.io/npm/d18m/vite-plugin-svelte-anywhere)

[![Build Status](https://github.com/vidschofelix/vite-plugin-svelte-anywhere/actions/workflows/release.yml/badge.svg)](https://github.com/vidschofelix/vite-plugin-svelte-anywhere/actions)

[![License](https://img.shields.io/github/license/vidschofelix/vite-plugin-svelte-anywhere)](https://github.com/vidschofelix/vite-plugin-svelte-anywhere/blob/main/LICENSE)

**Use Svelte components anywhere HTML is accepted.**

This Vite plugin lets you define **custom elements** right inside your Svelte components—just add an annotation, and you're ready to embed them in any environment, from static HTML to legacy backends or CMS platforms.

No boilerplate. No runtime shenanigans. Just Svelte, anywhere.

---

### Features

- 🧩 **Custom Elements from Svelte** — Turn any Svelte component into a reusable HTML element with a single comment.

- 🛠 **Zero Boilerplate** — No manual registration or wrapper code.

- 🔁 **Dev + Prod Ready** — Works with Vite HMR dev server and production builds

- 🌓 **Shadow DOM Control** — Opt-in or out with simple config.

- ⚡ **Lazy/Eager/Custom Templates** — Choose how your components are loaded.

---

### Links

- 📚 [Documentation](https://svelte-anywhere.dev)

- ✨ [Quickstart Guide](https://svelte-anywhere.dev/guide/quickstart)

- 🎮 [Live Demo](https://svelte-anywhere.dev/demo)

---

### Quick Example

```svelte

  let { count = 0 } = $props();

 count++}>

  Clicked {count} times

```

Now just use it anywhere:

```html

```