Export OG image as code
Design in the OG Image Generator, then open Export code for Next.jsapp/opengraph-image.tsx (ImageResponse), an Astro Satori + resvg endpoint, plain Satori JSX, or an HTML+CSS sketch. Copy the snippet into your repo and load only the bundled font family shown in the panel.
How to use it
- Pick a template, edit the title and colors, and choose a size preset.
- Open the Export panel and switch between Next.js, Astro, Satori and HTML+CSS tabs.
- Read any amber fallback notes (grain, blur, glow orbs) before you ship.
- Copy the code, add the matching font file in your project, and deploy.
- Host a PNG from the generator if you prefer a static file instead of runtime rendering.
Known limitations
- Logos, screenshots and local background images stay in the browser and are not embedded in the snippet.
- Mesh, shapes and orb backgrounds become a linear gradient fallback.
- Pattern overlays (dots, grid, waves) are omitted from the JSX/HTML export.
Frequently asked questions
Short answers about OG images, sizes, missing previews and how this free site works.
Does the code export match the canvas pixel-for-pixel?
No. It is an approximate layout for next/og and Satori: title, subtitle, colors, padding, font family and size. Features like grain, background blur and glow orbs show a visible fallback note.
Which fonts can I use in the exported code?
Only families already bundled on SocialImageKit (Inter, Source Serif, Fraunces, IBM Plex Mono, Nunito, Oswald, Source Sans 3). Load the matching files in your app — the snippet does not invent other fonts.
Is this free and do you upload my design?
Yes, free and client-side. Export code is generated in your browser from the current form state. No image or code is sent to our server for this feature.