Object Designer

@module studio/object-designer

Object Designer Protocol — Visual Field Editor, Relationship Mapper & ER Diagram

Defines the specification for the Object Designer experience within ObjectStack Studio, including:

Field Editor: Visual field creation/editing with type-aware property panels
Relationship Mapper: Visual lookup/master-detail relationship configuration
ER Diagram: Entity-Relationship diagram rendering and interaction
Object Manager: Unified object list with search, filtering, and bulk operations

Architecture

The Object Designer is composed of four interconnected panels:

┌─────────────────────────────────────────────────────────────────┐
│                     Object Manager (list / search)             │
├──────────────┬──────────────────────────┬──────────────────────┤
│  Object List │  Field Editor            │  Property Panel      │
│  (sidebar)   │  (table + inline edit)   │  (type-specific)     │
│              │                          │                      │
│  ─ search    │  ─ drag-to-reorder       │  ─ constraints       │
│  ─ filter    │  ─ inline type picker    │  ─ validation        │
│  ─ group     │  ─ batch add/remove      │  ─ security          │
│  ─ create    │  ─ field groups           │  ─ relationships     │
├──────────────┴──────────────────────────┴──────────────────────┤
│                     ER Diagram (toggle panel)                  │
│  ─ auto-layout (force / hierarchy / grid)                     │
│  ─ interactive: click node → navigate to object               │
│  ─ hover: highlight connected relationships                   │
│  ─ zoom/pan/minimap                                           │
└─────────────────────────────────────────────────────────────────┘

@example

import {
  ObjectDesignerConfigSchema,
  ERDiagramConfigSchema,
} from '@objectstack/spec/studio';

const config = ObjectDesignerConfigSchema.parse({
  defaultView: 'field-editor',
  fieldEditor: {
    inlineEditing: true,
    dragReorder: true,
    showFieldGroups: true,
  },
  erDiagram: {
    enabled: true,
    layout: 'force',
    showFieldDetails: true,
  },
});

Source: packages/spec/src/studio/object-designer.zod.ts

TypeScript Usage

import { ERDiagramConfigSchema, ERLayoutAlgorithmSchema, ERNodeDisplaySchema, FieldEditorConfigSchema, FieldGroupSchema, FieldPropertySectionSchema, ObjectDesignerConfigSchema, ObjectDesignerDefaultViewSchema, ObjectFilterSchema, ObjectListDisplayModeSchema, ObjectManagerConfigSchema, ObjectPreviewConfigSchema, ObjectPreviewTabSchema, ObjectSortFieldSchema, RelationshipDisplaySchema, RelationshipMapperConfigSchema } from '@objectstack/spec/studio';
import type { ERDiagramConfig, ERLayoutAlgorithm, ERNodeDisplay, FieldEditorConfig, FieldGroup, FieldPropertySection, ObjectDesignerConfig, ObjectDesignerDefaultView, ObjectFilter, ObjectListDisplayMode, ObjectManagerConfig, ObjectPreviewConfig, ObjectPreviewTab, ObjectSortField, RelationshipDisplay, RelationshipMapperConfig } from '@objectstack/spec/studio';

// Validate data
const result = ERDiagramConfigSchema.parse(data);

ERDiagramConfig

Properties

Property	Type	Required	Description
enabled	`boolean`	optional (default: `true`)	Enable ER diagram panel
layout	`Enum<'force' \| 'hierarchy' \| 'grid' \| 'circular'>`	optional (default: `"force"`)	Default layout algorithm
nodeDisplay	`{ showFields: boolean; maxFieldsVisible: number; showFieldTypes: boolean; showRequiredIndicator: boolean; … }`	optional (has default)	Node display configuration
showMinimap	`boolean`	optional (default: `true`)	Show minimap for large diagrams
zoomControls	`boolean`	optional (default: `true`)	Show zoom in/out/fit controls
minZoom	`number`	optional (default: `0.1`)	Minimum zoom level
maxZoom	`number`	optional (default: `3`)	Maximum zoom level
showEdgeLabels	`boolean`	optional (default: `true`)	Show cardinality labels on relationship edges
highlightOnHover	`boolean`	optional (default: `true`)	Highlight connected entities on node hover
clickToNavigate	`boolean`	optional (default: `true`)	Click node to navigate to object detail
dragToConnect	`boolean`	optional (default: `true`)	Drag between nodes to create relationships
hideOrphans	`boolean`	optional (default: `false`)	Hide objects with no relationships
autoFit	`boolean`	optional (default: `true`)	Auto-fit diagram to viewport on load
exportFormats	`Enum<'png' \| 'svg' \| 'json'>[]`	optional (default: `["png","svg"]`)	Available export formats for diagram

