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 button (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 ({ intent }) => {
  // intent tells you whether the user clicked Download or Open in Studio; 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
  }
})

The intent Argument: Telling Download from Open in Studio

Download and Open in Studio share this one hook. intent tells you which dropdown item the user picked, so you can return different output per action. Each item triggers your hook once; return the same output for both if the distinction does not apply.

atomm.lifecycle.on('export', async ({ intent }) => {
  // Open in Studio: the file will be edited further in Studio, so send one vector file
  if (intent === 'openInStudio') {
    return { filename: 'design.svg', blob: await buildSvg() }
  }

  // Download: send every file; the platform bundles them into a single zip
  return [
    { filename: 'cut.svg', blob: cutBlob },
    { filename: 'engrave.svg', blob: engraveBlob },
    { filename: 'score.svg', blob: scoreBlob },
    { filename: 'readme.txt', blob: readmeBlob },
  ]
})

If the distinction doesn't apply to you, return the same thing for both; ignoring intent entirely (async () => { ... }) keeps working.

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: