# Previewer

## Project Previewer

This section provides instructions on how to manage the project previewer, including resizing, repositioning, opening, and closing it.

***

### Layout

By default, the previewer is displayed on the **right side** of the editor group.

<figure><img src="/files/6aSBHTA03Mqet2R4fxnV" alt="" width="563"><figcaption></figcaption></figure>

#### Resizing the Previewer

You can resize the previewer by moving your cursor to the **left edge** of the panel. Click and drag it **left or right** to adjust its size.

<figure><img src="/files/dXjeKa4Qxzm1EPZ3jnZB" alt="" width="563"><figcaption></figcaption></figure>

#### Moving the Previewer

The previewer can be repositioned anywhere within the editor group. For example, you can move it next to the file tab (e.g., `index.html`).

1. Click on the **Preview** tab.
2. Hold down the mouse button and drag it to your desired position.\
   \&#xNAN;*(In this example, we move it next to the file tab.)*

<figure><img src="/files/Uai8KcZpO727FrP5K8nj" alt="" width="563"><figcaption></figcaption></figure>

After repositioning, it may appear as follows:

<figure><img src="/files/c60FWB5RhoCLF1XisRfU" alt="" width="563"><figcaption></figcaption></figure>

***

### Opening and Closing the Previewer

#### Closing the Previewer

If you no longer need the previewer, you can close it by clicking the **X** icon.

<figure><img src="/files/IHktLNLlRW56A8jQ6j9r" alt="" width="563"><figcaption></figcaption></figure>

#### Reopening the Previewer

To reopen the previewer:

1. Open the **Command Palette**.

<figure><img src="/files/yJYyD9wombflwCCBUa62" alt="" width="563"><figcaption></figcaption></figure>

2. Search for **Monaca: Open Preview** and select it.

<figure><img src="/files/peqFfDxcVOtnUZLxmjts" alt="" width="563"><figcaption></figcaption></figure>

3. The preview tab will be restored in the editor group.

<figure><img src="/files/nZT2Q2opP5LWtX8qZpfB" alt="" width="563"><figcaption></figcaption></figure>

***

### Notes

* The previewer **displays** and **live-reloads** the preview content of your project as you modify the source code.
* If the previewer does not display content properly or encounters errors, check the **Preview Terminal** tab at the bottom of the IDE.
* The behavior of the previewer may vary depending on the project.

<figure><img src="/files/l3VYRamlM5ROadiK597s" alt="" width="563"><figcaption></figcaption></figure>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://en.docs.monaca.io/products_guide/new-monaca-cloud-ide/previewer.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.