↓ Skip to main content
Belkast
Belkast

XPATH Query App

·
Belkast AI Code
Table of Contents

XPath Query can be accessed here.

A React-based web application for querying XML documents using XPath 1.0 and XPath 2.0.

The application is a modern, browser-based approach that leverages native DOMParser and XPathEvaluator APIs ( for XPath 1.0 ) and the fontoxpath library ( for XPath 2.0 ).

All file processing, XML parsing, and XPath query evaluation is performed locally in your browser. No data ever leaves your computer, as can be verified by the nginx configuration shown below.

# Block all upload methods (POST, PUT, PATCH, DELETE)
if ($request_method !~ ^(GET|HEAD|OPTIONS)$)
    {
        return 405;
    }

Features

Core Functionality

  • XPath 1.0 support: Full support for XPath 1.0 using the browser’s native XPathEvaluator API
  • XPath 2.0 support: Full support for XPath 2.0 using the fontoxpath library
  • XML File loading: Open and view XML files directly in the browser ( up to 100MB file size )
  • XML File editing: Don’t want to open a file? Just start typing or paste to get going
  • Re-use XPath expressions: Upload JSON files containing your own XPath queries
  • Pre-loaded examples: XPath 1.0, XPath 2.0, and Role Matrix examples automatically loaded
  • Save history: Never lose access to a query; save any of your history items to a JSON file
  • Populate history: Bulk-load your saved queries in to history for quick re-use
  • Copy all results: Results can be copied to the clipboard in JSON and CSV format
  • Save all results: Results can be saved to a file in JSON and CSV format
  • Copy a single result: Just click on a result row and the value is copied to the clipboard

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 colouring
  • Editable Content: Modify loaded XML files directly in the editor, or type XML content from scratch without loading a file
  • Resizable Sidebar: Adjust the sidebar width to your preference

Performance Optimizations

  • Large File Handling: Files above 10MB automatically disable syntax highlighting to maintain performance. File size is limited to 100MB maximum.

Customization

  • Font Size Control: Zoom in/out with a dedicated dropdown ( 8px - 18px range )
  • Colour Customization: Change background and foreground colours for all files using colour 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 colour 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
  • 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 dialog
  • 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 Configuration” button
  • JSON Format: Configuation files must be valid JSON arrays with objects containing at least an xpath property and optionally a description property
  • Example Format:
{
    "name":"My Examples",
    "description":"The tooltip to give some information",
    "items":
    [
        {
          "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: Discard individual configs from the top of the main window or from the sidebar
  • Copy an example: Click on a config button to view its examples. Then click an example to copy it to the XPath query input
  • Copy all examples: Click on the green tick mark in the sidebar, next to the config button, to load all examples in to history

UI Features

  • Tabbed Interface: Switch between the XML Data 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 UTC” ) in the sidebar

Usage

Opening an XML File

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

Loading an XPath Configuration File

  1. Click the “Load XPath Configuration” button in the sidebar
  2. Select a JSON file from your local system
  3. The file will be loaded and a new button will be shown in the application
  4. To add all queries to the history, click on the green tick next to the file name in the sidebar
  5. To discard the Configuration file, click on the red “x” beside the file name in the sidebar

Running XPath Queries ( manual entry )

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

Running XPath Queries ( use history )

  1. Click “History” in the XPath Query pane
  2. Click a query to reuse it; the query will be copied in to the top input field
  3. Press Enter or click the “Search” button

Running XPath Queries ( use XPath Configuration )

  1. Click on one of the loaded XPath Configuration buttons
  2. Click a query to reuse it; the query will be copied in to the top input field
  3. Press Enter or click the “Search” button

Customizing the Editor

  • Zoom: Use the Font Size dropdown
  • Colours: Use the colour pickers to change background and text colours for the XML Data
  • Reset: Use the “Reset” button to restore default colours

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

Copy a single Result

To copy a single value from the results, simply click on the row. The value is copied to the clipboard. Save all Results

To save all values from the results, click on the Save Results button. Further options are:

  • Save as JSON: Query results are saved to a JSON file with index, query, value, and timestamp
  • Save as CSV: Query results are saved to a CSV file with one result value per line

Copy all Results

To copy all values from the results, click on the Copy Results button. Further options are:

  • Copy as JSON: Query results are copied to the clipboard with index, query, value, and timestamp
  • Copy as CSV: Query results are copied to the clipboard, in CSV format, with one result value per line

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 > 10MB
  • File Open Limit: Maximum file size is 100MB

Storage

  • Query history: Saved to localStorage, unlimited number
  • Font size: Saved to localStorage ( 8px-18px, default 12px )
  • Colours: Background and foreground colours saved to localStorage

File Size Limits

  • Minimum font size: 8px
  • Maximum font size: 18px
  • Default font size: 12px
  • Build date font size: 8px
  • Syntax highlighting threshold: 10MB
  • 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 )

Notes

Font Size Behavior

  • Font size dropdown control is always visible for all files
  • Font size changes apply to all open files and persist across sessions

Colour Picker Behavior

  • Colour pickers are always visible for all files ( regardless of file size )
  • Colour changes apply to the current file and persist across sessions
  • Default colours 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 > 10MB to maintain performance
  • Uses Prism.js with the Okaidia dark theme

Credits

  • fontoxpath: A minimalistic XPath 3.1 and XQuery 3.1 engine for XML : link
  • Prism.js: XML syntax highlighting : link
  • React: UI framework : facebook
  • Vite: Build tool : evan you