{"repo":"kettanaito/remix-og-image","free":true,"listed":false,"github":"https://github.com/kettanaito/remix-og-image","clone":"git clone https://github.com/kettanaito/remix-og-image.git","description":"Build-time in-browser Open Graph image generation for Remix.","language":"TypeScript","stars":46,"topics":["generate","image","og","plugin","remix","vite","open-graph","seo"],"license":null,"category":"media-processing","readme_excerpt":"remix-og-image Build-time in-browser Open Graph image generation plugin for Remix. Motivation When I came to generating OG images for my Remix app, I realized that it's an unsolved problem. A general recommendation is to use something like Satori, which renders a React component to an SVG, and then use extra tools to convert the SVG into an image. That approach is nice, but it has some significant drawbacks. First, it's a runtime generation. It literally happens when your user's browser hits ./og-image.jpeg . It's another serverless function invocation, another compute, more latency, and all that comes with that. Second, such an approach is limited by design. You want a template for your image, and React is a great choice for that. But the only reliable way to render a React component is in the actual browser. Otherwise, you have to bring in additional resources and setup to make things work, like loading fonts, assets, etc. I really wanted a simple built-time image generation. In fact, I've been using a custom script to generate images for my blog using Playwright for years. And it worked, it just was a bit disjoined from the rest of my build. Then it occured to me: why not take my script and turn it into a Vite plugin? You are looking at that plugin right now. Features The biggest feature of this plugin is the in-browser rendering. To put it extremely briefly: you create a route for OG images, write your React component template, and the plugin knows which routes to visit d","default_branch":null,"files":null,"tree":[],"storefront":"/r/kettanaito","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/kettanaito/remix-og-image/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}