# Custom Previewer Tab

## 1. What's it?

You can customize the Custom Previewer Tabs, which always render one format at once time.

This handy tool might help you to fix the following issues:

* Format the BODY as **JSON**, but the Content-Type isn't `application/json`
* Format the body as **Protobuf**, but the Content-Type isn't `application/x-protobuf`
* Render HTML Page on the Web View
* **Beautify** the minified files (HTML, CSS, JS)
* Multipart/form-data
* Try to format the body as the selected type regardless of the `Content-Type`
* Convert MessagePack (msgpack) to JSON
* [Code Generator](/advanced-features/code-generator.md) to Swift, Node, Javascript, cURL, ...
* GraphQL Query Prettier

<div data-full-width="false"><figure><img src="/files/ZRVTQXc6iLumtWxbAktk" alt="" width="563"><figcaption><p>Select Custom Tabs for Request / Response Panel</p></figcaption></figure></div>

{% hint style="info" %}
The selected custom tabs will be appended to the right side of the Request or Response view
{% endhint %}

<figure><img src="/files/DMyB7qiOSppxyVFw3XSH" alt=""><figcaption><p>Display Custom Tabs</p></figcaption></figure>

## 2. How to use it?

You can either access the Custom Previewer Window:

1. Click on the "+" button on the Request/Response bar or (from the Tools Menu -> Custom Previewer Tab...)
2. Click the checkbox to show/hide your custom Tab
3. The New Tab will appear on the Request or Response Panel ✅

### 2.1 Server-Sent Events and OpenAI Tabs

From Proxyman 5.22.0 or later, Proxyman supports

* Server-Sent Events from OpenAI endpoints: Auto prettify the inline JSON of the data event
* OpenAI Tab: Auto accumulate the content and show the final result, similar to the output of your chat view.

<figure><img src="/files/kGKKTVX1T6WA7tBpAxTz" alt=""><figcaption><p>Capture OpenAI Endpoints</p></figcaption></figure>

## 3. ⚡️ Advance: Create a custom Tab with the Scripting Tool

* ✅ Show your own data on your tab
* It is useful if you want to decode your Body or display a partial body to your custom tab

### How to use:

1. the Click on the "+" button on the Request/Response bar or (from the Tools Menu -> Custom Previewer Tab...)
2. Select the \`Add Custom Tab\` button
3. Select the Request / Response panel and set a name for your tab

<figure><img src="/files/ojATCxhZ3frstP7g3rG7" alt=""><figcaption></figcaption></figure>

4. Click on the "..." button to show the Javascript Code

<figure><img src="/files/uGXYaRo7NSKvCuHsG0hg" alt=""><figcaption><p>Show the Javascript Code</p></figcaption></figure>

5. Tools -> Scripting -> Add new Rule -> Use this code to display your own data

<figure><img src="/files/MsBajBB48XSR5fHzQeSY" alt=""><figcaption><p>Write your code to display data</p></figcaption></figure>

6. Done

<figure><img src="/files/EFbxeRqeDqBcNtlAkEh5" alt=""><figcaption><p>Display your data on a new tab</p></figcaption></figure>

## 4. Examples

#### Force render JSON TreeView

Proxyman supports JSON Tree View for better visualization

![](/files/-MNNUbxHWsWRMr_boEpI)

We can show/hide a certain column by Right-Click on the Column Header

![](/files/-MNNUzgYXIXmb4RYSGpL)

#### Force render HTML Page

![](/files/-MCAKf7af-qiy4s1Q-Eb)

#### Beautify the Javascript files

![Beautify JS Body](/files/-MCAKqYypND8C0vo8X5N)


---

# 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://docs.proxyman.com/basic-features/custom-previewer-tab.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.