Bundles, not a REPL

WHY

The Svelte Playground is for learning and experimenting. svelte-edge is for giving agents and apps a way to turn Svelte source into URLs they can use immediately.

The useful primitive

Svelte source
  → Cloudflare Worker compiler
  → client.js + server.js + style.css + preview.html + manifest.json
  → share, embed, cache, or hand to an agent

Why this matters for agents

A small browser model like window.ai can write Svelte on demand, call /bundles, and return an inline UI instead of a wall of text.

Need a calculator? The agent generates a live calculator.
Need a review screen? The agent generates checkboxes and a submit button.
Need to explain data? The agent generates a tiny dashboard.

Minimal agent flow

const source = await window.ai.prompt(
  "Write a Svelte component for a pricing calculator. Return only .svelte source."
);

const bundle = await fetch("https://svelte-edge.coy.workers.dev/bundles", {
  method: "POST",
  headers: { "content-type": "text/plain" },
  body: source
}).then(r => r.json());

chat.render({
  type: "iframe",
  src: bundle.bundles.preview
});

Two-way generated UI

The next step is a convention for agent-generated components to send structured results back to the host app:

<script>
  let region = 'wnam';
  let plan = 'paid';

  function submit() {
    parent.postMessage({
      type: 'svelte-edge:submit',
      value: { region, plan }
    }, '*');
  }
</script>

<button onclick={submit}>Use these settings</button>

What makes this different

The output is not tied to a playground session. It is an bundle graph with stable names and a manifest. That makes it easier to embed in chat, docs, dashboards, CMS previews, or future Dynamic Worker deploys.