A modern, interactive XML file viewer built with React, TypeScript, and Vite. Features a split-pane interface with tree navigation and detailed node inspection.
- 📂 Drag & Drop Upload - Simply drag XML files into the browser or click to browse
- 🌲 Tree View - Navigate XML structure with expandable/collapsible nodes
- 🔍 Node Details - View comprehensive information about selected elements
- 📊 Statistics - See node counts, depth, attributes, and more
- 🎨 Clean UI - Modern, professional interface with Tailwind CSS
- ⚡ Fast Performance - Virtual scrolling for large XML files
- ♿ Accessible - WCAG compliant with keyboard navigation and ARIA labels
- 📱 Responsive - Works on desktop and tablet devices
- Node.js 18+ and npm
# Clone the repository
git clone <repository-url>
cd CLDRViewer
# Install dependencies
npm install
# Start development server
npm run devThe app will be available at http://localhost:5173
- Open the app in your browser
- Click "Choose File" or drag an XML file into the upload area
- Explore the XML structure in the tree view
- Click any node to see its details
A sample XML file is included at /public/sample.xml for testing.
# Build the application
npm run build
# Preview the production build
npm run previewThe built files will be in the dist directory.
- React 19.2 - UI framework
- TypeScript 5.9 - Type safety
- Vite 7.2 - Build tool and dev server
- Tailwind CSS 3.4 - Utility-first CSS framework
- react-arborist 3.4 - Tree view with virtual scrolling
- react-resizable-panels 4.0 - Resizable split panels
- lucide-react 0.562 - Beautiful icon set
- fast-xml-parser 5.3 - XML parsing engine
- clsx 2.1 - Conditional class names
CLDRViewer/
├── src/
│ ├── components/ # React components
│ │ ├── DetailPanel.tsx # Right panel wrapper
│ │ ├── EmptyState.tsx # No file loaded state
│ │ ├── FileUploader.tsx # File upload component
│ │ ├── NodeDetails.tsx # Node information display
│ │ ├── TreePanel.tsx # Left panel wrapper
│ │ ├── TreeView.tsx # Tree component
│ │ └── XMLViewer.tsx # Split panel container
│ ├── context/
│ │ └── XMLContext.tsx # Global state management
│ ├── hooks/
│ │ └── useXMLFile.ts # File upload hook
│ ├── types/
│ │ └── xml.types.ts # TypeScript interfaces
│ ├── utils/
│ │ ├── xmlFormatter.ts # Display formatting
│ │ └── xmlParser.ts # XML parsing logic
│ ├── App.tsx # Main app component
│ ├── main.tsx # Entry point
│ └── index.css # Global styles
├── public/
│ └── sample.xml # Sample XML file
├── Docs/ # Implementation documentation
└── package.json
- Supports standard XML with elements, attributes, text content
- Handles CDATA sections and comments
- Generates XPath-like paths for navigation
- File size limit: 10MB
- Virtual scrolling for performance
- Expand/collapse functionality
- Visual indicators for node types
- Attribute count badges
- Smart node naming with identifying attributes
- Element name and type
- Full XPath
- Attributes table
- Text content (with CDATA support)
- Statistics: children count, depth, total nodes
- File type validation (.xml only)
- File size validation (10MB max)
- XML syntax validation
- User-friendly error messages
- Tab - Navigate between interactive elements
- Enter/Space - Activate buttons and upload area
- Arrow Keys - Navigate tree nodes (when tree is focused)
- Chrome/Edge 90+
- Firefox 88+
- Safari 14+
npm run dev # Start development server
npm run build # Build for production
npm run preview # Preview production build
npm run lint # Run ESLint- TypeScript with strict mode
- ESLint for code quality
- Functional React components with hooks
- Tailwind CSS for styling
Detailed implementation documentation is available in the Docs/ directory:
- Phase 1: Project Setup
- Phase 2: Type Definitions & Utilities
- Phase 3: State Management
- Phase 4: Core Components
- Phase 5: Tree View
- Phase 6: Detail View
- Phase 7: App Integration
- Phase 8: Polish
- Fork the repository
- Create a feature branch
- Make your changes
- Add tests if applicable
- Submit a pull request
MIT License - see LICENSE file for details
- Built with Vite
- Tree component by react-arborist
- Icons from Lucide
- Styled with Tailwind CSS