LinkedIn Image Generator API

Context

Needed a simple, self-hostable way to generate Open Graph images that look exactly like LinkedIn posts — for blog previews, mockups, and social media visuals. Existing solutions were either closed, cloud-only, or didn't support the level of customisation required.

Approach

• ·Built a single Next.js API route (Node.js runtime) accepting a JSON payload and returning a binary PNG
• ·Used Satori to convert a React component tree into SVG entirely server-side, with no browser or headless Chrome dependency
• ·Converted the SVG to a high-resolution PNG via @resvg/resvg-js, a Rust-based renderer
• ·Bundled Inter, SF Pro Text, Segoe UI, Roboto, and Noto Emoji fonts locally — no external font API calls at render time
• ·Implemented a lightweight markdown parser for bold, italic, links, and hashtags, plus SVG-sprite-based emoji rendering (Twemoji / Noto Color Emoji)
• ·Added a server-side height estimation algorithm to auto-size the card based on text length, emoji density, and line breaks
• ·Supported LinkedIn-style image gallery layouts (1 to 4+ attachments with overflow badge) and customisable color themes

Solution

A zero-dependency, self-hosted image generation API: POST a JSON object describing the post, receive a PNG. The entire render pipeline — markdown parsing, font loading, SVG generation, PNG conversion — runs in a single Node.js process with no external services.

Applications

• ·Open Graph image generation for blogs and websites
• ·LinkedIn post mockups for presentations
• ·Dynamic social media visual generation
• ·Programmatic content preview thumbnails