Developers and integrators frequently encounter XML and JSON data structures. The challenge often lies in efficiently exploring, inspecting, and querying these formats without juggling multiple applications or constantly guessing syntax. This is where the Unified XJPath Viewer emerges as a game-changer – a powerful VS Code extension designed to consolidate your data navigation needs into a single, intuitive interface.
Unifying Your Data View
Gone are the days of context switching. The Unified XJPath Viewer seamlessly integrates into your VS Code environment, providing a singular solution for both XML and JSON files. This extension empowers you to visualize your data, execute precise queries, and streamline your workflow like never before.
Core Capabilities at a Glance
The Unified XJPath Viewer is packed with features designed to enhance your productivity:
- Dynamic Tree View: Experience a live, interactive tree representation of your XML or JSON document.
- Integrated Query Engine: Directly run XPath for XML and JSONPath for JSON queries within the viewer.
- Seamless Editor Synchronization: Keep your viewer and editor in perfect sync, highlighting corresponding elements.
- Instant Path and Value Copying: Quickly grab node paths or values with a single click.
- Intelligent Document Handling: Automatic file type detection and real-time refreshes as you modify your documents.
Getting Started with the Viewer
Integrating this powerful tool into your workflow is straightforward:
- Installation: Begin by installing the Unified XJPath Viewer extension from the VS Code Marketplace.
- Open a File: Open any XML, JSON, or JSONC file within VS Code.
- Launch the Viewer: Access the VS Code Command Palette (
Ctrl+Shift+P) and executeUnifiedXJPath: Open Query Viewer. - Interactive Exploration: Click on any node in the displayed tree to instantly view its path and value.
- Execute Queries: Input your desired XPath or JSONPath query into the designated bar and press Enter. Results are displayed immediately, and clicking on any result will navigate you to its location in the editor.
Essential Commands for Enhanced Control
The Command Palette provides quick access to all viewer functionalities:
| Command | Description |
|---|---|
UnifiedXJPath: Open Query Viewer |
Activates the main viewer alongside your active editor. |
UnifiedXJPath: Evaluate Query |
Prompts for an XPath or JSONPath expression and displays matching results. |
UnifiedXJPath: Copy Path |
Copies the absolute path of the element currently under your cursor. |
UnifiedXJPath: Format Document |
Utilizes VS Code’s built-in formatter to format the open XML or JSON file. |
UnifiedXJPath: Manage Namespaces |
Opens an interface for configuring XPath namespace prefixes. |
Visualizing Your Data: A Practical Example
Imagine working with an XML document. The Unified XJPath Viewer presents your data beautifully: on the left, your XML file in the editor; on the right, a dynamic, navigable tree view of the same content. You can effortlessly expand/collapse nodes, inspect values and attributes, and even search for nodes by tag name or value.
When you select a node, the ‘Inspector panel’ below the tree instantly reveals its absolute path and value. For XML, this is an XPath (e.g., /ns0:ShipmentConfirmation[1]/ns0:Reference[1]), and for JSON, it’s a JSONPath (e.g., $.ShipmentConfirmation.Reference). This feature is invaluable for quickly obtaining and reusing precise query paths in your development work.
Consider a query like /ns0:ShipmentConfirmation/ns0:Reference. The viewer not only finds the matching node but also presents its full XPath, value, and options to copy or jump to it in the editor.
Customizing Your Experience with Settings
Tailor the viewer to your preferences via the unifiedQuery section in your VS Code settings:
| Setting | Default Value | Description |
|---|---|---|
unifiedQuery.outputLimit |
200 |
Sets the maximum character count for displayed previews. |
unifiedQuery.compactPaths |
false |
Conceals [1] from paths of single-instance nodes for brevity. |
unifiedQuery.namespaces |
{} |
Allows for custom definition of XPath namespace prefixes. |
A Nod to Inspiration
This powerful extension stands on the shoulders of giants, drawing inspiration from Pronert Daniel’s excellent Dansharp XML Viewer.
Elevate Your Data Workflow Today
Ready to revolutionize how you interact with XML and JSON in VS Code? Install the Unified XJPath Viewer now and experience a singular, intuitive platform for all your data exploration and querying needs.
👉 Install Unified XJPath Viewer from the VS Code Marketplace