In the browser

Integrations

The web SDK works in any framework. Each page here is a small app we install, build and run in Chrome every week, so the code works as written.

View as Markdown

The web SDK is one npm package: the core as WebAssembly, a renderer for the page, a React component, and a stylesheet. It works with any framework and any package manager. Each integration needs the same three things:

  1. The stylesheet: import @morphscreen/web/morphscreen.css once.
  2. The core, served as a file: morphscreen.wasm (or morphscreen-agent.wasm for connectAgent) from the package, at an address loadCore can fetch. How depends on your build tool, and each page shows it.
  3. The browser only: the core runs in the browser. On a framework that renders on the server, load it in a client component or after mount.

Frameworks

Reactthe <Answer> component, with Vite.Next.jsthe App Router, the page rendered on the server and the answer in a client component.Vue and Nuxta client-only component.Svelte and SvelteKitonMount, with the core imported as a URL.Angularthe core as an asset, after the view starts.Plain JavaScriptcreateAnswer with Vite and no framework.webpackthe core as an asset module.

Package managers

Every package manager works: npm, pnpm, Yarn (with node_modules or Plug'n'Play) and bun. We install with each of them under Vite every week.

On your server

Your server keeps the key and talks to MorphScreen: Node.js, Python, or HTML with no JavaScript for pages drawn on the server.

In these examples a saved answer stands in for your server's stream, so they run anywhere. In your app, the text comes from your server's route (Quick start).