Nested Shape: `ERDiagramConfig.nodeDisplay`

Property	Type	Required	Description
showFields	`boolean`	optional (default: `true`)	Show field list inside entity nodes
maxFieldsVisible	`number`	optional (default: `8`)	Max fields visible before "N more..." collapse
showFieldTypes	`boolean`	optional (default: `true`)	Show field type badges
showRequiredIndicator	`boolean`	optional (default: `true`)	Show required field indicators
showRecordCount	`boolean`	optional (default: `false`)	Show live record count on nodes
showIcon	`boolean`	optional (default: `true`)	Show object icon on node header
showDescription	`boolean`	optional (default: `true`)	Show description tooltip on hover

ERLayoutAlgorithm

ER diagram layout algorithm

Allowed Values

force
hierarchy
grid
circular

ERNodeDisplay

Properties

Property	Type	Required	Description
showFields	`boolean`	optional (default: `true`)	Show field list inside entity nodes
maxFieldsVisible	`number`	optional (default: `8`)	Max fields visible before "N more..." collapse
showFieldTypes	`boolean`	optional (default: `true`)	Show field type badges
showRequiredIndicator	`boolean`	optional (default: `true`)	Show required field indicators
showRecordCount	`boolean`	optional (default: `false`)	Show live record count on nodes
showIcon	`boolean`	optional (default: `true`)	Show object icon on node header
showDescription	`boolean`	optional (default: `true`)	Show description tooltip on hover

FieldEditorConfig

Properties

Property	Type	Required	Description
inlineEditing	`boolean`	optional (default: `true`)	Enable inline editing of field properties
dragReorder	`boolean`	optional (default: `true`)	Enable drag-and-drop field reordering
showFieldGroups	`boolean`	optional (default: `true`)	Show field group headers
showPropertyPanel	`boolean`	optional (default: `true`)	Show the right-side property panel
propertySections	`{ key: string; label: string; icon?: string; defaultExpanded: boolean; … }[]`	optional (has default)	Property panel section definitions
fieldGroups	`{ key: string; label: string; icon?: string; defaultExpanded: boolean; … }[]`	optional (default: `[]`)	Field group definitions
paginationThreshold	`number`	optional (default: `50`)	Number of fields before pagination is enabled
batchOperations	`boolean`	optional (default: `true`)	Enable batch add/remove field operations
showUsageStats	`boolean`	optional (default: `false`)	Show field usage statistics

Nested Shape: `FieldEditorConfig.propertySections[number]`

Property	Type	Required	Description
key	`string`	✅	Section key (e.g., "basics", "constraints", "security")
label	`string`	✅	Section display label
icon	`string`	optional	Lucide icon name
defaultExpanded	`boolean`	optional (default: `true`)	Whether section is expanded by default
order	`number`	optional (default: `0`)	Sort order (lower = higher)

Nested Shape: `FieldEditorConfig.fieldGroups[number]`

Property	Type	Required	Description
key	`string`	✅	Group key matching field.group values
label	`string`	✅	Group display label
icon	`string`	optional	Lucide icon name
defaultExpanded	`boolean`	optional (default: `true`)	Whether group is expanded by default
order	`number`	optional (default: `0`)	Sort order (lower = higher)

FieldGroup

Properties

Property	Type	Required	Description
key	`string`	✅	Group key matching field.group values
label	`string`	✅	Group display label
icon	`string`	optional	Lucide icon name
defaultExpanded	`boolean`	optional (default: `true`)	Whether group is expanded by default
order	`number`	optional (default: `0`)	Sort order (lower = higher)

FieldPropertySection

Properties

