Bildeditor-SDK · Rust-Core, eine Binary für alles

Klein bearbeiten. Groß rendern.
Identisch.

Deine Nutzer bearbeiten eine Arbeitskopie im Browser. Dein Backend rendert dasselbe Edit-Log auf dem 80-Megapixel-Original, mit demselben Core wie der Browser. Gleiches Original, gleiches Log, gleiche Bytes. Per Hash geprüft.

Demo ausprobieren Zu den Docs

Alles hier unten ist CSS. Kopieren, in deine App einfügen, fertig.

Preset

AkzentfarbeRadius 12pxModusSprache

<sealpixel-editor theme="dark" locale="de">

Beweise statt Versprechen

Paritäts-Demo ansehen CI-Workflow ansehen

139
Referenz-Renderings
Edit-Logs und Pläne mit gepinnten Hashes
136
CLI-Paritätstests
natives Rust und Node liefern dieselben Bytes
130
Browser-Testläufe
in 3 Engines, bei jedem Commit
397 KB
Core, komprimiert
1,3 MB unkomprimiert, eine Binary für jede Runtime

Läuft identisch auf Chrome, Safari, Firefox, Node.js, Deno, Bun, AWS Lambda

Der Browser bearbeitet eine Arbeitskopie. Dein Backend rendert das Original.

Ab 16 Megapixeln behält der Editor standardmäßig nur eine Arbeitskopie mit höchstens 2048 px und zeigt jede Änderung darauf. Dein Backend nimmt das Edit-Log und rendert mit @sealpixel/render die volle Auflösung, mit demselben Core wie der Browser.

Im Browser

2048 × 1537

3,15-MP-Arbeitskopie. Der Browser dekodiert das Original einmal und behält nur sie.

Über die Leitung

561 Bytes

Kein Bild. Fünf Operationen in Koordinaten, die von der Auflösung unabhängig sind.

In deinem Backend

10328 × 7752

80,1 MP aus dem Original, in etwa 2.178 MB: 24 Byte pro Pixel plus 256 MB. Ohne Browser-Runtime.

Das komplette Edit-Log

561 Bytes serialisiert

{
  "version": 1,
  "source": {
    "id": "dsc-4821", "width": 10328, "height": 7752,
    "hash": "9f2a7c4e18b3d05a6e1f8c2b47d930ae5c86f1b2093d4e7a8c5b1f6d2e0a3947"
  },
  "ops": [
    { "type": "crop.set",     "id": "c1", "rect": { "x": 0.08, "y": 0.12, "width": 0.8, "height": 0.72 } },
    { "type": "finetune.set", "id": "f1", "params": { "contrast": 0.18, "saturation": 0.22 } },
    { "type": "redact.add",   "id": "r1", "region": { "kind": "rect", "rect": { "x": 0.42, "y": 0.31, "width": 0.07, "height": 0.09 } }, "mode": "pixelate", "amount": 64 },
    { "type": "filter.set",   "id": "p1", "preset": "warm", "strength": 0.4 },
    { "type": "resize.set",   "id": "s1", "width": 3000 }
  ]
}

53.476 : 1

Ein 30-MB-Original gegen die paar Bytes, die beschreiben, was damit passieren soll. Dieses Verhältnis ist die Architektur.

Dein Backend rendert, was der Browser gezeigt hat

@sealpixel/render ist ein Baustein, kein Server. Deine Route, Function oder dein Job übergibt die Bytes des Originals und das Edit-Log. Der Renderer prüft beides, rendert mit derselben WebAssembly-Binary wie der Browser und liefert Bytes, Hash, Größe und Timings. Routing, Speicher und Retries bleiben in deinem Code.

Limits vor dem Decode: Dateigröße, Pixelzahl aus dem Header, Log-Größe
Das Log gehört zu seinem Original: Ein anderer SHA-256 oder eine andere Größe wird abgelehnt
Gleiche Plugins, gleiche Optionen: Ein Log, das die Regeln des Editors bricht, wird abgelehnt
Kein Routing, kein CORS, kein Speicher: Du übergibst jedes Byte, auch die Fonts

In der Demo ausprobieren →Zum Render-Guide →

import { createRenderer, estimateMemoryMB } from '@sealpixel/render';
import { defaultPlugins } from '@sealpixel/plugins';

