Markdown in, polished social cards out.
MD2Cards turns Markdown snippets into exportable PNG and SVG cards for launches, changelogs, documentation posts, and creator updates. Paste a draft, choose a content recipe or appearance-only style pack, tune the card, then export locally from the browser.
| Launch card | Insight card | Code card |
|---|---|---|
 |
 |
 |
- Paste Markdown, import a
.md/.markdown/.txtfile, pick a paste-ready example, or start blank. - Choose a platform preset for X/Twitter, Xiaohongshu, or GitHub/launch cards.
- Apply a content recipe for launches, before/after proof, frameworks, bugfixes, changelogs, tutorials, insights, quotes, or code snippets.
- Use a visual recipe style pack to restyle the card without replacing your Markdown, or tune theme, density, type scale, typography voice, accent, background intensity, corner radius, composition/frame, texture depth, mood, shadow/depth, and export quality manually.
- Fit/check the card with line counts, character counts, safe-area guides, and exact export dimensions.
- Hide header/footer card labels when desired, then copy PNG, download PNG/SVG, or export/import recipe JSON.
The current layout keeps the control panel independently scrollable on desktop while the preview stays fixed. Getting Started is collapsed by default, export actions live beside the preview, and the GitHub star link is always available from the preview toolbar.
- GitHub-flavored Markdown rendering with headings, lists, tables, code blocks, quotes, and links.
- Platform presets for 1600 x 900 landscape, 1080 x 1440 portrait, and 1200 x 1200 square cards.
- Built-in content recipes that set content, platform, theme, appearance, and card-label visibility together.
- Appearance-only visual recipes/style packs that preserve Markdown while applying polished theme, density, type, accent, composition, texture, mood, shadow/depth, and label combinations.
- Appearance controls for density, type scale, typography voice, accent color, background intensity, corner radius, card composition/frame/code snippet mode, texture depth, visual mood, and shadow/depth.
- Local fitting helper for tightening dense Markdown to the selected platform.
- Safe-area overlay for previewing platform crops without changing exports.
- Browser-local saved presets and portable JSON card recipes.
- Clipboard PNG, PNG download, and SVG download powered by local browser rendering.
- Responsive controls and preview panels for desktop, narrow laptop, and mobile screens.
npm install
npm run devnpm run dev # Start the local web app
npm run build # Type-check and build production assets
npm run test # Run tests
npm run preview # Preview the production buildPushes to main deploy the production build to GitHub Pages at https://junbuilds96.github.io/md2cards/.
Issues and pull requests are welcome. For rendering or export changes, include a focused test or a clear manual verification note.
MIT. See LICENSE.