# What Custom Types and Enums Does drawDB Support for Schema Design?

> Explore drawDB's support for custom types and enums to enhance your database schema design. Learn how to extend data types and define enums using DBML syntax.

- Repository: [drawDB/drawdb](https://github.com/drawdb-io/drawdb)
- Tags: api-reference
- Published: 2026-08-14

---

**drawDB supports both custom types and enum definitions to extend the native data-type catalog of each supported database, with custom types stored in `localStorage` and enums parsed from DBML syntax.**

The **drawdb-io/drawdb** schema designer lets you go beyond built-in database types. Whether you need domain-specific types like `Money` or state-machine enums like `OrderStatus`, drawDB provides a flexible type system that integrates seamlessly into your DBML diagrams and SQL export.

## Custom Types in drawDB

Custom types allow you to define reusable type aliases with visual styling. They are implemented in [`src/utils/customTypes.js`](https://github.com/drawdb-io/drawdb/blob/main/src/utils/customTypes.js) and persisted to **localStorage** under the key `custom_types`.

### Custom Type Schema

Each custom type entry follows the `customTypeEntrySchema` structure:

```json
{
  "type": "Money",
  "database": "POSTGRES",
  "color": "#4caf50"
}

```

### Core Functions

The [`customTypes.js`](https://github.com/drawdb-io/drawdb/blob/main/customTypes.js) module exports several key functions:

- **`getCustomTypes()`** — retrieves all custom types from localStorage
- **`getCustomTypesForDb(db)`** — filters types by database (e.g., `"POSTGRES"`, `"MYSQL"`, `"SQLITE"`)
- **`resolveType(db, name)`** — resolves any type name to its full descriptor
- **`mergeCustomTypes(incoming)`** — merges imported type definitions

### Defining Custom Types via UI

The [`src/components/EditorHeader/ConfigureCustomTypes/index.jsx`](https://github.com/drawdb-io/drawdb/blob/main/src/components/EditorHeader/ConfigureCustomTypes/index.jsx) component provides the interface for creating and editing custom types. Changes are automatically persisted through `saveCustomTypes`.

## Enums in drawDB

Enums are **first-class types** parsed from DBML syntax and surfaced to React components via the `useEnums` hook in [`src/hooks/useEnums.js`](https://github.com/drawdb-io/drawdb/blob/main/src/hooks/useEnums.js).

### DBML Enum Syntax

Define enums using standard DBML notation:

```dbml
Enum OrderStatus {
  PENDING,
  SHIPPED,
  CANCELLED
}

```

### Enum Parsing Pipeline

The parser in [`src/utils/dbml/parse.js`](https://github.com/drawdb-io/drawdb/blob/main/src/utils/dbml/parse.js) extracts enum definitions into an `enumsByDb` collection. Each enum object contains:

- `name` — the enum identifier
- `values` — array of allowed values

### Using Enums in Tables

Reference enums directly in column definitions:

```dbml
Table orders {
  id int [pk]
  status OrderStatus
}

```

## Type Resolution Order

When `resolveType(db, name)` is called, drawDB checks types in this priority order:

1. **Built-in types** from [`src/data/datatypes.js`](https://github.com/drawdb-io/drawdb/blob/main/src/data/datatypes.js) (`dbToTypes` map)
2. **Custom types** from localStorage
3. **Enums** from the parsed DBML collection
4. **Fallback** to generic `BLOB` type if no match found

This resolution ensures your custom definitions override defaults without breaking existing schemas.

## Practical Code Examples

### Programmatic Type Resolution

```js
import { resolveType } from "./utils/customTypes";

// Custom type lookup
const moneyType = resolveType("POSTGRES", "Money");
// Returns: { type: "Money", database: "POSTGRES", color: "#4caf50" }

// Enum lookup
const statusType = resolveType("POSTGRES", "OrderStatus");
// Returns: { name: "OrderStatus", values: ["PENDING", "SHIPPED", "CANCELLED"] }

// Built-in type
const intType = resolveType("POSTGRES", "int");
// Returns: standard INTEGER descriptor from dbToTypes

```

### Complete DBML Schema with Custom Types and Enums

```dbml
Enum PaymentMethod {
  CREDIT_CARD,
  PAYPAL,
  BANK_TRANSFER
}

Table customers {
  id int [pk]
  name varchar
}

Table orders {
  id int [pk]
  customer_id int [ref: > customers.id]
  total_amount Money
  status OrderStatus
  payment PaymentMethod
  created_at timestamp
}

```

## Key Implementation Files

| File | Purpose |
|------|---------|
| [`src/utils/customTypes.js`](https://github.com/drawdb-io/drawdb/blob/main/src/utils/customTypes.js) | Storage, validation, and resolution of user-defined types |
| [`src/data/datatypes.js`](https://github.com/drawdb-io/drawdb/blob/main/src/data/datatypes.js) | Built-in type catalog (`dbToTypes` map) |
| [`src/utils/dbml/parse.js`](https://github.com/drawdb-io/drawdb/blob/main/src/utils/dbml/parse.js) | DBML parser extracting tables, columns, and enums |
| [`src/hooks/useEnums.js`](https://github.com/drawdb-io/drawdb/blob/main/src/hooks/useEnums.js) | React hook exposing parsed enums to components |
| [`src/components/EditorHeader/ConfigureCustomTypes/index.jsx`](https://github.com/drawdb-io/drawdb/blob/main/src/components/EditorHeader/ConfigureCustomTypes/index.jsx) | Custom type management UI |
| [`src/components/EditorSidePanel/TypesTab/TypeField.jsx`](https://github.com/drawdb-io/drawdb/blob/main/src/components/EditorSidePanel/TypesTab/TypeField.jsx) | Unified type selector (built-in, custom, enum) |

## Summary

- **Custom types** extend any database's native catalog with user-defined names and colors, stored in `localStorage` via [`src/utils/customTypes.js`](https://github.com/drawdb-io/drawdb/blob/main/src/utils/customTypes.js)
- **Enums** are parsed from DBML `Enum` blocks and accessed through the `useEnums` hook
- **`resolveType()`** unifies type lookup across built-in, custom, and enum sources
- The **type selector UI** automatically includes all three categories for seamless schema design

## Frequently Asked Questions

### How do I create a custom type in drawDB?

Open the **Configure Custom Types** panel from the editor header ([`src/components/EditorHeader/ConfigureCustomTypes/index.jsx`](https://github.com/drawdb-io/drawdb/blob/main/src/components/EditorHeader/ConfigureCustomTypes/index.jsx)). Enter a type name, select the target database, and optionally set a color. The type is saved to `localStorage` under `custom_types` and immediately available in the type selector.

### Can I use the same custom type across different databases?

No. Custom types are scoped per database via the `database` field in `customTypeEntrySchema`. Use `getCustomTypesForDb(db)` to retrieve types for a specific database, and define separate entries if you need similar types across PostgreSQL, MySQL, or SQLite.

### What's the difference between enums and custom types in drawDB?

**Enums** define a closed set of allowed values (e.g., `PENDING`, `SHIPPED`) and are declared inline in DBML using `Enum Name { ... }`. **Custom types** are aliases for underlying database types with visual metadata, created through the UI and stored in `localStorage`. Both are resolved through `resolveType()` but enums carry value constraints while custom types carry presentation hints.

### Where does drawDB store my custom types?

Custom types persist to **browser localStorage** under the key `custom_types`. They are not included in exported DBML or SQL files—only referenced by name—so you'll need to re-import or redefine them when switching devices or browsers.