netlify-cms-widget-mdx

Experimental MDX file support in Netlify CMS.

Install

npm i netlify-cms-widget-mdx

import { MdxControl, MdxPreview } from 'netlify-cms-widget-mdx';

CMS.registerWidget('mdx', MdxControl, MdxPreview);

To setup scope, components and other props for @mdx-js/runtime. Also you can setup allowedImports for mdx-scoped-runtime that will inspect the import path and apply the scope if path is correct.

import Trend from 'react-trend';
import { MdxControl, setupPreview } from 'netlify-cms-widget-mdx';
import Trend from 'react-trend';
import remarkEmojiPlugin from 'remark-emoji';

CMS.registerWidget(
  'mdx',
  MdxControl,
  setupPreview({
    components: {
      h1: ({ children, ...props }) => (
        <h1 style={{ color: 'tomato' }} {...props}>
          {children}
        </h1>
      ),
    },
    scope: {
      Layout: (props) => (
        <div
          style={{ padding: '10px', border: '1px solid green', borderRadius: '5px' }}
          {...props}
        />
      ),
    },
    allowedImports: {
      'react-trend': {
        ImportDefault: Trend,
      },
    },
    mdPlugins: [remarkEmojiPlugin],
  })
);

How to use

Add to your Netlify CMS configuration:

extension: 'mdx',
format: 'frontmatter',
fields:
  - name: body
    label: Body
    widget: mdx

License

MIT

Support

For help with this widget, open an issue or ask the Netlify CMS community in Gitter.