spritebit

Pixel-Art-Editor für Sprites — im Browser, offline, ohne Konto. Zeichnen, animieren, Tilemaps für Spiel-Levels bauen und als Bild, GIF, Godot-Szene oder Code exportieren.

▶ Im Browser öffnen · ⬇ Desktop-App · Website · Handbuch · Mitmachen

---

Was spritebit kann

🎨 Zeichnen

• Stift, Pinsel, Spray, Füllen, Radierer, Zauberstab — Größe 1–64, Alt + Rechts ziehen
• Linie, Rechteck, Ellipse — Kontur oder gefüllt
• Clean Stroke: saubere 1-Pixel-Striche ohne doppelte Eckpixel
• Symmetrie an einer oder beiden Achsen
• Auswahl, Lasso, Farbwahl — ausschneiden, verschieben, drehen, mit Anfassern skalieren
• Füllen mit Grenzen von allen Ebenen — Vorlagen ausmalen, ohne sie anzufassen
• Pipette, Hand, Zoom auf den Mauszeiger, Finger-Gesten

🎞️ Animieren

• Timeline als Raster: Ebenen × Frames, wie in gängigen Animations-Programmen
• Zellen kopieren, verschieben, verknüpfen
• Tags mit Name, Farbe und Richtung (vorwärts, rückwärts, Ping-Pong)
• Onion Skin mit Farben, Deckkraft und mehreren Frames
• Dauer je Frame, FPS, Abspielen in der Zeichenfläche

🌈 Farben

• Paletten bis 255 Farben, 17 eingebaute, eigene anlegen
• Farbzeile ziehen oder nach Farbstufen sortieren
• Bild → Palette: Fotos auf 4 bis 255 Farben reduzieren
• Licht als eigene Ebene: Lichtquelle wählen, jederzeit umstellen, Schlagschatten werfen
• Outline, Glätten, Hintergrund entfernen

📦 Exportieren

• PNG (1×–32×), PDF, GIF, Spritesheet mit JSON-Atlas
• Godot 4: Kachelbild + Szene mit TileMapLayer
• 9 Code-Formate: TS, JS, JSON, Spiel-JSON, SVG, CSS, C, Python, Text
• Alles lässt sich auch wieder importieren
• Mehrere Frames auf einmal, GIF je Tag

🧰 Arbeitsplatz

• Reiter für geöffnete Sprites, wie man es aus Grafikprogrammen kennt
• Panels anpinnen, lösen, frei verschieben — die Anordnung bleibt
• Ebenen mit Deckkraft, Sperre, Sichtbarkeit und Masken
• Schablone: Foto als Vorlage zum Abpausen
• Hilfslinien und Figuren-Proportionen (2–8 Kopfhöhen), als eigene Layouts speicherbar
• In Größenfeldern rechnen: 24 * 4

🔒 Deine Daten bleiben bei dir

• Läuft komplett im Browser, nichts wird hochgeladen
• Funktioniert offline, installierbar als App
• Speichert automatisch (IndexedDB), Projektdatei als Backup
• Sprites bis 1024 × 1024 Pixel — die Desktop-App schafft bis 8192 × 8192
• Am Handy bedienbar

🧱 Kacheln (Tilemaps)

• Tilemap-Ebenen mit eigenem Kachelsatz, 8–64 px
• Eine Kachel anmalen — sie ändert sich überall, wo sie liegt
• Auto legt beim Malen neue Kacheln an, Manuell nicht
• Kacheln setzen, füllen, aufnehmen; Ebenen umwandeln
• Export für Godot 4 und als JSON

🖥️ Web und Desktop

• Dieselben Funktionen im Browser und als Windows-App (Rust)
• Beide lesen und schreiben dieselben Projektdateien
• Die Desktop-App meldet neue Versionen

---

Loslegen

Online: spritebit.at/editor.html öffnen — fertig. Kein Konto, keine Installation. Chrome und Edge bieten in der Adressleiste „Installieren“ an, dann startet spritebit wie ein eigenes Programm.

