{"id":17925142,"url":"https://github.com/fabian-hiller/og-img","last_synced_at":"2025-03-24T03:31:01.537Z","repository":{"id":216383537,"uuid":"741191288","full_name":"fabian-hiller/og-img","owner":"fabian-hiller","description":"Generate dynamic Open Graph images for your website 🌠","archived":false,"fork":false,"pushed_at":"2024-04-25T16:08:24.000Z","size":52,"stargazers_count":83,"open_issues_count":0,"forks_count":1,"subscribers_count":4,"default_branch":"main","last_synced_at":"2024-05-02T05:39:42.666Z","etag":null,"topics":["html","image","open-graph","png","response","resvg","satori"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mpl-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/fabian-hiller.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-01-09T22:10:45.000Z","updated_at":"2024-04-28T14:17:45.000Z","dependencies_parsed_at":"2024-03-14T16:42:47.844Z","dependency_job_id":"67189412-4171-44fd-ab8d-6c9d5ee73538","html_url":"https://github.com/fabian-hiller/og-img","commit_stats":null,"previous_names":["fabian-hiller/og-img"],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fabian-hiller%2Fog-img","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fabian-hiller%2Fog-img/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fabian-hiller%2Fog-img/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fabian-hiller%2Fog-img/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fabian-hiller","download_url":"https://codeload.github.com/fabian-hiller/og-img/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245204470,"owners_count":20577355,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["html","image","open-graph","png","response","resvg","satori"],"created_at":"2024-10-28T20:52:51.260Z","updated_at":"2025-03-24T03:31:01.279Z","avatar_url":"https://github.com/fabian-hiller.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# og-img\n\nThis is a framework agnostic package for generating Open Graph images using [Satori](https://github.com/vercel/satori) and [resvg](https://github.com/RazrFalcon/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.\n\n\u003e The difference to `@vercel/og` is 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 using [`satori-html`](https://github.com/natemoo-re/satori-html).\n\n## Installation\n\nThis library is available for Node and Bun.\n\n```bash\nnpm install og-img    # npm\nyarn add og-img       # yarn\npnpm add og-img       # pnpm\nbun add og-img        # bun\n```\n\n## How it works\n\nTo 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.\n\n\u003e To get proper syntax highlighting for the tagged template literal in Visual Studio Code, you can install the [lit-html](https://marketplace.visualstudio.com/items?itemName=bierner.lit-html) extension.\n\n```ts\nimport { fetchFont, ImageResponse, html } from 'og-img';\n\n// With SvelteKit\nexport async function GET() {\n  return new ImageResponse(\n    // Use Tailwind CSS or style attribute\n    html`\n      \u003cdiv tw=\"text-4xl text-green-700\" style=\"background-color: tan\"\u003e\n        Hello, world!\n      \u003c/div\u003e\n    `,\n    {\n      width: 1200,\n      height: 600,\n      fonts: [\n        {\n          name: 'Roboto',\n          // Use `fs` (Node.js only) or `fetch` to read font file\n          data: await fetchFont('https://www.example.com/fonts/roboto-400.ttf'),\n          weight: 400,\n          style: 'normal',\n        },\n      ],\n    }\n  );\n}\n\n// With Qwik\nexport const onGet = async ({ send }) =\u003e {\n  send(\n    new ImageResponse(\n      // Use Tailwind CSS or style attribute\n      html`\n        \u003cdiv tw=\"text-4xl text-green-700\" style=\"background-color: tan\"\u003e\n          Hello, world!\n        \u003c/div\u003e\n      `,\n      {\n        width: 1200,\n        height: 600,\n        fonts: [\n          {\n            name: 'Roboto',\n            // Use `fs` (Node.js only) or `fetch` to read font file\n            data: await fetchFont(\n              'https://www.example.com/fonts/roboto-400.ttf'\n            ),\n            weight: 400,\n            style: 'normal',\n          },\n        ],\n      }\n    )\n  );\n};\n```\n\nThen 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.\n\n```html\n\u003chead\u003e\n  \u003ctitle\u003eHello, world!\u003c/title\u003e\n  \u003cmeta property=\"og:image\" content=\"https://www.example.com/og-image\" /\u003e\n\u003c/head\u003e\n```\n\nYou can use URL parameters to dynamically change the content of your Open Graph image. Take a look at [Valibot's Open Graph image](https://valibot.dev/og-image/?title=Example%20Title\u0026description=The%20content%20of%20this%20image%20was%20generated%20dynamically). You can find the source code [here](https://github.com/fabian-hiller/valibot/blob/main/website/src/routes/og-image/index.ts).\n\n## Credits\n\n- Satori: https://github.com/vercel/satori\n- Satori HTML: https://github.com/natemoo-re/satori-html\n- resvg: https://github.com/RazrFalcon/resvg\n- resvg-js: https://github.com/yisibl/resvg-js\n\n## Feedback\n\nFind a bug or have an idea how to improve the library? Please fill out an [issue](https://github.com/fabian-hiller/og-img/issues/new). Together we can make the library even better!\n\n## License\n\nThis project is available free of charge and licensed under the [MPL-2.0 license](https://github.com/fabian-hiller/og-img/blob/main/LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffabian-hiller%2Fog-img","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffabian-hiller%2Fog-img","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffabian-hiller%2Fog-img/lists"}