Building JSON Nexus Visualizer: From Node 22 Microservice to Production WordPress Plugin

When raw JSON arrives from a distributed API, webhook feed, or database export, developer tools usually force an awkward choice: paste sensitive data into an ad-saturated third-party website, or squint at an unformatted tree-view that makes comparative tabular analysis nearly impossible.

To eliminate this compromise, we engineered JSON Nexus Visualizer: an open-source, dependency-free single-page data workbench that flattens arbitrary JSON into interactive tables, runs heuristic data profiling, audits schema drift against JSON Schema specifications, and generates cryptographically signed 90-day share links.

Originally prototyped as a microservice using Node 22 (leveraging node:sqlite and node:http), we faced a classic production deployment reality: most high-performance shared web hosting stacks run on PHP-FPM and LiteSpeed where long-running Node processes are unavailable.

In this guide, we walk through the complete architecture: building the client-side visualizer, implementing client-side profiling and schema validation, and refactoring the backend into a robust WordPress plugin powered by PHP 8 PDO SQLite and WP-Cron lifecycle purging under the GNU General Public License v3.0 (GPLv3).

Step 1: Recursive Dot-Notation Flattening & Safe DOM Construction

Arbitrary JSON arrives in countless shapes: flat arrays of objects, deeply nested hierarchies, key-value mappings, and heterogeneous arrays. To build a uniform tabular view, nested object hierarchies must be normalized into column keys using dot notation without mutating the original data.

function flattenObject(obj, prefix = '', res = {}) {
  for (const [key, val] of Object.entries(obj)) {
    const prop = prefix ? `${prefix}.${key}` : key;
    if (val !== null && typeof val === 'object' && !Array.isArray(val)) {
      flattenObject(val, prop, res);
    } else {
      res[prop] = val;
    }
  }
  return res;
}

XSS Prevention: When rendering untrusted cell values, avoid element.innerHTML. Direct assignment to element.textContent or constructed DOM text nodes ensures that payload strings containing HTML tags or script injection vectors remain inert text.

Step 2: Heuristic Data Profiling & Archetype Detection

Rather than requiring users to manually configure data types, the engine executes a lightweight statistical profiling pass over the schema and root records to infer archetypes:

Date / Timestamp: Matches ISO 8601 strings, UNIX epoch integers (millisecond/second bounds), and RFC-2822 timestamps.
Currency: Detects ISO 4217 currency codes (USD, EUR, GBP, JPY) or formatted currency symbols ($1,250.00).
Numeric Quantities: Identifies integers, floating-point metrics, and percentages.
Geospatial Coordinates: Identifies latitude/longitude pairs or GeoJSON coordinate structures.
Narrative Text: Identifies string attributes exceeding 60 characters for smart wrapping and truncation.

Based on detected archetype density, the interface dynamically assigns smart styling presets—such as Terminal Green, Cobalt Grid, or Paper Ledger—optimizing font scale, cell padding, and border weights automatically.

Step 3: Client-Side Draft-07 JSON Schema Validation

Validating API payloads against schema contracts should not require heavy NPM packages. We implemented a lightweight, zero-dependency Draft-07 validator supporting:

Core primitive types: object, array, string, number, boolean, null.
Structural assertions: required, properties, items, and additionalProperties.
Boundary constraints: minimum, maximum, minLength, maxLength, pattern, and enum.

When validation failures occur, the coordinates of the invalid properties are mapped directly back to individual table cells, triggering a high-contrast visual alert badge and informative error tooltips without interrupting table navigation.

Step 4: Real-Time REST Polling & Row-Key Differential Diffing

Debugging reactive endpoints or live polling services requires observability into incremental data shifts. The visualizer includes an integrated polling watcher:

Configurable polling cycles: 5s, 10s, 30s, or 60s intervals.
Continuous performance telemetry: Response duration (ms), payload transfer size (bytes), and HTTP status codes.
Differential Highlighting: Rows are matched against prior iterations using primary identity heuristics (id, uuid, _id, key). Changed attributes flash dynamically, providing instantaneous visual confirmation of remote updates.

Step 5: Client-Side Multi-Format Tabular & Vector Exports

Exporting customized data views should never rely on server-side rendering pipelines. The visualizer compiles all downloadable formats in the browser sandbox:

RFC-4180 CSV: Complete RFC compliance with double-quote escaping for commas and embedded line breaks.
GitHub-Flavored Markdown (GFM): Formatted markdown tables with alignment specifiers for documentation and GitHub issues.
Standalone HTML: A portable, styled single-file HTML document bundling the formatted table.
SVG Vector & Canvas PNG: High-resolution vector table graphics and rasterized PNG snapshots generated via client-side canvas rasterization.
Paginated Print PDF: Clean vector documents formatted for enterprise documentation archives.

