Svelte Anywhere Docs

Appearance

Getting Started with Svelte-Anywhere ​

Installation ​

First, install the plugin as a development dependency in your project:

sh
$ npm install vite-plugin-svelte-anywhere -D
sh
$ pnpm install vite-plugin-svelte-anywhere -D
sh
$ yarn add vite-plugin-svelte-anywhere -D

Configuration ​

1. Update the vite config ​

Add vite-plugin-svelte-anywhere to your Vite configuration.

IMPORTANT

Make sure svelteAnywhere is positioned above the svelte()-plugin.

ts
import svelteAnywhere from 'vite-plugin-svelte-anywhere'; 
import { svelte } from '@sveltejs/vite-plugin-svelte';

export default {
  plugins: [
    svelteAnywhere(), 
    svelte({
      compilerOptions: { 
        customElement: true, 
      }, 
    }),
  ],
  build: { 
    manifest: true, // Generate manifest.json for production //
    rollupOptions: { 
      input: './src/main.ts', // Override default .html entry //
    }, 
  }, 
};

2. Load Custom Elements in main.ts ​

Use Vite’s import.meta.glob to load your custom elements automatically.

ts
import.meta.glob('./generated/custom-element/*', { eager: true });

3. Annotate Your Svelte Components ​

svelte
<!-- @custom-element my-component -->
<script>
  let { message = 'Hello!' } = $props();
</script>

<div>{message}</div>

The annotation creates a custom element <my-component> that you can use anywhere.

4. Embed Custom Elements ​

html
<!DOCTYPE html>
<html>
<head>
   <script type='module' src='http://localhost:5173/@vite/client'></script> 
   <script type="module" src="http://localhost:5173/src/main.ts"></script>  
</head>
<body>
    <my-component message="Hello, World!"></my-component> 
</body>
</html>

Afterwards run npm run dev and visit your index.html.