Frameworks

Every binding wraps the same <sealpixel-editor> element. Props are the element's properties; editLog plus a change handler gives controlled mode, defaultEditLog uncontrolled mode.

ReactVueSvelteAstro

tsx

import { SealpixelEditor } from '@sealpixel/react';

export function Editor({ file }: { file: File }) {
  const [log, setLog] = useState();
  return <SealpixelEditor src={file} editLog={log} onChange={(e) => setLog(e.detail)} onProcess={(e) => save(e.detail)} />;
}

vue

<script setup>
import { SealpixelEditor } from '@sealpixel/vue';
const log = ref();
</script>
<template>
  <SealpixelEditor :src="file" v-model:editLog="log" @process="save" />
</template>

svelte

<script>
  import { SealpixelEditor } from '@sealpixel/svelte';
  let log = $state();
</script>
<SealpixelEditor {src} bind:editLog={log} onprocess={save} />

astro

---
import SealpixelEditor from '@sealpixel/astro/SealpixelEditor.astro';
---
<SealpixelEditor src="/photo.jpg" theme="auto" />

Astro projects run astro add @sealpixel/astro; the integration sets the Vite options the wasm and worker need and can inject /api/sealpixel/render with sealpixel({ renderRoute: true }) when an SSR adapter is present.

Headless helpers: useSealpixelSession (React), useSealpixel (Vue) and createSealpixelStore (Svelte) return a session and its state.

Frameworks ​

Frameworks