Pretty, raw, and preview views in Postman - Deep Dive

Overview - Pretty, raw, and preview views

What is it?

In Postman, when you send a request and receive a response, you can view the response data in three ways: Pretty, Raw, and Preview. The Pretty view formats the response to be easy to read with colors and indentation. The Raw view shows the exact response as received, without any formatting. The Preview view renders the response as a web page if it contains HTML or similar content.

Why it matters

These views help testers and developers understand the response data clearly and quickly. Without these views, it would be hard to read complex data or verify how the server actually responded. This would slow down debugging and testing, making it difficult to find errors or confirm correct behavior.

Where it fits

Before learning these views, you should know how to send requests and receive responses in Postman. After mastering these views, you can learn how to write tests in Postman that check response content automatically.

Mental Model

Core Idea

Pretty, Raw, and Preview views are different ways to look at the same response data to help you understand it better depending on your needs.

Think of it like...

It's like receiving a letter: Pretty view is like reading a neatly typed and formatted letter, Raw view is like seeing the exact handwritten note with all marks, and Preview view is like seeing a photo or drawing inside the letter come to life.

Response Data
┌───────────────┬───────────────┬───────────────┐
│   Pretty     │     Raw       │    Preview    │
│ (Formatted)  │ (Exact Text)  │ (Rendered UI) │
└───────────────┴───────────────┴───────────────┘

Build-Up - 7 Steps

1

Foundation

Understanding Response Basics

Concept: Learn what a response is and how Postman receives it.

When you send a request in Postman, the server sends back a response. This response contains data like status code, headers, and body. The body is the main content you want to see, such as JSON, HTML, or plain text.

Result

You see the response body in Postman after sending a request.

Knowing what a response contains helps you understand why different views are needed to read it properly.

2

Foundation

Locating the Response Views in Postman

Concept: Identify where Pretty, Raw, and Preview views are in the Postman interface.

After sending a request, look below the response body area. You will find three tabs labeled Pretty, Raw, and Preview. Clicking each tab changes how the response body is shown.

Result

You can switch between views to see the response in different formats.

Knowing where to find these views is essential to use them effectively during testing.

3

Intermediate

Using Pretty View for Readability

🤔Before reading on: do you think Pretty view changes the actual response data or just how it looks? Commit to your answer.

Concept: Pretty view formats the response body with colors and indentation without changing the data.

Pretty view applies syntax highlighting and indentation to JSON, XML, or HTML responses. This makes it easier to read and understand the structure of the data. For example, JSON keys and values are colored differently.

Result

The response looks clean and organized, making it easier to spot errors or important information.

Understanding that Pretty view only changes appearance helps avoid confusion about data integrity.

4

Intermediate

Exploring Raw View for Exact Data

🤔Before reading on: do you think Raw view shows processed or original response data? Commit to your answer.

Concept: Raw view shows the response exactly as received from the server, without any formatting.

Raw view displays the full response body as plain text. This includes all spaces, line breaks, and characters exactly as sent. It is useful to see hidden characters or verify the exact server output.

Result

You see the unaltered response, which helps in debugging encoding or formatting issues.

Knowing Raw view shows the true response helps detect subtle bugs that Pretty view might hide.

5

Intermediate

Using Preview View for Web Content

🤔Before reading on: do you think Preview view works for all response types or only some? Commit to your answer.

Concept: Preview view renders the response as a web page if it contains HTML or similar content.

If the response body contains HTML, CSS, or JavaScript, Preview view shows how it would look in a browser. This helps testers verify web pages or API responses that include UI elements.

Result

You see a live rendering of the response, making it easier to check visual output.

Understanding Preview view helps test APIs that return web content, bridging API testing and UI validation.

6

Advanced

Choosing Views Based on Testing Needs

🤔Before reading on: do you think one view fits all testing scenarios or different views suit different tasks? Commit to your answer.

Concept: Different views serve different purposes depending on what you want to check in the response.

Use Pretty view for quick reading and understanding of structured data. Use Raw view to verify exact server output or troubleshoot encoding. Use Preview view to check how HTML or UI content renders. Switching views helps catch different types of issues.

Result

You can efficiently debug and validate responses by choosing the right view.

Knowing when to use each view improves testing accuracy and speeds up problem solving.

7

Expert

Limitations and Edge Cases of Views

🤔Before reading on: do you think Postman views always perfectly represent the response? Commit to your answer.

Concept: Views have limitations and may not always show the response perfectly, especially with binary data or unusual encodings.

Pretty view may fail or misformat if the response is not valid JSON/XML/HTML. Raw view shows all data but can be hard to read for large responses. Preview view only works with web content and may not render scripts fully. Understanding these limits helps avoid misinterpretation.

Result

You avoid false assumptions about response correctness based on view display.