Step 6: The Architectural Pivot: Node 22 to Native PHP

Our original prototype ran on a Node 22 backend utilizing node:sqlite and node:http. However, standard shared hosting environments (including Hostinger, cPanel, and LiteSpeed servers) utilize short-lived PHP-FPM workers. Running persistent Node processes requires separate VPS instances, manual systemd service management, and reverse-proxy configurations.

By migrating the share engine to a native WordPress plugin using PHP 8.0+ PDO SQLite:

Zero Runtime Dependencies: Uses native pdo_sqlite available across virtually all PHP hosting stacks.
Standardized API: Endpoints are handled cleanly via the WordPress REST API (/wp-json/json-nexus/v1/share).
Autonomous Cleanup: Ephemeral storage TTL is managed via WP-Cron without persistent memory overhead.

Step 7: Implementing High-Performance SQLite Storage in WordPress

To ensure user share data persists across plugin upgrades, the SQLite database resides in the uploads directory: wp-content/uploads/json-nexus-shares/shares.sqlite.

PRAGMA journal_mode = WAL;

CREATE TABLE IF NOT EXISTS shares (
    token TEXT PRIMARY KEY,
    raw_json TEXT NOT NULL,
    ui_state TEXT NOT NULL,
    created_at INTEGER NOT NULL,
    expires_at INTEGER NOT NULL
);

CREATE INDEX IF NOT EXISTS idx_shares_expires_at ON shares(expires_at);

CREATE TABLE IF NOT EXISTS share_tombstones (
    token TEXT PRIMARY KEY,
    purged_at INTEGER NOT NULL
);

Database File Hardening: To block direct HTTP access to the SQLite file, the plugin automatically provisions an .htaccess rule inside the database storage directory:

<IfModule mod_authz_core.c>
    Require all denied
</IfModule>
<IfModule !mod_authz_core.c>
    Deny from all
</IfModule>

Step 8: Cryptographic Tokens & 90-Day TTL Lifecycle Management

Share tokens are generated using cryptographically strong random bytes compliant with RFC 4122 v4:

class JNV_UUID_Token {
    public static function generate(): string {
        $bytes = random_bytes(16);
        $bytes[6] = chr((ord($bytes[6]) & 0x0f) | 0x40); // Version 4
        $bytes[8] = chr((ord($bytes[8]) & 0x3f) | 0x80); // RFC 4122 variant
        return vsprintf('%s%s-%s-%s-%s-%s%s%s', str_split(bin2hex($bytes), 4));
    }
}

Each share records an absolute millisecond expiration timestamp (created_at + 90 * 86400 * 1000). When a record expires or is swept by WP-Cron:

The active record is removed from the shares table.
A reference is logged into share_tombstones.
Future requests return an HTTP 410 Gone response with the exact lifecycle notice: “This visualization has reached its 90-day lifecycle limit and has been securely purged.”

Step 9: REST API Endpoints & Rate Limiting Guardrails

We register our endpoints on the rest_api_init action:

POST /wp-json/json-nexus/v1/share — Stores JSON payload and returns the share token and expiration metadata.
GET /wp-json/json-nexus/v1/share/{token} — Retrieves active payloads or returns 410 Gone for purged links.
GET /wp-json/json-nexus/v1/health — Administrative diagnostic endpoint returning SQLite WAL storage health.

To defend against API flooding, requests are throttled using WordPress transients (capping client IPs to 15 creations per minute), combined with a hard 10 MB ceiling on rawJson strings.

Step 10: Embedding via Shortcode & Gutenberg Block

