Skip to main content

Previewing a web app

Written by Sofia Maconi

This section describes previewing web apps. If you're looking for documentation on previewing native mobile apps, see the article below:

Article: Previewing a mobile app

Bubble makes it easy to preview your web app while you build. Previewing lets you test functionality, check design changes, and make sure everything works the way you expect—before deploying your app to live users.

This article explains the different ways you can preview your web app from the Bubble editor.

Preview options

You can still open your app in a separate browser tab with the play button in the top-right corner of the editor. Here's how the two compare:

Method

Where it opens

Best for

Preview mode

Inside the editor

Quickly checking a change, and testing your app as different users

Full preview

In a new browser tab

Testing the full page in a regular browser window, such as with the debugger

Preview mode

You can preview your app without leaving the editor. Instead of opening your app in a new browser tab, the preview loads right where you're working, so you can check a change and get back to building in a few clicks.

Opening preview mode

  1. Open the page you want to preview. Use the page dropdown in the top bar to open the page you want to test.

  2. Click the play icon. Click the play icon at the top of the left-hand toolbar. Your page loads in the editor, and you can click, type, and run workflows just as your users would.

  3. Go back to editing. When you're done, click one of the other icons in the left-hand toolbar, such as the Design tab, to go back to building.

Previewing as a specific user

Many apps look and behave differently depending on who's logged in. An admin may see pages that regular users can't, and each user sees their own data. With Preview as, you can run your app as a specific user from your database, and check what they see without logging in and out yourself.

  1. Open the Preview as dropdown. In preview mode, click the Preview as dropdown in the top bar.

  2. Select a user. Select the user you want to preview as. The preview reloads, and your app now runs as if that user were logged in.

  3. Switch between users. To compare how your app works for different users, select another user from the dropdown. You can switch as often as you need while you test.

Previewing as a user follows that user's permissions, including your privacy rules. That makes it a quick way to check that each user only sees the data they're supposed to, such as making sure a regular user can't see another user's posts.

The preview runs your app for real. If you save a form, delete a record, or run any other workflow while previewing as a user, the change is made in your database as if that user had done it.

Preview

You can preview your app using the Preview button in the top-right corner of the editor. This opens a new browser tab showing your app's development version. By default, your app loads in normal preview mode, but there are also additional safe preview modes available, which can help when debugging or isolating potential issues.

Preview modes

1. Preview

This is the standard way to test your app. It loads the full development version, including:

  • All custom HTML

  • All installed plugins

  • All workflows and elements

Use this mode for general testing.

2. Disable HTML

This mode disables any custom HTML elements you've added through the HTML element or the page header.

Use this if you're experiencing rendering issues or suspect your custom code might be affecting the app.

3. Disable plugins

This mode disables all plugins, allowing you to test your app without third-party code. Use this if you think a plugin is causing a problem in your app.

4. Disable HTML and plugins

This mode disables both plugins and custom HTML. Use this if you're encountering persistent issues and want to isolate whether the problem is being caused by third-party code.

How to access safe preview modes

  1. Click the Preview button dropdown (downward arrow next to Preview).

  2. Choose the mode you want to use:

    • Preview

    • Disable custom HTML

    • Disable plugins

    • Disable HTML & plugins

Each mode opens a new tab with the corresponding version of your app.

Note on preview URLs

All preview modes load your app in the development version. The URL will include version-test, like so:

https://yourapp.bubbleapps.io/version-test

This version is separate from your live app and only reflects the latest changes in your editor.

Did this answer your question?

Related Articles