⌘ K
1200×630 og:image · canvas · 3 themes · PNG export

Generate Social Cards from Markdown

Renders an Open Graph / Twitter card directly to a canvas — three themes, auto word-wrap title — exports a 1200×630 PNG ready for og:image and twitter:image meta tags.

Social Card Generator
Size
1200×630
og spec
Title chars
39
1 lines
Subtitle
30 B
below title
Theme
dark
applied
Theme
1200×630 · og:image spec
fields · content

Title wraps automatically. Subtitle and handle stay single-line — keep them short.

canvas · dark · PNG
Quick Start

How to make a social card

Type your title, subtitle, and handle — preview redraws live, then download the PNG for your meta tags.

  1. 01

    Set the title

    Auto-wraps at ~1040px. Keep it under ~70 chars for clarity.

    Parsing runs through marked with GFM extensions enabled — tables, task lists, strikethrough, and fenced code blocks all match GitHub’s rendering.

    titleGFMmarkedCommonMarklive
    title · markdownset · GFM
    Build markdown tools…
    loaded · GFMGFM · ready
  2. 02

    Add subtitle & handle

    Subtitle sits below the title. Handle bottom-left.

    Soft-break behaviour is configurable: by default a single newline becomes a space (CommonMark), toggle on for chat-style <br> insertion.

    metasoft-breaksoptionsconfiglive
    sub · optionsok · live
    @trydevtools
    options applied · livelive
  3. 03

    Pick theme

    Dark (GitHub blue-black), light (white), or purple→blue gradient.

    The preview is scoped under a .mde class so its CSS doesn’t bleed into the rest of the page. Output HTML is whitespace-controlled for clean diffs.

    themepreviewscoped CSSrenderstable
    theme · rendereddark · ready
    dark · light · gradient
    rendered · liverendered
  4. 04

    Download PNG

    1200×630 — paste into <meta name='og:image' content='...' />.

    Export covers both raw Markdown and rendered HTML; downloads stream as text/markdown or text/html via Blob + object URL.

    saveclipboard.md.htmlblob
    ✓ · exported1200×630 · done
    ✓ og-card.png
    shipped · ready to shipsuccess
Pro tips

Author Markdown that renders everywhere

GFM is the safe default

GitHub-Flavored Markdown is the de-facto baseline (tables, task lists, strikethrough). CommonMark is stricter but ubiquitous as a fallback.

Soft-break behaviour varies

A single newline is a space in CommonMark, a <br> in GFM. Toggle soft breaks when source matters.

Escape inside code fences

Backticks inside fenced blocks need a longer fence — three becomes four. Use ~~~ if your content has many backticks.

Anchors are slugified

GitHub lowercases, strips punctuation, and joins with hyphens. Duplicate headings get -1, -2 suffixes.

Tables need a header row

The dash row sets alignment (:---, :-:, ---:). Use Table Aligner for diff-friendly columns.

Front matter is YAML

Triple-dash blocks at the top of files are parsed by static-site generators. Use the Front-Matter Validator to catch syntax errors.

Related toolsMD to ImageREADME GenMD to PDFEditorMD to HTMLGitHub Preview
Use Cases

When to ship a social card

Launches, posts, repos.

Blog posts

og:image preview improves CTR everywhere. Render path uses marked with GFM extensions enabled (tables, task lists, strikethrough, autolinks), so what you preview matches what GitHub publishes bit-for-bit. Soft-break behaviour is configurable for chat-style vs prose Markdown.

GFM-compliant

Open source repos

Custom og:image makes GitHub links pop. Pairs cleanly with the Markdown Cheatsheet for syntax you can't quite remember — callout blocks, footnotes, definition lists. Output stays diff-friendly so style-only changes don't drown out real edits in PRs.

GitHub-perfect

Launch tweets

Twitter cards render larger with a 1200×630 image. Cross-platform safe: anchors, code fences, and tables behave identically on GitHub, GitLab, Bitbucket, and Gitea. Heading-anchor slugs follow GitHub's lowercase-and-hyphenate rules so deep links survive a docs migration.

diff-friendly

Docs hubs

Per-page og:image for product docs. No server roundtrip — perfect for proprietary content you can't paste into a public tool. The full marked + GFM bundle ships with the page, so it works offline once loaded.

render-stable

Newsletter cards

Drop into Substack / Buttondown headers. Front matter (YAML / TOML / JSON) passes through unchanged so static-site pipelines (Jekyll, Hugo, Astro, Eleventy) read it correctly. Pair with the Front-Matter Validator to catch syntax errors before deploy.

cross-platform

LinkedIn posts

Branded preview on LinkedIn embeds. Output is reproducible: identical input always produces identical Markdown, so doc-generation scripts can rely on it for snapshot tests and embedded into release workflows.

SEO-friendly
FAQ

Frequently asked questions

It's the canonical og:image and Twitter summary_large_image size. Renders crisp on every platform.
Defaults to the system sans stack so text renders the same on every device. Edit the source for custom fonts.
Not in the MVP. Drop into Figma/Photoshop to add — or fork this tool.
Auto-wrap kicks in at 1040px. Keep titles under ~70 chars for two lines max.
No — drawing and PNG export run locally on a canvas in your browser.
Suggest a tool

Something missing?

Tell us what you need. We ship the top requests every two weeks.

Sent straight to the maintainers · no account needed
47 in queue·8 shipped this month
Request queued. Thanks!