Sitemap XML Viewer & Formatter

Overview

A high-performance, browser-based utility for parsing, validating, and visualizing sitemap.xml files. This tool transforms raw, often minified XML content into a structured, human-readable format, allowing developers and SEO specialists to audit their sitemaps effectively.

Core Features

• Drag-and-Drop Parsing: Users can paste raw XML text or drag-and-drop .xml files directly into the browser.
• Interactive Tree View: A collapsible, nested tree visualization of the XML structure.
• Syntax Validation: Real-time feedback identifying syntax errors, unclosed tags, or malformed URL structures.
• Prettify Mode: An instant formatter to beautify minified XML code for better readability.
• URL Extraction: A dedicated side-panel that extracts all <loc> entries into a clear, sortable list for quick auditing.
• CSV/JSON Export: Ability to download the parsed sitemap data into CSV or JSON formats for spreadsheet analysis.

UI/UX Specification

• Layout:
  • Header: Clean, minimalist top bar with a tool title and a "How to Use" collapsible guide.
  • Main Interaction Area: Split-screen layout. Left side handles input (Textarea + File upload button). Right side displays the parsed output (Tree view + URL stats).
  • Control Bar: A floating action bar between sections containing buttons for "Prettify", "Collapse All", "Expand All", "Export CSV", and "Clear".
• Color Palette:
  • Background: #FFFFFF (White) and #F8FAFC (Light Gray/Slate 50).
  • Primary Action: #2563EB (Blue 600).
  • Text: #1E293B (Slate 800) for high readability.
  • Borders: #E2E8F0 (Slate 200) for subtle separation.
• Animations: Subtle transition effects on node expansion/collapse using CSS max-height and opacity for a smooth, "buttery" feel. No jarring movements.

Technical Constraints & Directives

• Architecture: Must be a single-file application (HTML/CSS/JS). Use Tailwind CSS via CDN for styling.
• No Storage: Do not use localStorage, sessionStorage, or cookies. Maintain state using a single const appState = {} object in memory.
• Sandboxed Environment: The app must function perfectly inside a null origin iframe. All logic must be vanilla JavaScript.
• Performance: Use DOMParser for XML operations. Since large files may be processed, provide visual feedback (like a small loading spinner) for parsing tasks larger than 500KB.
• Responsiveness: Use CSS Grid and Flexbox to collapse the split-screen view into a single vertical column on mobile devices.
• Aesthetic: Utilize high-quality sans-serif fonts (Inter or System-UI), 8px border-radius on cards, and subtle 1px shadows for depth. Strictly NO dark mode; maintain a high-key, professional light theme.