Property	Type	Required	Description
key	`string`	✅	Section key (e.g., "basics", "constraints", "security")
label	`string`	✅	Section display label
icon	`string`	optional	Lucide icon name
defaultExpanded	`boolean`	optional (default: `true`)	Whether section is expanded by default
order	`number`	optional (default: `0`)	Sort order (lower = higher)

ObjectDesignerConfig

Properties

Property	Type	Required	Description
defaultView	`Enum<'field-editor' \| 'relationship-mapper' \| 'er-diagram' \| 'object-manager'>`	optional (default: `"field-editor"`)	Default view
fieldEditor	`{ inlineEditing: boolean; dragReorder: boolean; showFieldGroups: boolean; showPropertyPanel: boolean; … }`	optional (has default)	Field editor configuration
relationshipMapper	`{ visualCreation: boolean; showReverseRelationships: boolean; showCascadeWarnings: boolean; displayConfig: object[] }`	optional (has default)	Relationship mapper configuration
erDiagram	`{ enabled: boolean; layout: Enum<'force' \| 'hierarchy' \| 'grid' \| 'circular'>; nodeDisplay: object; showMinimap: boolean; … }`	optional (has default)	ER diagram configuration
objectManager	`{ defaultDisplayMode: Enum<'table' \| 'cards' \| 'tree'>; defaultSortField: Enum<'name' \| 'label' \| 'fieldCount' \| 'updatedAt'>; defaultSortDirection: Enum<'asc' \| 'desc'>; defaultFilter: object; … }`	optional (has default)	Object manager configuration
objectPreview	`{ tabs: object[]; defaultTab: string; showHeader: boolean; showBreadcrumbs: boolean }`	optional (has default)	Object preview configuration

Nested Shape: `ObjectDesignerConfig.fieldEditor`

Property	Type	Required	Description
inlineEditing	`boolean`	optional (default: `true`)	Enable inline editing of field properties
dragReorder	`boolean`	optional (default: `true`)	Enable drag-and-drop field reordering
showFieldGroups	`boolean`	optional (default: `true`)	Show field group headers
showPropertyPanel	`boolean`	optional (default: `true`)	Show the right-side property panel
propertySections	`{ key: string; label: string; icon?: string; defaultExpanded: boolean; … }[]`	optional (has default)	Property panel section definitions
fieldGroups	`{ key: string; label: string; icon?: string; defaultExpanded: boolean; … }[]`	optional (default: `[]`)	Field group definitions
paginationThreshold	`number`	optional (default: `50`)	Number of fields before pagination is enabled
batchOperations	`boolean`	optional (default: `true`)	Enable batch add/remove field operations
showUsageStats	`boolean`	optional (default: `false`)	Show field usage statistics

Nested Shape: `ObjectDesignerConfig.relationshipMapper`

Property	Type	Required	Description
visualCreation	`boolean`	optional (default: `true`)	Enable drag-to-create relationships
showReverseRelationships	`boolean`	optional (default: `true`)	Show reverse/child-to-parent relationships
showCascadeWarnings	`boolean`	optional (default: `true`)	Show cascade delete behavior warnings
displayConfig	`{ type: Enum<'lookup' \| 'master_detail' \| 'tree'>; lineStyle: Enum<'solid' \| 'dashed' \| 'dotted'>; color: string; highlightColor: string; … }[]`	optional (has default)	Visual config per relationship type

Nested Shape: `ObjectDesignerConfig.erDiagram`

Property	Type	Required	Description
enabled	`boolean`	optional (default: `true`)	Enable ER diagram panel
layout	`Enum<'force' \| 'hierarchy' \| 'grid' \| 'circular'>`	optional (default: `"force"`)	Default layout algorithm
nodeDisplay	`{ showFields: boolean; maxFieldsVisible: number; showFieldTypes: boolean; showRequiredIndicator: boolean; … }`	optional (has default)	Node display configuration
showMinimap	`boolean`	optional (default: `true`)	Show minimap for large diagrams
zoomControls	`boolean`	optional (default: `true`)	Show zoom in/out/fit controls
minZoom	`number`	optional (default: `0.1`)	Minimum zoom level
maxZoom	`number`	optional (default: `3`)	Maximum zoom level
showEdgeLabels	`boolean`	optional (default: `true`)	Show cardinality labels on relationship edges
highlightOnHover	`boolean`	optional (default: `true`)	Highlight connected entities on node hover
clickToNavigate	`boolean`	optional (default: `true`)	Click node to navigate to object detail
dragToConnect	`boolean`	optional (default: `true`)	Drag between nodes to create relationships
hideOrphans	`boolean`	optional (default: `false`)	Hide objects with no relationships
autoFit	`boolean`	optional (default: `true`)	Auto-fit diagram to viewport on load
exportFormats	`Enum<'png' \| 'svg' \| 'json'>[]`	optional (default: `["png","svg"]`)	Available export formats for diagram

