message-ui

Message UI is a TypeScript library for building rich image attachments that can be sent through chat platforms like iMessage or WhatsApp. The idea is similar to how React Email works for email newsletters: you design a message card using React components, preview it in a browser with live reloading while you edit, and then export it as a PNG image your application can attach to a message. This makes it possible for chat bots and automated agents to send formatted cards with layouts, charts, and styled text rather than plain strings.

The library ships as several packages you install from npm. One package provides the building blocks for composing attachment layouts, including text elements, rows, sections, headings, images, avatars, dividers, lists, line charts, donut charts, and activity rings. A separate render package converts a React component into an SVG or PNG image using Satori and Resvg, which are tools for rendering web-style layouts without a browser. A Tailwind wrapper lets you style templates using the Tailwind utility class system. A command-line tool handles local previewing and batch exports.

To use it, you write an attachment as a standard React component, run the dev server to see a live preview in your browser, and then call a render function in your backend code when you need to produce the actual PNG. The exported image can be uploaded, stored, or attached directly to a message through whatever delivery system your app already uses. The README notes it is designed to work alongside existing chat frameworks rather than replace them.

Message UI is released under the MIT license.