I have built over 100 apps on Bubble since 2019. Thanks to the community, I keep learning new tricks and methods that help me build better and faster. I always wished I knew all these when I first started. I would have saved hundreds of hours and would have built better and faster.
This is why I put together a list of Top 100 Bubble Tips. Curated from a variety of places including the forum, Twitter, and Facebook Groups, they will help you instantly level up your Bubble skills without scrolling through posts and sites.
100 of Our Favorite Bubble Tips
I have categorized the tips into the following categories:
API - 2 tips
Communication - 3 tips
Database - 3 tips
Design - 15 tips
Documentation - 3 tips
General - 29 tips
Hiring - 2 tips
Performance - 27 tips
Security - 4 tips
UX/UI - 12 tips
The tips are also categorized into 3 levels of difficulties:
Beginner - 22 tips
Intermediate - 41 tips
Advanced - 37 tips
Thank you to everyone who shared these great tips. You will find their names and a link to the source on each tip. If you want your tip out of this list, please send us a message.
Csaba Kissi: 15 Sites for Free Illustrations
Jon Baxter: 8 steps to start building your app
Mike Verbruggen: A helpful plugin for setting up responsive
josh: A page with only a few elements will load faster than a page with hundreds of elements
Minimum Studio: Add the name of the environment in your app logo
Youssef 
: Always default to top margin
Youssef : Always design vertically
Stuart from WhoWorksThere: Always group elements
Youssef : Always remove the min height on a page
Gregory John: Always use a max width
Airdev: Always use a style for each element
Gio Kakhiani 
: Always use link element as navigation text not a text element
Gregory John: Always use styles
Efe Ĺener 
: Append an indicator text to Option Set names (e.g. â(OS)â for Option Sets)
philnauta: Ask for developer contracts and read them
josh: Avoid adding additional operations to a search result
josh: Avoid chained searches
josh: Avoid chaining multiple searches together
philnauta: Be careful whenever you ask for more features from a developer
josh: Bubble automatically combines searches if they do the exact same search
Will Ericksson: Bubble cheat sheet
Mohitđ: Call data once to a parent group & map it to multiple things
josh: Change list of things is fast + good for relatively small (say, 100 items or less) lists
petter: Clean up the app before you start building
petter: Communicate with a reusable group by states on the reusable element or by custom workflows
Daniel Johnsen: Create a style page
Airdev: Create or pick a system
Eli: Customize your âYour application has been updatedâ notification
Dave - SquareQR.com: Dashboard navigation hack
Airdev: Data API can be your friend
Efe Ĺener : Define a single text as a list
josh: Do as much sorting / filtering in the original search as possible
philnauta: Do your best to write out every single thing your site should do ahead of time
Airdev: Documentation tips
petter: Donât overlap elements
Gregory John: Donât start from scratch, start with a page structure
Airdev: Donât use private API keys/tokens on the page
petter: Donât get caught in the eternal improvement loop
petter: Donât use popups as a security tool
Marina: Elements not looking right? Check whether it is on fixed margin
Dave - SquareQR.com: Email subject line hack
antony: Everything you need to know about email
Tiplister for Bubble: Hack to use a text state for 2 pieces of dynamic data
Airdev: Handle delays gracefully
Gregory John: Have a consistent text height
Gregory John: Have a default padding
josh: Having more stuff in the database that isnât loaded in a search shouldnât slow things down too much
petter: Hide elements until they need to be displayed, not the other way around
josh: Image resizing usually doesnât affect performance
Thimo: Implement keyboard shortcuts
petter: Know when to use reusable elements
petter: Learn the responsive settings properly
petter: Learn to use the Privacy tools
JJ Englert: Less in more when building workflows
Airdev: Make sure your privacy rules are set up
petter: Minimize plugin use
Airdev: Minimize/eliminate advanced filters
Airdev: Minimize/eliminate nested searches
Airdev: Move lengthy actions to API workflows
josh: One action that changes a dozen fields is faster than a dozen actions that change one field
codurly: Places to get icons or stock photos
codurly: Places to get UI/UX inspiration
petter: Plan for mobile first
petter: Plan your app design before you start building
Tiplister for Bubble: Preface each text in a list with a bullet icon to display as bullet points in an email
petter: Prepare your app for translation
petter: Remember that hover effects will not work on mobile devices
petter: Replace workflows with API workflows when you can
petter: Reuse repeated workflows by putting them in a reusable group
Sam Tefera 
: Save name as 1 entry and use regex to display variations
Bubble: Send data between pages
LD: Set up your color palette
Airdev: Short lists are faster than searches
Gregory John: Start with a 960px page width
Gregory John: Stick to a brand color
josh: The more data a search fetches, the longer it takes
josh: The number of elements has a bigger affect on speed than what type they are
josh: There is no difference between different ways of displaying a resource
petter: Think about how the user experiences your app
petter: Think about how your workflows and database structure will work with 1, 10 and a 1000 users
romanmg: Tips to use multiselect dropdown
Gregory John: Use 250ms transition for hover conditionals
JÎM: Use 40px padding for group-focus elements
petter: Use collapsible, invisible groups to speed up changes
petter: Use conditions as an extra security measure
Mateo Fuentes: Use custom states to allow users to select items from a list
petter: Use Custom Workflows
JJ Englert: Use customs events for repeated workflows
Youssef : Use event conditionals instead of âterminate workflowâ
Gregory John: Use group when displaying text over an image
Gregory John: Use Imgix for consistent image shapes
KP: Use Nocode API to connect with APIs
JohnMark: Use parallel actions
petter: Use Reusable Elements
Airdev: Use Reusable Elements
petter: Useful plugins for reusable elements
Denis Lin: Useful tool for generating iframes
josh: Visible elements are loaded first then their properties like data
Airdev: When to use backend/API workflows
petter: Write down important info when you plan and build your site
