#registry

@statelyjs/ui Component Registry

The registry system enables dynamic component resolution based on schema node types. When rendering a field, the form system looks up the appropriate component from the registry using the node's type (e.g., 'string', 'object', 'array').

#How It Works

Components are registered with composite keys:

• {nodeType}::edit::component - Edit component for a node type
• {nodeType}::view::component - View component for a node type

#For Plugin Authors

Register custom components for your plugin's node types:

// In your plugin factory
export const myUiPlugin = createUiPlugin<MyUiPlugin>({
 name: PLUGIN_NAME,
 operations: PLUGIN_OPERATIONS,

 setup: (ctx, options) => {
  // Register edit component for custom node type
  ctx.registerComponent('myCustomType', 'edit', MyCustomEditComponent);

  // Register view component
  ctx.registerComponent('myCustomType', 'view', MyCustomViewComponent);

  return {};
});

#Interfaces

#FieldEditProps

Defined in: packages/ui/src/registry.ts:64

Common interface for all 'edit' type fields registered

#Type Parameters

#S

S extends StatelySchemas<any, any> = StatelySchemas<any, any>

#N

N extends BaseNode = S["plugin"]["AnyNode"]

#V

V = unknown

#Properties

#description?

optional description: string | null

Defined in: packages/ui/src/registry.ts:80

Set to null to disable description

#formId

formId: string

Defined in: packages/ui/src/registry.ts:69

#isRequired?

optional isRequired: boolean

Defined in: packages/ui/src/registry.ts:82

#isWizard?

optional isWizard: boolean

Defined in: packages/ui/src/registry.ts:83

#label?

optional label: string | null

Defined in: packages/ui/src/registry.ts:76

Set to null to disable label

#node

node: N

Defined in: packages/ui/src/registry.ts:70

#onChange()

onChange: (value) => void

Defined in: packages/ui/src/registry.ts:72

#Parameters

#value

V

#Returns

void

#placeholder?

optional placeholder: string

Defined in: packages/ui/src/registry.ts:81

#value?

optional value: V

Defined in: packages/ui/src/registry.ts:71

#FieldViewProps

Defined in: packages/ui/src/registry.ts:52

Common interface for all 'view' type fields registered

#Type Parameters

#S

S extends StatelySchemas<any, any> = StatelySchemas<any, any>

#N

N extends BaseNode = PluginNodeUnion<S>

#V

V = unknown

#Properties

#node

node: N

Defined in: packages/ui/src/registry.ts:57

#value

value: V

Defined in: packages/ui/src/registry.ts:58

#UiRegistry

Defined in: packages/ui/src/registry.ts:94

The UI registry containing all registered components, transformers, and functions.

Access via runtime.registry to register or retrieve components.

#Properties

#components

components: ComponentRegistry

Defined in: packages/ui/src/registry.ts:96

Component registry - maps node types to React components

#Type Aliases

#ComponentRegistry

ComponentRegistry = Map<string, ComponentType<any>>

Defined in: packages/ui/src/registry.ts:87

Map of registry keys to React components.

#NodeTypeComponent

NodeTypeComponent<S> = ComponentType<FieldEditProps<S>> | ComponentType<FieldViewProps<S>>

Defined in: packages/ui/src/registry.ts:128

Union type of all components that can be registered.

#Type Parameters

#S

S extends StatelySchemas<any, any> = StatelySchemas<StatelyConfig, []>

#RegistryKey

RegistryKey = `${string}::${RegistryMode}` | `${string}::${RegistryMode}::component`

Defined in: packages/ui/src/registry.ts:121

Internal

A composite key for registry lookup.

Format: {nodeType}::{mode}::{type}

#Example

- `"string::edit::component"` - String edit component
- `"object::view::component"` - Object view component

@internal

#RegistryMode

RegistryMode = "edit" | "view"

Defined in: packages/ui/src/registry.ts:108

Internal

The mode for a registry entry: 'edit' for form inputs, 'view' for display.

#Functions

#getComponent()

getComponent(registry, key): unknown

Defined in: packages/ui/src/registry.ts:160

Get a component from the registry by key.

#Parameters

#registry

ComponentRegistry

The component registry

#key

string

The registry key

#Returns

unknown

The component if found, undefined otherwise

#getComponentByPath()

getComponentByPath(registry, node, path): ComponentType<any> | undefined

Defined in: packages/ui/src/registry.ts:176

Get a component by building a key from path segments.

#Parameters

#registry

ComponentRegistry

The component registry

#node

string

The node type

#path

string[]

Additional path segments to append

#Returns

ComponentType<any> | undefined

#getEditComponent()

getEditComponent<S, N, V>(registry, node): ComponentType<FieldEditProps<S, N, V>> | undefined

Defined in: packages/ui/src/registry.ts:200

Get the edit component for a node type.

Convenience wrapper around getComponent that builds the correct key.

#Type Parameters

#S

S extends StatelySchemas<any, any> = StatelySchemas<any, any>

#N

N extends BaseNode = PluginNodeUnion<S>

#V

V = unknown

#Parameters

#registry

ComponentRegistry

The component registry

#node

string

The node type name

#Returns

ComponentType<FieldEditProps<S, N, V>> | undefined

The edit component if found

#Example

const StringEdit = getEditComponent(registry, 'string');
const PasswordEdit = getEditComponent(registry, 'string', 'password');

#getViewComponent()

getViewComponent<S, N, V>(registry, node): ComponentType<FieldViewProps<S, N, V>> | undefined

Defined in: packages/ui/src/registry.ts:220

Get the view component for a node type.

Convenience wrapper around getComponent that builds the correct key.

#Type Parameters

#S

S extends StatelySchemas<any, any> = StatelySchemas<any, any>

#N

N extends BaseNode = PluginNodeUnion<S>

#V

V = unknown

#Parameters

#registry

ComponentRegistry

The component registry

#node

string

The node type name

#Returns

ComponentType<FieldViewProps<S, N, V>> | undefined

The view component if found

#makeRegistryKey()

makeRegistryKey(node, mode): RegistryKey

Defined in: packages/ui/src/registry.ts:149

Internal

Create a registry key for component or transformer lookup.

#Parameters

#node

string

The node type name (e.g., 'string', 'object', 'myCustomType')

#mode

RegistryMode

'edit' for form inputs, 'view' for display

#Returns

RegistryKey

A formatted registry key