@picadeck/nextjs

Next.js App Router handler for Picadeck Schema Visualizer. Serves an interactive schema visualization page from a Next.js API route.

Installation

npm install @picadeck/nextjs @picadeck/core

Plus the parser package for your ORM:

npm install @picadeck/mongoose-parser   # for Mongoose
npm install @picadeck/prisma-parser      # for Prisma
npm install @picadeck/drizzle-parser     # for Drizzle
# ... or any other @picadeck parser

Usage

Create a route handler in your Next.js App Router:

// app/api/schema/route.ts
import { createSchemaHandler } from "@picadeck/nextjs";
import { parsePrismaFile } from "@picadeck/prisma-parser";

export const GET = createSchemaHandler({
  parser: () => parsePrismaFile("./prisma/schema.prisma"),
  theme: "dark",
  title: "My App Schema",
});

Then visit http://localhost:3000/api/schema to see the visualization.

API

createSchemaHandler(options)

Returns a Next.js App Router GET handler that serves the schema visualizer as a self-contained HTML page.

| Option | Type | Required | Description | | -------- | ------------------------------------- | -------- | ------------------------------- | | parser | () => UniversalSchema \| Promise<UniversalSchema> | Yes | Function that returns a schema | | theme | 'light' \| 'dark' | No | UI theme (default: 'light') | | title | string | No | Page title |

SchemaHandlerOptions

TypeScript interface for the options object, exported for type safety.

Example with Drizzle

// app/api/schema/route.ts
import { createSchemaHandler } from "@picadeck/nextjs";
import { parseDrizzleSchema } from "@picadeck/drizzle-parser";
import * as schema from "@/db/schema";

export const GET = createSchemaHandler({
  parser: () => parseDrizzleSchema(schema, "postgresql"),
  theme: "light",
});

License

MIT