# XML Tree - Platphorm News (Full Documentation)

> A powerful XML visualization, formatting, and validation tool
> Part of the Platphorm News Network (*.platphormnews.com)

## Overview

XML Tree is a comprehensive web-based tool for working with XML documents. Built with Next.js 16, React 19, and TypeScript, it provides a modern, responsive interface for exploring and manipulating XML data.

## Features

### Tree View
- Collapsible/expandable node hierarchy
- Syntax-highlighted element names, attributes, and values
- Visual indicators for node types (element, text, comment, CDATA)
- Child count badges
- Keyboard navigation support
- Search highlighting

### Graph View
- Interactive node graph visualization
- Pan and zoom controls
- Node selection
- Visual representation of parent-child relationships
- Color-coded node types

### Raw Editor
- Syntax-highlighted code editor
- Line numbers
- Word wrap toggle
- Tab indentation support
- Real-time validation feedback

### Utilities
- Format (prettify) XML with configurable indentation
- Minify (compress) XML
- Copy to clipboard
- Download as file
- Upload from file
- Load example XML documents

### Search
- Search by element name
- Search by attribute name or value
- Search by text content
- Navigate between results
- Case-sensitive option

### Statistics
- Total node count
- Maximum depth
- Element count
- Attribute count
- Text node count
- Comment count
- CDATA section count
- Namespace detection

## API Reference

### Health Check
```
GET /api/health

Response:
{
  "status": "healthy",
  "timestamp": "2026-03-02T12:00:00.000Z",
  "version": "1.0.0",
  "service": "xml-tree-viewer",
  "integrations": {
    "json": "https://json.platphormnews.com",
    "mcp": "https://mcp.platphormnews.com"
  }
}
```

### Parse XML
```
POST /api/v1/parse
Content-Type: application/json

Request:
{
  "xml": "<root><item attr=\"value\">content</item></root>"
}

Response:
{
  "success": true,
  "data": {
    "isValid": true,
    "root": { ... },
    "errors": [],
    "stats": {
      "totalNodes": 2,
      "maxDepth": 1,
      "elements": 2,
      "attributes": 1,
      "textNodes": 1
    }
  }
}
```

### Format XML
```
POST /api/v1/format
Content-Type: application/json

Request:
{
  "xml": "<root><item>test</item></root>",
  "action": "format",  // or "minify"
  "indent": 2
}

Response:
{
  "success": true,
  "data": {
    "formatted": "<root>\n  <item>test</item>\n</root>",
    "originalLength": 32,
    "formattedLength": 38,
    "action": "format"
  }
}
```

## MCP Tools (6 Available)

- parse_xml: Parse XML string and return structured tree with statistics
- format_xml: Format/prettify XML with configurable indentation
- minify_xml: Minify XML by removing whitespace
- validate_xml: Validate XML syntax and return errors if any
- xml_to_json: Convert XML to JSON representation
- xpath_query: Execute XPath query on XML document

## Integration

### JSON Tree (json.platphormnews.com)
- Companion tool for JSON visualization
- Consistent UI/UX across tools
- Cross-linking between services

### MCP Server (mcp.platphormnews.com)
- Model Context Protocol server
- AI-powered workflows
- Content management integration

## Technology Stack

- **Framework**: Next.js 16 (App Router)
- **Language**: TypeScript
- **UI**: React 19, Tailwind CSS, shadcn/ui
- **State Management**: Zustand
- **Visualization**: Custom SVG-based graph
- **Deployment**: Vercel Edge Runtime

## Supported XML Features

- Elements with namespaces
- Attributes (including namespace declarations)
- Text content
- CDATA sections
- Comments
- Processing instructions
- XML declarations

## Accessibility

- ARIA roles and labels
- Keyboard navigation
- Screen reader support
- High contrast mode compatibility
- Focus management

## Links

- Website: https://xml.platphormnews.com
- API Documentation: https://xml.platphormnews.com/api/docs
- RSS Feed: https://xml.platphormnews.com/rss.xml
- Atom Feed: https://xml.platphormnews.com/feed.xml
- Sitemap: https://xml.platphormnews.com/sitemap.xml
- LLMs Index: https://xml.platphormnews.com/llms-index.json

## Contact

- Organization: Platphorm News
- Website: https://platphormnews.com
- Email: api@platphormnews.com