Skip to main content
The web version of Bloom gives you the complete workspace for building, testing, and managing your app—all without installing anything locally. It’s the most powerful way to work with Bloom, offering full access to code structure, backend tools, and real-time preview.
Bloom Web Workspace

​
When to use the web app

Starting a new project

The web workspace is ideal for creating your first version and setting up core features.

Detailed editing

When you need to understand your app’s structure or make precise modifications.

Backend configuration

Managing environment variables, API keys, and deployment settings is easiest on web.

Debugging issues

Access logs, backend dashboard, and all diagnostic tools in one place.

Team collaboration

Share your screen during meetings or work alongside teammates on larger displays.

Complex features

When building sophisticated logic, data models, or integrations, the web workspace provides more screen space and tools.

​
Creating your first app

Open Bloom in your browser

Navigate to bloom.app and sign in to your account.If you don’t have an account yet, sign up with Google, GitHub, or email.

Click 'New App'

From your dashboard, click the New App button to start creating.
New App Button

Describe what you want to build

In the prompt, describe your app idea in natural language.
Be specific about:
  • The main purpose (e.g., “habit tracker,” “recipe manager”)
  • Key features (e.g., “daily check-ins,” “photo uploads”)
  • User flows (e.g., “users can create, edit, and delete entries”)
Good example:
Build a daily journal app where users can write entries, 
add photos, and tag entries by mood. Include a calendar 
view showing which days have entries.
Less helpful example:
Make a journal app

Bloom generates your app

Bloom creates your full-stack app:
  • Frontend — Expo project with screens and UI components
  • Backend — Convex functions, database schema, and API endpoints
  • Authentication — OAuth configuration ready to enable
  • Preview — Your app running live in the right panel
This usually takes 2-10 minutes depending on complexity.

Preview your app

Once generation completes, you’ll see your app running in the preview panel.
Click through the screens
Test core functionality
Identify what works and what needs refinement

Iterate and refine

Use the chat to request changes:
  • “Add a search bar to the main screen”
  • “Change the primary color to blue”
  • “Let users upload profile photos”
  • “Add a settings screen with dark mode toggle”
Each iteration updates your app and shows changes in the preview.

​
Working with the preview

​
Testing your app

The live preview lets you interact with your app as if you’re using it on a real device:

Click and navigate

Tap buttons, fill out forms, navigate between screens—everything is interactive.

Test user flows

Walk through complete user journeys from start to finish to verify functionality.

Check responsiveness

Resize the preview to see how your app adapts to different screen sizes.

Verify real-time updates

For apps with live data, open multiple browser windows to test sync across devices.

​
Preview on your phone

For the most accurate testing, preview on your actual device:

Click the QR code icon

In the preview panel toolbar, click the QR code button.

Scan with your phone

Use your phone’s camera to scan the code.
  • iOS: Opens as an App Clip (native preview)
  • Android: Opens in browser or prompts to install Bloom app

Test natively

Your app runs on your phone with full native performance.Changes you make in the web workspace update on your phone in real-time.
Keep your phone preview open while working—it’s the best way to catch issues with touch targets, font sizes, or mobile-specific interactions.

​
Making changes

​
Using the chat

The chat interface is your primary way to modify your app:
Example prompts:
  • “Add a dark mode toggle to the settings screen”
  • “Let users filter the list by category”
  • “Include a search bar at the top of the home screen”
  • “Add push notifications when someone comments”
Example prompts:
  • “Make the buttons larger and rounded”
  • “Change the color scheme to blue and white”
  • “Add icons to the navigation tabs”
  • “Show user avatars as circles instead of squares”
Example prompts:
  • “The save button isn’t working—can you fix it?”
  • “Users can’t delete items from the list”
  • “The app crashes when I tap the profile icon”
  • “Photos aren’t uploading correctly”
Example prompts:
  • “Add validation so users can’t submit empty forms”
  • “Only show items created by the current user”
  • “Send an email notification when someone signs up”
  • “Automatically delete items older than 30 days”
Be specific in your requests. Instead of “make it better,” describe exactly what you want: “increase the font size of headings to 24px.”

​
Monitoring changes

After requesting a change:
  1. Watch the generation progress — Bloom shows what it’s updating
  2. Preview automatically updates — See your changes as soon as generation completes
  3. Check the logs — Verify no new errors appeared
  4. Test the modified feature — Confirm it works as expected
If a change doesn’t work as you hoped, describe the issue in chat and Bloom will try again.

​
Using backend tools

​
Backend Dashboard

Monitor your app’s performance and health:

Health metrics

Track failure rates, cache performance, and system status.

Data browser

View tables, documents, and database schema.

Function inspector

See all Convex functions and their organization.
Learn more about the Backend Dashboard →

​
Logs

Debug issues and monitor activity:
  • Filter by Frontend/Backend to isolate issues
  • Search for specific errors or events
  • Track logs since last deploy to focus on recent changes
Learn more about Logs →

​
Authentication

Configure user sign-in:
  • Toggle OAuth providers (Google, GitHub, Apple)
  • Add custom OAuth credentials for branded login
  • Copy authorized origin URLs for setup
Learn more about Authentication →

​
API Connections

Integrate external services:
  • Use auto-provisioned Bloom keys for instant setup
  • Add your own API keys for production use
  • Manage environment variables securely
Learn more about API Connections →

​
Troubleshooting

Try these steps:
  1. Refresh the preview (click refresh icon or Cmd/Ctrl + R)
  2. Clear browser cache and reload the page
  3. Check if generation is still in progress
  4. Look for errors in logs that might prevent loading
  5. Try opening preview in a new tab
Possible causes:
  • Generation encountered an error (check logs)
  • Request was too vague (try being more specific)
  • Conflicting with existing code (describe the issue)
  • Browser cache needs clearing
If stuck, describe what you attempted and ask Bloom to try a different approach.
Check:
  • You’re signed in to the correct account
  • Your plan includes backend dashboard access
  • The sidebar is expanded (click hamburger menu if collapsed)
  • No browser extensions are blocking content
Performance tips:
  1. Check Backend Dashboard for high failure rates
  2. Review logs for slow queries or functions
  3. Reduce number of database queries on each screen
  4. Optimize image sizes before uploading
  5. Consider pagination for long lists

​
What’s next?

Build from mobile

Learn how to create and iterate on apps from your phone.

Share your app

Generate links and QR codes to share your app instantly.

Backend Dashboard

Dive deeper into monitoring and managing your backend.

Deploy to stores

Ready to publish? Learn how to deploy to app stores.