Build a reusable star rating component in Bubble by creating a Rating data type, placing interactive icon elements that change on hover and click, preventing duplicate ratings per user, and aggregating average scores on listings. This setup gives any marketplace or review-based app a polished, interactive rating experience without writing a single line of code.
Overview: Building a Star Rating System in Bubble
This tutorial walks you through building a fully functional star rating system in Bubble. You will create the data structure to store ratings, build an interactive row of star icons that respond to hover and click, prevent users from rating the same item twice, and display aggregated average ratings on listing pages. This is ideal for marketplaces, course platforms, or any app where user feedback matters.
Prerequisites
- A Bubble account with an existing app
- A data type for the item being rated (e.g., Product, Course, or Listing)
- Basic understanding of Bubble workflows and data types
- Familiarity with Bubble's Design tab and Element Palette
Step-by-step guide
Create the Rating data type
Create the Rating data type
Go to the Data tab and click Data types. Click New type and name it Rating. Add the following fields: item (type: your item data type, e.g., Product), user (type: User), and score (type: number). This structure links each rating to the user who gave it and the item being rated. Having the user field lets you enforce one rating per user per item later.
Pro tip: Add a review_text (text) field now if you plan to add written reviews later — it saves you from restructuring the data type down the road.
Expected result: A Rating data type exists with item, user, and score fields in the Data tab.
Build the interactive star row
Build the interactive star row
Go to the Design tab and open the page where users rate items. Click the + icon in the Element Palette, search for Icon, and drag five icon elements onto the page in a horizontal row inside a Group. Set each icon to the star shape (ion_star). For each icon, go to the Conditional tab and add a condition: When Custom State star_hover_index >= [this star's position] — change the icon color to gold (#FFD700). Repeat with a second condition: When Current Page Item's average_rating >= [this star's position] — change the icon color to gold. This gives you both hover preview and current-rating display.
Pro tip: Wrap all five stars in a single Group with Row layout and equal spacing so they stay aligned on all screen sizes.
Expected result: Five star icons appear in a row and visually highlight based on hover state and existing rating value.
Add hover and click workflows
Add hover and click workflows
Select the Group containing your stars and add a Custom State called star_hover_index (type: number). For each star icon, go to the Workflow tab and create two workflows. First: When this Icon is hovered — Set state of StarGroup to star_hover_index = [this star's number, 1 through 5]. Second: When this Icon is clicked — proceed to the next step's rating creation workflow. Also add a workflow on the StarGroup: When mouse cursor leaves this Group — Set state star_hover_index = 0, which clears the hover preview.
Expected result: Hovering over a star highlights all stars up to that position, and moving the mouse away clears the highlight.
Create the rating on click with duplicate prevention
Create the rating on click with duplicate prevention
In the Workflow tab, for each star icon's click event, add a condition: Only when Do a search for Ratings (item = Current Page Item, user = Current User):count is 0. This prevents duplicate ratings. Then add the action Create a new Rating with item = Current Page Item, user = Current User, and score = [the star number, 1 through 5]. If a rating already exists, add a second workflow without the Only when condition that uses Make changes to a thing to update the existing rating's score instead.
Pro tip: Using Result of step X to reference the search result is more reliable than running a second search in the same workflow.
Expected result: Clicking a star creates a new rating or updates the existing one, and each user can only have one rating per item.
Display the average rating on listings
Display the average rating on listings
Go to the page or Repeating Group cell where your items are listed. Add a Text element and set its content to: Search for Ratings (item = Current cell's Item):each item's score:average, formatted as a number with one decimal place. Next to it, add a Text element showing the count: Search for Ratings (item = Current cell's Item):count with the label ratings. You can also add five static star icons with conditionals that fill them gold based on the average rating rounded to the nearest integer.
Expected result: Each listing shows its average star rating (e.g., 4.2) and total number of ratings.
Add Privacy Rules to protect rating data
Add Privacy Rules to protect rating data
Go to Data tab then Privacy. Click on the Rating data type. Create a rule: Everyone can view — check Find this in searches and View all fields. Create a second rule: This Rating's user is Current User — check all permissions including Allow auto-binding and modify via API. This lets anyone see ratings but only the author can change their own rating. Uncheck all permissions in the default rule to start from a secure baseline.
Pro tip: For apps where you want anonymous ratings, skip the user visibility on the view rule so viewers cannot see who left each rating.
Expected result: Privacy Rules are configured so all users can read ratings but only the rating author can modify their own.
Complete working example
1STAR RATING SYSTEM — WORKFLOW SUMMARY2======================================34DATA TYPES:5 Rating6 - item (Product) — links to the rated item7 - user (User) — who submitted the rating8 - score (number) — 1 through 59 - review_text (text) — optional written review1011 Product (existing)12 - name (text)13 - description (text)14 - image (image)1516PAGE ELEMENTS:17 StarGroup (Group, Row layout)18 - Star1 (Icon, ion_star)19 - Star2 (Icon, ion_star)20 - Star3 (Icon, ion_star)21 - Star4 (Icon, ion_star)22 - Star5 (Icon, ion_star)23 Custom State on StarGroup:24 star_hover_index (number, default empty)2526CONDITIONALS (each star icon):27 Star N:28 When StarGroup's star_hover_index >= N29 Icon color = #FFD700 (gold)30 When star_hover_index is empty AND31 Search for Ratings (item=Current Page Product,32 user=Current User):first item's score >= N33 Icon color = #FFD700 (gold)3435WORKFLOW 1: Hover preview36 Event: When Star N is hovered37 Action: Set state of StarGroup38 star_hover_index = N3940WORKFLOW 2: Clear hover41 Event: Mouse cursor leaves StarGroup42 Action: Set state of StarGroup43 star_hover_index = 04445WORKFLOW 3: Submit new rating46 Event: When Star N is clicked47 Only when: Search for Ratings48 (item=Current Page Product, user=Current User):count is 049 Action 1: Create a new Rating50 item = Current Page Product51 user = Current User52 score = N5354WORKFLOW 4: Update existing rating55 Event: When Star N is clicked56 Only when: Search for Ratings57 (item=Current Page Product, user=Current User):count > 058 Action 1: Make changes to59 Search for Ratings (item=Current Page Product,60 user=Current User):first item61 score = N6263DISPLAY (Repeating Group cell):64 Average: Search for Ratings65 (item=Current cell's Product):each item's score:average66 Count: Search for Ratings67 (item=Current cell's Product):count6869PRIVACY RULES (Rating):70 Rule 1 — Everyone can view:71 Find in searches: YES72 View all fields: YES73 Rule 2 — This Rating's user is Current User:74 All permissions: YESCommon mistakes when building a rating system in Bubble.io: Step-by-Step Guide
Why it's a problem: Running a second search instead of using Result of step X
How to avoid: Always reference Result of step X when you need data from an earlier action in the same workflow.
Why it's a problem: Placing a Do a search for inside each Repeating Group cell to count ratings
How to avoid: Pre-compute the average rating as a field on the Product data type and update it via a backend workflow whenever a new rating is created.
Why it's a problem: Not adding Privacy Rules to the Rating data type
How to avoid: Add Privacy Rules that allow everyone to view ratings but only the rating's author to modify or delete their own.
Best practices
- Store the average rating as a field on the item data type and update it via backend workflow to avoid expensive searches on every page load
- Use Custom States for hover effects rather than database writes to keep the interaction instant and free of workload units
- Prevent duplicate ratings by checking for an existing Rating record before creating a new one
- Consider half-star ratings by using 0.5 increments and ten clickable zones instead of five
- Add Privacy Rules so users can only edit their own ratings
- Include a confirmation or undo option after rating so users can correct accidental clicks
- Paginate reviews in a Repeating Group showing 10-20 at a time to avoid performance issues
- Test the rating flow as a logged-out user to ensure proper error messaging
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I am building a Bubble.io app and need a star rating system. Users should be able to rate items 1-5 stars, see their existing rating, and each listing should show the average rating. How should I set up the data types, conditional formatting on star icons, and workflows?
Add a 5-star rating system to my product detail page. Create a Rating data type with item, user, and score fields. Show interactive stars that highlight on hover and save the rating on click. Prevent duplicate ratings per user and display the average rating on the listing page.
Frequently asked questions
Can users change their rating after submitting it?
Yes. The workflow checks for an existing rating and updates it rather than creating a new one, so users can change their score at any time by clicking a different star.
How do I show half-star ratings?
Use 10 clickable zones (two per star) and store scores in 0.5 increments. For display, use a conditional that checks if the score is at least N.5 to show a half-filled star icon.
Will this work on Bubble's free plan?
Yes. Star ratings use basic data types, workflows, and conditionals — all available on every Bubble plan including the free tier.
How do I prevent rating spam?
The duplicate prevention workflow ensures one rating per user per item. You can add additional protection by requiring email verification or a minimum account age before allowing ratings.
Does each rating search cost workload units?
Yes. Every Do a search for uses server resources. To minimize costs, store the computed average as a field on the item data type and update it via a backend workflow when ratings change.
Can RapidDev help build a more advanced review system?
Yes. RapidDev specializes in Bubble development and can help you build complex review systems with features like verified purchase badges, helpful vote counts, and AI-powered review moderation.
Should I use an Option Set for rating scores?
A simple number field works well for star ratings since scores are just 1-5. Option Sets are better for categorical data like review tags or sentiment labels.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation