# How to set up a commenting system in Bubble.io: Step-by-Step Guide

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

## TL;DR

Setting up a commenting system in Bubble involves creating a Comment Data Type linked to your content, building a submission form, displaying comments in reverse chronological order, and adding edit and delete controls for authors. This tutorial covers the full implementation from database design through display and moderation, giving any content type in your app a comment section.

## Overview: Setting Up a Commenting System in Bubble

This tutorial shows you how to add a commenting system to any content page in your Bubble app. You will create a flexible Comment Data Type, build a submission form, display comments sorted by newest first, and add author controls for editing and deleting their own comments.

## Before you start

- A Bubble app with user authentication set up
- A content page (blog post, product, article) where comments will appear
- Basic understanding of Bubble Data Types, Repeating Groups, and workflows

## Step-by-step guide

### 1. Create the Comment Data Type

In the Data tab, create a Data Type called Comment with fields: body (text), author (User), parent_type (text — e.g., 'Post' or 'Product'), parent_id (text — the Unique ID of the content item), is_edited (yes/no). This design lets you attach comments to any content type without creating separate Comment types for each. Add a privacy rule: users can view all comments, but can only modify or delete comments where author = Current User.

**Expected result:** A Comment Data Type exists with fields supporting attachment to any content type, with privacy rules for author-only editing.

### 2. Build the comment submission form

On your content page, below the main content, add a Group containing a Multiline Input for the comment text and a Submit button. The Submit button workflow: (1) Only when Current User is logged in and Multiline Input's value is not empty. (2) Create a new Comment with body = Multiline Input's value, author = Current User, parent_type = 'Post', parent_id = Current Page Post's Unique ID. (3) Reset the Multiline Input. If the user is not logged in, show a prompt to log in instead of the form.

> Pro tip: Add a character counter below the input showing remaining characters (e.g., 500 max) to encourage concise comments.

**Expected result:** Logged-in users can submit comments that are saved to the database and the form resets after submission.

### 3. Display comments in a Repeating Group

Add a Repeating Group below the form with data source: Do a Search for Comments where parent_id = Current Page Post's Unique ID, sorted by Created Date descending (newest first). In each cell, display the author's name (or profile picture), the comment body, and the timestamp formatted as a relative time (e.g., '2 hours ago'). Add a comment count above the Repeating Group showing the total: Do a Search for Comments where parent_id = Current Page Post's Unique ID :count followed by 'comments'.

**Expected result:** Comments display in reverse chronological order with author info, text, timestamps, and a total count.

### 4. Add edit and delete controls for comment authors

In each Repeating Group cell, add Edit and Delete icons visible only when Current User = Current Cell's Comment's author. The Edit icon's workflow: set a page custom state 'editing_comment' to the Current Cell's Comment, which makes the comment body editable (swap the text for a Multiline Input pre-filled with the comment body). A Save button workflow: Make changes to the editing_comment — set body to the input value and is_edited to yes. The Delete icon's workflow: show a confirmation popup, then Delete the Comment. Display an '(edited)' tag next to comments where is_edited = yes.

**Expected result:** Comment authors can edit or delete their own comments, with edited comments showing an indicator.

### 5. Add pagination and loading optimization

Set the Repeating Group to show 10 comments per page. Add a Load More button below that increases the visible count or navigates to the next page of results. For pages with many comments, this prevents loading hundreds of comments at once. Also add a 'Be the first to comment' message visible when the comment count is 0. For real-time updates, Bubble automatically updates the Repeating Group when new comments are created since searches on page elements auto-update via WebSocket.

**Expected result:** Comments load efficiently with pagination, and new comments appear in real time without page refresh.

## Complete code example

File: `Workflow summary`

```text
COMMENTING SYSTEM ARCHITECTURE
================================

DATA TYPE:
  Comment:
    - body: text
    - author: User
    - parent_type: text (e.g., 'Post')
    - parent_id: text (content's Unique ID)
    - is_edited: yes/no

PRIVACY RULES:
  Everyone: Find in searches = yes, View all fields = yes
  Author only: Allow modifications when author = Current User

SUBMISSION WORKFLOW:
  When Button Submit is clicked:
    Only when: Current User is logged in AND Input is not empty
    → Create Comment (body, author, parent_type, parent_id)
    → Reset Multiline Input

DISPLAY:
  Repeating Group:
    Source: Search Comments where parent_id = Current Page's ID
    Sort: Created Date descending
    Per page: 10
  Each cell: author name, body, timestamp, edit/delete icons
  Comment count: Search :count + 'comments'

EDIT WORKFLOW:
  Custom state: editing_comment (Comment)
  Edit click → Set editing_comment
  Save click → Make changes to editing_comment (body, is_edited = yes)
  Cancel → Reset editing_comment

DELETE WORKFLOW:
  Delete click → Confirm popup → Delete Comment
```

## Common mistakes

- **Not adding privacy rules to prevent users from editing other people's comments** — Without privacy rules restricting modifications, any logged-in user could programmatically edit or delete any comment Fix: Add a privacy rule that only allows modifications when the Comment's author equals the Current User
- **Linking comments to content with a direct Data Type reference instead of parent_id** — A direct reference (e.g., Comment's post = Post) locks comments to one content type. If you later want comments on Products or Events, you need a new field for each Fix: Use parent_type (text) and parent_id (text) for a flexible system that works with any content type
- **Loading all comments without pagination** — Pages with hundreds of comments load slowly and consume excessive workload units Fix: Paginate the Repeating Group to 10-20 comments per page with a Load More button

## Best practices

- Use parent_type and parent_id fields for a flexible comment system that works with any content type
- Add privacy rules restricting edit and delete to the comment author only
- Paginate comments to 10-20 per page to keep load times fast
- Show a relative timestamp format (2 hours ago) for recent comments and a date for older ones
- Display an is_edited indicator so readers know when comments have been modified
- Add a login prompt for unauthenticated users instead of hiding the comment form entirely

## Frequently asked questions

### Do comments update in real time without refreshing?

Yes. Bubble's Repeating Groups with database searches auto-update via WebSocket when new records are created or existing ones are modified.

### Can I add replies to comments?

Yes. Add a parent_comment (Comment) field to create nested replies. See the nested comments tutorial for a full threaded comment implementation.

### How do I moderate comments?

Add a report_count field and a Report button. When report_count exceeds a threshold, auto-hide the comment. Build an admin page showing flagged comments for review.

### Can anonymous users leave comments?

Yes, but you will need to handle the author field differently — either leave it empty or create a temporary anonymous identifier. Consider requiring login to reduce spam.

### Can RapidDev help build a commenting system in Bubble?

Yes. RapidDev can implement a full commenting system with threading, moderation, real-time updates, and spam prevention tailored to your app's content types.

---

Source: https://www.rapidevelopers.com/bubble-tutorial/set-up-a-commenting-system-in-bubble
© RapidDev — https://www.rapidevelopers.com/bubble-tutorial/set-up-a-commenting-system-in-bubble