Plugins


Plugins allow you to extend the functionality of the CMS. The plugin API is currently being used to add features to the core CMS, including:

Please note: creating or consuming custom plugins is considered an advanced use-case. It is recommended for most folks to use Tina's predefined plugins mentioned above.

Defining Plugins

interface Plugin {
  /*
   ** Required. Plugins can use the `__type` property to
   ** determine which other plugins they can communicate with
   */
  __type: string
  name: string
  icon?: string
  // add additional plugin-specific options
}

Adding and Removing Plugins

The CMS instance has a Plugin Manager that surfaces add, remove and other methods.

cms.plugins.add({
  // Required. Plugins can use the `__type` property to determine which other plugins they can communicate with
  __type: 'say-hello',
  // add other plugin-specific options here
  hello() {
    console.log('Hello, World!')
  },
})

Accessing The Plugin

cms.plugins.all('say-hello').map(plugin => plugin.hello())

withPlugin HOC & usePlugins Hook

The best way to add plugins to the CMS is via the withPlugin HOC or usePlugins hook. usePlugins accepts a single plugin or an array of plugins and will update the plugins registered with the CMS by adding and removing them dynamically.

In the example below, a custom postCreatorPlugin was created. And the usePlugins hook will dynamically add this plugin to the CMS only when the BlogIndex component is rendered.

import { usePlugins } from "tinacms"
import { postCreatorPlugin } from "./post-creator-plugin"

function BlogIndex(props) {

  // adds creator plugin to cms
  usePlugins(postCreatorPlugin)

  return ( ... )
}

Using the withPlugin HOC in this example would look like this:

import { withPlugin } from "tinacms"
import { postCreatorPlugin } from "./post-creator-plugin"

function BlogIndex(props) {
  return ( ... )
}

// export the HOC with the component and plugin
export default withPlugin( BlogIndex, postCreatorPlugin )

Read more on creating new files with content-creator plugins in Gatsby here.

Read more on creating custom field plugins here.