LOCAL-FIRST DEVTOOLS2026-09-018 min readRad Tome

Local-First Engineering: Why In-Browser JSON and Recursive XML Formatting Matters

Protecting proprietary payloads and debugging production payloads with client-side execution, zero external telemetry, and deterministic formatting.

#Local-First#Developer Tools#PrettyPrint#JSON#XML#Privacy

// EXECUTIVE SUMMARY & ABSTRACT

Explores the philosophy and mechanics behind PrettyPrint. Demonstrates why developers should avoid paste-into-cloud formatters for sensitive enterprise logs, and reveals the recursive AST algorithms used to parse and highlight malformed XML and JSON completely in-browser.

#The Security Risk of 'Paste-to-Format' Web Utilities

Every day, thousands of developers copy proprietary production logs, database dumps, JWT tokens, and customer XML payloads into generic online formatting tools found on Google search. Many of these third-party utilities transmit the entered data back to centralized servers for processing or telemetry tracking, creating severe compliance risks under GDPR, SOC2, and HIPAA. At RadTome, PrettyPrint was designed with a fundamental rule: **Zero Bytes Transmitted**. Code and data formatting must be treated as a pure client-side mathematical function.

#Recursive Formatting Algorithm for Complex XML Trees

While formatting standard JSON is trivial using native browser APIs (`JSON.stringify(JSON.parse(raw), null, 2)`), XML presents unique formatting hurdles. Enterprise XML frequently contains unformatted attributes, CDATA blocks, mixed namespaces, and irregular self-closing tags. PrettyPrint utilizes a recursive stack parser to normalize node indentation:

SOURCE CODEREADY

// Core recursive XML indentation logic in PrettyPrint
export function formatXml(xmlString, indentChar = '  ') {
  let formatted = '';
  let indent = 0;
  // Clean whitespace between tag boundaries
  const cleanXml = xmlString.replace(/>\s*</g, '><').trim();
  const tokens = cleanXml.split(/(<[^>]+>)/g).filter(Boolean);

  tokens.forEach((token) => {
    if (token.startsWith('<?') || token.startsWith('<!')) {
      formatted += indentChar.repeat(indent) + token + '\n';
    } else if (token.startsWith('</')) {
      indent = Math.max(0, indent - 1);
      formatted += indentChar.repeat(indent) + token + '\n';
    } else if (token.startsWith('<') && !token.endsWith('/>')) {
      formatted += indentChar.repeat(indent) + token + '\n';
      indent++;
    } else {
      // Content or self-closing tag
      formatted += indentChar.repeat(indent) + token + '\n';
    }
  });

  return formatted.trim();
}

#Syntax Highlighting Without Heavy AST Engines

Many developer utilities bloat their bundle sizes by importing massive 2MB Prism or Highlight.js language packages. PrettyPrint implements a lean regex tokenizer that colorizes tags, attributes, string literals, numbers, and boolean values with zero external dependencies, keeping initial bundle load time below 30ms.

Rad TomeAUTHOR & FOUNDER

Lead Systems Architect & Founder, RadTome

AUTHOR PROFILE GITHUB

Rad Tome leads software architecture, systems engineering, and open-source tooling at RadTome. Specializes in GraalVM Ahead-of-Time compilation, distributed microservices, Chrome Manifest V3 APIs, and local-first browser developer utilities.

Editorial Integrity Statement: All code snippets, GraalVM benchmarks, and architecture designs tested and verified in production environments.

PUBLISHED BY RADTOME SOFTWARE ORGANIZATION

This publication is part of RadTome's open developer knowledge base. All technical materials are validated against active production systems, open-source repositories, and industry standard benchmarks.

◀ PREVIOUS DISPATCH

Architecting Modern Chrome Extensions in Manifest V3: SidePanels & Multi-LLM Routing

NEXT DISPATCH ▶

Model Context Protocol (MCP) in Production: Bridging Autonomous Agents to Enterprise APIs