Bubble

We recently released four new and expanded Bubble operators for dynamic expressions. With these Bubble development tips, this tutorial covers: - how to use :toggle item to add and remove an item from a list in one action - how to use the new :formatted as to drive multiple element properties from a single yes/no - how to use :index of to show a user their rank in a leaderboard - how to use :defaulting to for fallback values when a field is empty Two of these operators are brand new, and two are existing operators with significantly expanded functionality. Several were shaped by suggestions from builders in the Bubble community. We'll explore these across two pre-built examples: a save/favorites button on a repeating group of animals and a leaderboard that shows the current user their position even when they don't appear in the visible list. ✦ ✦ ✦ ✦ ✦ Chapters 0:00 What are dynamic expressions and operators in Bubble? 1:21 How to build a save button in Bubble with :toggle item 3:50 How to style a save button based on a yes/no with :formatted as 7:05 What types can :formatted as return in Bubble? 7:28 How to show a user's rank in a leaderboard with :index of 9:55 How to show a default avatar when an image is empty with :defaulting to ✦ ✦ ✦ ✦ ✦ Subscribe to this channel to be the first to hear about new videos! Bubble is the only fully visual AI app builder that lets you vibe code without the code to launch real apps to real users.To date, 6 million builders have launched over 7 million apps that collectively process more than $1 billion in transactions a year. Want to hear their stories and advice, plus insights from industry leaders? Subscribe to our biweekly video podcast, The New Build ➡ https://www.youtube.com/playlist?list=PLoNVJrdvQQYnspOK4NkUSkzZkRYfrVQle Learn more about Bubble: Home / start for free ➡ https://bble.io/yt Twitter ➡ https://twitter.com/bubble Blog ➡ https://bubble.io/blog Questions and support ➡ bubble.io/support.

This tutorial covers two "level up" concepts in Bubble's Property Editor: custom states and formatted-as-text expressions. It's the final lesson in a five-part beginner series on Bubble's Property Editor, and it's where a single page starts holding multiple user experiences. Building on Lessons 1–3, this lesson extends the sign-up flow into a full login/sign-up experience. You'll duplicate the sign-up form into a login form, add a "Log the user in" workflow, and use a custom state to toggle which form is visible on the same page. What is a custom state in Bubble? A custom state is temporary data attached to an element — essentially a variable your app reads and writes in memory without touching the database. Custom states are ideal for UI state (like which form is showing), staggered signup flows, or holding data before a user commits to saving it. The video walks through how to group elements into a container, why naming conventions matter when duplicating elements, and how to use the "Set state of an element" action to flip a custom state on user tap. It covers how to conditionally show and hide elements based on custom state values, how to toggle off "visible on view load" so the custom state fully controls visibility, and how to add a workflow condition so the same tap event behaves differently based on current state. The lesson closes with the expression composer's "formatted as text" operator — a way to display different text based on a yes/no value without stacking multiple conditionals. By the end, you'll have a working login/sign-up toggle and a sense of the many ways Bubble lets you solve the same problem, whether you're building visually or with Bubble's AI Agent. ✦ ✦ ✦ ✦ ✦ Chapters 0:00 How to Duplicate a Sign Up Form to Create a Login Form 2:35 How to Add a "Log the User In" Workflow in Bubble 5:03 How to Create a Custom State in Bubble's Property Editor 7:23 How to Show and Hide Elements Based on a Custom State 9:22 How to Build a Custom State Toggle With Set State Actions 13:15 Why Custom States Work as Temporary Data in Bubble 15:26 How to Use "Formatted as Text" in Bubble's Expression Composer 19:26 Visual Editing vs. AI: Two Ways to Build in Bubble ✦ ✦ ✦ ✦ ✦ Subscribe to this channel to be the first to hear about new videos! Bubble is the only fully visual AI app builder that lets you vibe code without the code to launch real apps to real users.To date, 6 million builders have launched over 7 million apps that collectively process more than $1 billion in transactions a year. Want to hear their stories and advice, plus insights from industry leaders? Subscribe to our biweekly video podcast, The New Build ➡ https://www.youtube.com/playlist?list=PLoNVJrdvQQYnspOK4NkUSkzZkRYfrVQle Learn more about Bubble: Home / start for free ➡ https://bble.io/yt Twitter ➡ https://twitter.com/bubble Blog ➡ https://bubble.io/blog Questions and support ➡ bubble.io/support.