Express Integration

Serve an interactive schema visualizer from any Express application with a single middleware call.

Installation

npm install @picadeck/core
# Plus your parser of choice, e.g.:
npm install @picadeck/mongoose-parser

API

schemaVisualizer(schema: UniversalSchema, options?: Options): RequestHandler

Returns an Express middleware that serves a self-contained HTML page with the interactive schema visualizer.

Options:

theme — "light" | "dark". Defaults to "light".
title — Page title shown in the browser tab. Defaults to "Schema Visualizer".

Basic Usage

server.ts

import express from "express";
import { schemaVisualizer } from "@picadeck/core";
import { parseMongooseConnection } from "@picadeck/mongoose-parser";
import mongoose from "mongoose";

const app = express();

await mongoose.connect("mongodb://localhost:27017/myapp");

const schema = parseMongooseConnection(mongoose.connection);

// Serve the visualizer at GET /schema
app.use("/schema", schemaVisualizer(schema));

app.listen(3000);

With Options

app.use("/schema", schemaVisualizer(schema, {
  theme: "dark",
  title: "My App — Database Schema",
}));

Conditional Mounting

You may want to only expose the visualizer in development:

if (process.env.NODE_ENV !== "production") {
  const schema = parseMongooseConnection(mongoose.connection);
  app.use("/schema", schemaVisualizer(schema));
}

How It Works

The middleware responds with a single self-contained HTML page. The schema data is injected into the page via window.__PICADECK_SCHEMA__, and the embedded React + ReactFlow application reads it on load. No API calls are made from the frontend — everything is in one response.