A WalkthroughOf Bubble.io

  • by

There are over 4.5 billion people connected to the internet, with about 1.5 billion more predicted to join them in 2022. Most businesses and organizations now have a website to take advantage of this large audience. There are now about 1.5 billion websites on the internet serving various functions. If you have a business or an organization, or you have personal works you want to share with a large number of people the internet is the best place to do this. 

A good way to do this is to develop a website for your purpose. Conventionally, websites are developed using web technologies like HTML, CSS, Javascript, and PHP (or frameworks and libraries of them). But this isn’t the only way to develop web apps or websites. You can develop a website using Content Management Systems such as WordPress, Joomla or Drupal. You can also develop websites using Static Sites Generators. 

In this article, we would be taking you through developing websites with Bubble, a visual programming tool for web development.


Bubble is a visual programming language designed to build web and mobile web applications without coding. You build applications in Bubble with the Bubble editor by dragging and dropping components in it. This makes it easy for non-technical people to build web apps easily without having to learn several programming languages. 

Although it might not seem like it, Bubble is an actual programming language that is designed for web development. The key difference is in the level of abstraction. When using Bubble, you do not usually have to deal with concepts like servers, databases, etc. Those concepts are considered low-level by Bubble. In Bubble, you deal with more abstract situations such as storing data, sending out an email, or deploying a website. The underlying logic is taken care of by Bubble.

Because of this, Bubble is more flexible than website builders like Wix and GoDaddy. Most of the functionalities added to such websites are done using plugins, some of which might not be able to perform certain tasks you want. With Bubble, you can add these functionalities yourself the way you want it. 

Now that we have cleared how Bubble works, let’s have a look at the visual editor.

Inside The Bubble Visual Editor

When you create a new project in Bubble’s visual editor, you are presented with a screen similar to the one in the image above. If you look at the left pane on the editor, you would see that it contains seven tabs(as at the time of writing this).

  • Design Tab
  • Workflow Tab
  • Data Tab
  • Styles Tab
  • Plugins Tab
  • Settings Tab
  • Log Tab(this isn’t really important for now, so we would ignore it in this article)

Let’s examine each of these tabs.

Design Tab 

The design tab is the first tab you see when you create a new project. Just beside the tab bar is another column that contains two tabs, UI Builder and Responsive. The UI Builder contains a list of UI controls you can add to the canvas. The canvas is by the right of the column displaying the controls. The UI controls are grouped into five:

  • Visual elements
  • Containers
  • Input forms
  • Reusable elements
  • Elements templates

Visual elements: These are UI controls like Buttons, Text, Icons, Image, etc. These are controls you use to display information on the app you are building or controls you interact with in the case of controls like buttons. 

Containers: These are used to group UI controls like those found in the visual elements. 

Input forms: These are UI components for entering data, choosing options, uploading files, etc. Some of them are radio buttons, checkboxes, slider inputs, and so on. 

Reusable elements and Element templates: This section contains some pre-created elements that can be reused. You can also create yours and add it to the reusable elements or elements template section. 

The Responsive category beside the UI Builder deals with the responsiveness of your web app across various devices and orientations.

Workflow Tab

The Workflow tab is used to add interactivity to the web app you are building. When you go to the Workflow tab, you would notice that at the right of the tab bar is an empty area with a single button that says “Click here to add an event.” This is where you add behaviors to your visual elements. 

When you click on the button, it presents you with a list of conditions to choose from. For example, there is “Page is loaded”, “User is logged in”, etc. After selecting an option. You will see a button on the screen prompting you to click to add an action. When you do that, you will be presented with another list, containing a list of actions you can carry like signing a user up or going to a particular page.

Data Tab

The Data tab is where you structure the data you use in your application. You can create new data types and add fields to these data types under the Data types tab. The Data types tab also displays a list of data types and fields you create. You can also check out a list of items(for example a list of users) under a data type in the App data tab. 

The Privacy tab is where you determine the security rules of your application. It is on this tab you can do things like restricting access to information based on a user’s profile. There is also a File manager tab that displays a list of files that have been uploaded to your application.

Styles Tab

The styles tab can be compared to CSS in conventional web development. CSS is the language used in adding styles to the components you create. This is exactly what the styles tab is for. The styles tab has two columns side by side as you can see from the picture above. The first one on the left displays a list of UI elements with different styles. While the one by the right previews the element you select and allows you to edit it as you see fit.

Plugins Tab

The Plugin tab displays a list of plugins you have added to the application. If you aren’t using any, you would only see a button prompting you to add one. When you click on the button, the visual editor takes you to a page where you can search for plugins you want to use. Plugins allow you to extend the functionality of your app and connect to external services. As at the time of writing this, Bubble has over 800 plugins. You can check them out here

Settings Tab

The settings tab contains several other tabs, each of which serves important functions relating to the development and proper functioning of your web app. The Settings tab is where all other aspects of your web app asides the user interface and the behavior is managed. This is where you sort out things like your domain name, the APIs you use and so on. You won’t be doing much here for now. 

To round up…

Bubble comes with a very good documentation. You can check it out to learn more about how the visual editor works. The visual editor is very easy to use and you can get going in no time. It should be noted that Bubble is a freemium service and certain services such as adding plugins and choosing domain names aren’t available in the free version.

Leave a Reply

Your email address will not be published. Required fields are marked *