Forum Academy Marketplace Showcase Pricing Features

100 of Our Favorite Bubble Tips | Filter by category and skill level

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.

:point_right: 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 :tractor:: Always default to top margin
Youssef :tractor:: Always design vertically
Stuart from WhoWorksThere: Always group elements
Youssef :tractor:: 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 :black_flag:: 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 :man_technologist:t6:: 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 :tractor:: 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

29 Likes

Thank you so much, you are simply amazing! :slight_smile:

1 Like

this is killer. Thanks

1 Like

For those looking to convert your apps, here are the step-by-step guides I’ve done:
Convert your Bubble app to a native mobile app in 30 minutes
Convert your Bubble app to Chrome browser extension in 10 minutes

3 Likes

What’s the best way to hide “FloatingGroup A”, I don’t want to delete it and it seems it could be useful for development. Can I hide it only on LIVE and where would I do that?

@FarmerJoe
To hide the floating hide in LIVE,

  1. Click on the floating group
  2. Go to Conditionals
  3. Define a new Conditional
  4. Set as below
1 Like

This is the way for backward compatibility.