Lokal: Es gibt keinen Build-Schritt und keine Abhängigkeiten zur Laufzeit. ES-Module brauchen nur einen HTTP-Server (file:// geht nicht):

git clone https://github.com/spritebit/sprite-editor.git
cd sprite-editor
python -m http.server 8000      # oder: npm run serve

Dann http://localhost:8000/ öffnen — die Startseite; der Editor liegt unter editor.html.

Desktop-App (Windows): Die native Fassung in Rust (spritebit-rs) gibt es als Download — ZIP entpacken, spritebit.exe starten. Windows warnt beim ersten Start vor einem unbekannten Herausgeber („Weitere Informationen“ → „Trotzdem ausführen“), weil die Datei nicht signiert ist. Alle Versionen stehen unter Releases.

---

Code-Export

Jeder Sprite lässt sich als Code ausgeben — mit Farben, mit allen Frames, und verlustfrei wieder einlesbar.

Format	Datei	Wofür
TypeScript	.ts	number[][] + Palette als Record<number, string>
JavaScript	.js	dasselbe ohne Typen
JSON	.json	sprachneutral, für eigene Pipelines
JSON (Spiel)	.json	flaches data-Array, Material je Farbe — C#-Loader
SVG	.svg	Vektorgrafik, animiert per CSS
CSS	.css	der Sprite auf einem einzigen Element (box-shadow)
C-Header	.h	uint8-Indizes + Palette für Mikrocontroller und LED-Matrix
Python	.py	für Pygame, Pillow und Skripte
Text-Raster	.txt	ein Zeichen pro Pixel — für Diffs und Doku

export const HELD: number[][] = [
  [0, 5, 5, 0],
  [5, 2, 2, 5],
  [0, 5, 5, 0],
];

---

Tastenkürzel

Taste	Wirkung
P B S F E W	Stift · Pinsel · Spray · Füllen · Radierer · Zauberstab
I R O	Linie · Rechteck · Ellipse
A L K	Auswahl · Lasso · Farbwahl
H	Hand — Ansicht verschieben
0–9	Farbe wählen
Rechtsklick	Radieren
Alt + Klick	Pipette
Alt + Rechts ziehen	Pinselgröße
Strg + Mausrad	Zoom auf den Mauszeiger
Leertaste + Ziehen	Bild verschieben
Strg+Z / Strg+Y	Rückgängig / Wiederholen
Strg+A / C / X / V	Alles · Kopieren · Ausschneiden · Einfügen
Enter	Animation abspielen / anhalten
, / .	Voriger / nächster Frame
G	Hilfslinien ein / aus
Strg+S / Strg+O	Projekt sichern / öffnen
F1	Hilfe

Alle Kürzel stehen im Handbuch und im Editor unter Hilfe (F1).

---

Unter der Haube

• Reines Frontend: HTML, CSS und ES-Module — kein Framework, kein Bundler, kein Build. Die Dateien im Repo sind genau die, die der Browser lädt.
• Ohne Fremdcode zur Laufzeit: GIF-Encoder, ZIP, Code-Formate, Import-Parser — alles selbst geschrieben. Einzige Ausnahme ist jsPDF, lokal in vendor/.
• Typgeprüft ohne TypeScript-Build: JSDoc-Typen, geprüft mit npm run check.
• Getestet: über 200 Tests mit dem eingebauten Test-Runner von Node, npm test — ohne vorher etwas zu installieren.
• Offline-fähig: Service Worker mit „Netz zuerst, Cache als Rückfall“ und Update-Band.

Wie das alles zusammenhängt, steht in CONTRIBUTING.md.

---

Mitmachen

Fehler gefunden, Idee gehabt? Gern als Issue. Pull Requests sind willkommen — vorher bitte kurz CONTRIBUTING.md lesen: es gibt nur wenige Regeln, aber die halten das Projekt zusammen.

npm test        # alle Tests
npm run check   # Typprüfung

---

In English

spritebit is a free, open-source pixel art editor for sprites that runs entirely in your browser — offline, no account, nothing uploaded. Draw clean 1-pixel strokes (Clean Stroke) with symmetry, animate on a layer × frame timeline with linked cels, tags and onion skin, build palettes, add light and drop shadows, build tilemaps for game levels (paint a tile once, it changes everywhere) and export to PNG, GIF, spritesheets, Godot 4 scenes or nine code formats (TypeScript, JSON, SVG, CSS, C, Python …). A native Windows app with the same features is available too. The UI is available in German, English and Austrian German. Open the editor →

---

Unterstützen

spritebit ist und bleibt kostenlos. Wer mag, kann auf Ko-fi einen Kaffee spendieren — das Geld fließt in ein Code-Signatur-Zertifikat, damit Windows bei der Desktop-App nicht mehr warnt.

---

Lizenz

MIT © 2026 Marco Jan — nutzen, ändern und weitergeben ist erlaubt, auch kommerziell, solange der Lizenzhinweis mitkommt. Was du mit spritebit zeichnest, gehört dir.