Skip to main content
CodeSpeedTest
Languages
Start TypingJump into a test — pick any languageAdaptive TrainingUnlock chars as you master themPractice DrillsFocused sessions targeting weak spotsDaily ChallengesNew coding challenges every dayRace ModeCompete against others in real timeAI OpponentRace against an AI at your WPM levelTournamentsLive coding speed tournamentsArcade GamesZType, Overkill Survival, Glyphica & moreGamificationXP, coins, badges & quests
LeaderboardGlobal rankings for every languageCertificatesEarn verifiable Bronze / Silver / Gold certsActivityDaily streaks & historical analyticsProfileYour stats, badges & achievements
Browse Languages500+ languages with real code examplesBlogTips, guides & deep divesFree ToolsWPM calculator, typing speed report & moreFAQCommon questions answeredGetting StartedNew to CodeSpeedTest?AboutOur story & missionSupportGet help — Pro users get priorityContactGet in touch with the team
Pricing
  1. Home
  2. /
  3. Learn
  4. /
  5. Bubble

Learn Bubble - 10 Code Examples & CST Typing Practice Test

Bubble is a no-code web development platform that allows users to build fully functional web applications, including marketplaces, SaaS products, and internal tools, using a visual drag-and-drop interface without writing code.

View all 10 Bubble code examples →
Bubble Simple Todo AppBubble Counter AppBubble Login FormBubble Notes AppBubble Calculator AppBubble Weather AppBubble Image GalleryBubble Theme Toggle AppBubble QR Scanner AppBubble Event Booking App

Learn BUBBLE with Real Code Examples

Updated Nov 23, 2025

Explain

Bubble enables users to design responsive web apps with a drag-and-drop editor.

It provides a visual workflow editor for logic, database management, and API integrations.

Apps built with Bubble can be deployed as fully functional web apps accessible via browser or custom domains.

Core Features

Visual editor for UI/UX design

Workflow automation for user interactions

Database creation and management

Custom API integrations

Responsive web app deployment and hosting

Basic Concepts Overview

Page: individual web page of the app

Element: UI component like buttons, inputs, images

Workflow: event-driven logic triggered by user actions

Database: tables and fields storing app data

Plugin: external integrations or custom features

Project Structure

Pages - app screens

Elements - UI components

Workflows - app logic

Data - database tables and records

Plugins - optional integrations

Building Workflow

Design page layout with visual elements

Set up database tables for app data

Create workflows to handle user actions

Integrate APIs or third-party services

Test and preview app in browser

Difficulty Use Cases

Beginner: simple landing pages or dashboards

Intermediate: apps with multiple pages and basic workflows

Advanced: SaaS platforms, marketplaces, or multi-user apps

Expert: complex integrations, API workflows, and custom plugins

Enterprise: scalable production-grade web apps

Comparisons

Bubble vs Glide: full-featured web app vs spreadsheet-driven apps

Bubble vs Kodular: web SaaS vs Android-only block-based apps

Bubble vs AppGyver: scalable web workflows vs multi-platform visual builder

Bubble vs Adalo: complex web app vs simple database-driven apps

Bubble vs Webflow: web app logic vs website design focus

Versioning Timeline

2012 - Bubble founded by Emmanuel Straschnov and Josh Haas

2013 - Launched public beta for web app creation

2015 - Released plugin and API ecosystem

2018 - Introduced responsive editor and improved workflows

2025 - Latest version with enhanced performance, automation, and PWA support

Glossary

Page: app screen

Element: UI component

Workflow: event-driven logic

Database: tables storing app data

PWA: Progressive Web App

Installation Setup

Sign up for a free Bubble account

Create a new web app project

Design pages using the visual editor

Define database tables and fields

Set up workflows for app logic and interactivity

Environment Setup

Sign up for Bubble account

Create new app project

Configure pages, elements, workflows, and database

Set up plugins and API integrations

Preview and test app in browser

Config Files

App metadata - name, domain, icon

Pages - visual UI screens

Workflows - event logic

Data - database tables and fields

Plugins - integrations and APIs

Cli Commands

Web-based editor; no CLI required