// Once per process, in your own route, function or job.
const renderer = createRenderer({
  plugins: defaultPlugins,         // the list the editor registers
  limits: { maxMegapixels: 100 },  // default 80; this photo has 80.1
});

const { log, index } = saved;      // from the editor's getEditLog()
const result = await renderer.render({
  original,                        // Uint8Array, byte for byte
  editLog: log,
  upTo: index,
  output: { format: 'image/jpeg', quality: 0.92 },
});
// { bytes, stream(), hash, width, height, mimeType, timings }
// result.hash equals a browser export of the same original and log

estimateMemoryMB(10328, 7752);     // 2178

Eine Komponente. Drei Produkte.

Dasselbe Element mit anderen Plugins, Themes und Sprachen. Kein Fork, kein Build-Step: nur Attribute und CSS.

Profilbild

Ein Sign-up-Flow: rund zuschneiden, aufhellen, fertig. Zwei Tools, helles Theme, kein Export-Button; exportiert wird nur der Kreis.

<link rel="stylesheet" href="@sealpixel/ui/themes/minimal.css">

<sealpixel-editor theme="light" locale="de" show-export="never" show-download="never" active-tool="crop"
  style="--sealpixel-panel-size: 120px; --sealpixel-toolbar-size: 64px"
  plugin-options='{"crop":{"shape":"circle","reset":false,"aspects":[{"label":"crop.aspect.square","value":1}],"defaultAspect":1,"enforce":true,"rotation":false,"flip":false},"finetune":{"controls":["brightness","contrast"]}}'></sealpixel-editor>

<script type="module">
  import { defaultPlugins } from '@sealpixel/element';
  const editor = document.querySelector('sealpixel-editor');
  editor.plugins = defaultPlugins.filter((p) => ['crop', 'finetune', 'fill'].includes(p.id));
</script>

Plugin-Optionen (Änderungen gelten sofort)

Marketing-Studio

Ein Content-Team baut Kampagnenbilder: alle Tools, dunkles Graphit, runde Buttons.

<sealpixel-editor theme="dark" locale="en" active-tool="filter" show-download="never"
  plugin-options='{"filter":{"presets":["grayscale","sepia","vintage","warm",{"name":"brand","label":"Brand","matrix":[[0.8,0.1,0.1,0,0.02],[0.05,0.85,0.1,0,0],[0.1,0.1,0.9,0,0.05],[0,0,0,1,0]]}],"thumbnails":true}}'></sealpixel-editor>

<style>
  sealpixel-editor::part(tool) { border-radius: 999px; }
</style>

<script type="module">
  import '@sealpixel/element'; // registers the element and the bundled worker
  import { allPlugins } from '@sealpixel/plugins';

  const editor = document.querySelector('sealpixel-editor');
  editor.plugins = allPlugins; // sticker and watermark ship, but are not in the default set

  editor.addEventListener('sealpixel:process', (e) => {
    upload(e.detail.bytes, e.detail.hash);
  });
</script>

Plugin-Optionen (Änderungen gelten sofort)

Compliance-Desk

Ein Compliance-Team verpixelt personenbezogene Daten in gescannten Formularen. Schwärzen, Zeichnen, Wasserzeichen, High-Contrast-Theme, deutsche Oberfläche.

<link rel="stylesheet" href="@sealpixel/ui/themes/high-contrast.css">

<sealpixel-editor theme="dark" locale="de" active-tool="redact" show-export="never" show-download="never"
  plugin-options='{"redact":{"modes":["pixelate"],"defaultMode":"pixelate","defaultAmount":24},"annotate":{"shapes":["rect","arrow","text"],"palette":["#ffff00","#ff3b30","#ffffff"],"enforce":true,"defaultStroke":{"color":"#ffff00","width":6}},"watermark":{"lock":true,"defaults":{"source":{"kind":"text","text":"VERTRAULICH","font":"font.roboto","color":[1,1,0,1]},"anchor":"tc","opacity":0.35,"scale":0.35}}}'></sealpixel-editor>

<style>
  sealpixel-editor::part(dimensions) { display: none; }
</style>

<script type="module">
  import { defaultPlugins } from '@sealpixel/element';
  const editor = document.querySelector('sealpixel-editor');
  editor.plugins = defaultPlugins.filter((p) => ['redact', 'annotate', 'watermark', 'fill'].includes(p.id));
