How do we render 3rd party custom fields in a custom entry editor interface?

Hey All,

We are looking to build a custom editor interface page to add additional functionality to this experience.

We have a proof of concept working with all of the default fields, however 3rd party editors do not show. They have their title/label but the component itself does not render.

Here’s a snippet of our proof of concept, where we are able to render the default fields:

  // Render default contentful fields using Forma 36 Component
  const DefaultField = (props: DefaultFieldProps) => {
    const { fieldId, sdk, widgetId } = props;
    return (
      <FieldWrapper sdk={sdk} name={fieldId} showFocusBar={true}>
        <Field sdk={sdk} widgetId={widgetId!} />

  return (
      { => {
          const control = sdk.editor.editorInterface.controls!.find(
            (control) => control.fieldId ===

          const widgetId = control?.widgetId || null;

          return (
              sdk={ getFieldExtensionSdk(, sdk) }

Screenshot 2023-09-11 at 5.27.21 PM

The ‘title’ field (a regular text input) is showing, however ‘metaData’ is not rendering as a custom field as it should

Does anyone have a clear example of how to render our custom fields which are installed as other apps without re-writing them into this custom extension?