MERN Visualizer 🚀

A professional-grade full-stack observability tool that automatically generates an interactive architecture map of your MERN application.

Features

• Universal Scanning: Automatically detects routes (Express, Fastify, Next.js), frontend API calls (Axios, Fetch), and Mongoose models.
• Deep Tracing: Links UI components directly to their backend routes and database schemas.
• Live Traffic: Watch your architecture map light up in real-time as requests hit your server.
• Data Profiling: Connect to a live MongoDB to infer true schemas from production data.
• Static Export: Generate a standalone, interactive HTML report for documentation.

Installation

npm install -g fullstack-code-visualiser

Usage

1. Scan your project

Run inside your root directory:

mern-visualizer scan

2. Live DB Profiling

mern-visualizer scan --db "mongodb://localhost:27017/my-db"

3. Generate Static Report

mern-visualizer export

Integration (Live Pulse)

To see live traffic flashes in the dashboard, add our tiny middleware to your server:

import { monitor } from 'fullstack-code-visualiser/monitor';
app.use(monitor());