Cahpter 9:XML Display
Displaying XML — written as if I’m your patient teacher explaining step by step how XML is actually shown / presented / viewed / displayed in different real-life situations.
We will cover many different ways people “display” XML, why each method exists, what it looks like to the user, and realistic examples for each approach.
1. Raw XML – The Most Basic Way (Text Editor / Source View)
This is what developers and people who work with XML see most often.
Tools used:
- Notepad++, VS Code, Sublime Text, Vim
- Browser “View Page Source”
- Any plain text editor
Example (very simple student record):
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<?xml version="1.0" encoding="UTF-8"?> <student rollNumber="A-142"> <fullName>Priyanka Reddy</fullName> <class>XI</class> <section>A</section> <marks> <english>88</english> <maths>95</maths> <physics>91</physics> <chemistry>89</chemistry> </marks> <attendance>96.8%</attendance> <isActive>true</isActive> </student> |
How it looks:
- Just plain text
- Usually syntax-highlighted in modern editors (tags = blue/purple, attributes = green/red, text = black/white)
- Indentation is very important for readability
When people use this:
- Debugging
- Writing / editing XML
- Checking structure
- Copy-pasting into APIs / configurations
2. Pretty-Printed / Formatted XML (Indented & Readable)
Most real XML files are written with proper indentation so humans can read them easily.
Before pretty-printing (ugly one-line version):
|
0 1 2 3 4 5 6 |
<order><orderId>ORD-20250704-3192</orderId><customer><name>Samarth Jain</name><email>samarth@example.com</email></customer><items><item><sku>HDMI-2M</sku><name>HDMI Cable</name><qty>1</qty><price>349.00</price></item></items><total>349.00</total></order> |
After pretty-printing (what you usually see):
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<?xml version="1.0" encoding="UTF-8"?> <order orderId="ORD-20250704-3192" date="2025-07-04"> <customer> <name>Samarth Jain</name> <email>samarth@example.com</email> <phone>+919876543210</phone> </customer> <items count="1"> <item line="1"> <sku>HDMI-2M</sku> <name>HDMI Cable 2 meter</name> <quantity>1</quantity> <unitPrice currency="INR">349.00</unitPrice> </item> </items> <totalAmount currency="INR">349.00</totalAmount> <status>processing</status> </order> |
Tools that do this automatically:
- VS Code (Ctrl+Shift+I or right-click → Format Document)
- Online formatters (xmlformatter.org, freeformatter.com, etc.)
- XML editors (Oxygen XML, XMLSpy, Notepad++ with XML Tools plugin)
- xmllint –format file.xml (Linux/Mac)
Most developers prefer this view — it is the standard way to read and understand XML.
3. Tree View / Outline View (Hierarchical / Expandable)
Many XML editors show XML as a collapsible tree — very useful when documents are large.
How it looks (text representation of tree view):
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
▼ student (rollNumber=A-142) ├─ fullName : Priyanka Reddy ├─ class : XI ├─ section : A └─ ▼ marks ├─ english : 88 ├─ maths : 95 ├─ physics : 91 └─ chemistry : 89 ├─ attendance : 96.8% └─ isActive : true |
Where you see this:
- Oxygen XML Editor
- XMLSpy
- Visual Studio (XML editor)
- Eclipse XML perspective
- Online tools like codebeautify.org/xmlviewer
- Some API testing tools (Postman XML response view)
Best for:
- Large documents (hundreds or thousands of lines)
- Quickly finding a particular element
- Understanding deep nesting
4. Browser Display (Default Behavior)
When you open an .xml file directly in a modern browser (Chrome, Firefox, Edge):
What you usually see:
- Raw XML text
- Syntax-highlighted (tags blue, attributes purple, etc.)
- Indented automatically (pretty-printed)
- No collapsing — just long scrollable text
Example (Firefox does this very nicely):
- Tags in blue
- Attribute names in red
- Attribute values in purple
- Text content in black
- XML declaration in gray
Very important note:
If the XML file has a stylesheet reference (<?xml-stylesheet …?>), the browser tries to render it nicely instead of showing raw XML.
Example:
|
0 1 2 3 4 5 6 7 8 9 10 |
<?xml version="1.0" encoding="UTF-8"?> <?xml-stylesheet type="text/xsl" href="invoice.xsl"?> <invoice> ... </invoice> |
→ Browser shows formatted invoice (like HTML), not raw XML.
5. Styled / Transformed XML (XSLT → HTML or PDF)
This is how XML is displayed to normal users (customers, managers, government portals, etc.).
Common flow:
- XML data exists
- XSLT stylesheet transforms it
- Result → nice HTML page, PDF, Word-like document
Very common real example – Indian GST e-Invoice display:
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!-- Raw XML (very simplified) --> <Invoice> <cbc:ID>INV/2025/0892</cbc:ID> <cbc:IssueDate>2025-07-04</cbc:IssueDate> <cac:AccountingSupplierParty> <cac:Party> <cbc:Name>TechTrend Innovations</cbc:Name> </cac:Party> </cac:AccountingSupplierParty> ... </Invoice> |
Displayed as (what user sees in browser / PDF):
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
Tax Invoice ---------------------------------------- Invoice No: INV/2025/0892 Date : 04-Jul-2025 Seller: TechTrend Innovations Pvt Ltd GSTIN: 36AAECT4567P1Z2 Hyderabad, Telangana Buyer: Creative Minds Academy GSTIN: 29AABCM9876Q1Z5 Bengaluru, Karnataka Items: 1. LMS Annual License ₹185,000.00 2. Training Session (8 hrs) ₹ 45,000.00 ---------------------------------------- Total Amount: ₹271,400.00 GST (18%): ₹ 41,400.00 Grand Total: ₹271,400.00 |
Tools / technologies used:
- XSLT 1.0 / 2.0 / 3.0
- XSL-FO → PDF (Apache FOP, Antenna House, etc.)
- Modern: XML → JSON → React/Vue/Angular frontend
6. Grid / Table View (Excel-like)
Some tools show XML as a table / spreadsheet:
- Oxygen XML Grid view
- XMLSpy Grid Editor
- Excel (with XML Maps)
- Some database tools
How it looks:
| orderId | customer.name | items[1].sku | items[1].name | totalAmount |
|---|---|---|---|---|
| ORD-20250704-3192 | Samarth Jain | HDMI-2M | HDMI Cable 2 meter | 349.00 |
| ORD-20250704-3193 | Priya Sharma | TS-BLK-M | Black T-Shirt M | 998.00 |
Used for:
- Data analysis
- Quick editing of repeating structures
- Importing/exporting to Excel
Quick Summary – Ways to Display XML (from most technical to most user-friendly)
| # | Display method | Who uses it | Looks like | Best for |
|---|---|---|---|---|
| 1 | Raw text | Developers | Plain text, maybe highlighted | Editing, debugging |
| 2 | Pretty-printed | Everyone who reads XML | Indented, colored tags | Reading & understanding |
| 3 | Tree / Outline view | Developers & analysts | Collapsible hierarchy | Large documents, navigation |
| 4 | Browser default | Quick checking | Highlighted raw XML | Fast preview |
| 5 | XSLT → HTML / PDF | End users, customers, portals | Nice invoice, report, form | Official display, printing |
| 6 | Grid / Table view | Business users, analysts | Excel-like table | Repeating data, analysis |
Would you like to go deeper into any of these display methods?
- How to pretty-print XML yourself (tools & shortcuts)
- Creating a simple XSLT to turn XML into nice HTML
- Differences between browser rendering of XML vs HTML
- How real portals (GST, banking, ERP) display XML data to users
- Tools comparison: Oxygen vs XMLSpy vs VS Code for displaying XML
- Displaying XML inside web applications (modern JavaScript way)
Tell me which direction interests you most right now! 😊
