Quickstart

Add a Moshpit Viewer to your website. Your server creates a session token, and the SDK uses it to load your published Scene.

Before you start, make sure you have:

• A Moshpit account with a published Scene. Create and publish one in the editor if needed.
• A web page where you can add a <script> tag.
• A server that can store your secret key and create embed sessions.

1. Create an integration

Open Integrations in your account settings and create an integration. Save both keys:

• The public key starts with mpk_. Use it in your browser code.
• The secret key starts with msk_. Copy it now, because Studio only shows it once. Store it on your server.

For detailed steps, see Create an Integration.

2. Add a backend session endpoint

Your server sends the secret key to Moshpit and returns a short-lived session token to the browser. Add this endpoint to your backend:

// POST /api/moshpit/viewer-session
export async function POST(request: Request) {
  const body = await request.json().catch(() => ({}));
  const upstream = await fetch(
    'https://moshpit.studio/api/editor/embed-sessions',
    {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        Authorization: `Bearer ${process.env.MOSHPIT_SECRET_KEY}`,
      },
      body: JSON.stringify({
        publicKey: process.env.MOSHPIT_PUBLIC_KEY,
        type: 'viewer',
        splatId: body.splatId,
      }),
    },
  );
 
  return new Response(await upstream.text(), {
    status: upstream.status,
    headers: { 'Content-Type': 'application/json' },
  });
}

Set MOSHPIT_PUBLIC_KEY and MOSHPIT_SECRET_KEY in your server environment.

3. Mount the viewer

Add the SDK and a container element to your page. Replace mpk_YOUR_PUBLIC_KEY and YOUR_SPLAT_ID with your public key and Scene ID:

<div id="moshpit-viewer" style="height: 600px"></div>
<script src="https://moshpit.studio/moshpit-embed.js"></script>
<script>
  const viewer = Moshpit.viewer('#moshpit-viewer', {
    publicKey: 'mpk_YOUR_PUBLIC_KEY',
    sessionEndpoint: '/api/moshpit/viewer-session',
    splatId: 'YOUR_SPLAT_ID',
  });
 
  viewer.on('ready', () => console.log('viewer ready'));
</script>

The SDK calls sessionEndpoint, receives a session token, and loads the Viewer in an iframe.

What's next

• Use the Viewer with Next.js.
• Embed with a plain iframe if you do not need the SDK.
• List Scene IDs through the REST API.
• Embed the Editor so users can save and publish Scenes inside your app on any plan.
• Set up external users to give each customer their own storage and Scene allocation on Enterprise.