message-ui

Dynamic chat
attachments

Build rich chat attachments with React. Develop locally, then export PNGs for iMessage, WhatsApp, and more in one line of code.

Get startedGitHub
$ npm i @message-ui/render

What a template looks like

A template is a small React file that renders an attachment card. In the real workflow you edit the template, preview it locally, then export the same template to a PNG. Toggle to compare using the Tailwind wrapper vs inline styles.

order-card.tsx
import { Attachment, Text, Row } from "@message-ui/components";
import { Tailwind } from "@message-ui/tailwind";

export default function OrderCard() {
  return (
    <Tailwind style={{ backgroundColor: "#18181b" }}>
      <Attachment style={{ padding: 24, maxWidth: 400 }}>
        <Text style={{ fontSize: 20, fontWeight: 600, color: "#fafafa" }}>
          Your order
        </Text>
        <Row style={{ marginTop: 12 }}>
          <Text style={{ fontSize: 14, color: "#a1a1aa" }}>
            Ships today · Track in Messages
          </Text>
        </Row>
      </Attachment>
    </Tailwind>
  );
}
Preview

Your order

Ships today · Track in Messages

Start from real examples

Real exported attachments from the example app, covering commerce, health, travel, and finance scenarios.

delivery-window.tsx

Delivery update

Live order progress with ETA, courier info, and status milestones.

Delivery update
Real exported example from the `apps/example/attachments` set.
recovery-checkin.tsx

Recovery check-in

A coaching card with readiness score, key metrics, and a trend line.

Recovery check-in
Real exported example from the `apps/example/attachments` set.
gate-change.tsx

Gate change

Time-sensitive travel updates for departures, seats, and terminal changes.

Gate change
Real exported example from the `apps/example/attachments` set.
spend-pulse.tsx

Spend pulse

A weekly finance summary with totals, category context, and a spend chart.

Spend pulse
Real exported example from the `apps/example/attachments` set.

Get started

Install the packages, then run the preview to edit templates locally and export them to PNGs.

Terminal
# install
npm install @message-ui/render @message-ui/components @message-ui/tailwind

# preview locally, then export PNGs
npx message-ui dev --dir ./attachments

What you get

Primitives for attachment-style layouts, a renderer that outputs sharp PNGs, and tools to preview and export—focused on this one job, not general-purpose UI.

React components

Author attachments as React templates with the same component patterns you already use.

Live preview

Run a local preview server with template search, selection, and instant refresh on save.

PNG export

Export templates to PNGs with predictable output paths for uploads, jobs, or CI.

Layouts & charts

Use rows, sections, text, images, avatars, and charts built for dense attachment cards.

Fits into your stack

Message UI is the attachment layer: use it alongside your chat runtime, app backend, and delivery flow.

Frameworks

Chat SDK and similar

Use Message UI with frameworks like Chat SDK when you need a visual attachment layer for multi-channel chat apps.

Channels

iMessage, WhatsApp, and more

Build once in React, then render attachments for the chat surfaces where your users already spend time.

Runtime

CLI, jobs, or server routes

Run preview locally during development, then export from app routes, workers, or background jobs in production.