Nic’s Demo Chat
online
Today
Hey! This is a fake WhatsApp-style UI mockup in a Gutenberg HTML block 😄
8:10pm
Nice — so the *layout* is HTML, the *look* is CSS, and the *behavior* is JS?
8:11pm
Exactly. Try typing below and hit Enter — it “sends” a message and autoscrolls.
8:12pm

How this mock chat UI is built (HTML + CSS + JS)

1) HTML = the structure

  • <header class="wa-topbar"> = top bar (avatar, name, actions)
  • <main class="wa-chat"> = scrollable message area
  • .wa-msg.wa-in and .wa-msg.wa-out = left/right message wrappers
  • .wa-bubble = the message bubble itself
  • <footer class="wa-inputbar"> = input + send button

2) CSS = the look & layout

  • display:flex aligns the header and input elements neatly
  • .wa-in vs .wa-out changes bubble color + alignment
  • .wa-chat uses overflow:auto so messages scroll
  • Soft shadows + rounded corners mimic a modern chat aesthetic

3) JS = behavior

  • Reads the input value
  • Creates a new message element (document.createElement)
  • Appends it into the chat area
  • Auto-scrolls to the newest message
  • Enter key triggers “send”
Tip: what to edit first
  • Change the contact name in .wa-name
  • Change initial messages inside <main class="wa-chat">
  • Change bubble colors in CSS variables at the top of the CSS block