Hoe maak je prachtige release screenshots zonder abonnementen of Figma

Elke keer voordat je een artikel publiceert of een persoonlijk project uitbrengt, herhaalt dezelfde routine zich. Je maakt een ruwe interface screenshot, opent een grafische editor, past hoekafgerondheid aan, voegt schaduwen toe, kiest een gradient voor de achtergrond. Twintig minuten later besef je dat je tijd besteedt niet aan code, maar aan het finetunen van pixels.

Betaalde services voor mooie mockups rekenen al lang voor hoogwaardige exports of plakken hun watermerken recht in het midden. Onlangs stuitte ik op een open source project screenshot-studio dat dit probleem direct in de browser oplost. Geen registratie, geen abonnementen en geen verborgen beperkingen.

Wat zit er in het project

De repository wordt onderhouden door ontwikkelaar Kartik Labhshetwar. In essentie is het een web editor waar je een afbeelding of code snippet kunt droppen en snel kunt omzetten in gepolijst promotiemateriaal.

Het project draait lokaal of direct op screenshot-studio.com. Alle berekeningen en rendering vinden plaats aan de client side, dus je afbeeldingen gaan nergens naartoe. Voor veel mensen is dit cruciaal als de screenshots testdata of fragmenten van privédashboards bevatten.

Wat de editor kan doen:

• Screenshots inpakken in Chrome, Safari of Arc browser mockups met aanpasbare adresbalken.
• Gradient, geblurde of getextureerde achtergronden toepassen uit honderden kant-en-klare opties.
• Afbeeldingen roteren in 3D-ruimte met realistisch perspectief en schaduwen.
• Annotaties, pijlen, tekst en blur zones toevoegen om vertrouwelijke informatie te verbergen.
• Video en interface animaties renderen in MP4, WebM of GIF formaten.
• Statische graphics exporteren naar PNG en JPG met schaling tot 5x.

Praktische mogelijkheden van de editor

Werken met code en mockups

Als je een social media post of documentatie voorbereidt, heb je vaak een config snippet of component nodig. De editor heeft een ingebouwde code snippet generator, waardoor je geen externe tools zoals Carbon hoeft te openen.

Voor web service screenshots zijn er nette Safari en Chrome frames. Je kunt schakelen tussen lichte en donkere thema’s, de browser header grootte aanpassen en handmatig de gewenste URL in de adresbalk invoeren. Het is een klein detail, maar een screenshot in een post ziet er direct uit als een werkend live product in plaats van een bijgesneden rechthoek.

3D-effecten en perspectief

Regelmatige platte afbeeldingen in promotiemateriaal gaan vaak verloren in feeds. De editor heeft ongeveer 30 ingebouwde perspectief presets. Je kunt de afbeelding onder een hoek roteren, kantelen en een zachte schaduw met verstelbare diepte toevoegen.

Het werkt snel zonder vertraging op het canvas. Het effect wordt gecreëerd via CSS en WebGL transformaties, dus er is geen noodzaak om de bron elke keer opnieuw te renderen wanneer je een slider beweegt.

Animaties en video export

Dit is echt een zeldzame functie voor open source utilities zoals deze. Je kunt niet alleen een statische afbeelding opslaan, maar ook een korte video maken met element verschijningsanimaties of soepele zoom.

Binnenin zit een basis timeline met keyframes en een paar dozijn animatie presets. Video encoding wordt afgehandeld door FFmpeg WASM en WebCodecs libraries direct in de browser. Dit betekent dat export GPU hardware acceleratie gebruikt als de browser dit ondersteunt.

Technische stack

Het project gebruikt een moderne stack die kan dienen als een goed voorbeeld voor diegenen die hedendaagse React frontend ontwikkeling leren:

• Next.js 16 en React 19 als basis framework.
• TypeScript voor het typen van de gehele editor.
• Tailwind CSS 4 en Radix UI voor component interfaces.
• Zustand voor het beheren van canvas en layer state.
• Motion (voorheen Framer Motion) voor interface animaties.
• FFmpeg WASM en WebCodecs voor het encoderen van media bestanden.

De codebase is goed gestructureerd, met editor state opgeslagen in voorspelbare Zustand stores, waardoor het gemakkelijk te begrijpen is hoe de canvas logica werkt.

Hoe het project lokaal te draaien

Als je de editor lokaal wilt deployen of de broncode wilt verkennen, voer je gewoon de standaard commando’s uit:

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

Na het bouwen start de applicatie op http://localhost:3000. De repository wordt gedistribueerd onder de permissieve Apache 2.0 licentie, dus je kunt de code vrij gebruiken als basis voor je eigen interne bedrijfstools.

Voor wie is dit project nuttig

Deze utility handelt routine taken perfect af voor verschillende scenario’s:

• Pet project ontwikkelaars: formatteer repository previews in README, bereid screenshots voor voor Product Hunt of posts op Telegram en X.
• Technisch schrijvers: blur snel tokens en e-mails in admin screenshots en verpak afbeeldingen elegant voor handleidingen.
• Indie hackers: maak geanimeerde GIFs en korte video’s die feature functionaliteit demonstreren zonder zware video editors te starten.

Het project verzamelt actief sterren en wordt ondersteund door het Vercel OSS grants programma.

Als je het beu bent om tijd te besteden aan mockups in zware editors, bekijk dan screenshot-studio.com of fork de repository. De tool bespaart veel tijd en doet precies wat je ervan zou verwachten.