This is a framework agnostic package for generating Open Graph images using Satori and resvg. Built using Web APIs, this package can be executed with Node.js and on the edge. You can use this package to add dynamic Open Graph images to your SvelteKit, Astro, SolidStart or Qwik website.
The difference to
@vercel/ogis that this package loads the WebAssembly module needed to convert SVG to PNG lazily at runtime and provides a framework agnostic workaround for defining the content of the image usingsatori-html.
This library is available for Node and Bun.
npm install og-img # npm
yarn add og-img # yarn
pnpm add og-img # pnpm
bun add og-img # bun
To generate an image, all you need to do is return an ImageResponse via a server endpoint (it probably will not work with SSG). You can use html to easily define the content of your image.
To get proper syntax highlighting for the tagged template literal in Visual Studio Code, you can install the lit-html extension.
import { fetchFont, ImageResponse, html } from 'og-img';
// With SvelteKit
export async function GET() {
return new ImageResponse(
// Use Tailwind CSS or style attribute
html`
<div tw="text-4xl text-green-700" style="background-color: tan">
Hello, world!
</div>
`,
{
width: 1200,
height: 600,
fonts: [
{
name: 'Roboto',
// Use `fs` (Node.js only) or `fetch` to read font file
data: await fetchFont('https://www.example.com/fonts/roboto-400.ttf'),
weight: 400,
style: 'normal',
},
],
}
);
}
// With Qwik
export const onGet = async ({ send }) => {
send(
new ImageResponse(
// Use Tailwind CSS or style attribute
html`
<div tw="text-4xl text-green-700" style="background-color: tan">
Hello, world!
</div>
`,
{
width: 1200,
height: 600,
fonts: [
{
name: 'Roboto',
// Use `fs` (Node.js only) or `fetch` to read font file
data: await fetchFont(
'https://www.example.com/fonts/roboto-400.ttf'
),
weight: 400,
style: 'normal',
},
],
}
)
);
};
Then all you need to do is point to your API endpoint with a meta tag in the head of your website to embed the Open Graph image.
<head>
<title>Hello, world!</title>
<meta property="og:image" content="https://www.example.com/og-image" />
</head>
You can use URL parameters to dynamically change the content of your Open Graph image. Take a look at Valibot's Open Graph image. You can find the source code here.
Find a bug or have an idea how to improve the library? Please fill out an issue. Together we can make the library even better!
This project is available free of charge and licensed under the MPL-2.0 license.
v0.2.1 (April 25, 2024)
FAQs
Generate dynamic Open Graph images for your website
The npm package og-img receives a total of 89 weekly downloads. As such, og-img popularity was classified as not popular.
We found that og-img demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
OpenSSF has published OSPS Baseline, an initiative designed to establish a minimum set of security-related best practices for open source software projects.
Security News
Michigan TypeScript founder Dimitri Mitropoulos implements WebAssembly runtime in TypeScript types, enabling Doom to run after processing 177 terabytes of type definitions.
Security News
vlt's new "reproduce" tool verifies npm packages against their source code, outperforming traditional provenance adoption in the JavaScript ecosystem.