Install the SDK · Moshpit Docs

Getting Started

Install the SDK

The Moshpit embed SDK is a small browser library that wraps the iframe with a tidy command and event API. You can load it two ways.

Option 1: Script tag

The fastest path. Drop one tag into your HTML and a Moshpit global appears on window:

HTML

<script src="https://moshpit.studio/moshpit-embed.js"></script>
<script>
  Moshpit.viewer('#moshpit-viewer', {
    publicKey: 'mpk_...',
    sessionEndpoint: '/api/moshpit/viewer-session',
    splatId: 'YOUR_SPLAT_ID',
  });
</script>

The script is served from Moshpit's CDN, never expires (filename-versioned cache busts on release), and is what we recommend for static sites, blog posts, marketing pages, and CMSes.

The global exposes:

TypeScript

window.Moshpit.viewer(container, options); // alias for createViewerEmbed
window.Moshpit.editor(container, options); // alias for createEditorEmbed (all plans)
window.Moshpit.embed(container, options); // alias for viewer (back-compat)
window.Moshpit.version; // string, e.g. '1.0.0'

Option 2: npm package

For Next.js, Vite, Remix, or any bundler-driven app, install the SDK as a package:

Bash

bun add @unrealtwin/embed-sdk
# or: npm install @unrealtwin/embed-sdk
# or: pnpm add @unrealtwin/embed-sdk

Then import:

TypeScript

import { createViewerEmbed, createEditorEmbed } from '@unrealtwin/embed-sdk';
 
const handle = createViewerEmbed('#moshpit-viewer', {
  publicKey: 'mpk_...',
  sessionEndpoint: '/api/moshpit/viewer-session',
  splatId: 'YOUR_SPLAT_ID',
});

The package is identical to the global — same options, same return value, same events.

React subpath

The package also exposes a React-specific subpath:

@unrealtwin/embed-sdk/react — MoshpitViewer and MoshpitEditor components with refs and onReady/onSaved/etc. props.

This walkthrough is out of scope for the current docs, but the API mirrors the vanilla SDK 1:1.

Picking between them

Use case	Recommendation
Static HTML, WordPress, marketing site	Script tag
Next.js, Vite, Remix, bundler-driven app	npm package
You want type-safe options	npm package (TypeScript types)
You can't add a new dependency	Script tag
You're inlining into a CMS field	Script tag

What's next

Viewer → With the SDK — concrete viewer example.
Editor → With the SDK — concrete editor example.
SDK Options — every field on ViewerEmbedOptions and EditorEmbedOptions.

Session Tokens

External Users