Preview app in browser

Deploy to live Bubble domain or custom domain

Integrate plugins and APIs

Export data if needed

Internationalization

Multi-language support via text elements

Dynamic content for localization

RTL and locale formatting

Localized images and media

Integrate external i18n plugins if needed

Accessibility

Web accessibility support

Keyboard and navigation support

Readable fonts and contrast

ARIA labels for elements

Follow web accessibility best practices

Ui Styling

Drag-and-drop components

Responsive web layouts

Custom colors, fonts, and themes

Conditional styling via workflows

Media and images integration

State Management

App state managed through database and workflows

User-specific data and privacy rules

Conditional workflows change app state

Dynamic content loaded from database

Multi-user role management for access control

Data Management

Built-in database tables

Bind data fields to UI elements

Filter and sort data dynamically

Manage relationships between tables

Integrate external databases via plugins or APIs

Architecture

Visual front-end editor

Workflow engine for app logic

Built-in database for data storage

Plugin system for integrations

Hosting and deployment managed by Bubble

Rendering Model

UI rendered from page elements

Workflows executed on server or client

Database-driven content dynamically updates UI

Plugin and API data integrated in real-time

Preview reflects real app behavior instantly

Architectural Patterns

Page and element-based UI

Workflow-driven logic

Database-backed app state

Plugin-based modularity

Web app hosting and deployment pipeline

Real World Architectures

SaaS web apps

Marketplaces

Internal dashboards and CRM tools

Booking and scheduling platforms

MVP prototypes for startups

Design Principles

Visual, drag-and-drop app creation

Database-first approach for dynamic apps

Event-driven workflows for logic

Integration-friendly with APIs and plugins

No-code accessibility for non-developers

Scalability Guide

Use optimized workflows and queries

Limit repeating group data for performance

Organize database efficiently

Modularize pages and components

Test load and performance on live app

Migration Guide

Port existing web app designs

Recreate pages and workflows in Bubble

Map data to Bubble database tables

Test logic and integrations

Deploy app on Bubble domain or custom domain

Performance Notes

Minimize excessive workflows on page load

Optimize database queries for large datasets

Reduce heavy plugins for better performance

Test app responsiveness on multiple browsers

Avoid unnecessary repeating group calculations

Security Notes

Use Bubble’s built-in user authentication

Validate user inputs and form submissions

Restrict data access via privacy rules

Enable SSL for secure web hosting

Monitor API keys and external integrations

Monitoring Analytics

Track app usage and user interactions

Monitor database changes

Analyze workflow performance

Test responsiveness across devices

Use third-party analytics for deeper insights

Code Quality

Organize workflows and pages clearly

Use descriptive names for database fields

Minimize unnecessary workflows

Validate API and plugin integrations

Test functionality and responsiveness across devices

Practical Examples

Booking or reservation platforms

E-commerce or marketplace apps

Internal project management dashboards

Customer portal with user authentication

SaaS MVPs for startups

Troubleshooting

Check workflows for correct triggers

Ensure database fields are correctly defined

Resolve page responsiveness issues

Verify plugin/API configurations

Use Bubble forum for support and bug fixes

Testing Guide

Use Bubble preview mode for app testing

Test workflows with sample data

Verify responsive layouts on desktop and mobile

Check privacy rules and access control

Validate API and plugin integrations

Deployment Options

Deploy as web app on Bubble domain

Connect to custom domain

Enable PWA for mobile usage

Export data for offline use

Integrate with third-party hosting or services if needed

Tools Ecosystem

Bubble Editor (web-based IDE)

Built-in database and hosting

Workflow automation engine

Plugin marketplace for integrations

Responsive design and preview tools

Integrations

APIs via API Connector

Stripe for payments

Zapier, Make/Integromat for automation

Third-party plugins for functionality

External databases like Airtable or SQL

Productivity Tips

Leverage templates to speed development

Use workflows efficiently to avoid lag

Preview often during development

Organize database and pages clearly

Plan workflows and logic before building

Challenges

Create a booking app

Build a small marketplace MVP

Integrate Stripe payments

Set up multi-user authentication and roles