</script>

Plugin-Optionen (Änderungen gelten sofort)

Mobile

Auf dem Handy genauso gut wie am Desktop.

Dieselbe Komponente passt sich auf dem Smartphone von selbst an. Kein zweites UI, kein Mobile-Flag. Probier es direkt im Frame aus.

Eine Komponente, zwei Layouts
Unter 768 px Containerbreite rutscht die Toolbar nach unten, das Tool-Panel sitzt direkt darüber. Entscheidend ist der Container, nicht der Viewport. Eine schmale Sidebar bekommt also auch das Handy-Layout.
Touch first
Pinch zum Zoomen, Ziehen zum Verschieben, ein Finger für Crop-Handles, Schwärzungen und Zeichnungen. Am Desktop machen Mausrad und Trackpad dasselbe.
Einmal dekodieren, dann Ruhe
Das Handy dekodiert das Bild einmal und arbeitet aus dem Speicher. Kein erneuter Upload zwischen den Tools, kein Roundtrip für eine Vorschau. Das merkt man am Akku.
Notch und Home-Indicator
Safe-Area-Insets werden respektiert. show-history="buttons" blendet die Timeline aus, show-export="never" den Export-Button. So passt das Wesentliche auf einen kleinen Screen.

Live-Editor im Handy-Frame. Ziehen, pinchen, tippen.

Das Edit-Log ist das Bild

Ein Log, ein Core

Jeder Crop, jeder Filter, jede Zeichnung ist eine Operation in einem JSON-Log. Ein Rust-Core, kompiliert zu WebAssembly, führt es aus: im Web Worker, auf Node, Deno, Bun oder AWS Lambda. Gleiche Bytes rein, gleiche Bytes raus.

Byte-identisch, per Hash geprüft

Gleiche Quelle, gleiches Log, egal wo gerendert: Der SHA-256 stimmt. Im Browser, auf Node, Deno, Bun oder in einer Lambda.

Weitermachen aus JSON

Das Original einmal speichern, das Log daneben. Jeden Zustand auf jedem Gerät wieder öffnen, ohne Qualitätsverlust. Das Log kann im exportierten PNG, JPEG oder WebP mitreisen.

Alle Tools, die deine Nutzer erwarten

Elf Plugins sind dabei, zehn davon im Standard-Set. Jedes ist ein eigenes Paket, das du weglassen, ersetzen oder erweitern kannst.

Zuschneiden
Frei drehen, spiegeln, Seitenverhältnis-Presets. Die Handles bleiben auf jedem Screen 7 px groß.
@sealpixel/plugin-crop
Feinabstimmung
Helligkeit, Kontrast, Sättigung, Belichtung, Gamma, Klarheit und Vignette.
@sealpixel/plugin-finetune
Filter
Graustufen, Sepia, Vintage, Kalt, Warm und jede 4×5-Farbmatrix, mit Stärke.
@sealpixel/plugin-filter
Schwärzen
Rechtecke und Freiformen verpixeln oder weichzeichnen, danach per Handles skalieren oder drehen. Die Pixelzellen rasten am Raster des Originals ein, damit Arbeitskopie und Original übereinstimmen.
@sealpixel/plugin-redact
Zeichnen
Rechtecke, Ellipsen, Linien, Pfeile, Freihand und Text, alles nachträglich skalier- und drehbar. Schriften sind gehashte Assets, die Glyphen sind überall identisch.
@sealpixel/plugin-annotate
Sticker
Logos und Bild-Assets platzieren, drehen, spiegeln, Deckkraft einstellen.
@sealpixel/plugin-sticker
Rahmen
Vollrahmen, Innenrahmen und Polaroid.
@sealpixel/plugin-frame
Wasserzeichen
Bild oder Text, an einer Ecke verankert oder gekachelt. Im Backend-Render exakt gleich.
@sealpixel/plugin-watermark
Größe
Contain, Cover und Fill auf eine Zielgröße. Lanczos3 beim Verkleinern, Catmull-Rom beim Vergrößern.
@sealpixel/plugin-resize
Füllung
Hintergrundfarbe für Flächen, die beim Drehen oder Zuschneiden frei werden.
@sealpixel/plugin-fill
Assistent
Ein Detektor schlägt Bereiche auf der Arbeitskopie vor, ein Mensch bestätigt, ins Log kommen ganz normale Schwärzungen. Dein eigenes Modell, geladen bei Bedarf. Nichts verlässt den Browser. Opt-in.
@sealpixel/plugin-assist

