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.
Prerequisites
- 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
Create the Comment data type
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.
Build the comment input form
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.
Display comments with threading
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.
Add edit, delete, and upvote actions
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.
Implement moderation tools
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 working example
1COMMENT SYSTEM — ARCHITECTURE2===============================34DATA TYPE: Comment5 content, author (User), parent_content_id (text),6 parent_comment (Comment), upvotes (number),7 is_flagged (yes/no), is_deleted (yes/no)89DISPLAY:10 Top-level: RG where parent_comment is empty11 Replies: nested RG where parent_comment = parent12 Deleted: show '[deleted]' text13 Flagged: hidden from non-admins1415WORKFLOWS:16 Post: Create Comment (parent_comment empty for top-level)17 Reply: Create Comment with parent_comment = clicked comment18 Edit: Make changes to Comment (owner only)19 Delete: Set is_deleted = yes (soft delete)20 Upvote: Increment upvotes (one per user)21 Flag: Set is_flagged = yes22 Moderate: Approve (unflag) or Remove (soft delete)Common mistakes when creating a comment system in Bubble.io: Step-by-Step Guide
Why it's a problem: Using hard delete instead of soft delete for comments
How to avoid: Use a soft delete (is_deleted = yes) and display '[deleted]' text to preserve the thread structure
Why it's a problem: Not limiting reply nesting depth
How to avoid: Limit to 2 levels. Third-level replies reference the second-level comment as parent.
Why it's a problem: Allowing multiple upvotes from the same user
How to avoid: 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
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I want to build a threaded comment system in Bubble.io with replies, upvoting, editing, and moderation. Can you design the data model and display logic?
Add a comment system to this content page. Create a Comment data type with threading support. Display comments with nested replies, add post/reply/edit/delete actions, and include moderation tools.
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.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation