| The User Manual |
| |||
| The Core Reference |
|
Clicking a phrase underlined with a dotted line reveals an annotation, and sometimes a link to learn more about the subject.
Many articles offer multiple ways to learn a given topic. Look for the Other ways to learn header at the bottom of the article.
With Bubble, your web app and native mobile app are built on the same platform—sharing a single database and backend logic to work seamlessly together.
| Building for web | /pages/qjpk9D8O5tZqZnOI1t6M |
| Building for mobile | /pages/EVWy0mSe4tjmyf8ejh8Y |
Bubble lets you set up flexible, responsive design and save them in styles that can be applied every in seconds.
Bubble's database editor lets you create, assign fields to and connect data types with no database experience.
Bubble's workflow editor lets you drag and drop actions that happen whenever an event takes place, such as a button click.
| Term | Definition |
|---|---|
| App scheme | This setting defines a custom identifier for your app, used primarily in scenarios where external services need to redirect users back to the app after completing an action. This is commonly required for callbacks from OAuth providers, payment gateways, or other integrations that require redirection to the app. |
| Bubble web app / web app | This is the term we use to describe the “regular” Bubble web app editor, as opposed to this native mobile app editor. |
| Cross-platform | Cross platform means a native mobile app that is built once, but works on both iOS and Android devices out of the box. Cross-platform in this context does not include web. |
| Gesture | A gesture is similar to a click in web, but includes things like taps, long press, swipes, pans, and pinches. Users use gestures to interact with a mobile app’s UI and trigger workflows. |
| Global component | Global component in this doc refers to a component, such as the tab bar, that behaves similar to a reusable element in the sense that it is available on every view, but editing it changes the component across your app. Global components are generally system components offered by Bubble, rather than as something the user builds from scratch. |
| “Mobile friendly” app | A mobile friendly, or responsive, app is a web application that is opened in a user’s mobile browser. This type of app has been designed to look and perform well on smaller or larger screen sizes. |
| Native mobile app | A native mobile app is an app that can generally only be downloaded from the Google Play or Apple app store and runs native Swift code on Apple devices and Kotlin code on Android devices. This means it has full access to device hardware, software, and gestures. |
| Native mobile app editor | This is the term we use to describe the part of the Bubble editor where you edit your native mobile app, as opposed to the above Bubble web app. |
| Progressive web app | A progressive web app (PWA) is a responsive web application that has been wrapped in a service that allows it to run on a mobile device from the home screen rather than a user’s browser. While iOS and Android platforms are supporting more functionality these days, they are generally limited in what device hardware and software they have access to as opposed to native mobile apps. Note: Android supports far more functionality on PWAs than Apple does. |
| Section list | A section list is like a vertical list, but it groups your list items by some property on your data source. For example, your contacts app is a section list because it groups your contacts by the first letter of the contacts name. |
| Safe area | Newer devices have notches, floating islands, curved bezels, etc. which must be accounted for when designing your app. Safe areas are areas on your phone that could be impacted by these device idiosyncrasies. |
| View | Similar to a page web. This is the highest level “container” and represents what the user will see on their screen when on a particular view |
Planning your database structure doesn't need fancy tools: use whatever you're comfortable with. Pen and paper works just fine.
Planning your app's design doesn't have to start on the screen – a sheet of paper, post-it notes and whiteboards are a great place to start sketching quickly.
Bubble's WYSIWYG editor makes it easy to see results immediately. With the instant app preview, you can see exactly what the app will look like to your users.
Setting up a UI kit can be as simple as placing and styling a few elements on a page, but it can make your design process a lot more efficient and consistent.
| Purchase Type | Examples |
|---|---|
| Products | Amazon, Etsy, Best Buy |
| E-books | Kindle Store, Barnes & Noble Nook |
| Pay-per-view events | UFC Pay-Per-View, WWE Network |
| Online courses | Coursera, Udemy (individual courses), MasterClass (single classes) |
| Mobile App Purchases | Premium app upgrades in App Store or Google Play Store |
| Digital Movie Purchases | Google Play Movies, Vudu |
| Donations | Buymeacoffee |
| Purchase type | Examples |
|---|---|
| Streaming services | Netflix, HBO, Hulu, Disney+ |
| Music streaming | Spotify, Apple Music |
| Software as a Service (SaaS) | Adobe Creative Cloud, Microsoft 365 |
| E-book/magazine subscriptions | Amazon Kindle Unlimited, Scribd |
| Online learning platforms | LinkedIn Learning, Skillshare |
| Fitness and wellness apps | Peloton, Calm |
| Cloud storage and backup services | Dropbox, Google Drive |
| Meal kit delivery services | Blue Apron, HelloFresh |
| Gaming subscription services | PlayStation Plus, Xbox Game Pass |
| News and media subscriptions | The New York Times, The Washington Post |
A shopping cart is simply a metaphorical container for all the items a user wants to check out at the same time.
Adding a shopping cart to your app mirrors its physical brick-and-mortar counterpart closely, almost to the point where it stops being a metaphor.
A checkout page should give customers a well-organized final look at what exactly they are purchasing, what they will be charged and why, and the method by which they will be paying. In some cases, other details are also relevant, such as the delivery address for physical products.
| Record | Description | Visible to customers |
|---|---|---|
| Line items | The actual items being purchased, such as a beanie and a book | Yes |
| Additional fees | Extra costs, such as shipping | Yes |
| Cost of sales | Payment gateway transaction fee, and operational costs | No |
| Cost | Possible handling |
|---|---|
| Product | The app sets the cost and sends it to the payment platform. |
| Multiple products | The app calculates the total cost and sends it to the payment platform |
| Shipping cost | The app calculates the total cost and sends it to the payment platform |
| VAT/Sales tax | Stripe offers tools to help businesses handle VAT (Value Added Tax) and sales tax. |
| Import tax | The app calculates imports tax and adds it to the total amount. |
All actions related to Stripe can be found under the Payments section in the action dropdown.
Using the Results of step 1 data source, you can get relevant information from a charge attempt in Stripe. In this example, we are saving the Charge ID.
| Circumstance | Refunding |
|---|---|
| No refund made before | The full amount will be refunded |
| Partial refund made before | The remaining amount will be refunded |
| Full refund made before | Nothing will be refunded |
| Transaction is disputed | Nothing will be refunded |
With a single action, you can set up regular payments from a customer.
| Plan | Price |
|---|---|
| Monthly subscription | $12 |
| Plan | Price | Possible differences |
|---|---|---|
| Basic plan | $12 per month | Basic features |
| Professional plan | $24 per month | Additional features, additional team members |
| Enterprise plan | $36 per month | All features, advanced reports, even more team members |
Using multiple different plans you can offer your customers tiered payments. Hint: the design above is part of Bubble's Component Library, and you can set up one just like it in seconds.
All actions related to Stripe can be found under the Payments section in the action dropdown.
| Option | Stripe Parameter | Explanation |
|---|---|---|
| Allow incomplete | allow_incomplete | Creates Subscriptions with status=incomplete if the first invoice requires additional payment actions from the customer. |
| Error if incomplete | error_if_incomplete | Generates an error if the first invoice can't be paid, preventing the creation of Subscriptions with incomplete status. |
| Pending if incomplete | pending_if_incomplete | Sets Subscriptions with status=pending if the first invoice requires additional payment actions from the customer. Useful for managing scenarios where additional actions are needed before activating the Subscription. |
| Default incomplete | default_incomplete | Sets the default behavior for Subscriptions, creating them with incomplete status if the first invoice requires additional payment actions from the customer. |
| Product | Currency | Cost |
|---|---|---|
| Monthly fee | USD | $39.00 |
| Extra credits | USD | $12.00 |
Marketplace apps connect sellers with customers – whether they are selling physical products, online courses, or something completely different.
| Description | Fee | Total |
|---|---|---|
| Transaction | $100 | |
| Stripe transaction fee | 0,5% | $0.5 |
| Platform fee | 5% | $5 |
| Seller's payout | $94,5 | |
| Stripe keeps | $0.05 | |
| Platform keeps | $5 |
The Register the user as a seller action lets you easily create seller accounts in your app. The user will be forwarded to Stripe, but you can pre-populate many of the fields as illustrated above
The left-hand bar gives you quick access to all tabs in the Bubble editor at all times.
Some tabs are further divided into sections relevant for that tab.
Padding and margin behavior is standardized
Play video silent
Play with sound
Make clickable/interactive
Submit on 'Enter'
Close by pressing 'Esc'
Mobile > App Bar
Containers
|Override back button label
Allow vertical scrolling when content overflows
|Override back…
Allow vertical scrolling
Visible on page load (toggle)
Make the icon spin
Make icon rotate continuously
Autoplay on load
The element tree shows all elements on the page in a hierarchy.
The element pallet contains all the different types of elements you can add to the page.
Switching between Design mode and Responsive mode lets you tweak the page's responsive behavior.
The element tree gives you a complete overview of all the elements on the page or view.
You can quickly find the elements you're looking for by using the search bar at the top of the element tree.
You can assign any name you want to an element by clicking its name in the top bar of the property editor
In this example, with parentheses disabled, you can’t add the trimmed modifier because Bubble treats the expression as a single, linear chain and doesn’t allow that additional operation at this point.
With parentheses enabled, Bubble evaluates the grouped part of an expression first and treats the result as a standalone value. This makes it possible to apply additional operators and modifiers that aren’t available in a single, linear expression.
This link preview is automatically generated by LinkedIn, based on the settings in the Social Media / Open Graph section
| Type | Name | Value |
|---|---|---|
| A | 104.16.36.105 | |
| A | 104.16.42.105 | |
| A | 104.19.240.93 | |
| A | 104.19.241.93 | |
| A | www | 104.16.36.105 |
| A | www | 104.16.42.105 |
| A | www | 104.19.240.93 |
| A | www | 104.19.241.93 |
Hovering an object in the Bubble editor for a second will display the See reference tooltip, which takes you to the relevant entry in the core reference.
By selecting Web app or Mobile app in the app switcher, you can easily switch between the two versions of your app.
In this example, we've selected Mobile and you'll see all content related to your native mobile app.
By setting the Search by to a specific type, Bubble offers filters that match that type.
Click the image to enlarge.
When the debugger is active you will see it as a bar at the bottom of the screen.
The first step the debugger will show is the event that triggered the workflow. In this case it was a button-click. The step we are currently inspecting is marked in grey, and the next step is in white.
In this example we have added a comment to the OK button.
Clicking the Note icon will open up the Notes sidepanel. In this example we're looking at the field of a data type called City.
The URL shows that this is the preview of your app, and not the Live environment
The Run as feature lets you preview the app as a specific user.
In Bubble, you build workflows by combining an event (1) and one or more actions (2).
In Bubble, a workflow consists of an event and one or more actions.
Using dynamic expression, you can easily load and display data from the database. The expression above will simply show the text saved in the Name field of the currently logged in users.
Bubble allows you to control an element's styling properties and responsive behavior in a visual manner.
Bubble has a built-in responsive editor that allows you to flexibly test your design using customizable breakpoints – and every pixel value in between.
The Styles tab in the Bubble editor lets you control the styling properties of elements in one central place.
| SQL | Bubble counterpart |
|---|---|
| Database record | Thing |
| Table | Data type |
| Column | Field |
| Primary key | Unique ID |
| Query | Search/Do a search for |
| Join | Custom field |
| Insert | Create a New Thing |
| Update | Make Changes to a Thing |
| Delete | Delete a Thing |
The User type is automatically set up in all apps. It comes with a set of built-in fields, but can be extended with custom fields as needed. Illustrated above with the Name field of type text.
In the example above, we have set up a custom field on the User data type that links it to a company. In plain English, this means we can easily see which company any user is associated with.
In this example (similar to the User example above) we have linked a Task with a Project.
In this example, we have linked the Task and Project data type from the Project data type instead. Note the second rectangle, showing the one-to-many relationship between the two: in plain English, a project can contain a list of tasks.
Again, we are using a custom field to link two data types. If needed, you can add a User field on the Profile data type to link the other way too.
In this Do a search for expression we are querying the database for projects related to a specific task.
By combining elements, you can build interfaces ranging from simple forms to full-featured dashboards.
Combining elements like input fields and buttons is how you design your app and give users different ways to interact with it.
The element tree shows all the elements on the current page or view in a hierarchy, and the element palette lets you add new elements to the page or view.
Bubble's AI Agent will present you with a plan that you can approve before you start building.
Shortly after you approve the plan, the Agent has built the login and signup page.
Visual elements let you design your page to display information and accept clicks. Every element in this example is a visual element: a text element, an image, and a button.
| Platform | Element | Purpose |
|---|---|---|
| Web/Mobile | Text | Displays static or dynamic text. |
| Web/Mobile | Button | A clickable element that triggers a workflow when pressed. |
| Web/Mobile | Icon | Displays a small graphic symbol, often used for actions or visual cues. |
| Web | Link | A clickable element that navigates to another page or external URL. |
| Web/Mobile | Image | Displays a static or dynamic image. |
| Web/Mobile | Shape | Displays a rectangle. |
| Web | Alert | Displays a temporary message to the user, typically for feedback or notifications. |
| Web | Video | Embeds a video player, supporting YouTube and Vimeo. |
| Web | HTML | Renders custom HTML directly on the page. |
| Web/Mobile | Map | Displays an interactive map with optional markers. |
| Web | Built on Bubble | A small badge that links to Bubble's homepage. |
Groups can be used both to organize elements like the form above, and to hold the data that you want to work with, such as a user. The group is highlighted with a dashed border in the example.
| Platform | Container type | Holds data | Purpose |
|---|---|---|---|
| Web/mobile | Group | Single thing | Hold elements and data anywhere on the page |
| Web | Repeating group | List | Show a list of things in a flexible design such as cards, lists, and a masonry grid |
| Web | Table element | List | Show a list of things in rows/columns with headers |
| Web | Popup | Single thing | Display elements on top of everything else, such as a warning message |
| Web/mobile | Floating group | Single thing | Hover elements above other elements and stick them to one of the screen edges, like a top navigation bar that stays put |
| Web | Group focus | Single thing | Display a group that disappears as soon as you click anywhere else, such as a dropdown menu |
| Mobile | Short list | List | A container for displaying a fixed set of data items. Loads all items immediately, making it best for shorter lists. |
| Mobile | Horizontal list | List | Displays a horizontally scrolling list of items. |
| Mobile | Sheet | Single thing | A native overlay that slides up from the bottom of the screen |
Input elements are used to collect information from users, such as text, dates, emails, and file uploads.
| Platform | Element | Purpose |
|---|---|---|
| Web/mobile | Text input | Names, comments, other short info. |
| Web/mobile | Multiline text | Descriptions and other longer text. Allows line breaks. No text formatting. |
| Web/mobile | Checkbox | Check to hold a yes/no value, such as accepting terms and conditions. |
| Web | Dropdowns | Pick an option from a dropdown list, either static or from the database. |
| Web | Search box | Search-as-you-type in the database. |
| Web | Radio buttons | Select one option out of multiple. |
| Web | Slider input | Pick a numerical value with a visual, draggable slider. |
| Web/mobile | Date/time picker | Select a date and optionally a time. |
| Web | Picture uploader | Upload and preview images like profile pictures. |
| Web | File uploader | Upload other types of files. |
| Mobile | Selectable list | Select one or more items from a set list. |
To add new elements to the canvas, use the element palette on the left side of the editor.
The element property inspector lets you configure each element's properties individually.
You can give each element a name by clicking its label in the top of the property editor.
The element picker lets you quickly select an element by name.
You can quickly find elements by typing part of their name in the element tree's filter bar.
The app search tool in the upper right half of the toolbar lets you search for elements and many other things across your app.
In this example, we're using the Inspect tool to see workflows connected to a specific button.
The hierarchy on a page or view is divided into layers. The page or view is always at the top.
| Element | Description |
|---|---|
| Group | The most basic and versatile container type. Used to organize elements, control layout, and hold data. |
| Repeating group | Displays a list of items by repeating a set of elements for each entry in the data source. |
| Popup | An overlay centered on the screen that appears above other elements, typically used for focused interactions like forms, messages, or confirmation dialogs. |
| Floating group | A container that stays fixed to a side of the screen as the user scrolls, ideal for headers, sidebars, or floating action buttons. |
| Group focus | An overlay anchored to a specific element that hides automatically when the user clicks outside of it. Useful for menus, tooltips, and inline pickers. |
| Table | Displays a list of items in a structured, column-based layout with support for headers, sticky rows, and grid-like designs. |
| Element | Description |
|---|---|
| Text | Displays static or dynamic text on the page. |
| Button | A clickable element that can trigger a workflow when pressed. |
| Icon | Displays a small graphic symbol, often used for actions, navigation, or visual cues. |
| Link | A clickable element that navigates to another page or external URL. |
| Image | Displays a static or dynamic image on the page. |
| Shape | Displays a rectangle. |
| Alert | A temporary message that appears on the page to give the user feedback, such as a confirmation or error notice. |
| Video | Embeds a video player, supporting YouTube and Vimeo. |
| HTML | Renders custom HTML directly on the page, useful for embedding third-party components or content. |
| Map | Displays an interactive map with optional markers. |
| Built on Bubble | A small badge that links to Bubble's homepage, showing that your app was built with Bubble. |
| Element | Description |
|---|---|
| Input | A single-line field for entering short text, numbers, emails, or other short values. |
| Multiline input | A multi-line field for entering longer text, such as descriptions, comments, or messages. |
| Checkbox | A clickable element that lets users toggle a yes/no value. |
| Dropdown | A collapsible list of options that lets users select a single value. |
| Searchbox | A text field that lets users search for items in a list as they type. Also supports Google Maps addresses. |
| Radio buttons | A group of options where users can select one value from a set of choices. |
| Slider input | A slider control for selecting a numeric value within a defined range. |
| Date/time picker | A picker for selecting dates, times, or both. |
| Picture uploader | Lets users upload an image file, with an image preview built in. |
| File uploader | Lets users upload files of any type. |
| Multi dropdown | A collapsible list of options that lets users select multiple values at once. |
The page gives you a blank canvas on which to build your vision.
The 404 page can be edited freely just like any other page – but it can't be deleted.
The reset_pw page is a special page that lets your users reset their password safely. It's part of Bubble's core functionality and can't be removed or renamed.
| Version | URL |
|---|---|
| Development | https://appname.bubbleapps.io/version-test |
| Live | https://appname.bubbleapps.io |
| Version | URL |
|---|---|
| Development | https://www.mydomain.com/version-test |
| Live | https://www.mydomain.com |
Set a new index page by clicking the Make index option in the page dropdown.
| Version | URL |
|---|---|
| Development | https://myapp.bubbleapps.io/version-test/page-name |
| Live | https://myapp.bubbleapps.io/page-name |
| Version | URL |
|---|---|
| Development | https://mydomain.com/version-test/page-name |
| Live | https://mydomain.com/page-name |
Create a new page using the New and Web page option.
You can give your page any name you want, as long as it's URL-safe and unique within the app.
You can clone a page by using the New web page option and then selecting a page to clone.
You can also clone the page by selecting Duplicate page while having the page you want to clone open in the editor.
You can duplicate a page by clicking the contextual page menu and selecting Duplicate.
Give the duplicated page a name, and select which page to clone.
To select the page from the element tree, click it at the top of the tree.
Clicking anywhere on the page opens up the element property editor for the page.
Create a new page folder by selecting New and then Folder.
Click the page's contextual menu and select Manage folder to move it into a folder.
Open the page navigator, and you can manage folders at the bottom.
Containers can hold elements like the form in the example above. Here we're using a group element.
| Container | Purpose |
|---|---|
| Group | The most common container. Used to organize elements, control layout, and hold data. |
| Repeating group | Displays a list of items by repeating a template cell for each record. |
| Table | Displays a list of items in a structured table. |
| Popup | An overlay that appears on top of the page, typically for dialogs or focused interactions. |
| Floating group | A container that stays fixed in place on the screen as the user scrolls, often used for headers or persistent menus. |
| Group focus | A small overlay anchored to another element, typically used for dropdown menus or contextual actions. |
In this example, we have a group called User form. The type of content is set to User, and the expression that loads the user into the form is Current User.
A repeating group requires a list of things returned by the dynamic expression.
In this example, clicking a button triggers an action that loads data into a container.
In this example, we're loading the email address of the user held in the container, as the input's initial content.
In this example, a button inside a group references the Parent group's user to make changes to it.
Containers can be styled individually, or by using predetermined styles.
Groups can hold elements like the form in the example above.
Setting the data source directly loads the data immediately.
You can push data to a group as a result of user action, by using the Display data in group/popup action.
Group's can be styled individually, or by using predetermined styles.
The Collapse when hidden property collapses the element when it's hidden, making room for other elements to take its place. Both height and width are collapsed.
In the example above, we are toggling the visibility of Group A and Group B.
In this example we're using URL parameters to show a group.
A repeating group is used to show a list of something, such as these blog posts.
By combining the repeating group with child containers and elements, you can set up card designs.
Enabling Display items as a masonry grid lets you show items in the repeating group at dynamic sizes that adjust automatically to any screen size.
You can load a list into a repeating group by using a data source such as Do a search for.
You can also load a list into a repeating group using the Display list in a repeating group action.
Using the table element, you can set up lists in a structured, column-like layout.
Static rows are useful for non-dynamic content, such as column headers.
The repeating row is displayed in the editor with a ∞ symbol. Its content is duplicated for each entry in the table's data source.
With the Make sticky property, the table's column headers stay in view while the user scrolls.
The Do a search for data source populates the table with a list of users.
Clicking the handle in the top-left corner selects the entire table and opens its properties in the property editor.
Clicking a row's numbered handle selects it and opens its properties in the property editor.
Clicking a column's numbered handle selects it and opens its properties in the property editor.
Clicking an individual cell selects it and opens its properties in the property editor.
Setting the orientation to horizontal transposes rows and columns.
Popups can be used to bring attention to your users immediately.
Setting the data source on a popup makes it load its data as soon as the popup is shown.
Using an action you can load a specific item into the popup when it opens.
A typical use case for floating groups is to set up a navigation header that sticks to the top of the screen.
The [...] float relative too properties controls whether the group sticks to the left, right, or spans both sides.
The z-index controls whether the gloating group appears above or beneath the page.
Setting the data source on a floating group makes it load its data as soon as the group is shown.
Using an action you can load a specific item into the floating group as the result of a user action.
Group focus is useful for setting up dropdown menus
A group focus is anchored to another element on the page.
Setting the data source on a group focus makes it load its data as soon as the group is shown.
Using an action you can load a specific item into the floating group as the result of a user action.
| Category | Purpose | Examples |
|---|---|---|
| Text and numbers | Collect written or numerical values, from short entries like names and email addresses to long-form content like descriptions. Supports plain and rich text. | Text input, multiline input, number input |
| Dates and time | Collect date and time values. | Date/time picker, date range picker |
| File uploads | Let users upload files. | File uploader, image uploader |
| Selection controls | Present pre-defined options for the user to choose from, either static or dynamic. | Checkbox, radio button, dropdown, sliding switch |
A simple signup form like the one above combines several different categories of input forms to make the UI easy for your users to understand and to prepare the data for processing – such as saving it in the database.
Using the An input's value is changed event, you can trigger a workflow immediately when the value of an input form changes.
The reset relevant inputs action returns each input used in the workflow to its original state.
Use the Format property to set an input format. The example above shows a text input element.
Auto-binding lets you automatically save changes to the database as the input's value changes.
Auto-bind privacy rules controls what fields a user who matches the rules can edit.
The Rich Text Editor plugin lets your users add advanced formatting to their text.
The date/time picker gives your users a visual interface to pick a date or both.
The File uploader element will show the filename after the user has selected a file to upload.
The Image uploader element will show the image after it has been uploaded. In the example above we have styled the element to be circular.
The navigation toolbar on bubble.io (marked in red) is a typical use case for reusable elements. The toolbar, along with all its buttons and workflows, can be reused in as many places as needed across the app.
| Feature | Reusable element | Page |
|---|---|---|
| Purpose | A shared component used inside pages | A standalone screen users navigate to |
| URL | No | Yes |
| Contains workflows | Yes | Yes |
| Can be nested | Yes, inside other reusable elements or pages | No |
| Parameters | Yes, through custom properties | Yes, through the Type of content, often called the page thing. |
| Feature | Reusable element | Group |
|---|---|---|
| Scope | Shared across pages | Belongs to a single page |
| Editing | Edited in isolation | Edited directly on the page |
| Updates | Changes apply to every instance across the app | Changes affect only the specific group |
| Workflows | Has its own workflows, defined inside the reusable element | Workflows live with the page it's on |
| Parameters | Accepts data through Type of content or custom properties | Accepts data through a single Type of content |
| Element | Description |
|---|---|
| Group | The most basic and versatile container type. Used to organize elements, control layout, and hold data. |
| Floating group | A container that stays fixed to a side of the screen as the user scrolls, ideal for persistent headers, floating action buttons, or status banners. |
| Short list | A container for displaying a small, fixed list of items. |
| Horizontal list | A container that displays a scrollable list of items side by side, useful for carousels, category rows, and media galleries. |
| Sheet | A container that slides up from the bottom of the view, sitting above the current content while keeping the underlying view partially visible. |
| Element | Description |
|---|---|
| Text | Displays static or dynamic text on the view. |
| Button | A tappable element that triggers a workflow when pressed. |
| Icon | Displays a small graphic symbol, often used for actions, navigation, or visual cues. |
| Image | Displays a static or dynamic image on the view. |
| Shape | Displays a rectangle or other geometric shape, often used for backgrounds, dividers, or decorative elements. |
| Map | Displays an interactive map with optional markers. |
| Web view | Embeds a page from your web app in your mobile app. |
| Element | Description |
|---|---|
| Input | A single-line field for entering short text, numbers, emails, or other short values. |
| Multiline input | A multi-line field for entering longer text, such as descriptions, comments, or messages. |
| Checkbox | A tappable element that lets users toggle a yes/no value. |
| Selectable list | A list where users can select one or more items from a predefined set of options. |
| Date/time picker | A native picker for selecting dates, times, or both. |
The view is the top-level element in a native mobile app.
| Aspect | Page (web) | View (mobile) |
|---|---|---|
| Access | URL-based, accessible directly by typing the address | Reached through navigation inside the app |
| Transitions | Full-page reloads | Instant, native transitions |
| Availability | Anyone with the link can attempt to visit | Only accessible through the app itself |
| SEO and indexing | Can be indexed by search engines | Not indexable, since views aren't URLs |
The top app bar.
The safe area helps you avoid elements being cut off or overlapped by device features.
Custom properties can hold any kind of data. In this example, we have a custom property called Blog post, which holds the data type Post.
The tab bar allows you to set up a persistent navigation panel without needing workflows.
Using the Go to view action, you can select the view to navigate to, and whether to use stack or modal navigation.
Tapping a playlist in Spotify pushes a view to the Home tab's navigation stack. Tapping back returns you to the Home view.
| Element | Description |
|---|---|
| Group | The most basic and versatile container type. Used to organize elements, control layout, and hold data. |
| Floating group | A container that stays fixed to a side of the screen as the user scrolls, ideal for persistent headers, floating action buttons, or status banners. |
| Short list | A container for displaying a small, fixed list of items. |
| Horizontal list | A container that displays a scrollable list of items side by side, useful for carousels, category rows, and media galleries. |
| Sheet | A container that slides up from the bottom of the view, sitting above the current content while keeping the underlying view partially visible. |
| Selectable list | A list with built-in functionality for selecting one or more records. Note: a selectable list behaves like a container, but is listed as an input form in the element palette, because it accepts user input. |
Containers can be styled individually, or by using predetermined styles.
Setting the data source directly loads the data immediately.
You can push data to a group as a result of user action, by using the Display data in group/popup action.
You can style individual groups by adjusting their different properties, or by connecting them to predefined styles and/or style variables.
Native mobile apps include built-in components for the most common persistant UI. They are enable by selecting the view and adjusting the Navigation properties.
In this example, the group floats relative to the top and left edge.
The Move with keyboard property controls how the floating group responds when the keyboard opens.
Setting the data source directly loads the data immediately.
You can push data to a floating group as a result of user action, by using the Display data in group/popup action.
This floating group will only be visible when the current user is logged in.
You can style individual floating groups by adjusting their different properties, or by connecting them to predefined styles and/or style variables.
| Feature | Short list | Vertical list |
|---|---|---|
| Data loading | Loads all data at once | Lazy-loads as the user scrolls |
| Best for | Small to medium lists | Long or unpredictable lists |
| Multiple per view | Yes | Only one per view |
| Scroll behavior | Scrolls with the surrounding view | Scrolls independently within the view |
Filling in the short list's Type of content and Data source loads the data immediately.
Using Current item's Post's title, you can display the title of each post in the list.
You can style individual short lists by adjusting their different properties, or by connecting them to predefined styles and/or style variables.
To load data into a horizontal list, use the Type of content and Data source properties.
Sheets slide up from the bottom, keeping the view partially visible.
| Feature | Sheet | Modal |
|---|---|---|
| Position | Slides up from the bottom | Presented as a full-screen overlay |
| Underlying view | Often partially visible | Typically fully hidden |
| Best for | Contextual actions where the background stays relevant | Fully focused tasks with no distraction |
| Dismissal | Swipe down or button | Swipe down or close button |
| Snap points | Multiple sizes possible | Full-screen only |
| View type | Description |
|---|---|
| Scrollable | The default option. The sheet's content scrolls vertically when it extends beyond the visible area. Best for sheets with mixed content, such as forms, detail views, or long-form information. |
| Not scrollable | The sheet's content is fixed to the size of the sheet and doesn't scroll. |
| Vertical list | Adds a vertical list to the sheet, letting it display a scrollable list of items. This is useful when the sheet's primary purpose is to show a collection, like a list of options, contacts, or search results. |
| Section list | Adds a section list to the sheet, grouping items into named sections. Ideal for sheets that display categorized content, such as organized by category or by date. |
You can push data to a sheet as a result of user action, by using the Display data in group action.
You can style individual sheets by adjusting their different properties, or by connecting them to predefined styles and/or style variables.
Selectable lists allow users to select one or multiple options from a list.
| Feature | Reusable element | Group |
|---|---|---|
| Scope | Shared across views | Belongs to a single view |
| Editing | Edited in isolation | Edited directly on the view |
| Updates | Changes apply to every instance across the app | Changes affect only the specific group |
| Workflows | Has its own workflows, defined inside the reusable element | Workflows live in the view it's on |
| Parameters | Accepts data through custom properties, custom states or Type of content | Accepts data through Type of content or custom states |
| Feature | Reusable element | View |
|---|---|---|
| Purpose | A shared component used inside views | A standalone screen users navigate to |
| Navigation | Placed inside a view, not navigated to | Reached through tab bar or Go to view |
| Contains workflows | Yes | Yes |
| Can be nested | Yes, inside other reusable elements or containers | No, views can't contain other views |
| Parameters | Yes, through custom properties | Yes, through custom properties |
| Instances | Can be used many times across the app | One per screen in your app |
| Updates | Changes apply to every instance at once | Changes affect only that view |
Using variables and styles you can quickly change the entire look and feel of your app.
Using styles, you can create very different designs and apply them to elements across your app quickly.
In the Global tab and Variables section you'll find the list of color variables in your project.
Color variables are available anywhere you work with colors. In this example, we're setting the background color of an element. The top section lets you pick a custom color, while the highlighted bottom section lets you pick from your saved color variables.
In this example, we have a field on the user called Dark mode, and if set to Yes, the style will use a different color. Note: this condition is placed on the style directly, not on an element.
Navigate to Global and Variables to find your project's font variables.
Wherever you work with typography, your font variables appear at the top of the list of available fonts.
You can filter styles by platform by using the highlighted buttons above.
| Name | Type |
|---|---|
| Web and mobile | |
| Text | Both |
| Alert | Web |
| Input | Both |
| Multiline Input | Both |
| Dropdown | Web |
| Checkbox | Both w/ Different properties |
| Radio Buttons | Web |
| Date/Time Picker | Both w/ Different properties |
| File Uploader | Web |
| Popup | Web |
| Button | Both |
| Link | Web |
| Icon | Both |
| Image | Both |
| Video | Web |
| Shape | Both |
| Slider | Web |
| Group | Both |
| Floating Group | Both |
| Table | Web |
| Group Focus | Web |
| Repeating Group | Web |
| Search Box | Web |
| Map | Both w/ Different properties |
| HTML | Web |
| Mobile only | |
| Sheet | Mobile |
| Tab Bar | Mobile |
| Tab item | Mobile |
| Top App Bar | Mobile |
| Web View | Mobile |
| Horizontal List | Mobile |
| Horizontal list item | Mobile |
| Short List | Mobile |
| Short list item | Mobile |
| Selectable list | Mobile |
| Selectable list item | Mobile |
| Vertical list item | Mobile |
| Section header item | Mobile |
| Swipe action | Mobile |
The style canvas gives you a preview of an element with the style applied. The right-hand bar is where you configure the properties and conditionals for the selected style.
The right-hand bar is where you configure the visual properties of the selected style.
Using a dynamic expression, we can detect when the button is hovered and change to a slightly darker color.
The style is marked with Overridden if the element has at least one overridden property.
You can change the style of an element based on specific criteria, by using conditionals. In this example, the style of the text changes when the user is logged in.
You can upload a single font file, multiple files or a whole folder for a font family.
Responsive design ensures your app looks as intended on all resolutions and screen sizes by adjusting the layout and content to fit properly.
| Layout mode | What it does |
|---|---|
| Column | Stacks children vertically (on top of each other). Widths adjust to fill the container, while heights fit each element's content. |
| Row | Arranges children horizontally, side by side. Heights adjust to fill the container, while widths fit each element's content. |
| Align | Positions children in one of nine fixed positions within the container. |
| Fixed | Places each child at a specific position, without automatic layout logic. |
| Sizing method | What it does |
|---|---|
| Fixed | Keeps the element the same size across all devices. Useful for elements that should never scale, like icons or small buttons. |
| Percentage | Scales the element with its container. Useful for elements that should grow or shrink with the available space. |
| Fit to content | Sizes the element based on what's inside it. Useful for elements like text or buttons that adjust to their content. |
| Fill container | Stretches the element to take up all available space in its container. |