webdevpuneet.com

Related Snippets

147 in Cards category
1–6 of 60

WOW.js Staggered Testimonial Wall

WOW.js Scroll Reveal Cards

Popmotion Swipe-Dismiss Stack

Popmotion Drag Inertia Card

AutoAnimate Filter Grid

CountUp.js Stat Cards

Chat Message Bubbles — HTML CSS JS Snippet

Chat Message Bubbles with Read Receipts · Cards · Plain HTML, CSS & JS · Live preview

CategoryCards
TagsSVGCSS AnimationSocial UI

Copy & paste

Source Code

<div class="demo">
  <div class="thread" id="thread">
    <div class="day-divider"><span>Today</span></div>
    <div class="msg-row them">
      <div class="avatar">JN</div>
      <div class="bubble-group">
        <div class="bubble">Hey! Did you get a chance to look at the designs?</div>
        <div class="bubble">No rush, just checking in</div>
        <div class="meta">9:14 AM</div>
      </div>
    </div>
    <div class="msg-row me">
      <div class="bubble-group">
        <div class="bubble">Yep, looking now 👀</div>
        <div class="meta">Sent <span class="tick tick-read">✓✓</span> · 9:16 AM</div>
      </div>
    </div>
    <div class="msg-row them">
      <div class="avatar">JN</div>
      <div class="bubble-group">
        <div class="bubble">Take your time, no deadline on this one</div>
        <div class="meta">9:17 AM</div>
      </div>
    </div>
    <div class="msg-row me">
      <div class="bubble-group">
        <div class="bubble">Sounds good, I'll send feedback by EOD</div>
        <div class="meta">Delivered <span class="tick">✓</span> · 9:18 AM</div>
      </div>
    </div>
    <div class="typing-row" id="typingRow" hidden>
      <div class="avatar">JN</div>
      <div class="bubble typing-bubble"><span></span><span></span><span></span></div>
    </div>
  </div>
  <form class="composer" onsubmit="return sendMsg(event)">
    <input type="text" id="msgInput" placeholder="Type a message..." autocomplete="off">
    <button type="submit" aria-label="Send">
      <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M2 21l21-9L2 3v7l15 2-15 2v7z"/></svg>
    </button>
  </form>
</div>

Extend with AI

Take This Snippet Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.

· Become a supporter

What's included

Features

Asymmetric border-radius bubble tails — no SVG or pseudo-element shapes needed
Consecutive messages from the same sender group under one avatar and timestamp
Read-receipt ticks (delivered vs. read) as a simple CSS class toggle
Animated three-dot typing indicator with staggered bounce timing
Day-divider pills separating the thread by date
Auto-scroll to the newest message on every send
Message text inserted via textContent, safe against HTML injection from user input
Zero dependencies — pure HTML, CSS, and JavaScript

About this UI Snippet

Chat Message Bubbles — Grouped Threads, Read Receipts & Typing Indicator

Screenshot of the Chat Message Bubbles with Read Receipts snippet rendered live

A chat interface is more than styled speech bubbles — the details that make one feel real are message grouping, delivery status, and a typing indicator that appears and disappears at the right moments. This snippet builds all three on top of plain flexbox, matching the visual language of iMessage and WhatsApp.

Bubble tails via asymmetric border-radius

Rather than an SVG or pseudo-element tail, each bubble uses border-radius: 16px with one corner overridden: incoming bubbles get border-bottom-left-radius: 4px, outgoing bubbles get border-bottom-right-radius: 4px. The sharp corner sits nearest the avatar, which is what visually "points" the bubble at its sender without any extra markup.

Grouping consecutive messages

When the same sender posts multiple messages in a row, only the first carries the full rounded top corners — a CSS rule targets .bubble:not(:first-child) within a group to restore the top-left radius on any bubble after the first, since the group's first bubble is the only one that should have a soft top. Combined with the shared .bubble-group wrapper only showing one timestamp per group instead of one per bubble, this is what makes rapid-fire messages read as one thought instead of a wall of separate boxes.

Read receipts

Each outgoing message's .meta line renders a status word ("Sent" or "Delivered") plus a checkmark. A single check in gray means delivered; a double check in green (.tick-read) means read. This is purely a CSS class toggle — in a real app, flip .tick to .tick-read when your backend's read-receipt event for that message arrives, typically over a WebSocket.