Deploy app to production

Learning Path

Sign up for Bubble account

Learn page design and elements

Understand workflows and database setup

Integrate plugins and APIs

Deploy web apps to live environment

Skill Improvement Plan

Week 1: Build simple pages and forms

Week 2: Create workflows and database tables

Week 3: Add API integrations

Week 4: Design responsive layout and PWA

Week 5: Test, optimize, and deploy app

Interview Questions

What is Bubble and how does it work?

How do you design workflows?

How do you set up database tables?

How do you integrate APIs and plugins?

How do you deploy Bubble apps to production?

Cheat Sheet

Elements - UI components

Pages - app screens

Workflows - app logic

Data - database tables

Plugins - integrations

Books

Mastering Bubble

No-Code Web Apps with Bubble

Building SaaS Products in Bubble

Bubble Essentials for Beginners

Advanced Workflows and Plugins in Bubble

Tutorials

Official Bubble tutorials

YouTube Bubble guides

Community forum walkthroughs

Third-party blog tutorials

Online courses on Bubble app development

Official Docs

https://manual.bubble.io/

https://bubble.io/

https://forum.bubble.io/

Community Links

Bubble Community Forum

Reddit discussions

YouTube tutorial playlists

Bubble template marketplace

Third-party blogs and examples

Community Support

Bubble forum

Official documentation

YouTube tutorials

Reddit discussions

Third-party courses and templates

Monetization

Integrate Stripe or PayPal payments

Offer subscription or freemium plans

Deploy client-facing SaaS apps

Internal premium tools for organizations

Monetize marketplaces or booking apps

Future Roadmap

Improved performance and scalability

Better PWA support

Expanded plugin and API ecosystem

Enhanced responsive design tools

More educational resources for no-code users

When Not To Use

Purely mobile apps without web requirement

Apps requiring heavy native SDK access

Performance-heavy real-time apps

Apps requiring complex offline-first functionality

Developers seeking full coding flexibility

Final Summary

Bubble is a no-code platform for building web apps and SaaS products.

Supports visual UI design, workflows, and database management.

Extensive plugin ecosystem for integrations.

Ideal for startups, entrepreneurs, and internal tools.

Allows deployment as web apps or PWAs without coding.

Faq

Is Bubble free?

Yes - with optional paid plans.

Can I build mobile apps?

Yes - via responsive web apps or PWAs.

Does it support API integrations?

Yes - via API Connector and plugins.

Is Bubble suitable for startups?

Yes - ideal for MVPs and SaaS products.

Do I need coding skills?

No - Bubble is fully no-code.

Code Sample Descriptions

1

Bubble Simple Todo App

1. Create a new app in Bubble and design the UI with Input field, Add button, and Repeating Group for the list.
2. Set up a database table 'Todo' with a text field for tasks.
3. Configure workflows:
    - Add button -> create a new entry in 'Todo' table.
4. Bind the Repeating Group to display items from the 'Todo' table.
5. Configure optional delete/edit workflows for each item.
6. Preview live and publish as web app or PWA.

Demonstrates a simple Bubble app with a Todo list, adding tasks and displaying them using Bubble's visual editor and workflow automation.

Let’s Try →
2

Bubble Counter App

1. Design UI with Text element showing current count and buttons '+', '-', 'Reset'.
2. Create a numeric field 'Count' in the database or as a custom state.
3. Configure workflows:
    - '+' button -> increment 'Count'.
    - '-' button -> decrement 'Count'.
    - 'Reset' button -> set 'Count' = 0.
4. Bind Text element to display 'Count'.
5. Preview live.

Implements a counter using Bubble visual elements and workflows.

Let’s Try →
3

Bubble Login Form

1. Design UI with Inputs for email and password, and buttons 'Login' and 'Signup'.
2. Use Bubble's built-in User database.
3. Configure workflows:
    - 'Signup' -> create new User.
    - 'Login' -> authenticate User.
4. Show alerts on success or error.
5. Redirect to dashboard page after login.
6. Preview live.

Implements login and signup forms with Bubble's authentication system.

Let’s Try →
4

Bubble Notes App

