The Application Editor
Last updated
Last updated
You design, build, maintain, and scale your app using the Application Editor. The editor is structured around seven main tabs, which are outlined here. It also has a number of key tools and features that you will use as you build on Bubble. A few of those tools are highlighted here, as well.
This is where you design the visual appearance of the app. Draw elements on the page, drag and resize them, and adjust their properties and appearance. For new users, we recommend starting here.
To add a new element, click an element type in the Palette on the left, then click and drag on the page to insert it. Double-clicking on an element reveals the Property Editor, where you can customize the element's appearance and behavior. Right-clicking on an element displays a drop-down menu with additional editing options.
The Workflow Tab is where you define the workflows that program your page. The different workflows are displayed as boxes, which represent the event.
Clicking on an event or an action will reveal a panel similar to the Property Editor. That's where you can define the different fields that need to be set for the action. For instance, a 'Send email' action will open a panel with a field named 'To', where you will define the address to which the email should be sent. If this information is dynamic, you can add it using the Composer, which lets you build dynamic expressions without code.
The Data Tab is where you can view your data structure and modify it. You can see the different data types that are used in your application, as well as the fields for each of them. The 'App Data' section shows you actual data. An Excel-type view will show the entries that have been created, and you can query, export, modify and delete entries. The Privacy section is where you define privacy rules to ensure that your application's data is seen by the right users. This is an advanced feature, but something you will have to set up as soon as you are using your application in production.
The Styles Tab is where you define the different styles that elements can have in your interface. A Style is a shared set of properties (e.g. background colors, font size, etc.) that can be applied to elements of a similar type (e.g. Text elements). Using styles will help you have a more consistent interface, and it will enable you to quickly change your theme. It is highly recommended to use Styles whenever you can.
Plugins are a way to extend Bubble's core functionality. For instance, you will have to install plugins in your application if you want to use an element that has been built by the Community, charge a credit card with Stripe, or offer your users the ability to sign up with Facebook. You can install plugins in the Plugins Tab. Once a plugin is installed, you will be able to enter parameters for each plugin if needed. For instance, if you want to use the Stripe plugin, you will need to enter API keys that you get from Stripe.
The Plugins Tab is also where you can review plugins and rate them. Since most plugins are built by the Community, ratings and reviews are very important to keep the Bubble ecosystem healthy and help plugin builders refine their plugins.
This tab lets you control your application subscription and paid add-ons. In the Settings tab, you will also find some application-wide settings that you will have to define before launching your application. Those settings range from defining a color palette and adding custom fonts to setting a password policy, making your app private, etc.
This tab is useful once your app is live, or when you are testing it in Run-mode. You can use the server logs to help diagnose past events and workflow issues, as well as to check scheduled actions and your app usage in terms of workflow runs and upload storage.
Watch out!
Simultaneous use of many open browser tabs for the Bubble Application Editor on the same app can lead to unexpected behavior!
The Property Editor is the main panel that you use to design each page's different elements, and customize events and actions. It is a draggable popup that will show the different fields that can/should be filled for an element, action, or event. It appears when you double-click on an element, or click once on an event or action. The top bar lets you rename the element/action/event you're editing, and the icons on the right let you show the Element Inspector, the Comment Panel, or some contextual videos.
Controls related to the overall appearance of an element. This includes the data type, data source, styles, and transitions settings.
Controls related to the overall layout of an element on the page. This includes the width, height, container layout type, page visibility, and margins.
Conditionals allow you to control how page elements behave and appear under certain circumstances. This tab remains unchanged from before.
As soon as you have several pages and elements, you will be in a situation where you want to find all the elements that use the Current User's email, for instance, or all the ones that have a given style. Clicking on the magnifier icon in the top bar of the editor will reveal the search tool. You can search for elements, actions, etc. Clicking on an entry will take you to the right page/tab in the Editor.
The 'Contains text' option simply matches any element where the underlying metadata, not the display name, contains part of the text that is searched. For example, when you rename a field, we don't rename all the occurrences of such a field's metadata, because that would be very slow, instead we only tell the Bubble editor to display the new display name where it needs to display it.
Since Bubble is very open-ended, you can (and probably will) make some mistakes as you design. A mistake can be a missing field or an issue with inconsistent type, such as using a text field type in a 'Charge a current user' action, when it should be a number for the price. The Issue Checker will check your app in real-time and list issues to fix. You will notice a red warning icon in the top bar as soon as you have an issue, and clicking on this warning icon will reveal the list. Similar to the search tool, clicking on each entry will take you to the right place and highlight the corresponding issue.
It is important to keep the issue list as short as possible at all times (preferably to 0 items), as issues can make your app non-functional in run mode. You won't be able to deploy to the live, user-facing version of your app if you have issues.
As soon as you create a new app on Bubble, your app is ready to run. You can click on Preview at any time, and that will run your application on the page you are currently editing.
Version control enables you to work on your app within a Development environment without impacting the Live app, ensuring a secure process for adding new features and allowing deployment when the app is fully prepared.
Read more about version control here.
Bubble saves your app automatically, in real time. As soon as you modify an element, action, setting, etc., the change will be saved. You will see a 'saving' notification in the top bar for a brief instant, which will change to 'saved' as soon as the saving process is finished.
Note that sometimes the notification can turn red, usually because the internet connection hasn't been stable for some time. When this happens, you should stop working on your app for a bit and see if the connection returns to normal. If it doesn't, refreshing the Editor is the best way to get back to a normal state. You may lose the last changes you made when you refresh. Do not keep working on your app if the notification turns red, as you may lose any changes made to the app after the color change.
All modifications to your app, within one browser session, are undoable/redoable. You can click on both icons in the top bar to revert changes or apply them again. Note that the changes can happen in some parts of the Editor that aren't visible on the page you're on in that moment, so use these buttons with caution if you don't see what they are doing.
More than one user can modify an app at the same time (note that you need to be on a paid plan to invite users). When someone else is modifying the app you are in, you will see the other user's mouse moving. This is useful to prevent two people from modifying the same element at the same time.
Some shortcuts have been added to the Editor to make building faster. In addition to copy-pasting, you can add a workflow to a button and navigate the Composer (among other actions) using shortcuts. You can see a list of currently available shortcuts in the Shortcuts panel in the Help menu.
The Help menu gives you the option to watch some videos from the Academy. There are also contextual videos that appear the first time you draw an element. You can also watch these by clicking on the '?' icon in the Property Editor. While these videos sometimes show an older Bubble User Interface theme, their content is still up-to-date and will help you get started with a new element/action.
You can access our docs from the Editor through the 'See reference' tool-tip. When you hover over an icon or a field for a few seconds, the tool-tip will appear. Clicking on the tool-tip will open a new tab and take you to the right place within the docs. If you already have the docs open, then you'll instantly redirect to the right place.