Eine Komponente für jeden Stack

Unten eine Web Component, oben dünne, typisierte Wrapper. Controlled und uncontrolled Edit-Logs überall.

Web Component

@sealpixel/element

In StackBlitz öffnen

React

@sealpixel/react

In StackBlitz öffnen

Vue 3

@sealpixel/vue

In StackBlitz öffnen

Svelte 5

@sealpixel/svelte

In StackBlitz öffnen

Astro

@sealpixel/astro

In StackBlitz öffnen

Auf deinem Server rendern

Ein Baustein, kein Server: Du rufst ihn in deiner eigenen Route, Function oder deinem Job auf. Node 24+, Deno, Bun und AWS Lambda.

In StackBlitz öffnen

import { readFile } from 'node:fs/promises';
import { DEFAULT_FONT, defaultPlugins } from '@sealpixel/plugins';
import { createRenderer } from '@sealpixel/render';

// The renderer reads no file. You pass every byte, the font too.
const font = new Uint8Array(await readFile(new URL(DEFAULT_FONT.url)));

// Once per process. Your route, function or job calls render() per request.
const renderer = createRenderer({
  plugins: defaultPlugins,
  assets: [{ id: DEFAULT_FONT.id, bytes: font }],
});

const { bytes, hash } = await renderer.render({ original, editLog: log, upTo: index });

Für Entwickler gebaut, und so dokumentiert

Headless Core, typisiertes Edit-Log, ein Plugin-SDK mit Testing-Kit und Docs mit Live-Editoren auf jeder Seite.

Guide

Installation, Frameworks, Theming, i18n, Export und Download.

Konzepte

Edit-Log, Koordinatenräume, große Bilder, Determinismus und seine Grenzen.

Plugin-SDK

Ein Plugin mit JS- oder Rust-Kernel schreiben, Parität testen, veröffentlichen.

API-Referenz

Aus dem Quellcode generiert: Core, Render, Plugin-SDK, Operationen.

Dasselbe Edit-Log in deinem Framework

<script type="module">
  import '@sealpixel/element';
  const editor = document.querySelector('sealpixel-editor');
  editor.src = '/photo.jpg';
  editor.addEventListener('sealpixel:process', (e) => {
    const { bytes, hash } = e.detail; // the same hash @sealpixel/render produces
  });
</script>

<sealpixel-editor theme="auto" locale="en"></sealpixel-editor>

In StackBlitz öffnen

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

export function Avatar() {
  const [editLog, setEditLog] = useState({ version: 1, source: { id: 'photo', width: 1600, height: 1067 }, plugins: {}, ops: [] });
  return (
    <SealpixelEditor
      src="/photo.jpg"
      editLog={editLog}
      onEditLogChange={(e) => setEditLog(e.detail.log)}
      onProcess={(e) => upload(e.detail.bytes, e.detail.hash)}
    />
  );
}

In StackBlitz öffnen

<script setup lang="ts">
import { SealpixelEditor } from '@sealpixel/vue';
import { ref } from 'vue';
const editLog = ref({ version: 1, source: { id: 'photo', width: 1600, height: 1067 }, plugins: {}, ops: [] });
</script>

<template>
  <SealpixelEditor src="/photo.jpg" v-model:editLog="editLog" @process="upload" />
</template>

In StackBlitz öffnen

<script lang="ts">
  import { SealpixelEditor } from '@sealpixel/svelte';
  let editLog = $state({ version: 1, source: { id: 'photo', width: 1600, height: 1067 }, plugins: {}, ops: [] });
</script>

<SealpixelEditor src="/photo.jpg" bind:editLog onprocess={upload} />

In StackBlitz öffnen

---
import SealpixelEditor from '@sealpixel/astro/SealpixelEditor.astro';
const editLog = { version: 1, source: { id: 'photo', width: 1600, height: 1067 }, plugins: {}, ops: [] };
---
<SealpixelEditor src="/photo.jpg" theme="auto" editLog={editLog} />

In StackBlitz öffnen

Sieht aus wie deine App