1. Design UI: Input for new note, Add button, Repeating Group for notes.
2. Create 'Note' table in database with a 'Content' field.
3. Configure 'Add' workflow -> create new 'Note' entry.
4. Bind Repeating Group to display 'Note' entries.
5. Optional delete/edit workflows.
6. Preview live.

Displays and manages notes using Bubble's database and Repeating Group.

Let’s Try →
5

Bubble Calculator App

1. Design UI with two Inputs for numbers, buttons '+', '-', '*', '/', and Text element for result.
2. Configure workflows:
    - Each button performs corresponding calculation and sets result in Text element.
3. Preview live.

Implements a simple calculator using Bubble inputs and workflows.

Let’s Try →
6

Bubble Weather App

1. Design UI: Input for city, Button 'Get Weather', Text elements for temperature and condition.
2. Configure API Connector with weather API.
3. Configure workflow: Button -> call API -> set results in Text elements.
4. Preview live.

Fetches and displays weather info using API Connector and Bubble workflows.

Let’s Try →
7

Bubble Image Gallery

1. Design UI: Repeating Group with Image element.
2. Connect data source: Database table or API with image URLs.
3. Optional 'Add Image' workflow to append images.
4. Preview live.

Displays images from database or API using Bubble Repeating Group.

Let’s Try →
8

Bubble Theme Toggle App

1. Design UI with Switch element and page background/text elements.
2. Create custom state 'isDark'.
3. Configure Switch workflow -> toggle 'isDark'.
4. Bind colors of elements to 'isDark' state.
5. Preview live.

Switches between light and dark themes using custom states and workflows.

Let’s Try →
9

Bubble QR Scanner App

1. Install QR Scanner plugin.
2. Design UI: Button 'Scan QR', Text element for result.
3. Configure workflow: Button -> start scanner -> save scanned data in custom state.
4. Bind Text element to display scanned data.
5. Preview live.

Scans QR codes using device camera and displays results using Bubble plugins.

Let’s Try →
10

Bubble Event Booking App

1. Design UI: Inputs for event details, Button 'Book', Repeating Group for bookings.
2. Create 'Booking' table in database.
3. Configure workflow: Button -> create new 'Booking' entry.
4. Bind Repeating Group to display bookings.
5. Optional delete/edit workflows.
6. Preview live.

Manages event bookings using Bubble database, forms, and workflows.

Let’s Try →

Frequently Asked Questions about Bubble

What is Bubble?

Bubble is a no-code web development platform that allows users to build fully functional web applications, including marketplaces, SaaS products, and internal tools, using a visual drag-and-drop interface without writing code.

What are the primary use cases for Bubble?

MVPs and prototypes for startups. Marketplaces and SaaS platforms. Internal business tools and dashboards. Customer portals and CRM apps. Web apps with database and workflow logic

What are the strengths of Bubble?

Full-featured web app creation without coding. Highly flexible workflows and database logic. Extensive plugin ecosystem. Ability to create complex SaaS and marketplace apps. Community templates and learning resources

What are the limitations of Bubble?

Web app only; mobile requires responsive PWA or wrappers. Steep learning curve for advanced workflows. Performance can degrade with very complex apps. Limited control over custom code compared to traditional frameworks. Paid plans required for production-scale apps

How can I practice Bubble typing speed?

CodeSpeedTest offers 10+ real Bubble code examples for typing practice. You can measure your WPM, track accuracy, and improve your coding speed with guided exercises.

Learn Other Programming Languages

CReactPythonC++RustTypeScriptKotlinPHPJavaC#RubyMqlCqlN1qlCypherGremlinPartiqlHaskellElixirFsharpView all languages →
CodeSpeedTest

Improve your coding speed, code accuracy, and programming syntax WPM with practice sessions across 500+ programming languages.

Quick Links

HomeAboutFeaturesGetting StartedLanguages

Legal & Support

Pro ⚡ PricingContactPrivacy PolicyTerms of Service

Connect

CodeSpeedTest on GitHubCodeSpeedTest on TwitterEmail CodeSpeedTest

© 2026 CodeSpeedTest. All rights reserved.