DevSnapThe OG preset is built in.
Pick Twitter / OG 1200×630 from the canvas sizes. It is a studio preset; each publishing platform sets its own current requirements.
OG IMAGE GENERATOR
Open Graph images,
from screenshots.
Your link preview is the first thing people see. Start with a screenshot, add a headline and a background, and export a 1200×630 Open Graph image — all in your browser.
Create an OG image
Built-in 1200×630 presetChoose the Twitter / OG canvas size.
Local image processingYour screenshot stays in your browser.
Text and background includedAdd a headline and your logo — included in Free.
Same screenshot. One is a file. The other is a share card.
Drop a plain capture into the studio, add a headline and a background, and export. Slide to see the difference.
Original screenshotStyled in DevSnapKit
A real capture of Vite on GitHub, styled and exported using DevSnapKit. View original / View export. Public-page styling demonstrations, not customer endorsements.
From capture to link preview.
Bring your screenshot and the one sentence you want people to remember.
Start with your own capture.
Take a screenshot of the page you want to promote. DevSnapKit styles it; it doesn't capture websites for you.
Add a headline and a background.
Use Add text to create a headline. Edit the words directly on the canvas and pick a background that matches your brand.
Export at your chosen size.
Choose the built-in Twitter / OG 1200×630 preset and download a PNG or WebP. Check your destination's current image documentation before publishing.
SCREENSHOT TO SHARE CARD
The details make the preview.
Type directly on the canvas.
Add a headline, a subtitle, or a small brand line with editable screenshot text. Adjust font, size, weight, colour, and alignment per text box.
A background that fits the brand.
Choose studio palettes, solid colours, gradients, or your own background image. Logo uploads and QR codes are included in Free.
No render server.
Image rendering and exporting happen in your browser. Your screenshot is not uploaded to a rendering service.
Three ways to use a share card.
Possible scenarios for your own images, separate from the real Vite example above.
SCENARIO 01
An open-source release.
Pair a repository screenshot with the release's main improvement, so the preview gives people a reason to read the changelog.
SCENARIO 02
A product announcement.
Show the feature people will use and add one sentence about the outcome it makes possible.
SCENARIO 03
A developer article.
Combine a relevant documentation or interface capture with the article title for a clear, readable preview.
A few things worth knowing.
What size should an OG image be?
DevSnapKit includes a 1200×630 preset labelled Twitter / OG. Use the destination platform's current documentation to decide whether that size fits your link preview; requirements and cropping can vary.
Does DevSnapKit capture my website automatically?
No. You take the screenshot yourself and import it. DevSnapKit composes and exports the image.
Can I add my own headline?
Yes. Use Add text to create a text box, then edit it directly on the canvas. The text controls include font, size, weight, italic where supported, colour, and alignment.
What happens if a text box falls outside the image?
Text boxes are constrained to the canvas. If a box still overflows, export is blocked with a message identifying it. Shorten the words, reduce the size, or adjust the box width before exporting.
Can I use my logo?
Yes. Logo uploads are included in Free, with position, scale, and opacity controls.
Is it free?
Text, logo uploads and QR codes are included in Free. Pro adds premium templates, high-resolution export presets, batch export for multiple canvas sizes, and premium gradient backgrounds. The final pixel dimensions are shown before export.
START WITH A SCREENSHOT