An element is any individual piece of your app's user interface. Buttons, images, input fields, containers, icons, and maps are all examples of elements. Together, they make up everything a user sees and interacts with on the screen.

Every part of your app's user interface is made up of elements organized in a hierarchy. Each element has a set of style and responsive properties that control how it looks and behaves. Together, the hierarchy and these properties give the browser everything it needs to render the page correctly.

Bubble lets you control every layer of this: which elements exist, how they look, how they behave across different screen sizes, and how they respond as elements are shown, hidden, or animated on the page.

Bubble supports both web apps and native mobile apps, and elements work slightly differently on each.

Some elements are only available on one platform.

Bubble's AI Agent can design pages from scratch with a simple prompt. Describe what you need in your preferred language, and the Agent gathers context from your app and presents a plan for what it will build, ready for you to approve.

Shortly after you approve the plan, your new page is ready, with elements and workflows connected and set up to use. From there, you can refine the design directly in the editor or by prompting the Agent for adjustments.

Bubble offers many different elements, split into a few categories based on their purpose. Plugins can also add new elements, ranging from simple utilities to complex integrations.

Visual elements are placed on the page for aesthetic purposes or to display information. They don't accept data input, though they can accept clicks and are often connected to workflows.

Article: Visual elements | Mobile-specific visual elements

Containers hold other elements. They serve two main purposes:

Bubble offers several container types, each suited to different layouts and behaviors.

Article: Containers | Mobile-specific containers

Input forms are elements that allow your users to provide data to your application.

Article: Input forms | Mobile-specific input forms

Reusable elements let you build a component once and use it across your app. When you update the reusable element's definition, every instance updates too, which makes them useful for headers, footers, or any component that appears in multiple places.

Article: Resuable elements

Elements can be set to behave in different ways depending on the situation or the user's actions. There are two main ways to make them interactive: conditions and workflows. Custom states can be used to temporarily store information.

Conditions let you set rules that change how an element looks or behaves based on whether a rule evaluates as yes or no. Nearly every visual property can be adjusted this way, which opens up a lot of possibilities, from subtle style changes to hiding and showing entire sections of the page.

Some examples:

Article: Conditions

Workflows connect events (like a button click) to actions (like saving data, sending an email, or navigating to another page). Any element can be the trigger for a workflow, and workflows can chain multiple actions together to build complex behavior.

Some common uses include:

Article: Workflows

Custom states let you store temporary information on an element, such as the current tab in a set or whether a section is expanded. States can be read and updated by workflows and referenced in conditions, giving you flexible control over how the element behaves without touching the database.

Article: Custom states

Once you know how elements are structured and how they behave, you can work on placing, styling, and configuring them in the editor.

The element palette on the left side of the screen lets you add new elements to the current page, view, or reusable element. To add a new element, click its type in the palette and draw it directly on the page or view. You can also drag an element straight from the palette onto the canvas.

You can use the Search assets

Selecting any element opens the element property editor on the right side of the workspace. This is where you configure the element's name, data source, layout, style, conditions, and behavior. Every element has its own set of properties, based on its type.

If you select multiple elements, some properties can be edited in bulk.

You can edit an element's name at the top of the property editor. Naming conventions are up to you: some developers use prefixes like btn_submit, others use plain descriptions like Submit button. Whatever style you choose, keeping it consistent across your app makes elements easier to find and debug as your app grows.

By default, Bubble generates a name based on the element's type and content. Renaming as you build helps avoid confusion later, especially when you have several similar elements on the same page.

Larger pages can have many elements. A few tools make them easier to navigate:

The element picker in the toolbar lists every element on the page. Start typing to filter, and hover to see a thumbnail before selecting.

The element tree gives you a hierarchical view of every element and is useful for both selecting and rearranging them by dragging and dropping them to a new position in the hierarchy. Use the search bar at the top of the element tree to filter elements by name.

X-ray view makes elements semi-transparent in the editor, allowing you to see elements that overlap.

The app search tool lets you search across pages and workflows for element names, expressions, and more.

The app search tool in the upper right half of the toolbar lets you search for elements and many other things across your app.

Article: The search tool

In the element property editor, you can click the contextual dropdown and select Inspect to see other parts of your app that are connected to the element.

Rather than styling each element individually, you can define reusable styles and variables that keep your design consistent across the app.

This system makes it much easier to keep a consistent look and to make design changes at scale.

Article series: Styles and variables

Even though Bubble is a no-code platform, your app is ultimately delivered as code that runs in the user's browser. The elements you place on the page become part of that code, which means their names, static text, and default values are visible to anyone who inspects the page.

A good rule of thumb is to assume that anything you add to an element can be seen by a curious user. Avoid placing sensitive information anywhere on the page, including in element properties, workflows, custom states, and option sets. For data that needs to be protected, use privacy rules in the database instead.

Article: Client-side and server-side