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 { ERDiagramConfig, ERLayoutAlgorithm, ERNodeDisplay, FieldEditorConfig, FieldGroup, FieldPropertySection, ObjectDesignerConfig, ObjectDesignerDefaultView, ObjectFilter, ObjectListDisplayMode, ObjectManagerConfig, ObjectPreviewConfig, ObjectPreviewTab, ObjectSortField, RelationshipDisplay, RelationshipMapperConfig } 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 = ERDiagramConfig.parse(data);

ERDiagramConfig

Properties

Property	Type	Required	Description
enabled	`boolean`	✅	Enable ER diagram panel
layout	`Enum<'force' \| 'hierarchy' \| 'grid' \| 'circular'>`	✅	Default layout algorithm
nodeDisplay	`Object`	✅	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	`Object[]`	✅	Property panel section definitions
fieldGroups	`Object[]`	✅	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	`Object`	✅	Field editor configuration
relationshipMapper	`Object`	✅	Relationship mapper configuration
erDiagram	`Object`	✅	ER diagram configuration
objectManager	`Object`	✅	Object manager configuration
objectPreview	`Object`	✅	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	`Object`	✅	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	`Object[]`	✅	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	`Object[]`	✅	Visual config per relationship type

On this page