Master Netlify CMS Editor Components: Create A Custom Editor Widget
Published: 2021-08-24 20:15:50

Developers can build an editor-friendly custom Editor Component in Netlify CMS that can handle a range of content or media needs, that interface directly with Hugo shortcodes.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r5tnxx2krt4g2mmg3afq.png)

Developers working in Netlify CMS can now create and configure custom Editor Components with flexible custom attributes. In this article, we’ll develop a custom component with attributes, display it as a component in the editor pane, and render it in the preview pane, just as it would on the front-end. Editor friendly!

Let’s get started. But first:

## What is Netlify CMS?
Netlify CMS is an open-source content management solution built on a Git workflow. It is a headless CMS that supports the modern way to build websites and apps — the Jamstack —  and works with many site generator platforms, including Hugo, Gatsby, NextJS, and more.

The Jamstack architecture provides better performance, higher security, increased scalability, and a better developer experience. Now we get a great editor experience, too: Netlify CMS offers an easy-to-use editing interface for content, built as a single-page React app with custom configurable UI widgets and editor plugins.

## Let’s build an Editor Component
Let’s see how that works by creating an Editor Component: a custom video component that a Hugo shortcode will support.

### Create the video shortcode
For the sake of this article, we will assume a basic knowledge of Hugo shortcodes. You can either use Hugo’s internal video shortcode or develop your own. Add your shortcode to `layouts/shortcodes`.

### Register the shortcode as an Editor Component
Navigate to Netlify CMS (NCMS)’s `index.html` in your `admin` folder.

Create a `script` tag, and add `CMS.registerEditorComponent({})` — NCMS by default exposes a global object `window.CMS` that you can use to create previews, editor plugins, and widgets. `registerEditorComponent` lets you add a block component to the Markdown editor.

`registerEditorComponent` has 7 params. From the NCMS Custom Widgets docs, they are:

1. **id**: the internal id of the component. For our video component, let’s call this `videos`.

2. **label**: the label of our component in the editor window. Let’s call this `Videos`.

3. **fields**: fields the editor fills out. Note you can add as many as you like, but each must correspond to an NCMS widget. For this example, we only need one field to capture the video link.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z0a5kuj7ks8aw688ush1.png)
4. **pattern**: the Regex pattern used to search for instances of this block in the markdown document. Create a regex pattern that matches the Hugo shortcode:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3755pd2q7zcoqikrygji.png)
5. **fromBlock**: populates the custom widget in the CMS markdown editor. Given an object with one property for each field defined in `fields`, return the string you want to insert into your markdown. There is only one field within our component, so let’s assign that to a variable named `link`:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v2w6s6qz947fdhmqtbx0.png)
6. **toBlock**: serializes the data from the custom editor component to the markdown editor. Now we can take the link variable created in the previous step and combine it with our shortcode defined in our `pattern` like so:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0w3j7zvdax9ir840tvut.png)
**Note well**: `pattern` and `toBlock` must be identical, aside from the variable replacement.
7. **toPreview**: Preview output for this component. It can be a string or a React Component. Ignore the Tailwind classes shown below:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wczn9zvu8bjwnxpo62ko.png)


Here is the completed code:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a5ueh08rho58q4vb6jcw.png)

**That’s it!**
When you refresh the CMS, the custom Video Editor Component will render within the markdown editor on the left, thanks to the `toBlock`:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w9yod863b1z2vi1c8bl8.png)

And thanks to the `toPreview`, the component will be rendered and executed in NCMS’s preview pane on the right. Here, we added another `field` to capture optional captions below a video:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3a4y05es2dnhy0yprmi7.png)

We’d love to hear about your experiences creating custom editor components. Let us know!