In the browser

Svelte and SvelteKit

Draw the answer in onMount, with the core imported as a URL, in SvelteKit 3 or any Svelte 5 app.

View as Markdown
Terminal
npm install @morphscreen/web
Terminal
pnpm add @morphscreen/web
Terminal
yarn add @morphscreen/web
Terminal
bun add @morphscreen/web

onMount runs in the browser only, so the core never loads on the server. Vite's ?url turns the package's morphscreen.wasm into an address it serves.

src/routes/+page.svelte
<script lang="ts">
  import { onMount } from "svelte";
  import { createAnswer, loadCore } from "@morphscreen/web";
  import "@morphscreen/web/morphscreen.css";
  import wasm from "@morphscreen/web/morphscreen.wasm?url";
  import { SAMPLE } from "../lib/sample";

  let el: HTMLElement;

  // onMount runs in the browser only, so the core never loads on the server.
  onMount(async () => {
    const core = await loadCore(wasm);
    const answer = createAnswer(el, { core });
    // Your server's stream goes here; this feeds a saved answer in pieces.
    for (let i = 0; i < SAMPLE.length; i += 24) {
      answer.push(SAMPLE.slice(i, i + 24));
      await new Promise((r) => setTimeout(r, 10));
    }
    answer.end();
    document.body.dataset.done = "yes";
  });
</script>

<div bind:this={el}></div>
vite.config.ts
import adapter from "@sveltejs/adapter-static";
import { sveltekit } from "@sveltejs/kit/vite";
import { defineConfig } from "vite";

export default defineConfig({ plugins: [sveltekit({ adapter: adapter() })] });