<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Killah</title>
    <description>The latest articles on DEV Community by Killah (@killah_nomad).</description>
    <link>https://dev.to/killah_nomad</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F4041667%2Fac6f3e2a-f188-4bf7-821d-dc862f622aa9.png</url>
      <title>DEV Community: Killah</title>
      <link>https://dev.to/killah_nomad</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/killah_nomad"/>
    <language>en</language>
    <item>
      <title>I got tired of hand-rolling Open Graph images, so I built an API for it</title>
      <dc:creator>Killah</dc:creator>
      <pubDate>Wed, 22 Jul 2026 10:18:04 +0000</pubDate>
      <link>https://dev.to/killah_nomad/i-got-tired-of-hand-rolling-open-graph-images-so-i-built-an-api-for-it-49jp</link>
      <guid>https://dev.to/killah_nomad/i-got-tired-of-hand-rolling-open-graph-images-so-i-built-an-api-for-it-49jp</guid>
      <description>&lt;p&gt;If you've ever tried to auto-generate social preview images (Open Graph cards) for a blog or SaaS, you've probably hit the same wall I did.&lt;/p&gt;

&lt;p&gt;Honestly, picking a stack for image generation feels like choosing your favorite poison:&lt;/p&gt;

&lt;p&gt;*Puppeteer/Playwright gets the job done, but maintaining headless Chromium on serverless with cold starts and mismatched font rendering is a nightmare.&lt;/p&gt;

&lt;p&gt;*@vercel/og (Satori) is super fast, but its Tailwind subset is rough. No gap utilities, no -950 colors, and instead of throwing build errors on unsupported CSS, it just silently ignores them. You only find out after rendering.&lt;/p&gt;

&lt;p&gt;*node-canvas gives you pixel perfection, but without a layout engine, you're literally hand-calculating coordinates for every piece of text.&lt;/p&gt;

&lt;p&gt;While none of these individual items are complex, each carries hidden friction that eats up your time.&lt;/p&gt;

&lt;p&gt;Full disclosure: I built Renderfy after hitting this exact wall one too many times. It's a stateless API, you POST Tailwind/HTML/Markdown (or a code snippet, chart, diagram, or LaTeX) and get back a PNG/JPEG/WebP/PDF.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Ftoxzrl2j1ciir6ma26t5.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Ftoxzrl2j1ciir6ma26t5.gif" alt=" " width="760" height="476"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;An OG image call looks like this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;curl &lt;span class="nt"&gt;-X&lt;/span&gt; POST https://renderfy.io/api/v1/render &lt;span class="se"&gt;\&lt;/span&gt;
  &lt;span class="nt"&gt;-H&lt;/span&gt; &lt;span class="s2"&gt;"Authorization: Bearer rfy_live_YOUR_KEY"&lt;/span&gt; &lt;span class="se"&gt;\&lt;/span&gt;
  &lt;span class="nt"&gt;-H&lt;/span&gt; &lt;span class="s2"&gt;"Content-Type: application/json"&lt;/span&gt; &lt;span class="se"&gt;\&lt;/span&gt;
  &lt;span class="nt"&gt;-d&lt;/span&gt; &lt;span class="s1"&gt;'{
    "type": "tailwind",
    "content": "&amp;lt;div class=\"flex h-full w-full flex-col justify-center bg-zinc-900 p-16\"&amp;gt;&amp;lt;span class=\"text-emerald-400 text-sm font-mono uppercase\"&amp;gt;Live Report&amp;lt;/span&amp;gt;&amp;lt;h1 class=\"text-6xl font-bold text-white\"&amp;gt;Revenue up 42%&amp;lt;/h1&amp;gt;&amp;lt;/div&amp;gt;",
    "options": { "format": "png", "dimensions": "og-image" }
  }'&lt;/span&gt; &lt;span class="se"&gt;\&lt;/span&gt;
  &lt;span class="nt"&gt;--output&lt;/span&gt; og-image.png
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;dimensions: "og-image" is a built-in preset that locks output to 1200×630 — the safe universal size for Facebook, LinkedIn, Slack, and X large-card previews — so you don't have to hardcode magic numbers or guess what each platform actually crops to.&lt;/p&gt;

&lt;p&gt;There's a free tier (100 credits, no card required) if you want to poke at it and a live Playground on the homepage if you'd rather try it in-browser before writing any code: &lt;a href="https://renderfy.io" rel="noopener noreferrer"&gt;https://renderfy.io&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Curious what other input types people would actually reach for here, has anyone else built their own OG-image pipeline and hit different walls than the ones above?&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>showdev</category>
      <category>api</category>
      <category>tailwindcss</category>
    </item>
  </channel>
</rss>
