{"id":21251843,"url":"https://github.com/gcui-art/markdown-to-image","last_synced_at":"2025-05-14T05:10:30.318Z","repository":{"id":235231907,"uuid":"790344897","full_name":"gcui-art/markdown-to-image","owner":"gcui-art","description":"This React component is used to render Markdown into a beautiful poster image, with support for copying as an image. Md to Poster/Image/Quote/Card/Instagram/Twitter/Facebook...","archived":false,"fork":false,"pushed_at":"2025-03-05T02:49:48.000Z","size":35085,"stargazers_count":1455,"open_issues_count":13,"forks_count":136,"subscribers_count":9,"default_branch":"main","last_synced_at":"2025-05-13T14:24:36.289Z","etag":null,"topics":["card","image","markdown","poster","quote","react","render","vite"],"latest_commit_sha":null,"homepage":"https://readpo.com/poster","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/gcui-art.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":null,"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"lfx_crowdfunding":null,"polar":null,"buy_me_a_coffee":"gcui","custom":null}},"created_at":"2024-04-22T17:56:42.000Z","updated_at":"2025-05-13T09:08:38.000Z","dependencies_parsed_at":"2024-05-04T16:25:28.465Z","dependency_job_id":"088888be-140d-4753-87d6-45d33da02099","html_url":"https://github.com/gcui-art/markdown-to-image","commit_stats":null,"previous_names":["blueeon/markdown-to-poster","gcui-art/markdown-to-poster"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gcui-art%2Fmarkdown-to-image","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gcui-art%2Fmarkdown-to-image/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gcui-art%2Fmarkdown-to-image/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gcui-art%2Fmarkdown-to-image/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gcui-art","download_url":"https://codeload.github.com/gcui-art/markdown-to-image/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254076850,"owners_count":22010611,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["card","image","markdown","poster","quote","react","render","vite"],"created_at":"2024-11-21T03:44:59.289Z","updated_at":"2025-05-14T05:10:30.292Z","avatar_url":"https://github.com/gcui-art.png","language":"TypeScript","funding_links":["https://buymeacoffee.com/gcui"],"categories":["TypeScript"],"sub_categories":[],"readme":"# Markdown To Image / Markdown Poster\n\nThis React component renders Markdown as visually appealing social media images. The project also includes a built-in web editor that can be used as an online Markdown-to-poster editor with a simple one-click deployment.\n\n![markdown-to-image banner](https://github.com/user-attachments/assets/ef06f52d-ebef-4854-81b2-5b96cdfb75bf)\n\n- [English](./README.md) | [中文](./README_CN.md)\n- [DEMO \u0026 Web Editor](https://readpo.com/en/poster)\n- [Deploy Editor with Vercel](https://vercel.com/new/clone?repository-url=https://github.com/gcui-art/markdown-to-image\u0026root-directory=example\u0026project-name=markdown-to-image\u0026repository-name=markdown-to-image)\n- [NPM:markdown-to-image](https://www.npmjs.com/package/markdown-to-image)\n\n⭐ Click the Star and Watch buttons to stay updated on our latest developments.\n\n## Features\n\n- [x] Render Markdown as poster images optimized for social sharing\n- [x] One built-in templates with support for custom templates\n- [x] Customizable themes with 9 pre-built options\n- [x] Copy output as an image\n- [x] One-click deployment to platforms like Vercel\n- [x] Integrated image CORS proxy for easy insertion of online images into posters\n- [x] Copy output as HTML code for pasting into emails and editors\n- [ ] More built-in templates\n\n## Getting Started\n\nThere are two ways to use markdown-to-poster:\n\n1. Integration: markdown-to-poster is exported as a React component that can be seamlessly integrated into your projects.\n2. Using Web Editor: The example path includes a web editor that can be deployed and used as an online editor.\n\n### Integration\n\n`markdown-to-poster` exports a component called Md2Poster and three subcomponents, which can be installed via npm or other package managers.\n\n#### Installation\n\nInstall with npm:\n\n```bash\nnpm i markdown-to-image\n```\n\nInstall with pnpm:\n\n```bash\npnpm install markdown-to-image\n```\n\nyarn add markdown-to-image:\n\n```bash\nyarn add markdown-to-image\n```\n\n#### Usage\n\nBasic example:\n\n```javascript\nimport 'markdown-to-image/dist/style.css'\nimport { Md2Poster, Md2PosterContent, Md2PosterHeader, Md2PosterFooter } from 'markdown-to-image'\n\n// ...\n\nconst markdown = `\n# AI Morning Updates\n\u003e On April 29th, what's the latest in the AI field that should be on your radar?\n...\n`\n\n// ...\n\nreturn (\n  // ...\n  \u003cMd2Poster\u003e\n    \u003cMd2PosterHeader\u003ePoster Header\u003c/Md2PosterHeader\u003e\n    \u003cMd2PosterContent\u003e{markdown}\u003c/Md2PosterContent\u003e\n    \u003cMd2PosterFooter\u003ePowered by ReadPo.com\u003c/Md2PosterFooter\u003e\n  \u003c/Md2Poster\u003e\n  // ...\n)\n```\n\n### Using the Web Editor\n\n#### Official Web Editor\n\n👉 Visit: [readpo.com](https://readpo.com/en/poster)\n\n#### Deploying Your Own Web Editor\n\n[Deploy Editor with Vercel](https://vercel.com/new/clone?repository-url=https://github.com/gcui-art/markdown-to-image\u0026root-directory=example\u0026project-name=markdown-to-image\u0026repository-name=markdown-to-image)\n\n## Contributing\n\nThere are four ways you can support this project:\n\n1. Fork and Submit Pull Requests: We welcome any PRs that enhance the component or editor.\n2. Open Issues: We appreciate reasonable suggestions and bug reports.\n3. Donate: If this project has helped you, consider buying us a coffee using the Sponsor button at the top of the project. Cheers! ☕\n4. Spread the Word: Recommend this project to others, star the repo, or add a backlink after using the project.\n\n## License\n\nThis project is licensed under the permissive Apache 2.0 open source license.\n\n## Questions, Suggestions, Issues, or Bugs?\n\nWe use GitHub Issues to manage feedback. Feel free to open an issue, and we'll address it promptly.\n\n## Related Links\n\n- Our other open source projects: [Suno AI API](https://github.com/gcui-art/suno-api)\n- Demo site: [https://readpo.com/poster](https://readpo.com/en/poster)\n- NPM Package: [npm:markdown-to-image](https://www.npmjs.com/package/markdown-to-image)\n\n## FQA\n\n1. When utilizing frameworks like Next.js for server-side rendering (SSR), you may encounter the error `ReferenceError: document is not defined`. To address this issue, you can employ dynamic components with `next/dynamic`.\n\n```javascript\n// page.ts\nimport dynamic from 'next/dynamic'\nconst Editor = dynamic(() =\u003e import('@/components/Editor'), {\n  ssr: false,\n})\n```\n\n```javascript\n// Editor.tsx\nimport React from 'react'\nimport { Md2Poster, Md2PosterContent, Md2PosterHeader, Md2PosterFooter } from 'markdown-to-image'\n\nfunction Editor() {\n  const markdown = `\n# AI Morning Updates\n\u003e On April 29th, what's the latest in the AI field that should be on your radar?\n\n![image](https://imageio.forbes.com/specials-images/imageserve/64b5825a5b9b4d3225e9bd15/artificial-intelligence--ai/960x0.jpg?format=jpg\u0026width=1440)\n1. **Tech hiccups in AI car race: NTU team misses final** : Collaboration with UAE tech group faces technical challenges in international AI car race.\n2. **AI complicates kids' online safety: Parents take charge** : Rapid AI evolution poses challenges, prompting parents to take active measures for children's safety.\n3. **AI boom's secret winners: Companies fueling growth** : Investors find unique opportunities in stock market's AI boom, with certain companies driving progress.\n4. **AI redefining automation in competitive market** : AI is no longer just a buzzword, as companies across industries deploy it for competitive edge.\n5. **London private school introduces AI classes for children** : Leading school in London introduces AI lessons to help children adapt to evolving technology landscape.\n6. **China utilizes supercomputer for AI training amid chip constraints** : Progress in leveraging supercomputers and domestic AI chips for training large language models in China.\n7. **AI-Driven Age of New Media: Opportunities and Challenges** : CGTN panel discusses opportunities and challenges in the AI-driven age of new media.\n8. **Apple rumored to resume OpenAI discussions for generative AI features** : Speculations suggest Apple may collaborate with OpenAI for generative AI features on upcoming iPhones.\n9. **Tech tycoon's family office invests in AI for $10 billion fund** : Premji Invest to inject more funds into AI initiatives, supporting a $10 billion fund managed by Azim Premji.\n10. **Banks embrace Cloud and AI for innovation and partnerships** : Banking industry shifts towards innovation, collaboration, and customer-centricity through adoption of Cloud and AI technologies.\n  `\n\n  return (\n    \u003cMd2Poster theme=\"SpringGradientWave\" size=\"mobile\"\u003e\n      \u003cMd2PosterHeader className=\"flex justify-between items-center px-4\"\u003e\n        \u003cspan\u003e@Nickname\u003c/span\u003e\n        \u003cspan\u003e{new Date().toISOString().slice(0, 10)}\u003c/span\u003e\n      \u003c/Md2PosterHeader\u003e\n      \u003cMd2PosterContent\u003e{markdown}\u003c/Md2PosterContent\u003e\n      \u003cMd2PosterFooter className=\"flex justify-center items-center gap-1\"\u003eany children\u003c/Md2PosterFooter\u003e\n    \u003c/Md2Poster\u003e\n  )\n}\n\nexport default Editor\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgcui-art%2Fmarkdown-to-image","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgcui-art%2Fmarkdown-to-image","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgcui-art%2Fmarkdown-to-image/lists"}