Rich Text Formatting: style your messages

Rich Text Formatting is a core feature of the CometChat React UI Kit v6 that allows users to style their messages with bold, italic, underline, strikethrough, code, links, lists, and blockquotes. It brings richer expression to conversations, helps users emphasize key points, and makes communication clearer and more engaging.

The feature is powered by two components working together: CometChat’s compact messaging composer handles composing and sending formatted messages, and the compact message list renders them with the appropriate styling applied.

What are we launching?

We are launching Rich Text Formatting as a core feature of the CometChat React UI Kit v6, available via the compact messaging composer component.

The formatting toolbar supports:

Rich text is opt-in. It is disabled by default and enabled with a single prop.

CometChat’s message list renders formatted messages automatically, displaying the bold, italic, underline, strikethrough, code, links, lists, and blockquote formatting as intended by the sender.

Why does this matter to me as a developer?

Plain text works for simple conversations. But in many products, users need to do more: highlight a key point, share a code snippet, structure a longer message, or quote something inline.

Without rich text formatting, users work around this by using asterisks, backticks, and other conventions that the UI does not actually render. The result is a worse reading experience for everyone in the conversation.

Rich Text Formatting gives users the tools to express themselves clearly, without any workaround.

For developers, the feature is built into the existing component API. There is no separate library to install, no custom renderer to build, and no additional state to manage. You enable it with one prop and the rest is handled by the UI Kit.

Key features and capabilities

Formatting toolbar

The toolbar appears in the composer and provides access to all formatting tools. Each tool also has a keyboard shortcut:

Three toolbar display modes

The toolbar supports three display modes, controlled via props:

Mobile behavior

On mobile devices, only the fixed toolbar is supported. The floating selection toolbar is automatically disabled for a better touch experience. If showToolbarOnSelection={true} is set, it falls back to the fixed toolbar on mobile.

Formatted message rendering

CometChatMessageList renders formatted messages with the appropriate styling applied. No additional configuration is needed on the list side. Senders compose with formatting; recipients see it rendered correctly.

What is interesting about the tech behind this?

Rich text is off by default

enableRichTextEditor defaults to false. This means existing integrations are not affected. You opt in explicitly, per composer instance, which makes it straightforward to enable formatting in some parts of your app and not others.

Props control display, not capability

When enableRichTextEditor is true, the formatting capability is always active. The toolbar props only control what the user sees, not what they can do. Keyboard shortcuts work even when the toolbar is hidden, so power users are never blocked.

Priority order when multiple props are set

When props conflict, they follow a defined priority:

This makes the behavior predictable regardless of how props are combined.

Reference links

Documentation: https://www.cometchat.com/docs/ui-kit/react/core-features#rich-text-formatting

Nivedita Bharathy

Product Marketing Specialist , CometChat

Nivedita Bharathy is a Product Marketing Specialist at CometChat with experience spanning AI startups, incubators, and enterprise SaaS. A Boston University graduate and avid reader, she specializes in transforming complex technology into compelling narratives that resonate with both technical and business audiences.