Deine Nutzer bearbeiten eine Vorschau im Browser. Dein Server wendet dasselbe Edit-Log auf das 80-Megapixel-Original an und liefert dieselben Pixel. Per Hash belegt.
Der Editor konnte hier nicht geladen werden. Öffne stattdessen die Demo.
Marketing-Studio
Ein Content-Team bereitet Kampagnenbilder vor: alle Werkzeuge, 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(button) { 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>
Editor wird geladen …
Der Editor konnte hier nicht geladen werden. Öffne stattdessen die Demo.
Schwärzungsstelle
Ein Compliance-Team verpixelt personenbezogene Daten in gescannten Formularen. Schwärzen, Annotieren, Wasserzeichen, kontraststarkes Theme, deutsche Oberfläche.
Dieselbe Komponente richtet sich auf dem Smartphone von selbst ein. Keine zweite Oberfläche, kein Mobile-Flag. Probier es im Rahmen aus.
Eine Komponente, zwei Layouts
Unter 768 px Containerbreite wandert die Werkzeugleiste nach unten, die Einstellungen des offenen Werkzeugs sitzen darüber. Maßgeblich ist der Container, nicht der Viewport, deshalb bekommt auch eine schmale Seitenleiste das Smartphone-Layout.
Touch zuerst
Zwei Finger zum Zoomen, ziehen zum Verschieben, ein Finger für Zuschnitt-Griffe, Schwärzungen und Anmerkungen. Mausrad und Trackpad tun auf dem Desktop dasselbe.
Nur die Vorschau reist
Das Smartphone lädt und bearbeitet eine kleine Vorschau. Das Edit-Log geht an deinen Server, der es auf das Original in voller Auflösung anwendet. Dieselben Pixel, ein Bruchteil der Daten.
Notch und Home-Balken
Safe-Area-Abstände werden eingehalten. show-history="buttons" lässt die Zeitleiste weg und show-export="never" blendet Export aus, damit das Wesentliche auf einen kleinen Bildschirm passt.
9:41
Editor wird geladen …
Der Editor konnte hier nicht geladen werden. Öffne stattdessen die Demo.
Live-Editor im Smartphone-Rahmen. Ziehen, zoomen, tippen.
Das Edit-Log ist das Bild
Ein Log, ein Kern
Jeder Zuschnitt, Filter und jede Anmerkung ist eine Operation in einem JSON-Log. Ein Rust-Kern, zu WebAssembly kompiliert, führt es im Web Worker, auf Node, Deno, Bun oder AWS Lambda aus. Gleiche Bytes rein, gleiche Bytes raus.
Byte-identisch, per Hash geprüft
Gleiche Quelle, gleiches Log, egal wo gerendert: der SHA-256 stimmt überein. Große Uploads werden auf dem Smartphone als Proxy bearbeitet; der Server rendert das Original aus demselben Log.
Aus JSON fortsetzen
Das Original einmal speichern, das Log daneben. Jeden Zustand auf jedem Gerät wieder öffnen, ohne Generationsverlust. Das Log kann im exportierten PNG, JPEG oder WebP mitreisen.
Jedes Werkzeug, das deine Nutzer erwarten
Zehn Plugins sind dabei. Jedes ist ein Paket, das du weglassen, ersetzen oder erweitern kannst.
CSS-Variablen für jede Farbe, jeden Radius und jede Größe. ::part() greift auf Buttons, Leiste und Stage zu. Fünf Themes und sechs Sprachen sind dabei.
Schick das Original und das Edit-Log an einen Fetch-Handler. Er validiert das Log, rendert mit derselben WebAssembly-Binary und liefert Bytes, Hash und einen Job-Schlüssel. Dieselbe Anfrage noch einmal liefert das gecachte Ergebnis.
Zod-validierte Anfrage, SSRF-Allowlist, Größenlimits vor dem Decode
Idempotente Job-Schlüssel: gleiche Quelle, gleiches Log, gleiche Optionen, gleiches Objekt
S3- oder URL-Quellen, S3- oder Inline-Ziele, Proxy-Modus für große Uploads
Speichertabelle von 12 bis 80 Megapixel
POST /render
{
"source": { "kind": "s3", "bucket": "uploads", "key": "IMG_4821.jpg" },
"editLog": { "version": 1, "source": { "id": "IMG_4821", "width": 8192, "height": 5461 }, "ops": [ … ] },
"output": { "format": "image/jpeg", "quality": 0.92 },
"destination": { "kind": "s3", "bucket": "renders" }
}
200 OK
{
"key": "renders/3f9a…c1.jpg",
"hash": "3f9a4e…b7c1", ← equals the browser's hash for the same input
"width": 6144, "height": 4096,
"cached": false, ← true on the second identical request
"timings": { "decode": 412, "render": 1730, "encode": 388 }
}
Erweitern ohne Fork
Ein Plugin ist ein npm-Paket: Operationen mit zod-Schemas, ein Reducer, ein Kernel in JavaScript oder in Rust als eigenes WebAssembly-Modul, und optional ein Werkzeug mit Panel und Gizmo. Es läuft auf dem Client und dem Server, ohne den Kern neu zu bauen.
Plugin anlegen
npm create @sealpixel/plugin acme-spotlight -- --kernel wasm-rustcd acme-spotlight && npm test # parity: Node vs Chromium, WebKit, Firefox
Die Stufe richtet sich nach deiner Gesamtzahl an Plätzen und ihr Preis gilt für jeden davon. Später gekaufte Plätze 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 Plätze, anteilig für die Restlaufzeit und vollständig ab der nächsten Verlängerung. Die bereits abgelaufene Zeit wird nicht neu berechnet.
Business Source License 1.1, nach vier Jahren Apache 2.0. Keine Lizenzprüfung 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 Bruttojahresumsatz: Einzelpersonen und Unternehmen unterhalb dieser Schwelle. Produktiveinsatz und kommerzielle Produkte sind eingeschlossen. Der Umsatz zählt für die gesamte Unternehmensgruppe, eine Tochter eines Konzerns ist also nicht frei. 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 Plätze abgedeckt.
Ich bin eine Agentur. Was zahle ich?
Einen Platz pro Entwickler, der an Codebasen mit Sealpixel arbeitet, egal für wie viele Kunden oder Produkte. Der Platz deines Entwicklers deckt seine gesamte Kundenarbeit ab. Deine Kunden brauchen keine eigenen Plätze und keine, um die fertige Anwendung zu betreiben.
Wie funktionieren die Mengenstufen?
Sag uns, wie viele Plätze du brauchst. 1 bis 4 Plätze kosten je 499 EUR pro Jahr, 5 bis 9 je 449, 10 bis 24 je 399, und die Stufe gilt für jeden Platz, den du hältst. Später gekaufte Plätze 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 Plätze — anteilig für die Restlaufzeit und vollständig ab der nächsten Verlängerung. Die bereits abgelaufene Zeit wird nicht neu berechnet. Ab 25 Plätzen 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 Plätze, ein Unternehmen, das das Projekt entwickelt, braucht Plätze 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 Platz 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 Platz, 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 Plätze 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 Nachfragen.
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. Wenn ein Handy einen verkleinerten Proxy bearbeitet und der Server das Original rendert, ist die Komposition identisch (gleiche normalisierte Geometrie), die Bytes unterscheiden sich aber, weil die Eingaben andere sind. Die Doku erklärt das im Detail.
Wie groß ist der Download?
Der WebAssembly-Kern hat etwa 1,3 MB unkomprimiert und 390 KB mit Brotli und wird erst geladen, wenn der Editor erscheint. Lit-UI und Render-Worker kommen mit wenigen Dutzend Kilobyte dazu. 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. 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 Werkzeug schreiben?
Ja. npm create @sealpixel/plugin legt ein Paket mit Operationen, Reducer, JavaScript- oder Rust-Kernel und Werkzeug-Panel an. Das Test-Kit rendert dein Plugin in Node und drei Browsern und prüft gleiche Hashes. Zwei Beispiel-Plugins liegen im Repository.
