↓ Skip to main content
Belkast
Belkast

XPATH Query Web Application

·
Belkast AI Code
Table of Contents

The application can be accessed here.

A React-based web application for querying XML documents using XPath 1.0. This application is a modern, browser-based approach that leverages native DOMParser and XPathEvaluator APIs.

File Processing

All file processing, XML parsing, XPath evaluation, and result display happens locally in your browser with no data ever leaving your computer.

Features

Core Functionality

  • XPath 1.0 Query Support: Full support using the browser’s native XPathEvaluator API
  • XML File Loading: Open and view XML files directly in the browser
  • Real-time Results: Execute XPath queries and see results instantly
  • Formatted XML Results: Results are displayed with proper indentation for better readability
  • Custom Favicon: Distinctive XPath-themed SVG favicon for easy browser tab identification
  • Build Timestamp: Displays build date/time with AM/PM and GMT timezone in the sidebar

Editor Features

  • Full-Length Editor: File display takes up the full available browser window height
  • XML Syntax Highlighting: Powered by Prism.js for beautiful syntax coloring, with toggle checkbox to enable/disable (off by default)
  • Editable Content: Modify loaded XML files directly in the editor, or type XML content from scratch without loading a file
  • Auto-formatting: XML content is automatically formatted with proper indentation when loaded, pasted, or opened from history
  • Resizable Sidebar: Adjust the sidebar width to your preference

Performance Optimizations

  • Large File Handling: Files above 5MB automatically disable syntax highlighting to maintain performance. File uploads are limited to 100MB maximum.

Customization

  • Font Size Control: Zoom in/out with dedicated buttons (8px - 24px range)
  • Color Customization: Change background and foreground colors for all files using color pickers (regardless of file size)
  • Syntax Highlighting: Toggle on/off using the dropdown control in the toolbar (off by default)
  • Persistent Settings: Font size and color preferences are saved to localStorage and persist across sessions

Query History

  • History Tracking: All XPath queries are saved in a history list as soon as Enter is pressed (even without a file loaded)
  • Dropdown Access: Previous queries appear in a dropdown when the XPath input field is focused, allowing quick selection
  • Look-ahead Search: As you type, the dropdown filters to show only history items matching your input (fuzzy match)
  • Delete from Dropdown: Each history item in the dropdown has a delete button (×) to remove it directly
  • Keyboard Navigation: Use arrow keys to browse through filtered queries in the dropdown, Enter to select, Escape to close
  • History Management: View, select, and delete individual history items or clear all history via the History modal
  • Persistent History: Query history is saved to localStorage

XPath Config Files

  • Load Custom Configs: Upload JSON files containing your own XPath examples via the “Load XPath Config” button
  • JSON Format: Config files must be valid JSON arrays with objects containing at least a xpath property (and optionally a description property)
  • Example Format: 
    [
  {
    "xpath": "//book",
    "description": "Select all book elements"
  },
  {
    "xpath": "//book[@category='fiction']",
    "description": "Select fiction books"
  },
  {
    "xpath": "//price[. > 30]",
    "description": "Select prices greater than 30"
  }
]
  • Validation: Files are validated on upload to ensure correct structure
  • Persistent Configs: Uploaded configs are saved to localStorage and persist across sessions
  • Config Management: Delete individual configs from the sidebar
  • Usage: Click on a config button to view its examples, then click an example to copy it to the XPath query input

UI Features

  • Tabbed Interface: Switch between the Current File and the XPath Query result
  • Tooltip Information: Hover over results to see XPath query and node info
  • Build Date Display: Shows formatted build timestamp (e.g., “Mon, Jan 15, 2024, 02:30:45 PM GMT”) in the sidebar

Usage

Opening a File

  1. Click the “Open File” button in the sidebar
  2. Select an XML file from your local system
  3. The file content will be displayed in the editor

Running XPath Queries

  1. Enter your XPath query in the top input field
  2. Press Enter or click the “Search” button

Customizing the Editor

  • Zoom: Use the “-”, “+” buttons or click the current font size to reset
  • Colors: Use the color pickers to change background and text colors for all files
  • Reset: Use the “Reset” button to restore default colors

Managing Query History

  1. Click “History” in the XPath query pane
  2. View your previous queries, and click a query to reuse it
  3. Use the “×” button to delete individual items
  4. Use “Delete All” to clear the entire history

Technical Details

XPath Implementation

The application uses the browser’s native APIs:

  • DOMParser - Parses XML strings into DOM documents
  • XPathEvaluator - Evaluates XPath expressions against DOM documents with namespace support
  • XPathResult - Handles various result types (nodes, strings, numbers, booleans)
  • Namespace Support: Automatically extracts namespace declarations from the XML document and provides them to the XPath evaluator, enabling queries like //env:Envelope

Performance Thresholds

  • Syntax Highlighting: Disabled for files > 5MB (LARGE_FILE_THRESHOLD)
  • Text Selection: Only enabled for files ≤ 5MB when clicking results
  • File Upload Limit: Maximum file size is 100MB

Storage

  • Query history: Saved to localStorage, limited to 20 most recent queries
  • Font size: Saved to localStorage (8-24px, default 12px)
  • Colors: Background and foreground colors saved to localStorage

File Size Limits

  • Maximum font size: 24px
  • Minimum font size: 8px
  • Default font size: 12px
  • Build date font size: 8px (optimized for sidebar display)
  • Syntax highlighting threshold: 5MB
  • File load limit: 100MB

Application Identity

  • App Title: “XPath Query” (displayed in browser tab)
  • Favicon: Custom SVG featuring XML tree structure with XPath path highlight
  • Build Timestamp: Embedded at build time via Vite, displayed in sidebar with AM/PM indicator

Browser Compatibility

The application is compatible with modern browsers that support:

  • ES6+ JavaScript features
  • React 18+
  • DOMParser and XPathEvaluator APIs
  • CSS Flexbox and Grid

Recommended browsers:

  • Chrome/Edge (latest)
  • Firefox (latest)
  • Safari (latest)

External Libraries (CDN)

  • Prism.js 1.29.0 (for syntax highlighting)
    • prism.min.css
    • prism-okaidia.min.css (dark theme)
    • prism-core.min.js
    • prism-autoloader.min.js
    • prism-xml-doc.min.js

Notes

Font Size Behavior

  • Font size controls (zoom buttons) are always visible for all files
  • Font size changes apply to all open files and persist across sessions
  • The current font size is displayed in the zoom button

Color Picker Behavior

  • Color pickers are always visible for all files (regardless of file size)
  • Color changes apply to the current file and persist across sessions
  • Default colors match Prism.js dark theme (background: #272822, foreground: #f8f8f2)

Editor Behavior

  • The editor is always editable, even without a file loaded - you can type XML content directly

Syntax Highlighting

  • Automatically disabled for files > 50KB to maintain performance
  • Uses Prism.js with the Okaidia dark theme

Credits