LOCAL-FIRST DEVTOOLS2026-09-018 min readRadTome Engineering
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.
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.