How to use Postman Visualizer: a step-by-step guide

API responses are often easier to understand when they are displayed visually instead of as raw JSON. While Postman is widely used for testing APIs, many developers overlook one of its most useful features which is the Postman Visualizer. While it is not as fully featured as a dedicated dashboarding platform like SquaredUp, it is a great way to quickly visualize API responses during development and debugging.

Postman Visualizer lets you transform API responses into interactive tables, charts, dashboards, and custom HTML layouts directly inside Postman. Using HTML templates and Handlebars.js, you can present complex response data in a format that is easier to analyze, debug, and share with your team.

In this guide, you'll learn how Postman Visualizer works, how to build your first visualization, and how to create different types of visualizations using real API data.

How does Postman Visualizer work?

Postman Visualizer runs inside the Scripts -> Post-response tab. You write an HTML template, pass your API response data into it, and call pm.visualizer.set() to render everything. The output appears in the Visualize tab alongside your raw JSON response.

Under the hood, Postman uses Handlebars.js for templating. You define placeholders like {{name}} or {{price}} in your HTML, and Postman automatically replaces them with values from your response data. It's a simple binding system that covers most use cases without any extra configuration.

The three things every Postman Visualizer script needs are a template, the response data shaped to match that template, and a single pm.visualizer.set() call to tie them together.

Creating your first visualization in Postman

The best way to see how this works is to build one. This example uses the Open-Meteo weather API.

Step 1: Send your API request

Start by sending a GET request to the weather API in Postman. The response is a JSON object that looks like this:

{
  "hourly": {
    "time": ["2024-01-15T00:00", "2024-01-15T01:00", ...],
    "temperature_2m": [8.2, 7.9, 7.6, ...]
  }
}

This is readable for one or two entries, but it becomes difficult to analyze when you have dozens of rows of timestamps and temperatures.

Step 2: Write your visualization script

In the Scripts tab, open the Post-response section to add your code. Start by defining an HTML template:

const template = `
<style>
  body { font-family: Arial, sans-serif; font-size: 14px; padding: 16px; }
  table { width: 100%; border-collapse: collapse; }
  th { background-color: #4A90D9; color: white; padding: 10px; text-align: left; }
  td { padding: 8px; border-bottom: 1px solid #ddd; }
  tr:hover { background-color: #f5f5f5; }
</style>
<h2>London hourly temperature</h2>
<table>
  <thead>
    <tr><th>Time</th><th>Temperature (°C)</th></tr>
  </thead>
  <tbody>
    {{#each rows}}
    <tr>
      <td>{{time}}</td>
      <td>{{temp}}</td>
    </tr>
    {{/each}}
  </tbody>
</table>
`;

Inside the template you will see placeholders such as {{time}} and {{temp}}. These are Handlebars expressions. Postman automatically swaps those out for my actual data.

The {{#each rows}} block tells Postman to loop through every item in the rows array and create a table row for each one.

Next, map the API response data to match what the template expects:r. I am using this script to map the time and temperature values into a simple array of rows.

const responseData = pm.response.json();

const rows = responseData.hourly.time.map((time, i) => ({
  time: time,
  temp: responseData.hourly.temperature_2m[i]
}));

Finally, render the visualization:

pm.visualizer.set(template, { rows: rows });

This tells Postman what to display (template) and which data to use (rows).

Step 3: View your output

Click Send and check the Visualize tab. Postman renders the template with the live data. If you want to change the appearance, tweak the template and click Send again to see the updates instantly.

Types of Postman Visualizations you can build

Postman Visualizer isn't limited to tables. Here are the main types of visualizations you can create.

Line Charts and Bar Charts

For data that has a trend or comparison angle, charts tell the story much faster than a table. You can pull in Chart.js or D3.js directly inside your HTML template using a CDN link, then write the chart code just like you would in any webpage. Postman renders it in the Visualize tab.

This works well for time-series data like the weather example, performance metrics, or any response where you want to see shape rather than individual values.

Custom HTML Layouts

If tables and charts aren't enough, you can build fully custom HTML inside your template — cards, grids, status dashboards, colour-coded indicators, anything. Since you're writing plain HTML and CSS, there's no real limit to what the layout can look like. This is useful when you're presenting API data to someone non-technical and want it to look polished.

Using AI to generate Postman Visualizations

If you prefer not to write the code yourself, Postman includes a built-in AI shortcut.

In the Scripts tab, click the dropdown and select a visualization type, such as Linear chart or Bar graph. Postman generates a prompt based on your response data and sends it to the AI. If you need a different type, select Set up with a prompt and describe your requirements.

For this example, let's select Linear Chart. Postman will generate the script required to turn your weather data into a trend line.

Review the generated code and click Approve. Postman will add the script to the Post-response tab for you. Now click Send again and open the Visualization tab to see the generated chart.

It is a useful starting point when experimenting with new visualization types or testing what is possible before writing code from scratch.

Limitations of Postman Visualizer

Postman Visualizer is great for developers inspecting API responses. However, it wasn't designed to be a dashboarding or reporting platform.

Here are some common limitations:

1. Visualizations live inside Postman

Anyone viewing the visualization generally needs access to the Postman request.

2. Limited sharing

Sharing results with managers, customers, or non-technical teams often requires screenshots, exports, or additional tooling.

3. Multiple APIs can get messy

As soon as you're combining data from several APIs, cloud services, monitoring tools, and ticketing systems, maintaining visualizations becomes more complicated.

If your goal is to inspect API responses during development, Postman Visualizer is usually enough. However, if you need to build dashboards from API data, share live views with other teams, or combine data from multiple systems, a dedicated dashboard platform is a better fit.

For example, SquaredUp allows teams to connect directly to APIs and operational tools, build dashboards without writing visualization code, and share live views to anyone who needs them.

Instead of creating visualizations request-by-request inside Postman, teams can build dashboards that automatically refresh and are accessible to everyone.

Final thoughts

Postman Visualizer is one of the easiest ways to turn API responses into tables, charts, and custom HTML views. For API testing, debugging, and exploration, it does the job well without any extra setup or tooling.

But if you need to share these visuals with your team or pull data from different sources at once, you will likely find Postman a bit limiting. You are better off with a tool like SquaredUp when that happens. It connects directly to your APIs and builds dashboards for you so you can share live views with anyone in your company without them ever needing to use Postman.