Editor Commands

The editor is mostly user-driven, but a few commands let your host UI take over: a Save button, a Publish button, "Open project X", "Start a new project", and the session refresh hook.

With the SDK

JavaScript

const editor = Moshpit.editor('#moshpit-editor', {
  publicKey: 'mpk_...',
  sessionEndpoint: '/api/moshpit/editor-session',
});
 
editor.save();
editor.publish();
editor.openProject('65f1a2b3c4d5e6f7a8b9c0d1');
editor.createProject();

Command reference

Command	SDK signature	What it does
`save`	`editor.save()`	Save the current scene. Fires `saved` on completion.
`publish`	`editor.publish()`	Publish the current scene. Fires `published` with `splatId`+`visibility`.
`openProject`	`editor.openProject(splatId)`	Load a different splat into the editor. Fires `projectLoaded`.
`createProject`	`editor.createProject()`	Discard current state and start a new blank scene. Fires `projectCreated`.
`updateSession`	(via postMessage; see below)	Replace the active session token without reloading.

`save()`

Triggers the same code path as the editor's own Save button. The saved event fires when the operation completes. If this is a brand-new scene, the event payload contains the new splatId:

JavaScript

editor.on('saved', ({ splatId }) => {
  if (splatId) {
    // First save — persist this on your side
  }
});
editor.save();

`publish()`

Publishes the current scene. The published event fires with the splat's ID and resolved visibility ('public' or 'private'):

JavaScript

editor.on('published', ({ splatId, visibility }) => {
  console.log(`${splatId} is now ${visibility}`);
});
editor.publish();

If the user has unsaved changes, the editor saves first and then publishes.

`openProject(splatId)`

Loads an existing splat. The current editor state is replaced, so warn the user if there are unsaved changes:

JavaScript

let dirty = false;
editor.on('dirtyChanged', (p) => (dirty = p.dirty));
 
function open(id) {
  if (dirty && !confirm('Discard unsaved changes?')) return;
  editor.openProject(id);
}

The projectLoaded event fires with { splatId } when the load completes.

`createProject()`

Discards the current scene and opens a blank canvas. Same dirty-state warning applies. The projectCreated event fires when the editor is ready for input.

Without the SDK

Send commands as postMessage envelopes with target: 'editor':

JavaScript

const iframe = document.getElementById('moshpit-editor');
 
iframe.contentWindow.postMessage(
  { source: 'moshpit-sdk', type: 'command', target: 'editor', command: 'save' },
  'https://moshpit.studio'
);
 
iframe.contentWindow.postMessage(
  {
    source: 'moshpit-sdk',
    type: 'command',
    target: 'editor',
    command: 'openProject',
    value: { splatId: '65f1a2b3c4d5e6f7a8b9c0d1' },
  },
  'https://moshpit.studio'
);
 
iframe.contentWindow.postMessage(
  {
    source: 'moshpit-sdk',
    type: 'command',
    target: 'editor',
    command: 'updateSession',
    value: { sessionToken: 'NEW_TOKEN', expiresAt: '2026-05-08T13:30:00Z' },
  },
  'https://moshpit.studio'
);

Always use the explicit Moshpit origin — never '*'. Full message envelope details are at PostMessage Protocol.

What's next

Editor Events — what comes back from the iframe.
Editor → SDK — full mount example with command handlers.

Next.js Integration

Events