[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-82865":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":8,"language":10,"languages":8,"totalLinesOfCode":8,"stars":11,"forks":12,"watchers":13,"openIssues":14,"contributorsCount":14,"subscribersCount":14,"size":14,"stars1d":15,"stars7d":16,"stars30d":17,"stars90d":14,"forks30d":14,"starsTrendScore":18,"compositeScore":19,"rankGlobal":8,"rankLanguage":8,"license":8,"archived":20,"fork":20,"defaultBranch":21,"hasWiki":22,"hasPages":20,"topics":23,"createdAt":8,"pushedAt":8,"updatedAt":24,"readmeContent":25,"aiSummary":26,"trendingCount":14,"starSnapshotCount":14,"syncStatus":13,"lastSyncTime":27,"discoverSource":28},82865,"message-ui","pontusab\u002Fmessage-ui","pontusab",null,"https:\u002F\u002Fmessage-ui.com","TypeScript",77,5,2,0,1,6,9,4,2.33,false,"main",true,[],"2026-06-12 02:04:28","\u003Cp align=\"center\">\n  \u003Cimg src=\".\u002Fapps\u002Fweb\u002Fpublic\u002Fog.png\" alt=\"Message UI — Dynamic message attachments\" width=\"100%\" \u002F>\n\u003C\u002Fp>\n\n# Message UI\n\n**Dynamic message attachments, built with React.**\n\nMessage UI is React Email for message attachments. Author rich attachment cards as\nReact components, preview them locally with hot reload, then export the same template to a\nPNG you can send through iMessage, WhatsApp, and other chat surfaces — perfect for chat\nbots and agents that need to send more than plain text.\n\n## Install\n\n```bash\nnpm install @message-ui\u002Frender @message-ui\u002Fcomponents @message-ui\u002Ftailwind\n```\n\n## Quick start\n\nWrite an attachment as a React component:\n\n```tsx\nimport { Attachment, Text, Row } from \"@message-ui\u002Fcomponents\";\n\nexport default function OrderCard() {\n  return (\n    \u003CAttachment style={{ padding: 24, maxWidth: 400, backgroundColor: \"#18181b\" }}>\n      \u003CText style={{ fontSize: 20, fontWeight: 600, color: \"#fafafa\" }}>Your order\u003C\u002FText>\n      \u003CRow style={{ marginTop: 12 }}>\n        \u003CText style={{ fontSize: 14, color: \"#a1a1aa\" }}>Ships today · Track in Messages\u003C\u002FText>\n      \u003C\u002FRow>\n    \u003C\u002FAttachment>\n  );\n}\n```\n\nPreview your templates locally with live reload:\n\n```bash\nnpx message-ui dev --dir .\u002Fattachments\n```\n\nExport a template to a PNG from a script, server route, or job:\n\n```ts\nimport { renderToPng } from \"@message-ui\u002Frender\";\nimport OrderCard from \".\u002Fattachments\u002Forder-card\";\n\nconst png = await renderToPng(\u003COrderCard \u002F>, { width: 800, height: 800 });\n\u002F\u002F upload, attach, or write to disk\n```\n\n## How it works\n\n- **Author** attachments as React templates with the component patterns you already use.\n- **Preview** locally — `message-ui dev` serves a browser preview with search and instant refresh on save.\n- **Export** the same template to sharp PNGs via [Satori](https:\u002F\u002Fgithub.com\u002Fvercel\u002Fsatori) + Resvg, with predictable output paths.\n\n## Packages\n\n| Package | Description |\n| --- | --- |\n| `@message-ui\u002Fcomponents` | Attachment primitives — `Attachment`, `Row`, `Section`, `Text`, `Heading`, `Image`, `Avatar`, `Divider`, `List`, `LineChart`, `DonutChart`, `ActivityRings`, and more. |\n| `@message-ui\u002Frender` | Renders React elements to SVG\u002FPNG with `renderToPng` and `renderToSvg`. |\n| `@message-ui\u002Ftailwind` | `Tailwind` wrapper for styling templates. |\n| `@message-ui\u002Fpreview` | Local preview server used by the CLI. |\n| `@message-ui\u002Fcli` | `message-ui dev` and `message-ui export` commands. |\n\n## Works with your stack\n\nMessage UI is the attachment layer. Use it alongside your chat runtime, app backend, and\ndelivery flow — including frameworks like [Chat SDK](https:\u002F\u002Fchat-sdk.dev\u002F) when you need a\nvisual attachment layer for multi-channel chat apps.\n\n## License\n\nMIT © [@pontusab](https:\u002F\u002Fx.com\u002Fpontusab)\n","Message UI 是一个基于 React 构建的动态消息附件生成工具。它允许开发者使用熟悉的 React 组件模式来创建丰富的消息卡片，并提供了本地预览、热重载以及将模板导出为 PNG 图片的功能，适用于需要发送图文消息的聊天机器人或客服系统。通过 `@message-ui\u002Fcomponents` 提供的基础组件库和 `@message-ui\u002Frender` 的渲染能力，用户可以轻松设计并测试其消息模板。此外，借助于 Satori 和 Resvg 技术的支持，确保了输出图片的质量与一致性。此项目特别适合那些希望在 iMessage、WhatsApp 等即时通讯平台上提供更丰富用户体验的应用场景。","2026-06-11 04:09:27","CREATED_QUERY"]