Markdown to PNG: Input, Rendering, and Export Reference
What the browser card renderer accepts, how fixed, auto-height, and split layouts handle overflow, and what to check in a downloaded PNG.
Choose a card, not a document renderer
The direct-access Markdown to PNG tool at /tools/markdown-to-png turns pasted Markdown into a styled image card in your browser. It is not yet in the approved indexable tool set. Use it for a short release note, quote, README excerpt, or code snippet that needs a shareable PNG. Keep the editable Markdown source: the image contains pixels, not selectable text or working links. For a full document or a destination-specific Markdown dialect, review the source with Markdown Preview and in the destination editor before publishing.
Input and supported rendering
Paste text into the Markdown field, set the separate card title, then choose a size and theme. The tool also provides release-note, quote, code-snippet, README, and changelog templates. Reset sample restores the initial Markdown text without resetting the title or layout controls. The canvas parser recognizes # headings, ## and ### subheadings, paragraphs, - or * list items, > quotes, and fenced code blocks. It removes common inline link and emphasis markers while drawing their text. A link label can appear on the card, but the PNG cannot carry its target URL.
For example, a short source with a # Release note heading, two - list items, and a > reminder becomes a heading, two bullets, and a highlighted quote beneath the card title. This describes the parser's structure, not a guarantee that the card fits: font metrics, title length, and chosen size still affect the drawing.
This is a card renderer rather than a full Markdown or GitHub Flavored Markdown implementation. Ordered lists, tables, task lists, images, embedded HTML, and syntax highlighting are not rendered as rich document features. Check the canvas preview instead of assuming the destination editor and this card will interpret the same source identically.
Limits: size, overflow, and page selection
The size menu includes square (1080 × 1080), portrait (1080 × 1350), story (1080 × 1920), wide (1200 × 675), Twitter/X (1600 × 900), LinkedIn (1200 × 627), and Open Graph (1200 × 630) presets. A theme changes the colors, not the underlying Markdown rules. Inspect lettering at the size where readers will actually see the card.
| Mode | What happens | What to check |
|---|---|---|
| Fixed card | Uses the selected dimensions. If content overflows, the preview warns that the card is full and marks that content continues. | Download and copy are disabled while the card overflows. Shorten the source or choose a taller preset. |
| Auto height | Tests the rendered layout and increases canvas height as needed, up to 2600 pixels. | If content still overflows at the cap, download and copy are disabled. Check the resulting dimensions and readability before using the PNG. |
| Page split | Tests rendered fit and divides the source into pages, preferring whitespace breaks and using character breaks when needed. | Preview each page. Only the selected page is downloaded or copied; an unrenderable segment or a need for more than 30 pages disables export for the draft. |
Troubleshooting page boundaries
Page boundaries depend on the title, preset, font metrics, and actual canvas layout, not a character allowance. A split can fall inside Markdown syntax, so inspect headings, lists, quotes, and code blocks on every previewed page. Compare the last source section with the last card before publishing. If the next segment cannot fit, shorten the title or choose a taller preset. If the source needs more than 30 pages, shorten or divide it into separate drafts; the tool warns and blocks export instead of silently dropping the remainder.
Export and verify
Download PNG exports the current canvas as an image/png file named for the preset and, in split mode, the selected page. Copy image writes that PNG to the clipboard only when the browser supports image clipboard writes; an unsupported or rejected clipboard request leaves the download route available when the layout fits. Empty or whitespace-only Markdown disables both actions.
After download, open the actual file and check its pixel dimensions, final line, code block, contrast, and legibility on a phone-sized display. For split mode, save each intended page separately and confirm their order. If a receiving platform requires a smaller image, use Image Resizer on the exported PNG and compare it with the original; resizing cannot repair a broken page boundary or unreadable text. Add alt text or a readable text version in the publishing destination.
Local processing and handoff
The current tool draws and exports the card with browser canvas APIs; its Markdown input is not sent to a conversion endpoint by this component. Loading the site, delivery and security services, and measurement under the site's stated settings are separate from card rendering. Review Data handling before entering sensitive drafts. An external editor remains the better branch when the destination requires full Markdown dialect support, editable layout, or platform-specific export. The Content Publishing Workflow covers draft measurement and comparison before an optional image is prepared.