CometChat Card Renderer

A vanilla TypeScript renderer for the CometChat Card Schema. Pass in card JSON, get back a native DOM element tree. Taps on interactive elements are emitted to your app through a single callback — the package never executes actions itself.

What it does

• Parses Card Schema JSON into typed models
• Renders 20 element types (text, image, icon, avatar, badge, divider, spacer, chip, progressBar, codeBlock, markdown, row, column, grid, accordion, tabs, button, iconButton, link, table)
• Resolves theme-aware colors and image URLs for auto, light, and dark modes, with optional theme overrides
• Emits clicks on buttons, icon buttons, and links to your callback as typed CometChatCardActionEvents

The package is a pure renderer. It doesn't talk to the CometChat SDK, doesn't manage message lifecycle, and doesn't know about your app's routing. You decide what each action does.

Installation

npm install @cometchat/cards

Usage

import { renderCard } from "@cometchat/cards";

const { element, containerStyle, destroy } = renderCard({
  cardJson,
  themeMode: "auto",
  onAction: (event) => {
    console.log("action:", event.action.type, "from", event.elementId);
  },
});

document.getElementById("card-root")!.appendChild(element);

// Later, when unmounting:
destroy();

The destroy function cleans up the system-theme media query listener used in auto mode.

React Wrapper

For React projects, use @cometchat/cards-react which provides a CometChatCardView component that wraps this package.

Getting Started

Refer to the Integration Steps to integrate the cards into your app.

Prerequisites

• Node.js >= 14.17.0
• npm >= 7

Help and Support

For integration issues, create a support ticket or seek real-time support via the CometChat Dashboard.