Markdown to Image: Turn READMEs, Code Snippets and Release Notes into Social Cards Programmatically
You can turn a Markdown changelog or README snippet into a branded social card with one API call, but most tools force you to choose between watermarked free converters, self-hosted React components, or APIs with no reusable branding. MarkupGo gives you two paths: a direct API call with custom CSS, or a no-code Magic Template URL that caches for 15 days [1].
Where existing Markdown-to-image tools fall short
Free converters like MarkdownToImage watermark outputs and cap APIs at 50 requests/month. Their Markdown to Cards tool splits long-form content by H2 headers and offers batch download, but watermark-free export requires signing in and spending export credits. The service reports 2.4 million images rendered with 184ms p50 latency, yet the free tier is too restrictive for any automated workflow.
Self-hosted React components such as gcui-art/markdown-to-image give you Md2Poster, Md2PosterContent, Md2PosterHeader and Md2PosterFooter exports to assemble poster layouts [2]. You import the package CSS and render markdown strings inside your component tree [2]. This works until you need server-side generation, background jobs, or sharing rendered images across services — then you are managing a browser or canvas runtime yourself.
Newer APIs like ScreenshotRun let developers generate a social card per blog post with one call, adding brand colors via a css parameter. Their markdown parameter accepts up to 500,000 characters. However, full_page: true with long markdown produces roughly 8,000-pixel-tall images for a 3,000-word changelog, and syntax highlighting for code blocks requires converting markdown to HTML with Prism or Shiki first because the markdown renderer does not color-code. Custom fonts need a Google Fonts import through the css parameter. There is no template engine for repeated layouts.
API path: Convert Markdown to a styled PNG or WebP with the Node client
Install the MarkupGo Node client and call markupgo.image.fromMarkdown with markdown, css, dark, and padding inputs [3]. The method returns a task via .json() or raw image data via .buffer() [3].
import MarkupGo from "markupgo-node";
import * as fs from "fs";
const markupgo = new MarkupGo({ API_KEY: "your_api_key_here" });
const input = {
markdown: `## v2.4.0 — Async batch exports
- Added \`fromMarkdown\` to the Node client
- Reduced cold-start latency for template renders
- Dark mode now respects \`prefers-color-scheme\` in custom CSS`,
css: `
body { background: #0f172a; color: #e2e8f0; font-family: system-ui; }
h2 { color: #38bdf8; margin-bottom: 12px; }
code { background: #1e293b; padding: 2px 6px; border-radius: 4px; }
ul { line-height: 1.6; }
`,
dark: true,
padding: 40,
};
const options = {
properties: {
format: "png",
width: 1200,
height: 630,
},
};
markupgo.image.fromMarkdown(input, options).json()
.then(task => console.log(task.url));
markupgo.image.fromMarkdown(input, options).buffer()
.then(buffer => fs.writeFileSync("changelog-card.png", Buffer.from(buffer)));
Set format to png, jpeg or webp, and configure width and height for fixed-size social cards [4]. The CSS ships with every request, so you can iterate on brand colors, fonts, and code block formatting without redeploying anything. For dark mode cards, set dark: true and override with your own color scheme in the css field.
No-code path: Build a reusable Magic Template URL for repeated social cards
Create a branded card template once in the MarkupGo dashboard with HTML, CSS, and a context object for dynamic content [5]. Templates are reusable HTML, CSS and JavaScript snippets where html, css, context, format, width and height can be overridden at generation time [5].
Generate images by injecting markdown content as query parameters into render.markupgo.com/template/{id}.png [1]. The same URL within 15 days returns the cached image without consuming credits [1]. Use json=true to fetch the task JSON server-side when you need the image URL programmatically [1]. Supported extensions are png, jpeg, webp and pdf [1].
A template for release notes might look like this in the dashboard:
<!-- HTML -->
<div class="card">
<div class="version">{{version}}</div>
<div class="content">{{{markdown}}}</div>
<div class="footer">{{repo}} · {{date}}</div>
</div>
<!-- CSS -->
.card { width: 1200px; height: 630px; background: #0f172a; padding: 60px; }
.version { color: #38bdf8; font-size: 48px; font-weight: 700; }
.content { color: #e2e8f0; font-size: 24px; margin-top: 32px; line-height: 1.5; }
.footer { color: #64748b; font-size: 16px; margin-top: 48px; }
The Magic URL for a specific release:
https://render.markupgo.com/template/abc123.png?version=v2.4.0&markdown=##%20Async%20batch%20exports%0A-%20Added%20fromMarkdown%0A-%20Reduced%20cold-start%20latency&repo=markupgo-node&date=2026-10-13
For server-side fetching where you need to store or proxy the image URL:
// see Markupgo's API reference for authentication headers
fetch('https://render.markupgo.com/template/abc123.png?version=v2.4.0&markdown=...&json=true')
.then(r => r.json())
.then(task => {
// task.url contains the cached image location
console.log(task.url);
});
Override html, css, context, format, width, and height at generation time if you need a one-off variant [5].
Practical patterns for changelog cards, README snippets, and testimonial quotes
Changelog-to-card: pipe release notes Markdown into a template with version headers styled as card titles. Split long changelogs by H2 headers if needed, generating one card per section. The fixed 1200×630 dimensions keep Open Graph parsers happy.
README-snippet card: extract a section by heading from your docs and render it with your brand colors. Pass the extracted markdown into fromMarkdown with CSS that matches your documentation site palette. This is faster than screenshotting a live page and avoids CORS issues with client-side rendering.
Testimonial or quote card: use template context for author name and role instead of raw Markdown, keeping layout consistent. The quote text can live in a {{quote}} variable while the author metadata fills {{name}} and {{title}}. This separates content from presentation and lets non-technical team members generate cards by tweaking URL parameters.
Pricing and where to start
MarkupGo offers a perpetual free trial of 100 credits monthly with no credit card required [4]. Paid plans run Lite at $29/month for 2,000 credits and 5 templates, Plus at $49/month for 10,000 credits and 30 templates, and Pro at $99/month for 20,000 credits with unlimited templates [4].
A single changelog card costs one credit. Cached Magic URLs cost nothing for 15 days, so a pinned release note or an evergreen README badge does not recur against your quota [1]. Start with the free trial, prototype a card with fromMarkdown, and move to a Magic Template once you have a layout you reuse weekly.