CSS Custom Properties für jede Farbe, jeden Radius, jede Größe. ::part() erreicht Buttons, Nav und Stage. Fünf Themes und sechs Sprachen sind dabei.

25
Design-Tokens
18
Shadow-Parts
5
Themes
6
Sprachen

@import '@sealpixel/ui/themes/nocturne.css';

sealpixel-editor {
  --sealpixel-color-accent: #b48cff;
  --sealpixel-radius: 16px;
  --sealpixel-toolbar-size: 72px;
}

sealpixel-editor::part(export) { display: none; }
sealpixel-editor::part(tool) { border-radius: 999px; }

Customizer öffnen

Erweitern statt forken

Ein Plugin ist ein npm-Paket: Operationen mit Zod-Schemas, ein Reducer, ein Kernel in JavaScript oder in Rust als eigenes WebAssembly-Modul, optional ein Tool mit Panel und Gizmo. Es läuft auf Client und Server, ohne dass der Core neu gebaut wird.

Plugin anlegen

npm create @sealpixel/plugin acme-spotlight -- --kernel wasm-rust
cd acme-spotlight && npm test   # parity: Node vs Chromium, WebKit, Firefox

Paritäts- und Fuzz-Testing-Kit inklusive ·Plugin-SDK

Im Vergleich

Angaben von den öffentlichen Seiten der Anbieter, Stand September 2026.

	Sealpixel	Pintura	IMG.LY CE.SDK
Quellcode	Source available: lesen, ändern, weitergeben	Closed Source, private npm-Registry	Closed Source, Escrow für Enterprise
Server-Rendering	@sealpixel/render auf Node, Deno, Bun, Lambda, ohne Browser	Ja, mit Browser-Runtime	Node.js
Byte-identische Ausgabe auf Client und Server	Ja, per Hash geprüft	Nein	Gleiche Engine, aber nicht als Garantie veröffentlicht
Serialisierbarer Edit-State	Edit-Log, typisiert und validiert	imageState-Objekt	Scene-Datei
Plugin-SDK für Dritte	JS- und Rust-Kernel	Festes Set	Plugin-API
React, Vue, Svelte, Astro	Ja, plus Web Component	Ja, plus Angular, jQuery	Ja, plus native Mobile-SDKs
Preis unter 1 Mio. EUR Umsatz	Kostenlos	169 € pro Jahr, ein Produkt	Nur auf Anfrage
Preis pro Entwickler und Jahr	999 €	749 €	Nur auf Anfrage
Geld-zurück-Frist	30 Tage	60 Tage	30 Tage Trial

Kostenlos für Menschen. Fair für Unternehmen.

Eine Regel: Unter einer Million Jahresumsatz zahlst du nichts. Darüber zahlst du pro Entwickler, der am Code arbeitet.

Klein

Kostenlos

Für Einzelpersonen und Unternehmen unter 1.000.000 EUR Jahresumsatz. Produktiveinsatz und kommerzielle Produkte inklusive.

Alle Plugins, Wrapper und das Render-Paket
Jedes Release
Community-Support auf GitHub

Loslegen

Unternehmen

999 €

pro Developer-Seat und Jahr, zzgl. Steuern

Einstiegsstufe, 1 bis 4 Seats. Ab 5 und ab 10 wird jeder Seat günstiger.

Ab 1.000.000 EUR Jahresumsatz. Seats sind übertragbar und gelten für jedes Produkt, jede Domain und jede Umgebung.

Zwölf Monate Updates und E-Mail-Support
Jedes erhaltene Release bleibt für immer deins
30 Tage Geld-zurück-Garantie
Verkauf und Rechnung über Paddle, Steuern inklusive, wo sie anfallen

Entwicklerplätze

Kauf auf die Firma? Firmenname und USt-IdNr. tragen Sie im Checkout unter „Add VAT number“ ein, damit sie auf der Rechnung stehen.

Enterprise

Auf Anfrage

Ab 25 Seats, oder wenn der Einkauf mehr braucht als eine Rechnung.

Source-Code-Escrow
Individuelle Konditionen und SLA
Purchase Orders, Rechnung und Überweisung

Kontakt aufnehmen

Staffelpreise

