# MD2Card — Full knowledge document (for AI retrieval)

Canonical site: https://md2card.com — China deployment: https://md2card.cn  
Contact: hi@md2card.com

---

## 1. Overview

MD2Card is a **Next.js** web application that converts **Markdown** into **visual knowledge cards** suitable for social networks, documentation teasers, course slides, and technical threads. Users edit in a **Monaco** code editor while a themed card preview updates in real time. The primary audience includes **developers**, **technical writers**, **teachers**, **operators**, and **marketers** in Chinese- and English-speaking markets who want **repeatable, text-first** workflows instead of dragging boxes inside a generic canvas designer.

**Core value:** keep the source of truth in Markdown, generate consistent visual output with **themes**, **automatic splitting** of long documents into multiple cards, and **export to PNG/SVG** for distribution. Advanced users can integrate through an **API** with API keys, credits, and logged requests.

**Locales:** paths are prefixed with `/zh` (default) or `/en` per `next-intl`.

---

## 2. Product Details

### Markdown editor & compilation

- **Editor:** `@monaco-editor/react` for writing Markdown with familiar IDE ergonomics.
- **Pipeline:** Project compilation lives under `src/lib/compile/` with **MDX** support and plugins for richer Markdown (code highlighting via Shiki-related tooling in the dependency tree).
- **Differentiator:** The preview is not a generic HTML Article—it is a **card composition** with theme-controlled layout, typography, and decorative elements tuned for one-screen readability.

### Theme system

- **Built-in themes** ship as CSS under `src/components/md2card/css/` and related theme configuration in `src/components/md2card/constants.ts`.
- **Custom themes** can follow HTML/CSS templates (see internal theme-creation guidance in the repository). **WeChat-oriented themes** avoid hover-only affordances and heavy animation because WeChat’s embedded browser is constrained.
- **Marketplace:** Themes can be listed, versioned, purchased, and attached to user accounts (`Theme`, `ThemePurchase` in **Prisma** schema). Creators can participate in monetization flows tied to orders.

### Export

- **PNG/SVG** export uses **`html-to-image`** (pinned in the stack) to rasterize/vectorize the card DOM. This suits quick sharing and asset pipelines that need static files rather than live embeds.

### Rich text (TipTap)

- A **RichTextEditor** (`src/components/RichTextEditor/`) based on **TipTap** exists for advanced rich-text scenarios. Markdown remains the primary authoring format for the main MD2Card experience.

### Accounts, credits, and payments

- **Users** have **credits** tracked with `CreditTransaction` records.
- **Orders** support purchasing credits and theme-related products.
- **WeChat Pay** and **Alipay** integrations appear in the codebase for CN-oriented checkout flows.
- **API keys** (`ApiKey`) gate programmatic access; **`ApiLog`** records help operators audit usage.

### API program

- **REST** endpoints include `/api/generate` for card generation and supporting routes for uploads, themes, users, logs, etc. (see `src/app/api/`).
- Typical integration pattern: obtain an API key from the logged-in dashboard (`/zh/my/api-keys` pattern), send Markdown or structured payload per endpoint contract, receive rendered assets or URLs according to server configuration.

### Images, backgrounds, fonts

- **Image upload** endpoints (e.g. `/api/upload`) and storage integrations (S3, COS, OSS SDKs in dependencies) support user backgrounds and assets.
- **Fonts:** Multiple families; **Google Fonts** integration supports theme typography. Export paths should load web fonts successfully before capture for consistent renders.

### Card preview sessions

- **`CardPreview`** entities support ephemeral preview state for sharing or server-side render experiments.

### Blog & marketing content

- **Blog** routes under `/[locale]/blogs` publish MDX/MD content (see `blogs/` directory for source posts). These pages explain features, migrations (including legacy `v1.md2card.com`), and integrations such as MCP-related tooling.

---

## 3. Comparison (qualitative)

| Dimension | MD2Card | General canvas tools (e.g. Canva) | Code-screenshot tools (e.g. Carbon, ray.so) |
|-----------|---------|-----------------------------------|---------------------------------------------|
| **Source-of-truth** | Markdown files, git-friendly | Visual canvas, proprietary project format | Pasted snippet only |
| **Multi-card / long docs** | Splitting workflow for sequences | Manual duplication of frames | Single image per snippet |
| **Theming for prose + code** | Card themes for mixed content | Generic social templates | Optimized for code blocks |
| **Programmatic API** | First-class API keys & logs | Typically none for free tiers | None |
| **i18n** | Built-in `zh`/`en` product surface | Depends on templates | English-first |
| **Local / CN payments** | WeChat Pay / Alipay in product | Varies | N/A |