Nested Shape: `ObjectDesignerConfig.objectManager`

Property	Type	Required	Description
defaultDisplayMode	`Enum<'table' \| 'cards' \| 'tree'>`	optional (default: `"table"`)	Default list display mode
defaultSortField	`Enum<'name' \| 'label' \| 'fieldCount' \| 'updatedAt'>`	optional (default: `"label"`)	Default sort field
defaultSortDirection	`Enum<'asc' \| 'desc'>`	optional (default: `"asc"`)	Default sort direction
defaultFilter	`{ package?: string; tags?: string[]; includeSystem: boolean; includeAbstract: boolean; … }`	optional (default: `{"includeSystem":true,"includeAbstract":false}`)	Default filter configuration
showFieldCount	`boolean`	optional (default: `true`)	Show field count badge
showRelationshipCount	`boolean`	optional (default: `true`)	Show relationship count badge
showQuickPreview	`boolean`	optional (default: `true`)	Show quick field preview tooltip on hover
enableComparison	`boolean`	optional (default: `false`)	Enable side-by-side object comparison
showERDiagramToggle	`boolean`	optional (default: `true`)	Show ER diagram toggle in toolbar
showCreateAction	`boolean`	optional (default: `true`)	Show create object action
showStatsSummary	`boolean`	optional (default: `true`)	Show statistics summary bar

Nested Shape: `ObjectDesignerConfig.objectPreview`

Property	Type	Required	Description
tabs	`{ key: string; label: string; icon?: string; enabled: boolean; … }[]`	optional (has default)	Object detail preview tabs
defaultTab	`string`	optional (default: `"fields"`)	Default active tab key
showHeader	`boolean`	optional (default: `true`)	Show object summary header
showBreadcrumbs	`boolean`	optional (default: `true`)	Show navigation breadcrumbs

ObjectDesignerDefaultView

Default view when entering the Object Designer

Allowed Values

field-editor
relationship-mapper
er-diagram
object-manager

ObjectFilter

Properties

Property	Type	Required	Description
package	`string`	optional	Filter by owning package
tags	`string[]`	optional	Filter by object tags
includeSystem	`boolean`	optional (default: `true`)	Include system-level objects
includeAbstract	`boolean`	optional (default: `false`)	Include abstract base objects
hasFieldType	`string`	optional	Filter to objects containing a specific field type
hasRelationships	`boolean`	optional	Filter to objects with lookup/master_detail fields
searchQuery	`string`	optional	Free-text search across name, label, and description

ObjectListDisplayMode

Object list display mode

Allowed Values

table
cards
tree

ObjectManagerConfig

Properties

Property	Type	Required	Description
defaultDisplayMode	`Enum<'table' \| 'cards' \| 'tree'>`	optional (default: `"table"`)	Default list display mode
defaultSortField	`Enum<'name' \| 'label' \| 'fieldCount' \| 'updatedAt'>`	optional (default: `"label"`)	Default sort field
defaultSortDirection	`Enum<'asc' \| 'desc'>`	optional (default: `"asc"`)	Default sort direction
defaultFilter	`{ package?: string; tags?: string[]; includeSystem: boolean; includeAbstract: boolean; … }`	optional (default: `{"includeSystem":true,"includeAbstract":false}`)	Default filter configuration
showFieldCount	`boolean`	optional (default: `true`)	Show field count badge
showRelationshipCount	`boolean`	optional (default: `true`)	Show relationship count badge
showQuickPreview	`boolean`	optional (default: `true`)	Show quick field preview tooltip on hover
enableComparison	`boolean`	optional (default: `false`)	Enable side-by-side object comparison
showERDiagramToggle	`boolean`	optional (default: `true`)	Show ER diagram toggle in toolbar
showCreateAction	`boolean`	optional (default: `true`)	Show create object action
showStatsSummary	`boolean`	optional (default: `true`)	Show statistics summary bar

