Prisma Client Types Generator

A tool to generate TypeScript types from your Prisma schema, can be safely imported on the browser.

what does it do

This package generates TypeScript types from your Prisma schema file that can be safely used in browser environments. Unlike the types generated by Prisma Client, these types:

Are pure TypeScript types with no runtime dependencies
Can be imported directly in browser code without bundling issues
Don't include any Prisma-specific runtime code or decorators
Only include the type information needed for type checking and IDE support

This is particularly useful when you want to share types between your backend and frontend code without bringing in the full Prisma Client library to the browser.

For example, if you have a Prisma model it will generate:

ModelValues => the scalars
ModelKeys => the unique keys
Model => keys and values, as they are represented in the database
ModelExtended => the model with all the relations

Usage Examples

1. Basic Setup

First, add the generator to your schema.prisma:

generator types {
  provider = "prisma-client-types-generator"
  output   = "./generated/types.ts"
}

2. Example Prisma Schema

model User {
  id        Int      @id @default(autoincrement())
  email     String   @unique
  name      String?
  posts     Post[]
  createdAt DateTime @default(now())
}

model Post {
  id        Int      @id @default(autoincrement())
  title     String
  content   String?
  author    User     @relation(fields: [authorId], references: [id])
  authorId  Int
  createdAt DateTime @default(now())
}

3. Generated Types Usage

After running prisma generate, you can use the generated types in your frontend code:

import type { User, UserExtended, Post, PostExtended } from "./generated/types";

// Basic type usage
const user: User = {
  id: 1,
  email: "user@example.com",
  name: "John Doe",
  createdAt: new Date(),
};

// Using extended types with relations
const postWithAuthor: PostExtended = {
  id: 1,
  title: "My First Post",
  content: "Hello World!",
  authorId: 1,
  createdAt: new Date(),
  author: {
    id: 1,
    email: "user@example.com",
    name: "John Doe",
    createdAt: new Date(),
  },
};

// Type-safe API responses
async function fetchUser(id: number): Promise<UserExtended> {
  const response = await fetch(`/api/users/${id}`);
  return response.json();
}

4. Configuration Options

You can customize the generator output using configuration options in your schema.prisma:

generator types {
  provider = "prisma-client-types-generator"
  output   = "./generated/types.ts"
  config   = {
    pascalCase = true
    aliases    = "./prisma/aliases.ts"
  }
}

Then create a file prisma/aliases.ts with your type aliases:

// prisma/aliases.ts
// CommonJS style (recommended for compatibility with require)
module.exports = {
  outdated_legacy_table: "NewModelName",
  outdated_legacy_enum: "NewEnumName",
};

// Or ESM style (if you're using ESM modules)
export default {
  outdated_legacy_table: "NewModelName",
  outdated_legacy_enum: "NewEnumName",
};

The aliases file should export a default object where:

Keys are the model names from your Prisma schema
Values are the desired type names in the generated output

5. Type Safety in API Routes

import type { User, Post } from "./generated/types";

// Type-safe API route handler
export async function createPost(
  data: Omit<Post, "id" | "createdAt">
): Promise<Post> {
  // Your API logic here
  return {
    id: 1,
    ...data,
    createdAt: new Date(),
  };
}

These types can be safely used in both frontend and backend code, providing type safety without bringing in the full Prisma Client runtime.