Export

Register the export lifecycle hook, and the platform will invoke your generator to retrieve the resulting file whenever the user clicks "Export" or "Open in Studio." The return value is always { filename, blob }, and any file format is supported (images, SVG, 3D models, PDF, etc.).

Placing the Export Button

You place the export button yourself, inside your app—add an element with the data-atomm-export-button attribute anywhere on the page, and the SDK will render it in place as a platform-controlled Export dropdown (Download / Open in Studio + credit indicator). Clicks are always routed through the platform:

<div data-atomm-export-button></div>

• Position and outer layout are entirely up to you (e.g., position: fixed to pin it to a corner); you can place multiple instances on one page, each hydrating independently.
• The button renders inside a Shadow DOM for style isolation; theming is done exclusively through the documented --atomm-export-* CSS variables (set them on the element itself or any ancestor—they're automatically inherited by the button):

[data-atomm-export-button] {
  --atomm-export-bg: #d32f2f; /* Button background color */
  --atomm-export-radius: 0; /* Border radius */
  --atomm-export-width: 200px; /* Width: px, or 100% to fill the container */
  --atomm-export-height: 40px; /* Height */
}

Only the --atomm-export-* variables listed above are supported customization points; internal button class names may change at any time, so don't rely on them.

Free-Use Count / Credit Indicator on the Button

The button automatically displays the current billing status (pushed by the platform—no action needed on your part):

In local debugging (?local=), clicking export never actually deducts credits; refreshing the page resets it.

Registering the export Hook

atomm.lifecycle.on('export', async () => {
  // No arguments are passed when triggered; the handler reads the current generation result itself and produces a Blob
  const blob = await exportCurrentResultAsBlob()
  if (!blob) {
    throw new Error('请先生成作品后再下载')
  }

  return {
    filename: 'my-generator.glb', // Must include an extension; this determines the downloaded filename and the asset type used by Open in Studio
    blob, // A Blob of any format; MIME type comes from blob.type
  }
})

Return Value Fields

Multi-File Export (Optional)

The handler can also return an array of files, and the platform will bundle them into a single zip download:

atomm.lifecycle.on('export', async () => [
  { filename: 'model.glb', blob: glbBlob },
  { filename: 'preview.png', blob: pngBlob },
])

Single files still use { filename, blob }; use an array for multiple files. If any item in the returned array is invalid (not a Blob, filename missing an extension, etc.), the entire result is considered invalid.

Getting a Blob

Almost any export source can be converted to a Blob in a single line: