How to Design a Nested Chat Comments Section Using HTML, CSS, and JavaScript

Creating a nested comment system, like what you see on Reddit, Facebook, or forums, is a great way to enhance user engagement and discussion. In this tutorial, we’ll build a simple but functional nested chat comment UI using HTML, CSS, and JavaScript.

Whether you’re building a comment thread, chat interface, or discussion forum, this guide will help you understand the basics of structuring and styling nested replies.

---

✅ What We’ll Build

• A basic comment thread with user input
• Support for nested replies
• Indentation for threaded discussions
• Simple, clean UI with modern styling

💡 No frameworks required! Pure HTML, CSS, and JavaScript.

---

🛠️ Step 1: HTML Structure

Create a div to hold the entire comment thread. Each comment will have:

• User name
• Message text
• Reply button
• A nested container for replies

<div id="comment-section">
  <h2>Comments</h2>
  <div id="comments"></div>

  <div class="comment-form">
    <input type="text" id="username" placeholder="Your name">
    <textarea id="comment-text" placeholder="Write a comment..."></textarea>
    <button onclick="addComment()">Post Comment</button>
  </div>
</div>

---

🎨 Step 2: CSS Styling

Add styles for layout, spacing, and nesting:

<style>
#comment-section {
  max-width: 700px;
  margin: 40px auto;
  font-family: Arial, sans-serif;
}

.comment {
  background: #f9f9f9;
  padding: 12px;
  border-radius: 8px;
  margin: 10px 0;
  position: relative;
}

.comment .username {
  font-weight: bold;
}

.comment .reply-btn {
  font-size: 0.9em;
  color: #007bff;
  background: none;
  border: none;
  cursor: pointer;
  margin-top: 8px;
}

.comment-form {
  margin-top: 20px;
}

.comment-form input,
.comment-form textarea {
  width: 100%;
  margin-bottom: 8px;
  padding: 10px;
  font-size: 1em;
  border-radius: 5px;
  border: 1px solid #ccc;
}

.comment-form button {
  padding: 10px 16px;
  background: #28a745;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.replies {
  margin-left: 30px;
  margin-top: 10px;
}
</style>

---

🧠 Step 3: JavaScript Logic

Now, let’s add interactivity — posting comments and nesting replies.

<script>
function createComment(username, text, parent = null) {
  const commentEl = document.createElement('div');
  commentEl.classList.add('comment');

  commentEl.innerHTML = `
    <div class="username">${username}</div>
    <div class="text">${text}</div>
    <button class="reply-btn" onclick="showReplyForm(this)">Reply</button>
    <div class="replies"></div>
  `;

  const target = parent ? parent.querySelector('.replies') : document.getElementById('comments');
  target.appendChild(commentEl);
}

function addComment() {
  const name = document.getElementById('username').value.trim();
  const text = document.getElementById('comment-text').value.trim();

  if (!name || !text) return alert("Please enter your name and comment.");

  createComment(name, text);
  document.getElementById('username').value = '';
  document.getElementById('comment-text').value = '';
}

function showReplyForm(button) {
  if (button.nextElementSibling?.classList.contains('reply-form')) return;

  const form = document.createElement('div');
  form.classList.add('comment-form', 'reply-form');
  form.innerHTML = `
    <input type="text" placeholder="Your name">
    <textarea placeholder="Write a reply..."></textarea>
    <button>Reply</button>
  `;

  form.querySelector('button').onclick = function () {
    const name = form.querySelector('input').value.trim();
    const text = form.querySelector('textarea').value.trim();
    if (!name || !text) return alert("Name and reply required.");
    createComment(name, text, button.parentElement);
    form.remove();
  };

  button.parentElement.appendChild(form);
}
</script>

---

💡 Features You Can Add Later

• Avatar support using placeholder images
• Markdown formatting for text
• Timestamps for each comment
• Real-time sync with backend or localStorage
• Upvote/downvote system

---

✅ Final Result

You’ll now have a functional comment thread where users can post top-level comments and reply in nested threads — all styled neatly and handled with plain JavaScript.

---

📦 Live Preview on CodePen

Want to test this right now? Click here for a CodePen Demo (Link can be added later).

---

🚀 Conclusion

Building a nested chat or comment thread is a valuable UI pattern, especially for social platforms, support systems, and discussion boards. With just basic HTML, CSS, and JavaScript, you can create a clean and interactive experience.