Day dividers

A centered pill (.day-divider) breaks the thread into date groups, matching the convention in every major chat app. In a real implementation, insert one whenever a message's date differs from the previous message's date, computed by comparing toDateString() on consecutive timestamps.

The typing indicator

Three dots inside a bubble-shaped container animate with a shared @keyframes bounce, offset by animation-delay of 0s, 0.15s, and 0.3s so they ripple rather than bounce in unison — the same staggering technique used by loading-dot spinners elsewhere in this library. The row is toggled via the hidden attribute rather than being added and removed from the DOM, so no layout thrash occurs each time it appears.

Sending flow

sendMsg() prevents the form's default submission, builds a new .msg-row via addMessage(), and inserts it with insertBefore(row, typingRow) — always right before the typing indicator's row rather than at the end of the thread, so the typing bubble (when shown) stays visually last. scrollToBottom() runs after every insertion by setting thread.scrollTop = thread.scrollHeight, keeping the newest message in view the way every chat app auto-scrolls.

Simulated reply for the demo

simulateReply() shows the typing indicator after a short delay, waits, then hides it and inserts a reply — standing in for a real WebSocket or polling connection. In production, the typing indicator's visibility should be driven by a "user is typing" event from your backend, not a fixed timeout, and the actual reply should come from your message stream rather than a hardcoded string.

XSS safety

Message text is written using .textContent, never innerHTML, on the dynamically created bubble — the only innerHTML usage builds the surrounding structural markup (avatar, meta), never the user-authored message body, which is the detail that keeps a chat UI safe when real user input flows through it.

See also the chat conversation list for the inbox view this thread would open from, and the AI chat interface for a variant built around a single assistant rather than a peer-to-peer conversation.

Step by step

How to Use

  1. 1
    Copy the thread and composer markupThe .thread scroll container holds .msg-row groups (them/me variants) plus a hidden .typing-row, and a .composer form sits below it for input.
  2. 2
    Wire sendMsg to your backendReplace the demo's local addMessage call with an API request or WebSocket emit, and only render the message once your backend confirms receipt if you want a "sending" intermediate state.
  3. 3
    Drive read receipts from real eventsToggle a message's .tick class to .tick-read when your backend's read-receipt event for that specific message id arrives, rather than on a timer.
  4. 4
    Show typing status from the other userToggle typingRow.hidden based on a "user is typing" socket event from the other participant, not a fixed setTimeout as the demo does.
  5. 5
    Insert day dividers dynamicallyBefore rendering a new message, compare its date to the previous message's date with toDateString() and insert a .day-divider element when they differ.

Real-world uses

Common Use Cases

💬
Support and direct message threads
Build customer support widgets or direct-message views with grouped bubbles, using asymmetric border radius for the tails instead of SVG shapes.
📱
Mobile chat screens
Provide the message view behind a mobile chat screen, with delivered and read ticks switched by a simple CSS class.
👥
Team collaboration tools
Add in-app messaging beside a chat conversation list, with consecutive messages grouped under one avatar and timestamp.
🤖
AI assistant interfaces
Use as a starting point for one-on-one bots, or extend into an AI chat interface, including an animated typing indicator with staggered bounces.
Related: Encrypt Reveal Card
See the Encrypt Reveal Card for a related cards pattern worth pairing with this one.

Got questions?

Frequently Asked Questions

Replace the local addMessage() call in sendMsg() with an emit to your WebSocket or a POST to your API, then render the message when the server confirms it (or optimistically, then reconcile). Listen for incoming-message, typing, and read-receipt events to drive the other three dynamic pieces.

Before inserting each new message, compare new Date(message.timestamp).toDateString() to the previous message's date string; if they differ, insert a .day-divider element before the message row.

Listen for a "typing" event from your backend (commonly debounced on their keystrokes) and toggle typingRow.hidden = false, then hide it again after a short timeout or when their message actually arrives — do not drive it from a fixed local timer in production.

Yes — every message body is set via element.textContent, not innerHTML, so any HTML or script tags a user types are rendered as literal visible text rather than executed markup.

Open the Export menu on the snippet page for a React component that keeps messages in a useState array and maps over them, a React + Tailwind version, a Vue 3 SFC, or an Angular standalone component — all preserve the grouping, read-receipt, and typing-indicator logic.