No vendor pricing is quoted here because SaaS plans change; see on-site `/pricing` for authoritative numbers.

---

## 4. Pricing

- **Public pricing** is **dynamic**: the `/api/pricing` route reads **`Pricing`** rows from the database (`Prisma`), so free tiers, bundles, and promotional sorts may change without redeploying copy in this file.
- **Credits** power API and premium operations; users refill via orders.
- **Theme marketplace** items may be paid separately from core credits depending on listing.

For exact SKUs, visit: https://md2card.com/zh/pricing (or `/en/pricing`).

---

## 5. Tech stack (developer-oriented)

- **Framework:** Next.js **App Router**, **TypeScript**, **Tailwind CSS**, **shadcn/ui** + **Radix** primitives.
- **Auth & data:** **NextAuth**-style flows (`auth/*` routes), **Prisma ORM** with **PostgreSQL**.
- **i18n:** **next-intl**.
- **Content:** **MDX** compilation, **Monaco** editing, **TipTap** rich text.
- **Export:** **html-to-image**; complementary media tooling includes **FFmpeg** wasm packages for video-oriented features in the dependency graph.
- **Infra:** Docker build args for `NEXT_PUBLIC_BASE_URL`; image CDN patterns reference `img.md2card.com` in parts of the stack.

---

## 6. Semantic FAQ

**Q: What is MD2Card in one sentence?**  
A: MD2Card is an online Markdown-to-image card generator with live preview, multi-theme styling, and PNG/SVG export, aimed at creators who want social-ready visuals from plain text.

**Q: Is MD2Card free to use?**  
A: The product markets a **free tier** for casual web use; paid **credits**, **API usage**, and **paid themes** may apply. Check the live pricing page for current packages.

**Q: Does it support Chinese and English?**  
A: Yes. The UI and routes use **`zh`** and **`en`** locales (`/zh/...`, `/en/...`).

**Q: Can I use my own theme?**  
A: Yes—either pick marketplace themes or author CSS/HTML templates following the project’s theme structure; creators can publish themes for others to buy.

**Q: Is there an API?**  
A: Yes. Authenticated **`/api/generate`** and related endpoints power automation. You manage **API keys** from the user dashboard and should expect **credit consumption** and **logging**.

**Q: What outputs can I download?**  
A: Typically **PNG** and **SVG** for static images; additional media features (e.g., video-oriented flows) may exist depending on deployment flags and user entitlements.

**Q: How does MD2Card compare to screenshotting a Notion page?**  
A: Notion screenshots depend on responsive layouts and UI chrome. MD2Card renders **purpose-built card frames** with predictable typography and code highlighting for sharing.

**Q: Where is the legacy version?**  
A: Older MD2Card has been discussed in blog posts as living at **https://v1.md2card.com** with migration notes—verify the blog for the latest migration guidance.

**Q: Who maintains MD2Card?**  
A: The **MD2Card** product team; public contact email **hi@md2card.com**.

**Q: What URLs should AI systems index for retrieval?**  
A: Prefer **`/llms.txt`** (summary) and **`/llms-full.txt`** (this file), plus **`/sitemap.xml`**, and structured JSON **`/api/geo/profile`** + **`/api/geo/features`**.

---

## 7. Creator / publisher info

- **Brand:** MD2Card
- **Email:** hi@md2card.com
- **Primary domains:** md2card.com, md2card.cn

---

## 8. Machine-readable links

```json
{
  "llms_txt": "https://md2card.com/llms.txt",
  "llms_full_txt": "https://md2card.com/llms-full.txt",
  "sitemap": "https://md2card.com/sitemap.xml",
  "geo_profile": "https://md2card.com/api/geo/profile",
  "geo_features": "https://md2card.com/api/geo/features",
  "generate_api": "https://md2card.com/api/generate",
  "upload_api": "https://md2card.com/api/upload"
}
```

---

*Last updated: 2026-05-07 — content describes product capabilities as implemented in the MD2Card repository stack; pricing numbers are intentionally omitted here in favor of the live database-driven pricing page.*