insertMenu not show my Props with Visual Editor

Technical Questions
1

I have been trying to locate the JSON within the visual editor for Hero Components but I cannot find it within the visual editor.

Right now my builder components do not show up within the Builder been trying to figure out where the JSON is because of the Hero Component for the insertMenu.

Builder.register("insertMenu", {
  name: "Hero Components",
  items: [
    {
      name: "Hero",
      type: "list",
      label: "Columns",
      subFields: [
        {
          name: "Hero Banner",
          type: "file",
          image: "https://cdn.builder.io/api/v1/image/assets%2F472c17b44b99422098f586c3fbe4dc2b%2Fd26072f68e064958b64475180a5dc5da",
          defaultValue: "https://cdn.builder.io/api/v1/image/assets%2F472c17b44b99422098f586c3fbe4dc2b%2Fd26072f68e064958b64475180a5dc5da",
        },
        {
          name: "Hero Title",
          type: "text",
          friendlyName: "Heading Title"
        },
      ],
    },
    {
      name: "Double Columns",
      subFields: [
        {
          name: "Double Banner",
          type: "file",
        },
      ],
    },
  ],
});
2

Hi @xbrandonpowell ,

I would recommend you to check if there any error in console from the components that needs attention. I was able to get them to show up.

Could you also confirm if your Double Columns component is registered and imported on the builder-registry?

Also, you could check this Github link for some reference.

Screenshot 2023-12-04 at 1.31.42 PM

Builder.register("insertMenu", {
  name: "Hero Components",
  items: [
    {
      name: "Hero",
      type: "list",
      label: "Columns",
      subFields: [
        {
          name: "Hero Banner",
          type: "file",
          image: "https://cdn.builder.io/api/v1/image/assets%2F472c17b44b99422098f586c3fbe4dc2b%2Fd26072f68e064958b64475180a5dc5da",
          defaultValue: "https://cdn.builder.io/api/v1/image/assets%2F472c17b44b99422098f586c3fbe4dc2b%2Fd26072f68e064958b64475180a5dc5da",
        },
        {
          name: "Hero Title",
          type: "text",
          friendlyName: "Heading Title"
        },
      ],
    },
    {
      name: "Counter",
      subFields: [
        {
          name: "initialCount",
          type: "number",
        },
      ],
    },
  ],
});
3

Every time I right-click to open my console. It does not open up the console. First I have in builder-registry I know that is correct. Explain where is console because I cannot get to the console to Inspect element the Editor.

Everytime I right click it bring up the setting for viusel editor not the setting that take to inspect element to find the console to see what going on in my code.

4

@xbrandonpowell You can click command + option + I for Chrome on Mac to open the console while on the editor.

5

@OmPrakash and @sheema I have created video have not find the error message that cause the problem with Hero Component:

6

Hello @xbrandonpowell,

Regarding the props you are using with Builder.register, it’s important to note that they may not be available for use. Please refer to the following resources for more information:

  1. Finding Your Custom Components in the Visual Editor
  2. InsertMenuConfig Interface Documentation

These references should provide insights into the correct usage and availability of props with Builder.register. If you have further questions or need additional clarification, feel free to reach out.

Thanks,