Working with APIs often means dealing with large and deeply nested JSON responses. While raw JSON is useful, it quickly becomes difficult to scan, debug, and analyze as responses grow in size. Searching through arrays and nested objects can slow down development and make API testing less productive.
Bruno’s Response Visualizer solves this problem by transforming raw API responses into structured and interactive visual formats. Instead of manually reading JSON, you can render responses as tables, dashboards, cards, or fully custom HTML views directly inside Bruno.
Whether you want filterable data tables, formatted reports, or mini dashboards for API responses, Response Visualizer helps you build readable and reusable visualizations with just a few lines of code.
Table of Contents
Response Visualizer in Bruno allows you to transform raw API responses into interactive and readable visual layouts. Instead of manually inspecting JSON responses, you can render data as:
This makes debugging, testing, and data exploration significantly easier during API development. Instead of scrolling through raw JSON, you interact with structured visual output directly inside Bruno.
Everything starts inside the Post Response script using the bru.visualize() function.
bru.visualize(type, config)
Once executed, Bruno renders the visualization inside the Resp[onse tab using data from res.body.
The bru.visualize() function accepts two parameters:
bru.visualize(type, config)
'table' for interactive table rendering'html' for custom HTML layoutsThe configuration object changes depending on the visualization type.
bru.visualize('table', {
name: 'usersTable',
provider: 'ag-grid',
props: {
rowData,
columnDefinitions
}
});
bru.visualize('html', {
name: 'report',
content: '<h2>Hello World</h2>'
});
You can either:
contenttemplate + dataUse table visualization when you want structured, sortable, and filterable data.
const users = res.body;
const rowData = users.map(user => ({
name: user.name,
email: user.email,
}));
const columnDefinitions = [
{ field: "name", filter: true },
{ field: "email", filter: true }
];
bru.visualize('table', {
name: 'usersTable',
provider: 'ag-grid',
props: {
rowData,
columnDefinitions
}
});
This creates an interactive table directly inside Bruno’s Visualize tab with built-in filtering support.
HTML visualization gives you complete flexibility to build dashboards, reports, cards, or custom layouts.
const htmlString =
`<html>
<body>
<h2>API Status</h2>
<p>Success Response: ${res.status} </p>
</body>
</html>
`
bru.visualize('html', { name: 'report', content: htmlString });
bru.visualize('html', {
name: 'userCard',
template: '<h2>Visualize API Responses with Bruno Visualizer</h2>',
data: {
name: res.body.name
}
});
Using templates makes it easier to generate reusable visual layouts dynamically from API responses.
Let’s visualize a real API response using JSONPlaceholder users API.
// API:
// https://jsonplaceholder.typicode.com/users
const users = res.body;
bru.visualize('table', {
name: 'usersTable',
provider: 'ag-grid',
props: {
rowData: users,
columnDefinitions: [
{ field: "name" },
{ field: "email" },
{ field: "phone" }
]
}
});
This instantly converts the API response into an interactive data table for easier inspection.
You can quickly import and test Response Visualizer examples directly inside Bruno using the collection below.
The collection includes ready-to-use visualization examples for tables and HTML rendering so you can explore how Response Visualizer works in real API workflows.
To explore advanced visualization capabilities, templates, and additional configuration options, check the official Bruno Response Visualizer documentation.
Response Visualizer in Bruno changes how developers interact with API data. Instead of manually reading raw JSON responses, you can build structured visual experiences directly inside your API workflow.
With bru.visualize(type, config), you can create interactive tables, reusable HTML templates, dashboards, reports, and custom visual layouts tailored to your APIs.
Whether you’re debugging APIs, analyzing datasets, or building internal tools, Response Visualizer helps make API responses more readable, interactive, and useful.
Happy visualizing 🚀