Bildeditor-SDK · Rust-Kern, eine Binary überall

Klein bearbeiten. Groß rendern. Identisch.

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.

Demo ausprobieren Dokumentation lesen

Umgestalten

Alles hier ist CSS. Kopieren und in deine App einfügen.

Vorlage

AkzentRadius 12pxModusSprache

Runde Knöpfe

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

Belege statt Versprechen

Zur Paritäts-Demo CI-Workflow lesen

125
Referenz-Renderings
Edit-Logs und Pläne mit festgeschriebenen Hashes
122
CLI-Paritätsfälle
natives Rust und Node liefern gleiche Bytes
77
Browser-Testläufe
in 3 Engines bei jedem Commit
383 KB
komprimierter Kern
1,3 MB unkomprimiert, eine Binary für jede Laufzeit

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

Eine Komponente. Drei Produkte.

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

Profilbild

Eine Registrierung: rund zuschneiden, aufhellen, fertig. Zwei Werkzeuge, helles Theme, kein Export-Knopf; der Export behält nur den Kreis.

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

<sealpixel-editor theme="light" locale="de" show-export="never" active-tool="crop"
  style="--sealpixel-panel-size: 240px; --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 (bearbeiten, um anzuwenden)

Marketing-Studio

Ein Content-Team bereitet Kampagnenbilder vor: alle Werkzeuge, dunkles Graphit, runde Knöpfe.

<sealpixel-editor theme="dark" locale="en" active-tool="filter"
  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'; // all ten plugins, bundled render worker
  document.querySelector('sealpixel-editor').addEventListener('sealpixel:process', (e) => {
    upload(e.detail.bytes, e.detail.hash);
  });
</script>

Plugin-Optionen (bearbeiten, um anzuwenden)

Schwärzungs-Arbeitsplatz

Ein Compliance-Team verpixelt personenbezogene Daten in gescannten Formularen. Schwärzen, Annotieren, Wasserzeichen, kontraststarkes 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"
  plugin-options='{"redact":{"modes":["pixelate"],"defaultMode":"pixelate","defaultAmount":18},"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 (bearbeiten, um anzuwenden)

Mobil

Gebaut für Daumen, nicht nur für Cursor.

Dieselbe Komponente richtet sich auf dem Telefon 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 und das Werkzeugpanel sitzt darüber. Maßgeblich ist der Container, nicht der Viewport, deshalb bekommt auch eine schmale Seitenleiste das Telefon-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 Telefon 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.

Live-Editor in einem Telefonrahmen. 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

Dieselbe Quelle mit demselben Log irgendwo gerendert: der SHA-256 stimmt überein. Große Uploads werden am Handy 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.

Zuschneiden
Frei drehen, spiegeln, Seitenverhältnisse, Griffe bleiben auf jedem Bildschirm 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. Zellen rasten am Quellraster ein, damit Proxy und Original übereinstimmen.
@sealpixel/plugin-redact
Annotieren
Rechtecke, Ellipsen, Linien, Pfeile, Freihand und Text. Schriften sind gehashte Assets: überall identische Glyphen.
@sealpixel/plugin-annotate
Sticker
Logos und Bild-Assets mit Drehung, Spiegelung und Deckkraft platzieren.
@sealpixel/plugin-sticker
Rahmen
Voll-, Innen- und Polaroid-Rahmen.
@sealpixel/plugin-frame
Wasserzeichen
Bild oder Text, verankert oder gekachelt, auf dem Server identisch angewandt.
@sealpixel/plugin-watermark
Skalieren
Contain, Cover und Fill auf eine Zielgröße. Lanczos3 abwärts, Catmull-Rom aufwärts.
@sealpixel/plugin-resize
Füllung
Hintergrundfarbe für Flächen, die Drehung oder Zuschnitt freilegen.
@sealpixel/plugin-fill

Eine Komponente für jeden Stack

Darunter ein Web Component, darüber dünne, typisierte Wrapper. Kontrollierte und unkontrollierte 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

Server-Rendering

Ein Fetch-Handler für Node, Deno, Bun und AWS Lambda.

In StackBlitz öffnen

import { createSealpixelHandler } from '@sealpixel/server';
import { defaultPlugins } from '@sealpixel/plugins';

// One fetch handler: Node (srvx), Deno.serve, Bun.serve, or toLambdaHandler().
export default createSealpixelHandler({
  plugins: defaultPlugins,
  limits: { maxMegapixels: 80 },
  idempotent: true, // same source + log + options → same job key, cached result
});

Für Entwickler gebaut, entsprechend dokumentiert

Headless-Kern, typisiertes Edit-Log, ein Plugin-SDK mit Test-Kit und eine Doku mit Live-Editoren auf jeder Seite.

Guide

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

Konzepte

Edit-Log, Koordinatenräume, Proxy-Fluss, 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, Server, 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; // same hash your server will produce
  });
</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';
---
<SealpixelEditor src="/photo.jpg" theme="auto" serverEndpoint="/api/sealpixel/render" />

In StackBlitz öffnen

Ganz nach deinem Stil