Die Stufe richtet sich nach der Gesamtzahl deiner Seats, und ihr Preis gilt für jeden davon. Nachgekaufte Seats werden anteilig bis zu deinem bestehenden Verlängerungsdatum abgerechnet. Erreicht die Gesamtzahl eine günstigere Stufe, gilt sie ab dem Tag des Nachkaufs für alle Seats: anteilig für die Restlaufzeit, voll ab der nächsten Verlängerung. Bereits abgelaufene Zeit wird nicht neu berechnet.

Seats	Pro Seat und Jahr
1 bis 4	999 €
5 bis 9	899 €
10 bis 24	799 €
ab 25	Kontakt aufnehmen

Business Source License 1.1, nach vier Jahren Apache 2.0. Kein Lizenz-Check zur Laufzeit: Die Software telefoniert nie nach Hause. Lizenz lesen

Unsere Bestellabwicklung erfolgt über unseren Online-Reseller Paddle.com. Paddle ist Merchant of Record für alle unsere Bestellungen und wickelt Umsatzsteuer, GST und Sales Tax ab. Lizenzgeber der Software bleiben wir. Buyer Terms von Paddle

Fragen

Wer nutzt Sealpixel kostenlos?

Alle unter 1.000.000 EUR Jahresumsatz (brutto): Einzelpersonen und Unternehmen unterhalb dieser Schwelle. Produktiveinsatz und kommerzielle Produkte sind eingeschlossen. Der Umsatz zählt für die gesamte Unternehmensgruppe, die Tochter eines Konzerns ist also nicht kostenlos dabei. Bei Kundenarbeit entscheidet der Umsatz des Kunden: Ein Freelancer, der für ein kleines Startup baut, zahlt nichts, derselbe Freelancer für einen großen Kunden ist über dessen Seats abgedeckt.

Ich bin eine Agentur. Was zahle ich?

Einen Seat pro Entwickler, der an Codebasen mit Sealpixel arbeitet, egal für wie viele Kunden oder Produkte. Der Seat deines Entwicklers deckt seine gesamte Kundenarbeit ab. Deine Kunden brauchen keine eigenen Seats und keine, um die fertige Anwendung zu betreiben.

Wie funktionieren die Mengenstufen?

Sag uns, wie viele Seats du brauchst. 1 bis 4 Seats kosten je 999 EUR pro Jahr, 5 bis 9 je 899, 10 bis 24 je 799, und die Stufe gilt für jeden Seat, den du hältst. Später gekaufte Seats werden anteilig auf dein bestehendes Verlängerungsdatum abgerechnet; erreicht die Gesamtzahl eine günstigere Stufe, gilt sie ab dem Tag des Nachkaufs für alle Seats — anteilig für die Restlaufzeit und vollständig ab der nächsten Verlängerung. Die bereits abgelaufene Zeit wird nicht neu berechnet. Ab 25 Seats machen wir ein individuelles Angebot.

Darf ein Open-Source-Projekt Sealpixel nutzen?

Ja. Sealpixel selbst ist source available unter der Business Source License 1.1 und nicht Open Source, ein Projekt mit dieser Abhängigkeit erbt also diese Bedingungen: Beitragende unterhalb der Umsatzschwelle brauchen keine Seats, ein Unternehmen, das das Projekt entwickelt, braucht Seats für seine Entwickler, und Kopien und Forks bleiben unter der BUSL. Jedes Release wird vier Jahre nach Veröffentlichung Apache 2.0.

Ist Sealpixel Open Source?

Nein. Sealpixel ist source available unter der Business Source License 1.1. Der Quellcode ist öffentlich, du darfst ihn lesen, ändern, forken und weitergeben, und die produktive Nutzung ist unterhalb der Umsatzschwelle frei — aber die BUSL ist keine von der OSI anerkannte Lizenz, es Open Source zu nennen wäre also falsch. Vier Jahre nach Veröffentlichung wird eine Version Apache License 2.0, und diese Version ist dann Open Source im Sinne der OSI.

Was genau ist ein Entwicklerplatz?

Ein Seat gehört einer namentlich benannten Person, die Code in einem Projekt mit Sealpixel schreibt, prüft, testet oder integriert. Er kann übertragen werden, wenn die Person ausscheidet. Designer in der Codebasis und QA zählen mit. Endnutzer deiner Anwendung brauchen nie einen Seat, egal wie viele es sind, und Leute, die sie nur betreiben oder verwalten, ebenso wenig.

Darf ich ein SaaS auf Sealpixel bauen?

