Is there a way to register a bundled widget with the prebuilt version of NetlifyCMS?

Netlify CMS
,
#1

Hello

I have a custom widget I’d like to integrate into NetlifyCMS, however I am not using a build process that imports the CMS and compiles it to my site.

Does this mean I need to clone the NetlifyCMS repo and rebuild it to integrate my own custom widget?

The custom widget I want to use is already prebundled (I used the netlify widget starter) so writing it all again inline in the html isn’t really ideal for me…

I supposed I just want to be clear, is the only way to integrate bundled custom widgets to the CMS is to rebuild it manually?

Thanks

Jaclyn

#3

Hi @jaclyntan,
You don’t need to build the CMS manually to integrate bundled custom widgets.
Just make sure the bundled widget is available on the window object and register it as described here:
https://www.netlifycms.org/docs/custom-widgets/#registerwidget.
To include the widget in your site your could publish it to npm and use unpkg.
See https://github.com/netlify-labs/netlify-cms-widget-parent#netlify-cms-widget-parent for an example.

#4

Thank you @erez, the code in the parent widget repo was actually very helpful.

I was confused on how to name and export the widget because the netlify starter boilerplate recommends exporting it like this:

if (typeof window !== 'undefined') {
  window.AwesomeControl = Control
  window.AwesomePreview = Preview
}

export { Control as AwesomeControl, Preview as AwesomePreview }

…but the example you linked to uses this naming convention which worked for me :

if (typeof window !== 'undefined') {
  window.NetlifyCmsWidgetParent = { control: Control, preview: Preview };
}

export { Control, Preview };

Can I recommend updating the documentation so it is clearer on how to properly register bundled widgets (and perhaps link to an example repo)?

In any case thank you so much for your help I really appreciate it. :revolving_hearts:

1 Like
#5

I’m glad that repo made it easier @jaclyntan.
As for registering the widget on the window object - I don’t think there is a big difference, it is mostly a convenience.

You’re right, we should migrate the information in the starter repo to the official documentation.
I opened an issue for it https://github.com/netlify/netlify-cms/issues/4129, and we would happily accept a PR for it :slight_smile:

2 Likes