Postman Visualizer
Postman Visualizer
Postman Visualizer is a feature within Postman that allows you to create custom, visual representations of your API response data directly inside the Postman interface. It provides a way to transform raw JSON or XML responses into meaningful visualizations, making it easier to understand and analyze complex data.
How to Use Postman Visualizer?
Follow the below steps to use the Visualizer:
Create a Request: Start by sending a request to an API endpoint.
View the Response: Once you receive a response, go to the “Tests” tab in Postman.
Write Visualization Code: In the “Tests” tab, use JavaScript to manipulate the response and generate HTML content. You can then render the result using the pm.visualizer.set() function. The pm.visualizer.set() function is used to display the HTML content in the Postman Visualizer.
View the Result: The output is shown in the “Visualizer” tab where you can see your custom HTML/CSS renderings based on the response data.
Example
Let’s prepare a simple HTML table layout to display the URL, headers, and query parameters.
To use the Postman Visualizer, you can write some visualization code in the “Tests” tab of your Postman request. Below is an example of how to use the Postman Visualizer with the response from the https://postman-echo.com/get endpoint.
Send a GET request to https://postman-echo.com/get.
In the “Tests” tab of your Postman, add the following code:
const responseJson = pm.response.json();
// Prepare the HTML content for visualization
const htmlContent = `
<h2>Echo GET Request Response</h2>
<table border="1" style="width:100%; border-collapse: collapse;">
<thead>
<tr>
<th>Key</th>
<th>Value</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>URL</strong></td>
<td>${responseJson.url}</td>
</tr>
<tr>
<td><strong>Headers</strong></td>
<td><pre>${JSON.stringify(responseJson.headers, null, 2)}</pre></td>
</tr>
<tr>
<td><strong>Query Parameters</strong></td>
<td><pre>${JSON.stringify(responseJson.args, null, 2)}</pre></td>
</tr>
</tbody>
</table>
`;
// Display the HTML in the Postman Visualizer
pm.visualizer.set(htmlContent);
It takes the response from the API request which typically includes the URL, headers, and any query parameters passed. It visualizes the data in a structured HTML table format inside the Postman Visualizer.