DEV Community

SWAGAT SOURAV DHAR
SWAGAT SOURAV DHAR

Posted on

DocuMorph: Living 3D Architecture Constellations & Interactive API Sandboxes

#hacktoberfest #ai #opensource #webdev

🧬 DocuMorph: Living 3D Architecture Constellations & Interactive API Sandboxes

Every engineering team knows the dread of documentation drift: you design an architecture diagram, write API specifications, and within three weeks the code evolves while the documentation quietly rots. Architecture diagrams in Confluence or Eraser stay static, while developers scramble across Swagger tabs and Postman collections just to see if an endpoint actually behaves the way the docs claim.

DocuMorph was built to solve this once and for all: transforming raw code, GitHub links, and API specifications into living, interactive documentation with dual 2D/3D WebGL architecture constellations and an executable API sandbox directly on the canvas.

🌟 The Core Innovations

1. 🌌 Dual-Engine Architecture: 2D React Flow + 3D WebGL Constellations

Most diagramming tools are stuck in flat 2D box-and-arrow formats. DocuMorph features a dual visual engine:

  • Interactive 3D WebGL Hologram Constellation: Built with Three.js, OrbitControls, and custom particle glow shaders. Microservices, databases, and gateways form a living 3D constellation with real-time animated data-packet flows and card perspective tilt.
  • 2D React Flow Canvas: A precise, zoomable topological canvas with node-level edge routing, status indicators, and payload inspectors.
  • Seamlessly toggle between 2D and 3D with mode memory.

2. ⚡ Enterprise Code Link Ingestion with Hardened Security

Rather than forcing users to manually copy-paste code or install invasive repo-level daemon hooks, DocuMorph provides an Enterprise Code Link Ingestor:

  • Paste any GitHub repository URL, raw code link, or spec.
  • SSRF & Private IP Blocking: Actively filters out requests targeting 127.0.0.1, localhost, 10.x.x.x, 192.168.x.x, or private subnets to prevent SSRF proxy abuse.
  • Sliding-Window Rate Limiting: Enforces strict 10 requests/minute per IP.
  • XSS & AST Sanitization: Input is validated through strict Zod schemas and sanitized before being processed into state.

3. 🧪 Living API Sandbox & Monaco Editor

  • Click on any service or endpoint node in either 2D or 3D view to immediately open the Living API Sandbox.
  • Execute mock and live requests, test custom JSON payloads, and inspect status codes in real time with client-side sandboxing.
  • Embedded Monaco Code Editor (VS Code-grade syntax highlighting and diffing) lets developers inspect the underlying implementation without leaving the canvas.

4. 📊 Observability & Telemetry (Grafana Metrics)

  • Integrated real-time telemetry modal simulating Grafana-style service observability: latency percentiles (p50, p95, p99), throughput graphs, error stream logs, and node health indicators.

5. 📦 Universal Spec Export

  • Export the living state at any time into standard OpenAPI 3.1 specs, JSON Schemas, or GitHub-flavored Markdown.

🛠️ The Tech Stack

  • Framework: Next.js 16 (App Router) + React 19.3.1 + TypeScript
  • 3D Graphics: Three.js WebGL Engine + OrbitControls + High-Precision performance.now() clocking
  • 2D Graph Topology: React Flow (@xyflow/react)
  • Code Editor: Monaco Editor (@monaco-editor/react)
  • Validation & Security: Zod schemas, DOMPurify overrides, Sliding-Window in-memory rate limiting
  • Package Management & Tooling: pnpm 11, Node 22 LTS, CodeQL static security analysis

🔗 Links & Resources

Built with passion for open-source developer tooling and living system architecture.

Top comments (0)