Nested Shape: `ObjectManagerConfig.defaultFilter`

Property	Type	Required	Description
package	`string`	optional	Filter by owning package
tags	`string[]`	optional	Filter by object tags
includeSystem	`boolean`	optional (default: `true`)	Include system-level objects
includeAbstract	`boolean`	optional (default: `false`)	Include abstract base objects
hasFieldType	`string`	optional	Filter to objects containing a specific field type
hasRelationships	`boolean`	optional	Filter to objects with lookup/master_detail fields
searchQuery	`string`	optional	Free-text search across name, label, and description

ObjectPreviewConfig

Properties

Property	Type	Required	Description
tabs	`{ key: string; label: string; icon?: string; enabled: boolean; … }[]`	optional (has default)	Object detail preview tabs
defaultTab	`string`	optional (default: `"fields"`)	Default active tab key
showHeader	`boolean`	optional (default: `true`)	Show object summary header
showBreadcrumbs	`boolean`	optional (default: `true`)	Show navigation breadcrumbs

Nested Shape: `ObjectPreviewConfig.tabs[number]`

Property	Type	Required	Description
key	`string`	✅	Tab key
label	`string`	✅	Tab display label
icon	`string`	optional	Lucide icon name
enabled	`boolean`	optional (default: `true`)	Whether this tab is available
order	`number`	optional (default: `0`)	Sort order (lower = higher)

ObjectPreviewTab

Properties

Property	Type	Required	Description
key	`string`	✅	Tab key
label	`string`	✅	Tab display label
icon	`string`	optional	Lucide icon name
enabled	`boolean`	optional (default: `true`)	Whether this tab is available
order	`number`	optional (default: `0`)	Sort order (lower = higher)

ObjectSortField

Object list sort field

Allowed Values

name
label
fieldCount
updatedAt

RelationshipDisplay

Properties

Property	Type	Required	Description
type	`Enum<'lookup' \| 'master_detail' \| 'tree'>`	✅	Relationship type
lineStyle	`Enum<'solid' \| 'dashed' \| 'dotted'>`	optional (default: `"solid"`)	Line style in diagrams
color	`string`	optional (default: `"#94a3b8"`)	Line color (CSS value)
highlightColor	`string`	optional (default: `"#0891b2"`)	Highlighted color on hover/select
cardinalityLabel	`string`	optional (default: `"1:N"`)	Cardinality label (e.g., "1:N", "1:1", "N:M")

RelationshipMapperConfig

Properties

Property	Type	Required	Description
visualCreation	`boolean`	optional (default: `true`)	Enable drag-to-create relationships
showReverseRelationships	`boolean`	optional (default: `true`)	Show reverse/child-to-parent relationships
showCascadeWarnings	`boolean`	optional (default: `true`)	Show cascade delete behavior warnings
displayConfig	`{ type: Enum<'lookup' \| 'master_detail' \| 'tree'>; lineStyle: Enum<'solid' \| 'dashed' \| 'dotted'>; color: string; highlightColor: string; … }[]`	optional (has default)	Visual config per relationship type

Nested Shape: `RelationshipMapperConfig.displayConfig[number]`

Property	Type	Required	Description
type	`Enum<'lookup' \| 'master_detail' \| 'tree'>`	✅	Relationship type
lineStyle	`Enum<'solid' \| 'dashed' \| 'dotted'>`	optional (default: `"solid"`)	Line style in diagrams
color	`string`	optional (default: `"#94a3b8"`)	Line color (CSS value)
highlightColor	`string`	optional (default: `"#0891b2"`)	Highlighted color on hover/select
cardinalityLabel	`string`	optional (default: `"1:N"`)	Cardinality label (e.g., "1:N", "1:1", "N:M")

Object Designer

On this page