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.
Prerequisites
- 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
Create the Comment Data Type
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.
Build the comment submission form
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.
Display comments in a Repeating Group
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.
Add edit and delete controls for comment authors
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.
Add pagination and loading optimization
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 working example
1COMMENTING SYSTEM ARCHITECTURE2================================34DATA TYPE:5 Comment:6 - body: text7 - author: User8 - parent_type: text (e.g., 'Post')9 - parent_id: text (content's Unique ID)10 - is_edited: yes/no1112PRIVACY RULES:13 Everyone: Find in searches = yes, View all fields = yes14 Author only: Allow modifications when author = Current User1516SUBMISSION WORKFLOW:17 When Button Submit is clicked:18 Only when: Current User is logged in AND Input is not empty19 → Create Comment (body, author, parent_type, parent_id)20 → Reset Multiline Input2122DISPLAY:23 Repeating Group:24 Source: Search Comments where parent_id = Current Page's ID25 Sort: Created Date descending26 Per page: 1027 Each cell: author name, body, timestamp, edit/delete icons28 Comment count: Search :count + 'comments'2930EDIT WORKFLOW:31 Custom state: editing_comment (Comment)32 Edit click → Set editing_comment33 Save click → Make changes to editing_comment (body, is_edited = yes)34 Cancel → Reset editing_comment3536DELETE WORKFLOW:37 Delete click → Confirm popup → Delete CommentCommon mistakes when setting up a commenting system in Bubble.io: Step-by-Step Guide
Why it's a problem: Not adding privacy rules to prevent users from editing other people's comments
How to avoid: Add a privacy rule that only allows modifications when the Comment's author equals the Current User
Why it's a problem: Linking comments to content with a direct Data Type reference instead of parent_id
How to avoid: Use parent_type (text) and parent_id (text) for a flexible system that works with any content type
Why it's a problem: Loading all comments without pagination
How to avoid: 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
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I want to add a commenting system to my Bubble.io blog app. Comments should show the author name, timestamp, and allow editing and deleting by the comment author only. How should I structure the Data Type and workflows?
Create a Comment Data Type with body, author, parent_id, and is_edited fields. Add a submission form below blog post content and display comments in a Repeating Group sorted newest first. Add edit and delete controls visible only to the comment author.
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.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation