Bubble App Templates
5 production-ready Bubble.io application templates covering SaaS dashboards, two-sided marketplaces, booking systems, business directories, and community platforms. Each template includes complete page layouts, database schemas, reusable elements, API workflows, and responsive design configurations.
Key Features
- 5 fully functional app templates — not wireframes, actual working Bubble apps
- Database schemas with proper data types, privacy rules, and option sets
- Responsive layouts — configured for desktop, tablet, and mobile breakpoints
- Authentication flows — sign-up, login, password reset, and role-based access
- API workflow definitions — backend logic for data processing and integrations
- Reusable elements — navigation bars, modals, cards, and form components
- Performance-optimized — search constraints, page load patterns, and data source best practices
What's Included
| # | Template | Pages | Data Types | API Workflows | Reusable Elements |
|---|---|---|---|---|---|
| 1 | SaaS Dashboard | 8 | 6 | 12 | 10 |
| 2 | Marketplace | 12 | 8 | 18 | 14 |
| 3 | Booking System | 7 | 5 | 10 | 8 |
| 4 | Business Directory | 6 | 4 | 8 | 9 |
| 5 | Community Platform | 10 | 7 | 15 | 12 |
bubble-app-templates/
├── README.md
├── configs/
│ ├── development.yaml # Dev environment settings
│ └── production.yaml # Production settings
├── src/
│ ├── saas_dashboard/
│ │ ├── schema.json # Database types & fields
│ │ ├── pages.json # Page structure & elements
│ │ ├── workflows.json # Page & API workflows
│ │ └── privacy_rules.json
│ ├── marketplace/
│ ├── booking_system/
│ ├── business_directory/
│ └── community_platform/
├── examples/
│ ├── customization_guide.md
│ └── stripe_integration.md
├── docs/
│ └── QUICKSTART.md
└── LICENSE
Quick Start
- Choose a template — review the descriptions below to match your use case
- Create a new Bubble app at https://bubble.io (paid plan recommended for API workflows)
-
Import the database schema — recreate data types from
src/<template>/schema.json -
Set up privacy rules — follow
privacy_rules.jsonfor each data type -
Build pages — use
pages.jsonas your blueprint for element placement and styling -
Configure workflows — implement page and API workflows from
workflows.json - Test in development mode — use Bubble's preview before deploying to live
Example: SaaS Dashboard Schema
{
"data_types": {
"User": {
"fields": {
"role": { "type": "option_set", "ref": "UserRole" },
"company": { "type": "Company" },
"onboarding_complete": { "type": "boolean", "default": false },
"subscription_tier": { "type": "option_set", "ref": "PricingTier" },
"last_active": { "type": "date" }
},
"privacy": {
"view": "Current User or Admin",
"edit": "Current User only",
"fields_hidden": ["subscription_tier"]
}
},
"Company": {
"fields": {
"name": { "type": "text" },
"members": { "type": "list_User" },
"plan": { "type": "option_set", "ref": "PricingTier" },
"monthly_usage": { "type": "number", "default": 0 },
"usage_limit": { "type": "number", "default": 1000 }
}
},
"Activity": {
"fields": {
"user": { "type": "User" },
"action_type": { "type": "option_set", "ref": "ActionType" },
"description": { "type": "text" },
"metadata": { "type": "text" }
}
}
},
"option_sets": {
"UserRole": ["Owner", "Admin", "Member", "Viewer"],
"PricingTier": ["Free", "Starter", "Professional", "Enterprise"],
"ActionType": ["login", "create", "update", "delete", "export"]
}
}
Example: Marketplace Page Workflow
page: create_listing
trigger: Button "Publish Listing" is clicked
steps:
- action: Create a new Listing
fields: { title: "Input Title's value", description: "Multiline value", price: "Input Price's value", seller: "Current User", status: "pending_review" }
- action: Schedule API Workflow
workflow: notify_admin_new_listing
parameters: { listing: "Result of step 1" }
- action: Navigate to listing_detail (data: Result of step 1)
- action: Show Alert "Listing submitted for review!" (style: success)
Configuration
# configs/production.yaml
bubble:
app_name: "your-app-name"
plan: "professional" # Minimum recommended for API workflows
# Stripe integration (for marketplace/SaaS templates)
stripe:
api_key: "YOUR_STRIPE_API_KEY"
webhook_secret: "YOUR_WEBHOOK_SECRET"
# Enable test mode during development
test_mode: false
# Email provider (for transactional emails)
email:
provider: "sendgrid"
api_key: "YOUR_SENDGRID_API_KEY"
from_address: "noreply@example.com"
# Performance settings
performance:
# Limit search results per page
items_per_page: 20
# Enable server-side pagination
server_side_pagination: true
# Image compression quality (1-100)
image_quality: 80
# SEO settings
seo:
enable_page_titles: true
enable_meta_descriptions: true
sitemap_enabled: true
Best Practices
- Don't modify the schema after importing data — plan your fields before adding records
- Use Option Sets instead of text fields for any value from a fixed list
- Set privacy rules immediately — Bubble's default is "everyone can see everything"
- Avoid "Do a search for" in repeating groups — use constraints on the data source instead
- Use API workflows for any logic that should run server-side (payments, emails, data cleanup)
- Enable version control — use Bubble's Save Point feature before major changes
Troubleshooting
| Issue | Solution |
|---|---|
| App loads slowly | Check for unconstrained searches; add filters to reduce data fetched |
| Privacy rules block legitimate access | Test with "Run as" in the debugger to see what each role can access |
| Stripe webhook not firing | Verify the API endpoint URL in Stripe Dashboard matches your Bubble app |
| Responsive layout broken on mobile | Check that element widths use % not px, and test at 320px viewport |
| Workflow runs multiple times | Add "Only when" conditions to prevent duplicate triggers |
This is 1 of 11 resources in the No-Code Builder Pro toolkit. Get the complete [Bubble App Templates] with all files, templates, and documentation for $49.
Or grab the entire No-Code Builder Pro bundle (11 products) for $129 — save 30%.
Top comments (0)