Recognizing view limitations prevents overlooking real issues or chasing false problems.

Under the Hood

Postman receives the raw HTTP response from the server. It stores the response body as a string of bytes. The Pretty view parses this string into a structured format (like JSON or XML) and applies syntax highlighting and indentation. The Raw view simply displays the byte string as-is. The Preview view uses an internal browser engine to render HTML/CSS/JS content from the response body.

Why designed this way?

These views were designed to help users quickly understand different aspects of the response without switching tools. Pretty view improves readability for structured data, Raw view preserves exact data for debugging, and Preview view bridges API testing with UI validation. Alternatives like external viewers would slow down workflow.

HTTP Response
┌───────────────┐
│ Raw Data (bytes)│
└───────┬───────┘
        │
 ┌──────▼───────┐
 │   Postman    │
 │  Response    │
 │   Viewer     │
 └──────┬───────┘
   ┌────┼─────┬─────┐
   │    │     │     │
┌──▼──┐┌▼───┐┌▼────┐
│Raw  ││Pretty││Preview│
│View ││View  ││View   │
└─────┘└─────┘└──────┘

Myth Busters - 4 Common Misconceptions

Quick: Does Pretty view change the actual response data? Commit yes or no before reading on.

Common Belief: Pretty view modifies the response data to make it nicer.

Reality: Pretty view only changes how the data looks on screen; the actual response data stays the same.

Why it matters: If you think Pretty view changes data, you might trust it blindly and miss real data errors.

Quick: Does Raw view hide any part of the response? Commit yes or no before reading on.

Common Belief: Raw view might hide some characters or formatting.

Reality: Raw view shows the full response exactly as received, including all characters and spaces.

Why it matters: Believing Raw view hides data can cause you to overlook hidden bugs or encoding issues.

Quick: Can Preview view render any type of response? Commit yes or no before reading on.

Common Belief: Preview view works for all response types, including JSON and plain text.

Reality: Preview view only renders HTML or web content; it cannot render JSON or plain text as a page.

Why it matters: Expecting Preview to work for all responses can waste time and cause confusion.

Quick: Does Pretty view always succeed in formatting the response? Commit yes or no before reading on.

Common Belief: Pretty view always formats the response correctly.

Reality: Pretty view can fail or show errors if the response is not valid JSON, XML, or HTML.

Why it matters: Assuming Pretty view always works can hide malformed responses and delay bug detection.

Expert Zone

1

Pretty view uses different parsers depending on content type, which can cause subtle differences in formatting or errors.

2

Raw view is essential when testing APIs that return binary data or unusual encodings, as Pretty and Preview views cannot handle these properly.

3

Preview view uses a sandboxed browser engine that may not execute all scripts or styles exactly like a real browser, affecting UI testing accuracy.

When NOT to use

Do not rely on Pretty or Preview views when testing binary data, file downloads, or APIs with custom encodings. Instead, use Raw view or external tools specialized for those formats.

Production Patterns

In real-world API testing, testers often start with Pretty view for quick checks, switch to Raw view to debug issues, and use Preview view when testing APIs that serve web pages or emails. Automated tests rarely use these views directly but depend on parsing response data programmatically.

Connections

JSON Formatting

Pretty view builds on JSON formatting concepts

Understanding JSON structure helps you appreciate how Pretty view makes complex data readable.

HTTP Protocol

Raw view shows the exact HTTP response body

Knowing HTTP basics clarifies why Raw view is the true source of response data.

Web Browsers Rendering

Preview view uses browser rendering engines

Familiarity with how browsers render HTML helps understand Preview view limitations and behavior.

Common Pitfalls

#1 Trusting Pretty view output without verifying raw data

Wrong approach:

Assuming the Pretty view shows the exact data and ignoring Raw view.

Correct approach:

Always check Raw view if you suspect data issues or formatting errors.

Root cause:

Misunderstanding that Pretty view only changes appearance, not data.

#2 Using Preview view for JSON responses expecting a rendered page

Wrong approach:

Switching to Preview view for JSON and expecting a formatted display.

Correct approach:

Use Pretty view for JSON to get formatted output; Preview view is for HTML content.

Root cause:

Confusing Preview view's purpose and supported content types.

#3 Ignoring Raw view when debugging encoding or hidden characters

Wrong approach:

Only using Pretty view and missing invisible characters or encoding issues.

Correct approach:

Use Raw view to see the exact bytes and detect hidden problems.

Root cause:

Overreliance on formatted views and lack of understanding of raw data importance.

Key Takeaways

Postman offers Pretty, Raw, and Preview views to help you understand response data in different ways.

Pretty view formats structured data for easy reading but does not change the actual response.

Raw view shows the exact response from the server, essential for debugging and verifying data integrity.

