Building a Universal XSD → OpenAPI → ReDoc Viewer

🧩 Building a Universal Schema Viewer — XSD, XML & YAML in the Browser

Author: Bernard “mumblebaj” Mumble
Tags: JavaScript, OpenAPI, XSD, XML, YAML, ReDoc, GitHub Pages, Cloudflare

🚀 Introduction

What began as a simple idea to visualize XSDs has evolved into a full Universal Schema Studio — an all-in-one web app that can parse and display XSD, XML, and YAML/JSON OpenAPI documents right in your browser. It features dark/light theming, live editing via the new OpenAPI Editor, and a polished ReDoc preview pane.

👉 Live Demo: schema.mumbleb.com

🧩 Project Overview

The app now supports three complementary viewers and one editor:

• XSD Viewer — Parses .xsd schemas, detects root elements, and converts them to OpenAPI specs.
• YAML/JSON Viewer — Renders .yaml, .yml, or .json OpenAPI specs with ReDoc or collapsible JSON tree.
• XML Viewer — Parses .xml payloads, displaying structured content or mock schema previews.
• OpenAPI Editor — A dedicated editing environment for live validation, preview, and export.

The system automatically detects the file type and mode, applies dual themes, and ensures smooth switching between schema views.

🗂️ Updated Project Structure

project-root/
├── .github/workflows/
│   └── docs.yml
├── docs/
│   ├── index.html
│   ├── openapiEditor.html
│   ├── xmlViewer.html
│   ├── CNAME
│   ├── favicon.svg
├── css/
│   ├── style.css
│   └── openapiEditor.css
├── js/
│   ├── yamlViewer.js
│   ├── xsdViewer.js
│   ├── xmlViewer.js
│   ├── openapiEditor.js
│   └── swagger-client.browser.min.js
│   CHANGELOG.md
└── README.md

📸

🧱 The Core — index.html

Now includes support for all three viewers and a button to launch the OpenAPI Editor.

<header>
  <h2>Universal Schema Viewer</h2>
  <div>
    <select id="viewer-mode">
      <option value="yaml">YAML / JSON</option>
      <option value="xsd">XSD / XML Schema</option>
      <option value="xml">XML Document</option>
    </select>
    <button id="theme-toggle">🌙 Dark Mode</button>
    <button id="editor-launch">🧰 OpenAPI Editor</button>
  </div>
</header>

📸

🎨 Styling — css/style.css

Dual-theme design now covers all elements, including dropdowns, badges, and embedded ReDoc components.
In dark mode, previously white-on-white text (dropdowns, inline elements) now inherits proper foreground colors.

📘 YAML / JSON Viewer — js/yamlViewer.js

The YAML viewer detects OpenAPI specs automatically and renders them via ReDoc.
It now includes:

• $ref navigation (clickable references)
• live theme awareness
• fallback to a collapsible JSON tree when the data isn’t OpenAPI

📸

🧩 XSD Viewer — js/xsdViewer.js

Significantly enhanced with dynamic root detection and robust OpenAPI conversion logic.
It now correctly detects multi-root schemas and supports simpleContent, choice, and annotation elements.
The DOM handling was reworked to ensure ReDoc containers rebuild cleanly on refresh.

📸

📄 XML Viewer — js/xmlViewer.js

A brand-new addition that enables direct .xml visualization.
It parses any well-formed XML payload, detects hierarchical structure, and — when possible — displays it as a simplified OpenAPI representation.

export function initXmlViewer(dropzone, xmlViewer) {
  console.log("📄 XML Viewer initialized");
  // Parse and render XML tree or schema-like ReDoc view
}

📸

🧰 OpenAPI Editor — openapiEditor.html / .js / .css

The OpenAPI Editor lets you load or paste an API spec, validate it live with SwaggerParser, and instantly preview via ReDoc.

Key highlights:

• 🔍 Auto-validation after edits
• 💾 Export to YAML / JSON with timestamped filenames
• 🔗 Clickable $ref navigation across components
• 🌙 Dark/Light mode synced with global theme

await SwaggerParser.validate(parsed);
window.Redoc.init(parsed, { scrollYOffset: 20 }, previewPane);

📸

🌗 Dual-Theme Refinements

Theming now applies consistently across all viewers and the editor, including:

• dropdown selects
• mode badges (YAML / XSD / XML)
• ReDoc-rendered sections and links

Light and dark modes switch seamlessly, with persistent storage via localStorage.

⚙️ Hosting & Deployment Updates

The GitHub Pages + Cloudflare workflow remains lightweight but now includes:

• automatic CNAME handling
• correct HTTPS propagation (avoid “Unavailable for your site” delays)
• clean docs/ folder deployment via peaceiris/actions-gh-pages@v4

- name: Copy CNAME and favicon
  run: |
    mkdir -p docs
    echo "schema.mumbleb.com" > docs/CNAME
    cp favicon.svg docs/

🧠 Lessons Learned

• XML and XSD parsing both benefit from unified DOM logic.
• ReDoc remains the most resilient renderer for OpenAPI specs.
• Dual-theme design required deeper CSS isolation to override internal ReDoc styles.
• Cloudflare + GitHub Pages continues to be the simplest static hosting stack for this kind of web tool.

✨ Final Thoughts

This project has evolved from a simple schema renderer into a modular Universal Schema Studio, capable of handling YAML, JSON, XML, and XSD — all styled consistently and deployed effortlessly.

Stay tuned for the next iteration: enhanced cover image, improved editor UX, and schema diffing tools.

👉 Try it live: schema.mumbleb.com