How to Create Beautiful Release Screenshots Without Subscriptions or Figma

Every time before publishing an article or releasing a pet project, the same routine repeats. You take a raw interface screenshot, open a graphics editor, adjust corner rounding, add shadows, pick a gradient for the background. Twenty minutes later, you realize you're spending time not on code, but on tweaking pixels.

Paid services for beautiful mockups have long been charging for high-quality exports or slapping their watermarks right in the center. Recently I came across an open source project screenshot-studio that solves this problem directly in the browser. No registration, no subscriptions, and no hidden limitations.

What's Inside the Project

The repository is maintained by developer Kartik Labhshetwar. Essentially, it's a web editor where you can drop an image or code snippet and quickly turn it into polished promotional material.

The project runs locally or directly on screenshot-studio.com. All computations and rendering happen on the client side, so your images don't go anywhere. For many people, this is critical if the screenshots contain test data or fragments of private dashboards.

What the editor can do:

• Wrap screenshots in Chrome, Safari, or Arc browser mockups with customizable address bars.
• Apply gradient, blurred, or textured backgrounds from hundreds of ready-made options.
• Rotate images in 3D space with realistic perspective and shadows.
• Add annotations, arrows, text, and blur zones to hide confidential information.
• Render video and interface animations in MP4, WebM, or GIF formats.
• Export static graphics to PNG and JPG with scaling up to 5x.

Practical Editor Capabilities

Working with Code and Mockups

If you're preparing a social media post or documentation, you often need to show a config snippet or component. The editor has a built-in code snippet generator, eliminating the need to open external tools like Carbon.

For web service screenshots, there are neat Safari and Chrome frames. You can switch between light and dark themes, adjust the browser header size, and manually enter the desired URL in the address bar. It's a small detail, but a screenshot in a post immediately looks like a live working product rather than a cropped rectangle.

3D Effects and Perspective

Regular flat images in promotional materials often get lost in feeds. The editor has about 30 built-in perspective presets. You can rotate the image at an angle, tilt it, and add a soft shadow with adjustable depth.

It works quickly without lag on the canvas. The effect is created through CSS and WebGL transformations, so there's no need to re-render the source every time you move a slider.

Animations and Video Export

This is truly a rare feature for open source utilities like this. You can not only save a static image, but also create a short video with element appearance animations or smooth zoom.

Inside there's a basic timeline with keyframes and a couple dozen animation presets. Video encoding is handled by FFmpeg WASM and WebCodecs libraries directly in the browser. This means export utilizes GPU hardware acceleration if the browser supports it.

Technical Stack

The project uses a modern stack that can serve as a good example for those learning contemporary React frontend development:

• Next.js 16 and React 19 as the base framework.
• TypeScript for typing the entire editor.
• Tailwind CSS 4 and Radix UI for component interfaces.
• Zustand for managing canvas and layer state.
• Motion (formerly Framer Motion) for interface animations.
• FFmpeg WASM and WebCodecs for encoding media files.

The codebase is well-structured, with editor state stored in predictable Zustand stores, making it easy to understand how the canvas logic works.

How to Run the Project Locally

If you want to deploy the editor locally or explore the source code, just run the standard commands:

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

After building, the application will start on http://localhost:3000. The repository is distributed under the permissive Apache 2.0 license, so you can freely use the code as a foundation for your own internal company tools.

Who Will Find This Project Useful

This utility perfectly handles routine tasks for several scenarios:

• Pet project developers: format repository previews in README, prepare screenshots for Product Hunt or posts on Telegram and X.
• Technical writers: quickly blur tokens and emails in admin screenshots and elegantly package images for guides.
• Indie hackers: create animated GIFs and short videos demonstrating feature functionality without launching heavy video editors.

The project is actively gaining stars and is supported by the Vercel OSS grants program.

If you're tired of spending time on mockups in heavy editors, check out screenshot-studio.com or fork the repository. The tool saves a lot of time and does exactly what you'd expect from it.