So erstellst du ansprechende Release-Screenshots ohne Abonnements oder Figma

Jedes Mal, bevor du einen Artikel veröffentlichst oder ein Hobbyprojekt releasest, wiederholt sich dieselbe Routine. Du machst einen rohen Interface-Screenshot, öffnest einen Grafikeditor, passt die Eckenrundung an, fügst Schatten hinzu, wählst einen Gradienten für den Hintergrund. Zwanzig Minuten später wird dir klar, dass du keine Zeit mit Code verbringst, sondern mit dem Feintuning von Pixeln.

Paid-Dienste für schöne Mockups verlangen schon lange Geld für hochwertige Exporte oder platzieren ihre Wasserzeichen mittig. Kürzlich bin ich auf ein Open-Source-Projekt screenshot-studio gestoßen, das dieses Problem direkt im Browser löst. Keine Registrierung, keine Abonnements und keine versteckten Einschränkungen.

Was steckt hinter dem Projekt

Das Repository wird vom Entwickler Kartik Labhshetwar gepflegt. Im Grunde ist es ein Web-Editor, in dem du ein Bild oder Code-Snippet ablegen und schnell in professionelles Werbematerial verwandeln kannst.

Das Projekt läuft lokal oder direkt auf screenshot-studio.com. Alle Berechnungen und das Rendering finden clientseitig statt, sodass deine Bilder nirgendwohin geschickt werden. Für viele ist das entscheidend, wenn die Screenshots Testdaten oder Fragmente privater Dashboards enthalten.

Was der Editor kann:

• Screenshots in Chrome-, Safari- oder Arc-Browser-Mockups mit anpassbarer Adressleiste einbetten.
• Gradienten-, Unschärfe- oder strukturierte Hintergründe aus Hunderten vorgefertigter Optionen anwenden.
• Bilder im 3D-Raum mit realistischer Perspektive und Schatten drehen.
• Annotationen, Pfeile, Text und Unschärfezonen hinzufügen, um vertrauliche Informationen zu verbergen.
• Video- und Interface-Animationen in MP4-, WebM- oder GIF-Formate rendern.
• Statische Grafiken als PNG und JPG mit Skalierung bis zu 5x exportieren.

Praktische Editor-Funktionen

Arbeit mit Code und Mockups

Wenn du einen Social-Media-Beitrag oder eine Dokumentation vorbereitest, musst du oft ein Config-Snippet oder eine Komponente zeigen. Der Editor verfügt über einen integrierten Code-Snippet-Generator, sodass du keine externen Tools wie Carbon öffnen musst.

Für Screenshots von Webdiensten gibt es elegante Safari- und Chrome-Rahmen. Du kannst zwischen hellen und dunklen Themes wechseln, die Browser-Header-Größe anpassen und die gewünschte URL manuell in die Adressleiste eingeben. Es ist ein kleines Detail, aber ein Screenshot in einem Beitrag sieht dadurch sofort wie ein funktionierendes Live-Produkt aus – statt nur ein beschnittenes Rechteck.

3D-Effekte und Perspektive

Normale flache Bilder in Werbematerialien gehen in Feeds oft verloren. Der Editor hat etwa 30 eingebaute Perspektiv-Voreinstellungen. Du kannst das Bild in einem Winkel drehen, neigen und einen weichen Schatten mit einstellbarer Tiefe hinzufügen.

Es funktioniert schnell ohne Verzögerung auf der Canvas. Der Effekt wird durch CSS- und WebGL-Transformationen erzeugt, sodass du die Quelle nicht jedes Mal neu rendern musst, wenn du einen Slider bewegst.

Animationen und Video-Export

Dies ist wirklich eine seltene Funktion für Open-Source-Tools wie dieses. Du kannst nicht nur ein statisches Bild speichern, sondern auch ein kurzes Video mit Erscheinungsanimationen von Elementen oder sanftem Zoom erstellen.

Intern gibt es eine einfache Timeline mit Keyframes und einige Dutzend Animations-Voreinstellungen. Die Video-Kodierung wird von FFmpeg WASM und WebCodecs-Bibliotheken direkt im Browser übernommen. Das bedeutet, der Export nutzt GPU-Hardwarebeschleunigung, wenn der Browser dies unterstützt.

Technischer Stack

Das Projekt verwendet einen modernen Stack, der als gutes Beispiel für alle dienen kann, die zeitgemäße React-Frontend-Entwicklung lernen möchten:

• Next.js 16 und React 19 als Basis-Framework.
• TypeScript für die Typisierung des gesamten Editors.
• Tailwind CSS 4 und Radix UI für Komponenten-Oberflächen.
• Zustand für die Verwaltung von Canvas- und Layer-Zustand.
• Motion (ehemals Framer Motion) für Interface-Animationen.
• FFmpeg WASM und WebCodecs für die Kodierung von Mediendateien.

Die Codebasis ist gut strukturiert, wobei der Editor-Zustand in vorhersehbaren Zustand-Stores gespeichert wird, was das Verständnis der Canvas-Logik erleichtert.

So führst du das Projekt lokal aus

Wenn du den Editor lokal einsetzen oder den Quellcode erkunden möchtest, führe einfach die Standardbefehle aus:

git clone https://github.com/kartik-lab/screenshot-studio.git
cd screenshot-studio
npm install
npm run dev

Nach dem Build startet die Anwendung auf http://localhost:3000. Das Repository wird unter der permissiven Apache-2.0-Lizenz vertrieben, sodass du den Code frei als Grundlage für deine eigenen internen Firmen-Tools verwenden kannst.

Für wen ist dieses Projekt nützlich

Dieses Tool erledigt Routineaufgaben für mehrere Szenarien perfekt:

• Hobbyprojekt-Entwickler: Repository-Vorschauen in README formatieren, Screenshots für Product Hunt oder Beiträge auf Telegram und X vorbereiten.
• Technische Redakteure: Tokens und E-Mails in Admin-Screenshots schnell verbergen und Bilder elegant für Anleitungen aufbereiten.
• Indie-Hacker: Animierte GIFs und kurze Videos erstellen, die Feature-Funktionalität demonstrieren, ohne schwere Video-Editoren zu starten.

Das Projekt sammelt aktiv Sterne und wird vom Vercel-OSS-Förderprogramm unterstützt.

Wenn du es leid bist, Zeit mit Mockups in schweren Editoren zu verbringen, schau dir screenshot-studio.com an oder Forke das Repository. Das Tool spart viel Zeit und macht genau das, was man davon erwartet.