CSS-Variablen für jede Farbe, jeden Radius und jede Größe. ::part()-Haken für Knöpfe, Leiste und Bühne. 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(button) { border-radius: 999px; }

Customizer öffnen

Der Server rendert, was der Browser gezeigt hat

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.

Eins 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-Test-Kit inklusive ·Plugin-SDK

Im Vergleich

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

	Sealpixel	Pintura	IMG.LY CE.SDK
Quellcode	Offen einsehbar und änderbar	Geschlossen, private npm-Registry	Geschlossen, Escrow für Enterprise
Server-Rendering	Node, Deno, Bun, Lambda	Nein	Node.js
Byte-identische Ausgabe von Client und Server	Ja, per Hash geprüft	Nein	Gleiche Engine, nicht als Garantie veröffentlicht
Serialisierbarer Bearbeitungszustand	Edit-Log, typisiert und validiert	imageState-Objekt	Scene-Datei
Plugin-SDK für Dritte	JS- und Rust-Kernel	Fester Satz	Plugin-API
React, Vue, Svelte, Astro	Ja, plus Web Component	Ja, plus Angular, jQuery	Ja, plus native Mobile
Preis unter 1 Mio. EUR Umsatz	Kostenlos	169 € pro Jahr, ein Produkt	Nur auf Anfrage
Preis pro Entwickler und Jahr	499 €	749 €	Nur auf Anfrage
Rückgabefrist	30 Tage	60 Tage	30 Tage Testphase

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

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

Klein

Kostenlos

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

Alle Plugins, Wrapper und der Server-Handler
Jedes Release
Community-Support auf GitHub

Loslegen

Unternehmen

499 €~~599 €~~

pro Entwicklerplatz und Jahr, zzgl. USt.

Launch-Preis für Plätze, die im ersten Jahr nach 1.0 gekauft werden. Deine Verlängerungen behalten ihn. Listenpreis 599 €.

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

Updates und E-Mail-Support für zwölf Monate
Jedes erhaltene Release für immer behalten
30 Tage Geld-zurück-Garantie
EU-Umsatzsteuer wird im Checkout abgewickelt

Plätze kaufen

Enterprise

Auf Anfrage

Ab 25 Plätzen, oder wenn der Einkauf mehr braucht als einen Checkout.

Quellcode-Escrow
Individuelle Bedingungen und SLA
Rechnung mit Bestellnummer

Kontakt aufnehmen

Mengenpreise

Der Preis pro Platz gilt für jeden Platz der Bestellung. Menge im Checkout wählen; später zur gleichen Stufe nachkaufen.

Plätze	Launch, pro Platz und Jahr	Liste
1 bis 4	499 €	599 €
5 bis 9	449 €	539 €
10 bis 24	399 €	479 €
ab 25	Kontakt aufnehmen

Business Source License 1.1, nach vier Jahren Apache 2.0. Keine Lizenzprüfung zur Laufzeit: die Software telefoniert nie nach Hause. Lizenz lesen

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?

Wähle die Anzahl der Plätze im Checkout. Ab 5 Plätzen kostet jeder Platz 10 Prozent weniger, ab 10 Plätzen 20 Prozent. Später hinzugekaufte Plätze werden zur Stufe abgerechnet, die deine Gesamtzahl erreicht, anteilig bis zum Verlängerungsdatum. Ab 25 Plätzen machen wir ein individuelles Angebot.

Darf ein Open-Source-Projekt Sealpixel nutzen?

Ja. Beitragende unterhalb der Umsatzschwelle brauchen keine Plätze; ein Unternehmen, das das Projekt entwickelt, braucht Plätze für seine Entwickler. Kopien und Forks bleiben unter der Business Source License, und jedes Release wird vier Jahre nach Veröffentlichung Apache 2.0.

Ist Sealpixel Open Source?

Noch nicht, mit Absicht. Sealpixel nutzt die 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. Vier Jahre nach Veröffentlichung einer Version wird sie Apache License 2.0. Bis dahin kaufen größere Organisationen Entwicklerplätze.

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 nicht.

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.

Wie funktioniert die Rückerstattung?

Kündige innerhalb von 30 Tagen nach dem ersten Kauf, und der Zahlungsdienstleister erstattet den vollen Betrag auf das ursprüngliche Zahlungsmittel. 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.

Klein bearbeiten. Groß rendern. Identisch.

Umgestalten

Belege statt Versprechen

Profilbild

Marketing-Studio

Schwärzungs-Arbeitsplatz

Eine Komponente, zwei Layouts

Touch zuerst

Nur die Vorschau reist

Notch und Home-Balken

Ein Log, ein Kern

Byte-identisch, per Hash geprüft

Aus JSON fortsetzen

Zuschneiden

Feinabstimmung

Filter

Schwärzen

Annotieren

Sticker

Rahmen

Wasserzeichen

Skalieren

Füllung

Web Component

React

Vue 3

Svelte 5

Astro

Server-Rendering

Guide

Konzepte

Plugin-SDK

API-Referenz

Dasselbe Edit-Log, in deinem Framework

Klein

Unternehmen

Enterprise

Mengenpreise