Getting started

Install the drop-in element, or pick a framework binding.

pnpm

pnpm add @sealpixel/element

npm

npm install @sealpixel/element

<script type="module">
  import '@sealpixel/element';
</script>
<sealpixel-editor id="editor" theme="auto"></sealpixel-editor>
<script type="module">
  const editor = document.getElementById('editor');
  editor.src = fileFromInput; // File, Blob, Uint8Array or a URL
  editor.addEventListener('sealpixel:change', (e) => save(e.detail)); // { log, index }
  editor.addEventListener('sealpixel:process', (e) => console.log(e.detail.hash));
</script>

Run it on StackBlitz

Each starter is a complete project in the repository under examples/starters/. They open in the browser with nothing installed.

• Web Component
• React
• Vue 3
• Svelte 5
• Astro
• Node server
• Configuration: one editor, three configurations, see Configuration

Every browser starter downloads the same file name for the shared edit log, landscape-<hash>.png, and the Node starter prints the same hash: the parity claim in one click.

Your bundler must understand new Worker(new URL(..., import.meta.url), { type: 'module' }) and emit .wasm files as assets. Vite, webpack 5, Parcel and esbuild with the worker plugin do. See Frameworks for React, Vue, Svelte and Astro.

Headless

import { createEditorSession } from '@sealpixel/core';
import { defaultPlugins } from '@sealpixel/plugins';

const session = createEditorSession({ plugins: defaultPlugins });
await session.load(file);
session.dispatch({ type: 'finetune.set', id: crypto.randomUUID(), params: { brightness: 0.2 } });
const { bytes, hash } = await session.export({ output: { format: 'image/jpeg', quality: 0.9 } });

Everything the UI does goes through this API. session.getEditLog() returns the JSON you persist; session.load(file, { editLog }) resumes it.