Bubble's Reusable Elements help you build cleaner, more scalable applications. Whether you're building a dynamic UI, reusable modals, or consistent layouts, mastering how to pass data into and out of reusable elements is essential.
In this tutorial, you'll learn:
✅ How to create a Reusable Element
✅ How to use it on any page
✅ How to pass data from a parent page or group to the Reusable Element
✅ How to pass data back from the Reusable Element to the parent using workflows or custom states
📺 Watch the full video tutorial here:
🧩 What Are Reusable Elements?
Reusable Elements in Bubble are like components in traditional development. They allow you to design something once—like a modal, card, navbar, or popup—and use it across multiple pages or contexts.
Instead of duplicating logic, UI, and workflows, you simply reuse the element, making your app easier to manage and update.
🛠️ How to Create a Reusable Element
- In the Bubble Editor, go to the Reusable Elements section.
- Click “New Reusable Element”.
- Give it a name (e.g.
ProductCard,UserModal, orNotificationPopup). - Design your element inside the editor.
➡️ Passing Data from Parent Page to Reusable Element
To allow a reusable element to receive data:
- Open the Reusable Element editor.
- Set the Type of Content (e.g.
User,Product,Transaction). - Inside the element, use
This Reusable Element's [field]to display or use data. - On the parent page, select the element and set its data source (e.g.
Current Page's UserorParent group's Product).
📌 Tip: You can also add custom states if you want more control over what gets passed in.
⬅️ Passing Data from Reusable Element to Parent
There are two main ways to pass data back up to the parent page or group:
1. Trigger a Custom Event
- In the reusable element, create a workflow like "When button is clicked".
- Use the action “Trigger a custom event in the parent element”.
- On the page, define that custom event and what to do when it runs (e.g., update a state, show a popup, etc.).
2. Set Custom State on Parent
- Add a custom state to the parent page or group.
- From inside the reusable element's workflow, set the value of that state.
- Use that custom state to drive the parent page's logic.
✅ Example: When a user selects a product in a reusable
ProductCard, you update a custom state on the page with the product's ID.
💡 Use Cases for Reusable Elements
- Modals (Login, Edit Profile, Confirm Delete)
- Custom Cards (User, Product, Article)
- Navigation Bars / Sidebars
- Notification Systems
- Search Filters or Sort Dropdowns
📺 Watch the Full Video Tutorial
I walk you through each step visually with a working example.
👉 Watch here: https://www.youtube.com/watch?v=Hz12QY8nBdE
🔁 Final Thoughts
Reusable Elements are a must-have skill if you're building anything more than a simple MVP with Bubble. Mastering how to pass data in and out makes your app dynamic, modular, and much easier to maintain.
Let me know in the comments:
- What reusable elements are you building?
- Do you want to see how to make reusable popups, forms, or search components next?
📣 Stay Connected
I create weekly tutorials on:
- Bubble.io development
- No-Code best practices
- Building real-world apps with performance in mind
📌 Subscribe on YouTube → https://www.youtube.com/@njokusamsonebere2589
📌 Follow me on LinkedIn → https://www.linkedin.com/in/samson-ebere-njoku-profile/
Top comments (0)