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

ERLayoutAlgorithm

ER diagram layout algorithm

Allowed Values

force
hierarchy
grid
circular

ERNodeDisplay

Properties

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

FieldEditorConfig

Properties

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

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`	✅	Whether group is expanded by default
order	`number`	✅	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`	✅	Whether section is expanded by default
order	`number`	✅	Sort order (lower = higher)

ObjectDesignerConfig

Properties

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

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`	✅	Include system-level objects
includeAbstract	`boolean`	✅	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'>`	✅	Default list display mode
defaultSortField	`Enum<'name' \| 'label' \| 'fieldCount' \| 'updatedAt'>`	✅	Default sort field
defaultSortDirection	`Enum<'asc' \| 'desc'>`	✅	Default sort direction
defaultFilter	`{ package?: string; tags?: string[]; includeSystem: boolean; includeAbstract: boolean; … }`	✅	Default filter configuration
showFieldCount	`boolean`	✅	Show field count badge
showRelationshipCount	`boolean`	✅	Show relationship count badge
showQuickPreview	`boolean`	✅	Show quick field preview tooltip on hover
enableComparison	`boolean`	✅	Enable side-by-side object comparison
showERDiagramToggle	`boolean`	✅	Show ER diagram toggle in toolbar
showCreateAction	`boolean`	✅	Show create object action
showStatsSummary	`boolean`	✅	Show statistics summary bar

ObjectPreviewConfig

Properties

Property	Type	Required	Description
tabs	`{ key: string; label: string; icon?: string; enabled: boolean; … }[]`	✅	Object detail preview tabs
defaultTab	`string`	✅	Default active tab key
showHeader	`boolean`	✅	Show object summary header
showBreadcrumbs	`boolean`	✅	Show navigation breadcrumbs

ObjectPreviewTab

Properties

Property	Type	Required	Description
key	`string`	✅	Tab key
label	`string`	✅	Tab display label
icon	`string`	optional	Lucide icon name
enabled	`boolean`	✅	Whether this tab is available
order	`number`	✅	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'>`	✅	Line style in diagrams
color	`string`	✅	Line color (CSS value)
highlightColor	`string`	✅	Highlighted color on hover/select
cardinalityLabel	`string`	✅	Cardinality label (e.g., "1:N", "1:1", "N:M")

RelationshipMapperConfig

Properties

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

On this page