# How to create a comment system in Bubble.io: Step-by-Step Guide

- Tool: Bubble
- Difficulty: Beginner
- Time required: 20-25 min
- Compatibility: All Bubble plans
- Last updated: March 2026

## TL;DR

Build a threaded comment system in Bubble with nested replies, edit and delete controls, upvoting, and moderation tools. This tutorial covers the Comment data type design with parent-child relationships, real-time display using Repeating Groups, and admin moderation for flagging and hiding inappropriate content.

## Overview: Comment Systems in Bubble

A comment system lets users discuss content, reply to each other, and engage with your platform. This tutorial builds a full-featured comment section with threading, voting, and moderation — suitable for blogs, forums, and product pages.

## Before you start

- A Bubble account with user authentication
- Content to attach comments to (articles, posts, products)
- Basic understanding of Data Types and Repeating Groups

## Step-by-step guide

### 1. Create the Comment data type

Create 'Comment' with fields: content (text), author (User), parent_content_id (text — the ID of the article/post), parent_comment (Comment — for replies, empty for top-level), upvotes (number, default 0), is_flagged (yes/no, default no), is_deleted (yes/no, default no). This structure supports both top-level comments and nested replies.

**Expected result:** Comment data type supports threading via parent_comment field.

### 2. Build the comment input form

Below your content, add a Multiline Input and a 'Post Comment' button. Workflow: Create Comment → content = Input value, author = Current User, parent_content_id = Current page's content ID. Clear the input. For replies, add a Reply button on each comment that shows a nested input form and sets the parent_comment field.

**Expected result:** Users can post top-level comments and replies to existing comments.

### 3. Display comments with threading

Add a Repeating Group with data source: Search for Comment where parent_content_id = content ID AND parent_comment is empty (top-level only), sorted by Created Date descending. Inside each cell, display author name, content, timestamp, and action buttons. For replies, add a nested Repeating Group: Search for Comment where parent_comment = Current cell's Comment.

> Pro tip: Limit nesting to 2 levels for readability. Beyond that, replies reference the top-level thread.

**Expected result:** Comments display in a threaded layout with replies indented under their parent.

### 4. Add edit, delete, and upvote actions

Edit button (visible when author = Current User): opens the content in an editable input, saves with Make changes to Comment. Delete button: sets is_deleted = yes (soft delete) and shows '[deleted]' instead of content. Upvote button: increments upvotes field. Prevent double-upvoting by creating an Upvote record (user + comment) and checking before incrementing.

**Expected result:** Users can edit their own comments, soft-delete them, and upvote others.

### 5. Implement moderation tools

Add a Flag button on each comment (visible to logged-in users). Workflow: Set is_flagged = yes. Create an admin moderation page showing flagged comments. Admins can Approve (unflag) or Remove (set is_deleted = yes). Add a privacy rule: Comments with is_flagged = yes are hidden from non-admin searches.

**Expected result:** Users can flag inappropriate comments, and admins can review and moderate them.

## Complete code example

File: `Workflow summary`

```text
COMMENT SYSTEM — ARCHITECTURE
===============================

DATA TYPE: Comment
  content, author (User), parent_content_id (text),
  parent_comment (Comment), upvotes (number),
  is_flagged (yes/no), is_deleted (yes/no)

DISPLAY:
  Top-level: RG where parent_comment is empty
  Replies: nested RG where parent_comment = parent
  Deleted: show '[deleted]' text
  Flagged: hidden from non-admins

WORKFLOWS:
  Post: Create Comment (parent_comment empty for top-level)
  Reply: Create Comment with parent_comment = clicked comment
  Edit: Make changes to Comment (owner only)
  Delete: Set is_deleted = yes (soft delete)
  Upvote: Increment upvotes (one per user)
  Flag: Set is_flagged = yes
  Moderate: Approve (unflag) or Remove (soft delete)
```

## Common mistakes

- **Using hard delete instead of soft delete for comments** — Hard deleting a parent comment orphans all its replies Fix: Use a soft delete (is_deleted = yes) and display '[deleted]' text to preserve the thread structure
- **Not limiting reply nesting depth** — Deep nesting makes the layout unreadable on mobile Fix: Limit to 2 levels. Third-level replies reference the second-level comment as parent.
- **Allowing multiple upvotes from the same user** — Without a per-user check, users can inflate vote counts Fix: Create an Upvote record and check existence before incrementing

## Best practices

- Use soft deletes to preserve thread structure
- Limit reply nesting to 2 levels for readability
- Prevent duplicate upvotes with a per-user tracking record
- Hide flagged comments from public searches via privacy rules
- Display comment counts on parent content using a stored counter field
- Paginate comments to 20 per page for performance

## Frequently asked questions

### Can comments update in real time?

Yes. Database-bound Repeating Groups auto-update when new comments are created, showing them instantly to all viewers.

### How do I add @mentions?

Parse the comment text for @username patterns. Create a mention notification when someone is mentioned. Highlight mentions with conditional text formatting.

### Can I add rich text formatting to comments?

Yes. Replace the Multiline Input with a Rich Text Editor element. Store the HTML output and display with a Rich Text element.

### How do I sort comments by most upvoted?

Add a sort toggle: by date (default) or by upvotes descending. Change the Repeating Group sort based on the toggle value.

### Can anonymous users post comments?

You can allow it, but it makes moderation harder. Recommended: require login for commenting but allow anonymous viewing.

### Can RapidDev build a discussion feature?

Yes. RapidDev builds comment and discussion systems with threading, real-time updates, rich text, mentions, and comprehensive moderation.

---

Source: https://www.rapidevelopers.com/bubble-tutorial/create-a-comment-system-in-bubble
© RapidDev — https://www.rapidevelopers.com/bubble-tutorial/create-a-comment-system-in-bubble