Hi! If you are here for the file relation widget, NetlifyCMS now supported this feature out of the box. Docs is a bit spare, feel free to open an issue if you get stuck (a) using this new feature or (b) migrating away from ncw-file-relation.

NetlifyCMS Custom Widgets

A collection of custom widgets for netlify-cms

---

⚠ Unstable: Under active development

---

What's inside

npm package	description	docs
@ncwidgets/id	Generate a unique ID for new entries in a folder collection
@ncwidgets/file-relation	Dropdown select widget for a field inside a file collection (the default relation widget only works for folder collections)	docs
@ncwidgets/reorder	Drag & drop to order entries in a folder collection	docs
@ncwidgets/netlify-cms	Custom netlify-cms build with file-relation & id built in	see here

How to use

import cms from 'netlify-cms-app'
import { Widget as IdWidget } from '@ncwidgets/id'
import { Widget as ReorderWidget } from '@ncwidgets/reorder'
import { Widget as FileRelationWidget } from '@ncwidgets/file-relation'

cms.registerWidget(IdWidget)
cms.registerWidget(ReorderWidget)
cms.registerWidget(FileRelationWidget)

cms.init()

Drop-in

@ncwidgets/netlify-cms is a drop-in replacement* for netlify-cms, but includes file-relation & id widget.

- <script src="https://unpkg.com/netlify-cms@^2.0.0/dist/netlify-cms.js"></script>
+ <script src="https://unpkg.com/@ncwidgets/netlify-cms@^0.7.0/dist/netlify-cms.js"></script>

*Note that @ncwidgets/netlify-cms is not a fork. Since we only register additional custom widgets, it's very easy to keep the build up-to-date. It's also currently not a complete drop-in replacement — deprecated dist/cms.js and cms.css are not included.

With Gatsby

Easiest way is to use the official netlify cms plugin. Please follow the instruction here.

npm i gatsby-plugin-netlify-cms netlify-cms-app

Configure gatsby-plugin-netlify-cms:

// gatsby-config.js

module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-netlify-cms`,
      options: {
        manualInit: true,
        modulePath: `${__dirname}/src/cms/cms.js`,
      },
    },
  ]
}

Then, install the widgets you need

npm i @ncwidgets/id

And register them

// src/cms/cms.js

import cms from 'netlify-cms-app'
import { Widget as IdWidget } from '@ncwidgets/id'

cms.registerWidget(IdWidget)
cms.init()

With Hugo

Please see this example demo: https://github.com/d4rekanguok/ncwidgets-hugo-example

Contribute

Has an idea for a widget? Please feel free to send over a PR, or open an issue with the idea tag.

Build

This is a monorepo with yarn workspace & lerna.

# Setup
yarn
yarn bootstrap

# Launch the playground with 
# all the custom widgets at localhost:
yarn playground:dev

# Build widgets
yarn build