> For the complete documentation index, see [llms.txt](https://manual.bubble.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://manual.bubble.io/help-guides/previewing-your-app/previewing-a-web-app.md).

# Previewing a web app

{% hint style="info" %}
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](/help-guides/previewing-your-app/previewing-a-mobile-app.md)
{% endhint %}

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:

<table><thead><tr><th width="168.11328125">Method</th><th>Where it opens</th><th>Best for</th></tr></thead><tbody><tr><td><a href="#preview-mode">Preview mode</a></td><td>Inside the editor</td><td>Quickly checking a change, and testing your app as different users</td></tr><tr><td><a href="#preview">Full preview</a></td><td>In a new browser tab</td><td>Testing the full page in a regular browser window, such as with the debugger</td></tr></tbody></table>

## 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

{% stepper %}
{% step %}

#### Open the page you want to preview

Use the page dropdown in the top bar to open the page you want to test.
{% endstep %}

{% step %}

#### 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.
{% endstep %}

{% step %}

#### 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.
{% endstep %}
{% endstepper %}

### 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.

{% stepper %}
{% step %}

#### Open the Preview as dropdown

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

<figure><img src="https://34394582-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M5sbzwG7CljeZdkntrL%2Fuploads%2FDfCat77kWlU9tLuh44hC%2Fpreview-as.png?alt=media&amp;token=bfc19a59-549f-49f6-9dc0-4c068578c461" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

#### 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.
{% endstep %}

{% step %}

#### 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.
{% endstep %}
{% endstepper %}

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.

{% hint style="warning" %}
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.
{% endhint %}

## Preview

<figure><img src="https://34394582-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M5sbzwG7CljeZdkntrL%2Fuploads%2F3xm6fSqVslLxWiBdBHM8%2Fpreview-normal.png?alt=media&amp;token=3c219c34-9460-4c3a-9620-2c831b9049c8" alt=""><figcaption></figcaption></figure>

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. **Safe preview – 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.