Preview view renders HTML or web content, useful for testing APIs that return UI elements.

Choosing the right view based on your testing goal improves efficiency and accuracy.

Practice

1. Which Postman view shows the API response formatted with colors and indentation for easy reading?

easy

A. Raw view

B. Pretty view

C. Preview view

D. Headers view

Solution

1. Step 1: Understand the purpose of Pretty view

   The Pretty view formats JSON, XML, or HTML responses with colors and indentation to make them easier to read.

2. Step 2: Compare with other views

   Raw view shows the exact text without formatting, and Preview renders HTML content visually. Headers view shows response headers, not body.

3. Final Answer:

   Pretty view -> Option B

4. Quick Check:

   Formatted response = Pretty view [OK]

Hint: Pretty = formatted and colored response for easy reading [OK]

Common Mistakes:

• Confusing Raw view with Pretty view
• Thinking Preview shows formatted text instead of rendered content
• Mixing Headers view with body views

2. Which of the following is the correct way to switch to the Raw view in Postman after receiving a response?

easy

A. Go to Settings and enable Raw mode

B. Right-click the response and select 'Raw view'

C. Click the 'Raw' tab next to 'Pretty' in the response section

D. Double-click the response body

Solution

1. Step 1: Locate the response view tabs

   In Postman, response views like Pretty, Raw, and Preview appear as tabs above the response body.

2. Step 2: Identify how to switch views

   Clicking the 'Raw' tab directly switches the view to show the exact response text without formatting.

3. Final Answer:

   Click the 'Raw' tab next to 'Pretty' in the response section -> Option C

4. Quick Check:

   Switch views by clicking tabs = Click the 'Raw' tab next to 'Pretty' in the response section [OK]

Hint: Switch views by clicking tabs: Pretty, Raw, Preview [OK]

Common Mistakes:

• Trying to right-click for Raw view (no such option)
• Looking in Settings instead of response tabs
• Double-clicking does not change views

3. Given an HTML API response, what will you see in the Preview view of Postman?

medium

A. A rendered HTML page if the response contains HTML

B. A formatted and colored JSON with indentation

C. The raw JSON text exactly as received

D. Only the response headers without body

Solution

1. Step 1: Understand Preview view purpose

   The Preview view renders HTML content visually, like a browser would, showing the page layout and images.

2. Step 2: Consider JSON response in Preview

   If the response is JSON, Preview does not format or show it as text; it tries to render it, which usually results in a blank or raw display.

3. Final Answer:

   A rendered HTML page if the response contains HTML -> Option A

4. Quick Check:

   Preview = rendered HTML content [OK]

Hint: Preview shows rendered HTML, not raw or formatted JSON [OK]

Common Mistakes:

• Thinking Preview formats JSON like Pretty view
• Confusing Raw view with Preview
• Expecting headers in Preview

4. You switched to the Preview view in Postman but see a blank screen instead of your expected HTML page. What is the most likely reason?

medium

A. The response is JSON, not HTML, so Preview cannot render it

B. You forgot to click the Pretty tab first

C. Postman does not support Preview view

D. The Raw view is disabled in settings

Solution

1. Step 1: Identify response content type

   Preview view renders HTML visually. If the response is JSON or plain text, Preview cannot render it as a page.

2. Step 2: Understand why blank appears

   Since JSON is not HTML, Preview shows blank or raw text, not a formatted page.

3. Final Answer:

   The response is JSON, not HTML, so Preview cannot render it -> Option A

4. Quick Check:

   Preview blank = non-HTML response [OK]

Hint: Preview blank? Check if response is HTML or not [OK]

Common Mistakes:

• Thinking Pretty tab must be clicked first
• Believing Postman lacks Preview support
• Assuming Raw view settings affect Preview

5. You receive an API response with HTML content that includes CSS. Which Postman view should you use to verify the page visually as a user would see it, and why?

hard

A. Pretty view, because it formats HTML with colors and indentation

B. Raw view, because it shows the exact source code including scripts

C. Headers view, because it shows content type and length

D. Preview view, because it renders HTML and CSS like a browser

Solution

1. Step 1: Understand the content type and views

   HTML with JavaScript and CSS needs to be rendered to see the actual page as a user would.

2. Step 2: Identify the view that renders content

   Preview view renders HTML, applies CSS styles, showing the page visually.

3. Step 3: Compare with other views

   Pretty view only formats the source code text, Raw shows unformatted source, Headers show metadata only.

4. Final Answer:

   Preview view, because it renders HTML and CSS like a browser -> Option D

5. Quick Check:

   Visual page check = Preview view [OK]

Hint: Use Preview to see rendered page with CSS and styles [OK]

Common Mistakes:

• Choosing Pretty view expecting visual rendering
• Confusing Raw view with rendered output
• Expecting source code views to show visual layout