🧾 Universal Schema Viewer

A lightweight browser-based tool for viewing, converting, and exploring OpenAPI YAML/JSON and XSD/XML schemas — with built-in Redoc rendering and full dark-mode support.

---

🌐 Live Demo

👉 View on GitHub Pages

or use my custom domain: schema.mumblebaj.xyz

---

🧩 Overview

The Universal Schema Viewer lets you drag-and-drop or browse to load either:

• OpenAPI / Swagger YAML or JSON → rendered instantly using ReDoc

• XSD / XML Schema Definition files → automatically converted to OpenAPI format and visualized via ReDoc

No backend, no uploads — everything runs locally in your browser.

---

✨ Key Features

• ✅ Dual Viewer Modes
• ✅ Automatic Format Detection
• ✅ Full Dark Mode with ReDoc Overrides
• ✅ Offline & Privacy-First
• ✅ Responsive Layout for All Devices

---

⚙️ Project Structure

📁 project-root/
├── index.html
├── favicon.svg / favicon.png
├── css/
│   └── style.css
├── js/
│   ├── yamlViewer.js
│   └── xsdViewer.js

---

🧑‍💻 Local Development

git clone https://github.com/mumblebaj/api-docs.git
cd api-docs
npx http-server . -p 8080

Then visit → http://localhost:8080

---

🧠 Technical Highlights

• Language: Vanilla JavaScript (ES Modules)
• Renderer: ReDoc Standalone
• XSD → OpenAPI Conversion: Custom DOMParser-based transformation
• Dark Mode: CSS variables + localStorage persistence
• No Build Tools: Works 100% offline and dependency-free

---

🛠️ Customization

Modify:

• Colors → :root in style.css
• Themes → redocThemes in xsdViewer.js
• Layout → yamlViewer.js and xsdViewer.js

---

🧭 Development Roadmap

Status	Feature	Description
✅	Dark Mode Enhancements	Deep ReDoc integration for tables, buttons, and spans.
✅	Safe ReDoc Re-rendering	Introduced safeRenderRedoc() to prevent race conditions.
🔄	Export Schema as JSON	Download converted XSD → OpenAPI as .json.
🔄	Side-by-side Comparison	Compare YAML vs. converted schema visually.
🔄	Multi-file Merge	Combine multiple XSDs into one OpenAPI doc.
🧩	ReDoc v3 Migration	Evaluate ReDoc v3 renderer.
💡	Syntax Highlighting	Optional Prism.js-based raw YAML/XML view.
🧱	Dockerized Local Version	Self-hostable container for offline environments.

---

🧰 Built With

---

🤝 Contributing

Contributions are welcome! To contribute:

1. Fork the repository
2. Create a branch:

git checkout -b feature/your-feature

3. Commit changes:

git commit -m "Add feature: description"

4. Push and open a Pull Request Before submitting:

• Ensure consistent formatting (eslint / prettier)
• Write descriptive commit messages
• Test locally before PR submission 💡 Have an idea or found a bug? → Open an Issue

---

📄 License

MIT License © 2025

---

💬 Acknowledgements

• ReDoc — API documentation engine
• YAML & OpenAPI Initiative
• XML Schema (W3C)
• Icons and layout inspired by Swagger Editor and other open developer tools