Ja. Die einzige Grenze ist ein Dienst, dessen Hauptwert der Bildeditor selbst ist, etwa ein gehostetes „Bearbeite dein Bild“-Produkt oder eine an Dritte verkaufte Bildbearbeitungs-API. Ein Fotobuch-Shop, ein CMS, ein Immobilienportal oder ein Support-Tool mit eingebauter Bearbeitung sind in Ordnung.

Bei wem kaufe ich eigentlich, und wer stellt die Rechnung?

Bei Paddle. Unsere Bestellabwicklung erfolgt über unseren Online-Reseller Paddle.com, der Merchant of Record für alle unsere Bestellungen ist: Du kaufst die Seats von Paddle, Paddle stellt die Rechnung und berechnet, erhebt und führt Umsatzsteuer, GST oder Sales Tax für dein Land ab. Gib deine USt-IdNr. im Checkout an, damit die richtige Behandlung greift. Hersteller und Lizenzgeber von Sealpixel bleiben wir — die Softwarelizenz erteilen wir nach der Developer Seat License, nie Paddle.

Wie funktioniert die Rückerstattung?

Kündige innerhalb von 30 Tagen nach dem ersten Kauf, und du bekommst den vollen Betrag zurück, auf demselben Weg, auf dem die Zahlung kam. Die Rückerstattung wickelt Paddle als unser Merchant of Record ab; schreib uns oder Paddle, wir stimmen in beiden Fällen zu. Ohne Rückfragen.

Was genau ist byte-identisch?

Dieselben Quellbytes plus dasselbe Edit-Log, gerendert mit derselben Kernversion, ergeben dieselben Ausgabebytes und denselben SHA-256, in jedem Browser, auf Node, Deno, Bun und Lambda. Ein Browser-Export und ein Render mit @sealpixel/render vom selben Original stimmen also Byte für Byte überein. Die Vorschau auf einer Arbeitskopie hat eine andere Eingabe: Die Komposition ist identisch (gleiche normalisierte Geometrie), die Bytes sind es nicht. Die Docs erklären das im Detail.

Wie groß ist der Download?

Der WebAssembly-Kern hat etwa 1,3 MB unkomprimiert und 397 KB mit Brotli und wird erst geladen, wenn der Editor erscheint. Lit-UI und Render-Worker kommen mit ein paar Dutzend Kilobyte obendrauf. In der CI gibt es einen Budget-Check.

Welche Browser werden unterstützt?

Aktuelle Versionen von Chrome, Edge, Safari und Firefox auf Desktop und Mobilgeräten. Der Core nutzt WebAssembly-SIMD, die Untergrenze ist also Chrome 91, Firefox 89 und Safari 16.4. Jeder Commit lässt die Paritäts-Suite in Chromium, WebKit und Firefox laufen, die UI-Suite in Chromium und WebKit. Auf iOS Safari fällt der Download auf das Teilen-Menü zurück.

Kann ich ein eigenes Tool schreiben?

Ja. npm create @sealpixel/plugin legt ein Paket mit Operationen, Reducer, JavaScript- oder Rust-Kernel und Tool-Panel an. Das Test-Kit rendert dein Plugin in Node und drei Browsern und prüft gleiche Hashes. Zwei Beispiel-Plugins liegen im Repository.

Klein bearbeiten. Groß rendern. Identisch.

AnpassenTheme · Akzent · Radius · Sprache. Ein CSS-Schnipsel.

Beweise statt Versprechen

Dein Backend rendert, was der Browser gezeigt hat

Profilbild

Marketing-Studio

Compliance-Desk

Eine Komponente, zwei Layouts

Touch first

Einmal dekodieren, dann Ruhe

Notch und Home-Indicator

Ein Log, ein Core

Byte-identisch, per Hash geprüft

Weitermachen aus JSON

Zuschneiden

Feinabstimmung

Filter

Schwärzen

Zeichnen

Sticker

Rahmen

Wasserzeichen

Größe

Füllung

Assistent

Web Component

React

Vue 3

Svelte 5

Astro

Auf deinem Server rendern

Guide

Konzepte

Plugin-SDK

API-Referenz

Dasselbe Edit-Log in deinem Framework

Klein

Unternehmen

Enterprise

Staffelpreise

Klein bearbeiten. Groß rendern.
Identisch.