Starting a new Bubble app begins with choosing a clear, SEO-friendly name and deciding whether to build from scratch or use a template. This tutorial walks you through naming conventions, selecting the right template category, configuring initial app settings like colors and fonts, and structuring your first pages and Data Types for a solid foundation.
Overview: Naming, Templating, and Setting Up a New Bubble App
This tutorial is for anyone starting a brand-new Bubble project. You will learn how to pick an app name that works for your subdomain URL, evaluate whether a template saves you time or creates technical debt, configure the Styles tab with your brand colors and fonts, and sketch out your initial database schema and page structure before you start dragging elements.
Prerequisites
- A free or paid Bubble account
- A basic idea of what your app will do
- Access to your brand colors and font preferences (optional but helpful)
Step-by-step guide
Choose your app name and subdomain
Choose your app name and subdomain
Go to bubble.io and click Create a new app. In the App name field, type a short, lowercase, hyphen-separated name (e.g., my-saas-tool). This name becomes your development subdomain: my-saas-tool.bubbleapps.io. Avoid spaces, special characters, and overly long names. You can always add a custom domain later on a paid plan, but the app name itself cannot be changed after creation — you would need to duplicate the app under a new name. Pick something descriptive enough to remember but short enough for a clean URL.
Pro tip: If you plan to share the dev link with testers, pick a professional-sounding name since the subdomain is visible in the URL bar.
Expected result: You have a clean, memorable app name that creates a professional-looking subdomain URL.
Decide between a blank app and a template
Decide between a blank app and a template
On the creation screen, Bubble offers two paths: Start from a blank app or Choose a template. Templates come with pre-built pages, Data Types, workflows, and styles. They are useful for common patterns like marketplaces, SaaS dashboards, or social networks. However, templates can include unnecessary complexity, outdated plugins, and opinionated design choices. For most new builders, starting blank and building piece by piece gives you a cleaner understanding of your app. If you do choose a template, open it in Preview first, then review the Data tab to understand the existing schema before adding your own features.
Pro tip: Templates are best when you need a working prototype in hours, not days. But plan to spend time removing parts you do not need.
Expected result: You have created a new app, either blank or from a template, and understand what came pre-built if you used a template.
Configure initial styles and brand settings
Configure initial styles and brand settings
Open the Styles tab in the left sidebar. Click Style Variables at the top. Here you can set your primary font family, heading font, and body font. Under Color Variables, define your brand palette — primary color, secondary color, background, text color, and accent. These variables can be referenced across all elements, so changing a color variable later updates every element using it. Next, go to Settings → General and upload your favicon. Go to Settings → SEO / metatags to set a default page title and meta description for your app.
Expected result: Your app has consistent brand fonts, colors, and a favicon configured, ready to be used across all pages.
Plan your initial pages and Data Types
Plan your initial pages and Data Types
Before dragging any elements, sketch out the pages your app needs (e.g., index, dashboard, profile, settings) and the Data Types that power them (e.g., User, Project, Task). In the Data tab, click Data Types and create your first 2-3 types with their key fields. For example, a SaaS app might need a Project type with fields: name (text), description (text), owner (User), status (text), created_date (date). Keeping your database lean at the start prevents rework. Use Option Sets for static lists (like status values or categories) instead of Data Types — they load faster and cost zero workload units.
Pro tip: Write your Data Types and fields in a simple spreadsheet first. It is much faster to reorganize a spreadsheet than to delete and recreate Bubble Data Types.
Expected result: You have a clean initial database schema with 2-3 Data Types, key fields defined, and Option Sets for static values.
Create your first page layout with responsive containers
Create your first page layout with responsive containers
On the index page, start by adding a Group element set to Column layout that spans the full page width. Inside it, add a Group for the header (Row layout), a Group for the main content area (Column layout), and a Group for the footer (Row layout). Set each group to have a min-width of 320px and a max-width of 1200px with left/right auto margins for centering. This gives you a responsive scaffold. Set the header group to Fixed type if you want a sticky navigation bar. Every page you create from now on can follow this same three-section structure.
Expected result: Your index page has a responsive header-content-footer layout structure that adapts to different screen sizes.
Complete working example
1NEW APP SETUP CHECKLIST2======================341. APP CREATION:5 bubble.io → Create a new app6 Name: lowercase-hyphenated (e.g., my-saas-tool)7 Choice: Blank app (recommended) or Template892. STYLE CONFIGURATION:10 Styles tab → Style Variables:11 - Primary font: [your heading font]12 - Body font: [your body font]13 Styles tab → Color Variables:14 - Primary: [brand color hex]15 - Secondary: [accent color hex]16 - Background: [bg color hex]17 - Text: [text color hex]18193. APP SETTINGS:20 Settings → General:21 - Upload favicon22 Settings → SEO / metatags:23 - Default page title24 - Default meta description25264. DATA TYPES (example SaaS app):27 User (built-in):28 - name (text)29 - role (Option Set: Role)30 Project:31 - name (text)32 - description (text)33 - owner (User)34 - status (Option Set: ProjectStatus)35 - created_date (date)36 Task:37 - title (text)38 - project (Project)39 - assigned_to (User)40 - due_date (date)41 - completed (yes/no)42435. OPTION SETS:44 Role: Admin, Member, Viewer45 ProjectStatus: Active, On Hold, Completed, Archived46476. PAGE STRUCTURE:48 index:49 └ Group Page (Column, full width)50 ├ Group Header (Row, fixed)51 ├ Group Content (Column, centered)52 └ Group Footer (Row)Common mistakes when deciding on naming and templating when creating a new app in
Why it's a problem: Choosing a vague or overly long app name
How to avoid: Use a short, descriptive, hyphenated name that reflects your product (e.g., acme-crm, local-eats)
Why it's a problem: Starting with a template and building on top without understanding its structure
How to avoid: If using a template, spend 30 minutes reviewing the Data tab, Workflow tab, and Plugins tab before making any changes
Why it's a problem: Skipping Style Variables and Color Variables
How to avoid: Set up Style Variables and Color Variables in the Styles tab before creating any UI elements
Why it's a problem: Creating too many Data Types at the start
How to avoid: Start with 2-3 core Data Types and add more only when a feature specifically requires them
Best practices
- Use lowercase hyphenated names for your app (e.g., my-app-name) since this becomes your subdomain
- Set up Color Variables and Style Variables before building any pages to ensure brand consistency
- Use Option Sets for static lists like statuses, categories, and roles instead of creating Data Types
- Plan your Data Types on paper or a spreadsheet before creating them in Bubble
- Create a reusable header and footer Group from the start so every page stays consistent
- Upload a favicon early — it appears in browser tabs and bookmarks
- Start with a blank app unless you need a working prototype within hours
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I am starting a new Bubble.io app for [describe your idea]. Help me plan the database schema — what Data Types and fields should I create? Also suggest an Option Set structure for any static lists.
Create a responsive page layout with a sticky header containing a logo and navigation links, a main content area, and a footer. Use Column layout for the page and Row layout for the header and footer. Set max-width to 1200px and center the content.
Frequently asked questions
Can I change my Bubble app name after creating it?
No. The app name is permanent and becomes your subdomain. To use a different name, you must duplicate the app under a new name and delete the old one.
Should I start from a template or a blank app?
Start blank if you want full control and understanding of every element. Use a template only if it closely matches your app concept and you are comfortable reviewing its existing Data Types, workflows, and plugins.
How many Data Types should I create at the beginning?
Start with 2-3 core Data Types that represent the main entities in your app. Add more as specific features require them. Over-engineering the schema early leads to rework.
What is the difference between Option Sets and Data Types?
Option Sets are static, developer-managed lists cached on the client with zero database cost. Data Types are dynamic database tables that support user-generated content, privacy rules, and relationships. Use Option Sets for status labels, categories, and roles.
Can RapidDev help me plan and set up a new Bubble app?
Yes. RapidDev can help with initial architecture planning, database schema design, brand configuration, and building your first pages and workflows to give you a solid starting point.
Do Style Variables update all elements that reference them?
Yes. When you change a Color Variable or font in Style Variables, every element using that variable updates automatically across all pages.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation