Download and export

export() returns bytes and a sha256; download() saves a file named <source>-<hash8>.<ext>.

const result = await editor.export({ format: 'image/jpeg', quality: 0.9 });
await editor.download({ output: { format: 'image/png' }, embedEditLog: true });

• Below the client limit (16 megapixels by default) the browser renders and downloads locally.
• Above it, export() and download() fail with NOT_RESIDENT, and the Export and Download buttons are disabled. Render the original on your server with the edit log from getEditLog(). See Working copy and Render on your server.
• embedEditLog: true stores the log inside the PNG, JPEG or WebP so it can be reopened later. See Resume editing.
• The file keeps the ICC profile of the original and none of its other metadata. See Metadata.

On iOS Safari the download falls back to the share sheet.

The two buttons

Download renders and saves a file. It is shown by default; show-download="never" removes it for hosts that only consume the result through sealpixel:process, and download-label replaces the localized text:

<sealpixel-editor download-label="Save avatar"></sealpixel-editor>
<sealpixel-editor show-download="never"></sealpixel-editor>

The wrappers expose the same as showDownload and downloadLabel props (React, Vue, Svelte) or attributes (Astro).

Undo, redo and the timeline are controlled by show-history: all (default), buttons for undo and redo without the timeline slider, or none, which also disables the ⌘Z / Ctrl+Z undo and redo shortcuts; the keys that move or remove a selected element on the stage stay on. The edit log itself keeps recording either way, so a host can still call undo() or timeTravel() programmatically.

<sealpixel-editor show-history="buttons"></sealpixel-editor>

Export renders and hands the result to your page through the sealpixel:process event (onProcess in React, @process in Vue, onprocess in Svelte) without saving anything. Because it does nothing visible on its own, the button appears only while a listener is attached. Set show-export="always" or "never" to override:

<sealpixel-editor show-export="always"></sealpixel-editor>

editor.addEventListener('sealpixel:process', (e) => {
  const { bytes, mimeType, width, height, hash } = e.detail;
  upload(new Blob([bytes], { type: mimeType }), hash);
});

After either action a toast over the stage shows format, dimensions, file size and the first twelve characters of the sha256, and the same text is announced to screen readers. Style it with sealpixel-editor::part(toast).