Registering Your Library

Via AtlasFormsClient (Recommended)

import { AtlasFormsClient } from '@atlas-forms/client-js';
import { registerContactControls } from '@myorg/atlas-contact-controls';

// Initialise client
const client = AtlasFormsClient.getInstance({ apiBaseUrl: '...' });

// Register custom controls
registerContactControls();

// Now render the app — controls are available

Direct Registry Access

import { getControlRegistry } from '@atlas-forms/control-registry-js';
import { phoneInputPlugin } from '@myorg/atlas-contact-controls';

const registry = getControlRegistry();
registry.register(phoneInputPlugin);

Verifying Registration

const registry = getControlRegistry();

// Check if registered
console.log(registry.has('myorg:phone-input'));  // true

// Get the plugin
const plugin = registry.get('myorg:phone-input');
console.log(plugin?.label);  // 'Phone Number'

// Count registered controls
console.log(registry.count());  // 88 + your custom controls

// Get grouped palette list
const groups = registry.getGroups();
// groups['input'] includes your phone-input plugin

Controlling Palette Visibility

Registered controls automatically appear in Form Studio's palette. To hide a control from the palette (e.g., internal controls that should only be placed programmatically via AI generation), set the hiddenFromPalette flag:

export const internalMetaControl: ReactControlPlugin = {
  type: 'myorg:internal-meta',
  label: 'Internal Meta',
  group: 'advanced',
  hiddenFromPalette: true,  // Does not appear in palette, but can be used in schemas
  EditComponent: InternalMetaEdit,
};