The document discusses visualizations in Postman and provides examples. It explains that Postman Visualizer offers an interface for users to see API responses through a beautiful UI. It demonstrates how to visualize data using templates, Handlebars, and by calling pm.visualizer.set() to render the template. Finally, it provides tips on finding rendered visualizations and links to download Postman logo assets.

1. Visualizations in
Postman
How to visualize data and some sample collections

2. DEVELOPER ADVOCATE, POSTMAN
Meenakshi
Dhanani
@mdhananii
SOLUTIONS ENGINEER, POSTMAN
John
Banning
@jwbanning

3. Agenda
1 Need for visualizations
2 Visualize responses in Postman
3 How does it work?
4 Demo
5 Sample visualizations
6 User personas
7 Q&A
go.postman.co/build

4. Why Visualizations?
Become an artist
Postman Visualizer offers an interface for users to see their response through beautiful User Interface
lens. We give you a canvas that you can use to show your data in whatever way you like.

5. Why Visualizations?

6. JS Libraries:
Visualization Engine
What is under the hood?
A transformation API over the response to convert the textual representation to a visual representation
D3 Skeleton
JQuery
Chart.js
Handlebar.js
Electron <webview /> in app | Iframe in web

7. How Does It Work?
pm.visualizer.set(
template,
response:pm.response.json())
var template = `
<table bgcolor="#FFFFFF">
<tr>
<th>Name</th>
<th>Location</th>
</tr>
{{#each response}}
<tr>
<td>{{name}}</td>
<td>{{location}}</td>
</tr>
{{/each}}
</table>
`;

8. How Does It Work?
Render options and
data
Render instructions
Templating
engine
(Handlebars)
Rendered
Template
Rendering
libraries
HTML rendering engine
Environment &
Globals
Content
Response data

9. How Does It Work?

10. Tips and Tricks

11. Tips and Tricks

12. Demo

13. Walkthrough

14. Data scientist Frontend Developer
Designer
User Personas

15. Sample Visualizations

16. Learning Center
Postman Network
Forum
https://www.postman.com/postman-economics-report/
Resources

17. Getting Started with Public Workspaces
Sign up for Postman
www.postman.com
Explore public workspaces
www.postman.com/explore
Learn about public workspaces
learning.postman.com

18. Q&A

19. DEVELOPER ADVOCATE, POSTMAN
Meenakshi
Dhanani
@mdhananii
SOLUTIONS ENGINEER, POSTMAN
John
Banning
@jwbanning

20. Become an artist
Postman Visualizer offers an interface for users to
see their response through beautiful User Interface
lens. We give you a canvas that you can use to
show your data in whatever way you like.
Why Visualizations?

21. Visualization Engine:
A transformation API over the response to convert the textual
representation to a visual representation
● Electron <webview /> in app | Iframe in web
● JS Libraries:
Handlebar.js
Chart.js
D3
JQuery
Skeleton

22. How Does It Work?
pm.visualizer.set(
template,
response:pm.response.json())
var template = `
<table bgcolor="#FFFFFF">
<tr>
<th>Name</th>
<th>Location</th>
</tr>
{{#each response}}
<tr>
<td>{{name}}</td>
<td>{{location}}</td>
</tr>
{{/each}}
</table>
`;

23. How Does It Work?
Environment &
Globals
Content
Render options
and data
Render
instructions
Templating
engine
(Handlebars)
Rendered
Template
Response
data
HTML rendering
engine
Rendering
libraries

24. Tip and Tricks
● Where to find the rendered
visualizations?
● Developer Tools
● Console

25. Postman Galaxy Logos
Vertical Logo
PDF, PNG, SVG
DOWNLOAD
Horizontal Logo
PDF, PNG, SVG
DOWNLOAD

26. Postman Galaxy Logos Assets
Vertical Logo
PDF, PNG, SVG
DOWNLOAD
Horizontal Logo
PDF, PNG, SVG
DOWNLOAD
Logo Icon
PNG
Copy to use in
other decks