Your first edge widget

GET STARTED

Your first edge widget

Build a tiny Svelte component, compile it on a Worker, preview it in the browser, and copy the generated bundle URLs.

1. Start local dev

cd svelte-edge npm install npm run dev

Open the local URL Wrangler prints. The playground starts with a counter component.

2. Paste a component

Try this component. It has state, markup, and scoped CSS in one file:

<script>
  let count = 0;
</script>

<button onclick={() => count += 1}>
  count: {count}
</button>

<style>
  button {
    font: 700 16px system-ui;
    padding: 12px 18px;
    border: 0;
    border-radius: 12px;
    background: #ff5a1f;
    color: white;
  }
</style>

3. Click Run

The browser sends your Svelte source to POST /bundles. The Worker compiles both client and server output and returns a manifest.

• Preview mounts the client bundle in a sandboxed iframe.
• Bundle shows URLs for generated files.
• Trace shows the full JSON response.

4. Use the output

For an iframe embed, copy preview.html from the Bundle tab:

<iframe
  src="https://svelte-edge.coy.workers.dev/bundles/<hash>/preview.html"
  style="border:0;width:100%;height:240px"
></iframe>

For a module import, use client.js and Svelte's runtime mount API:

<div id="widget"></div>
<script type="importmap">
{
  "imports": {
    "svelte": "https://esm.sh/svelte@5.55.5",
    "svelte/": "https://esm.sh/svelte@5.55.5/"
  }
}
</script>
<script type="module">
  import Widget from "https://svelte-edge.coy.workers.dev/bundles/<hash>/client.js";
  import { mount } from "svelte";
  mount(Widget, { target: document.getElementById("widget") });
</script>