> For the complete documentation index, see [llms.txt](https://docs.proxyman.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.proxyman.com/basic-features/custom-previewer-tab.md).
# Custom Previewer Tab
Customize request and response preview tabs to display JSON, Protobuf, HTML, MessagePack, and other body formats, or inspect connection details with Connection Log.
## 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
* [Connection Log](/basic-features/connection-log.md) to inspect DNS, TCP, TLS, and HTTP details
Select Custom Tabs for Request / Response Panel
{% hint style="info" %}
The selected custom tabs will be appended to the right side of the Request or Response view
{% endhint %}
Display Custom Tabs
## 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.
Capture OpenAI Endpoints
### 2.2 Connection Log
* **Connection Log** shows connection info for the selected request, including DNS lookups, TCP connections, TLS negotiation, certificates, and HTTP headers.
* Click **+** in the Request tab bar. Under **Request**, check **Connection Log** to show it or uncheck it to hide it.
* The tab appears next to **Summary** in the Request panel. It is enabled by default, and Proxyman remembers your choice.
* See the [HTTP/2 guide](/basic-features/http2.md) for a sample log, or the [Connection Log guide](/basic-features/connection-log.md) for all fields.
## 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
4. Click on the "..." button to show the Javascript Code
Show the Javascript Code
5. Tools -> Scripting -> Add new Rule -> Use this code to display your own data
Write your code to display data
6. Done
Display your data on a new tab
## 4. Examples
#### Force render JSON TreeView
Proxyman supports JSON Tree View for better visualization
We can show/hide a certain column by Right-Click on the Column Header
#### Force render HTML Page
#### Beautify the Javascript files