The visualizer can be deployed anywhere across WordPress using either the standard shortcode or the dedicated Gutenberg block:


  
    
      JN
      
        JSON Nexus Visualizer
        Parse · Shape · Explore · Export
      
    
    
      Local recovery ready
      READ ONLY SHARE
      
        
        
      
      
      
    
  

  
    
      
        LIVE DATA WORKSPACE
        Your data, without the clutter.
        The table stays front and center. Everything else slides away until you need it.
      
      Waiting for data
    

    
      
        
          JSON TABLE
          Visualization
          Waiting for parsed JSON…
        
        STANDARD GRID
      

      
      
        
          ⚠
          
          
        
        
      

      
        
          
          
        
        
        
          ◇
          Your formatted table will appear here
          Open Data to paste, drop, or fetch JSON. The workspace remembers your payload locally.
        
      

      
        0 rows
        
          
          Page 1 of 1
          
        
      
    

    
      
      
      
      
      
    
  

  
  
    
      
        CONTROL SURFACE
        Controls
      
      
    

    
      
        Bring JSON into the workspace without pushing the table out of view.
        
          Payload diagnostics
          
            PAYLOAD—No parsed document yet.
            SHAPE—Nested objects flatten into searchable columns.
            PROFILEWaitingNo profiling pass yet.
          
        
        
          Data quality & schema
          Load valid JSON to analyze data quality.
          NULL / MISSING BY COLUMN

          NUMERIC OUTLIERS

          SCHEMA DRIFT

          DUPLICATE KEYS

          SCHEMA VALIDATION

        
        JSON payload
        
        
          ↥
          Drop .json hereor click to browse · 10 MB max
          
        
        
          REST endpoint
          
          
        
        
          REST endpoint monitoring
          
            
              
                Poll interval
                
              
              
            
            MONITOR IDLENo endpoint watch active.
            
              LAST RESPONSE—
              PAYLOAD SIZE—
              CHANGES—
            
            Start watching to collect endpoint response history.
          
        
        
          JSON Schema validation
          
            Paste an optional JSON Schema to validate the current payload. Supported keywords include type, required, properties, items, enum, const, format, numeric/string bounds, and additionalProperties.
            Validation schema
            
            
            No schema configured.
          
        
        
          Start typing to validate JSON.
          
            
            
          
        
      

      
        Shape how the table reads. Manual choices override the automatic layout assistant for this payload.
        
          Search & pagination
          Filter all cells
          
          
            Rows / page
            Page
          
          
        
        
          Layout intelligence
          
            View mode
            Table style
          
          
            Header treatment
            Cell borders
          
        
        
          Typography
          
            Density
            Font family
          
          
            Text size
            Weight
          
          Letter spacing
          
          Cell text behavior
          
        
        
          Table decoration
          
            Alternating rowsImprove horizontal scanning
            Hover highlightEmphasize the active row
            Row numbersKeep records easy to reference
            Type accentsMark DATE, NUM, CASH, GEO
          
          Table theme
          
          Table-only styling: These theme, typography, density, header, border, and decoration settings change the formatted table—not the application chrome. Use the Dark / Light switch in the header to change the overall interface mode.
          Smart layout: Auto uses the profiler's detected density, field archetypes, and schema shape to choose a table treatment.
        
      

      
        Drag the handles to reorder. Uncheck fields to hide them from the formatted table and exports.
        Load JSON to populate columns.
      

      
        Exports reflect the active visible columns, order, filter, and sort state.
        
          
          
          
        
        
          Table-only publishing
          
            These outputs contain the formatted table only. They reuse the active visible columns, filtering, sorting, layout density, table theme, and table decorations.
            Branding
            
            Watermark is baked into visual exports; Link adds JSON Nexus attribution and points back to this app.
            
              
              
              
              
              
            
            PNG and PDF are paginated/visual exports; SVG stays vector and the copied HTML is ready to paste into another page.
          
        
        All exported cell text is escaped before being compiled into the local file.
      

      
        Share the current view with a cryptographic token. Links expire exactly 90 days after creation.
        
          
          Allow modificationRecipients can open the full workspace and edit the visualization.
        
        
          DEFAULT SHARE
          Table-only viewer
          Without modification permission, the recipient sees the formatted table and none of the authoring controls.
        
        
        
          Share link
          
          
        
      
    
  

  
    
      NEXUS HELP
How the workspace works

      
        01
Bring in JSON
Open Data to paste, drag a .json file, or fetch a CORS-enabled endpoint. The table updates as the JSON validates.
        02
Shape the view
Use View for filtering, pagination, density, typography, themes, sorting, and the Document Ledger mode.
        03
Share safely
New links default to a table-only viewer. Turn on Allow modification when recipients need the full workspace.
        04
90-day lifecycle
Share records carry an exact expiration timestamp. Purged links return HTTP 410 with the lifecycle notice.
        05
Keyboard shortcuts
Ctrl+F focuses filtering, Ctrl+E opens exports, Shift+S opens sharing, and ←/→ moves between pages.
        06
Profile & quality
Hover or focus the Profile badge for the automatic layout rationale. Expand Data quality & schema for null rates, outliers, duplicate keys, schema drift, and validation results.
        07
REST monitoring
Open Data → REST endpoint monitoring to poll a CORS-enabled endpoint, track response time and payload size, and highlight changed cells between successful polls.
        08
Schema validation
Paste an optional JSON Schema and validate it against the current payload. Invalid cells receive a visible warning treatment while the profiler uses schema type hints to confirm columns.

Additionally, rewrite rules allow direct, distraction-free sharing: visiting /s/{token}/ loads a full-viewport standalone template without theme chrome, enabling immediate data exploration for stakeholders.

Try the Live Tool

JSON Nexus Visualizer is live right here on Web Develop Mentor. Experience the table flattening, schema validation, and instant export capabilities firsthand:

Launch JSON Nexus Visualizer

The complete plugin package is distributed under the GNU General Public License v3.0 (GPLv3). Feel free to adapt the architecture for your own self-hosted developer toolchains.