{"pageProps":{"error":null,"preview":false,"file":{"fileRelativePath":"content/docs/plugins.md","data":{"frontmatter":{"title":"Plugins","prev":"/docs/cms","next":"/docs/plugins/forms","consumes":[{"file":"/packages/@tinacms/core/src/plugins.ts","description":"Describes Plugin interface"},{"file":"/packages/tinacms/src/react-tinacms/use-plugin.ts","descrition":"Demonstrates usePlugin"},{"file":"/packages/@tinacms/core/src/cms.ts","description":"Demonstrates adding plugins to CMS obj"}]},"excerpt":" Plugins are objects used to extend and modify the behavior of the CMS. All plugins must conform to the Plugin interface: Beyond these properties, a plugin may contain other properties depend on it's&hellip;","markdownBody":"\n**Plugins** are objects used to extend and modify the behavior of the CMS.\n\nAll plugins must conform to the **Plugin** interface:\n\n```typescript\ninterface Plugin {\n  __type: string // Identifies how the plugin should be used\n  name: string //   Unique identifier for the plugin\n}\n```\n\nBeyond these properties, a plugin may contain other properties depend on it's `__type`. Here are some of the types of plugins\ncurrently availble:\n\n| Plugin Type                                         | Description                                                                |\n| --------------------------------------------------- | -------------------------------------------------------------------------- |\n| [`form`](/docs/plugins/forms)                       | Connect a form to the sidebar & toolbar UIs                                |\n| [`field`](/docs/plugins/fields)                     | Simplify the form creation process.                                        |\n| [`content-creator`](/docs/plugins/content-creators) | Add options to the \"Add Content\" menu.                                     |\n| [`screen`](/docs/plugins/screens)                   | Components that are rendered in overlays and modals. Accessible from menu. |\n| [`toolbar:widget`](/docs/plugins/toolbar-widgets)   | Components that are rendered in the toolbar.                               |\n\n## Adding Plugins\n\nCall `cms.plugins.add` and pass in the plugin.\n\n```javascript\nimport { TinaCMS } from 'tinacms'\nimport { HtmlFieldPlugin, MarkdownFieldPlugin } from 'react-tinacms-editor'\n\nconst cms = new TinaCMS()\n\ncms.plugins.add(HtmlFieldPlugin)\ncms.plugins.add(MarkdownFieldPlugin)\n```\n\nAlternatively, you can call the `usePlugins` hook from inside a function component.\n\n```jsx\nimport * as React from 'react'\nimport { usePlugins } from 'tinacms'\nimport { HtmlFieldPlugin, MarkdownFieldPlugin } from 'react-tinacms-editor'\n\nexport function SomeComponent({ children }) {\n  usePlugins([HtmlFieldPlugin, MarkdownFieldPlugin])\n\n  return <div>{children}</div>\n}\n```\n\nWhen adding plugins from inside a React component, the plugin is added when the component mounts, and removed when the component unmounts. This is both expected and encouraged, as Tina has a [Dynamic Plugin System](/blog/dynamic-plugin-system).\n\n> #### Adding Plugins in Gatsby\n>\n> Another way to add TinaCMS plugins when using Gatsby is via `onClientEntry` function in `gatsby-browser.js`. The package `gatsby-plugin-tinacms` attaches the cms to the window it can be accessed from this function.\n>\n> **gatsby-browser.js**\n>\n> ```js\n> import { MyPlugin } from './src/cms/MyPlugin'\n>\n> export const onClientEntry = () => {\n>   window.tinacms.plugins.add(MyPlugin)\n> }\n> ```\n\n### Adding Plugins Dynamically\n\nIn some cases, you may not want plugins to be included in the initial JavaScript file/bundle of your website, as some plugins can be quite large. In these scenarios, you can import the plugins dynamically, and the plugins will only be downloaded when they are needed.\n\n```tsx\nimport { TinaCMS } from 'tinacms'\nimport { HtmlFieldPlugin, MarkdownFieldPlugin } from 'react-tinacms-editor'\n\nconst cms = new TinaCMS()\n\nimport('react-tinacms-editor').then(\n  ({ HtmlFieldPlugin, MarkdownFieldPlugin }) => {\n    cms.plugins.add(HtmlFieldPlugin)\n    cms.plugins.add(MarkdownFieldPlugin)\n  }\n)\n```\n\nIf you're using React this can be done inside of a component:\n\n```tsx\nimport * as React from 'react'\nimport { usePlugins } from 'tinacms'\n\nexport function SomeComponent({ children }) {\n  React.useEffect(() => {\n    import('react-tinacms-editor').then(\n      ({ HtmlFieldPlugin, MarkdownFieldPlugin }) => {\n        cms.plugins.add(HtmlFieldPlugin)\n        cms.plugins.add(MarkdownFieldPlugin)\n      }\n    )\n  }, [])\n\n  return <div>{children}</div>\n}\n```\n\n## Accessing Plugins\n\nYou can access all plugins of a given type by calling `cms.plugins.all(type)`\n\n```jsx\nimport * as React from 'react'\nimport { useCMS } from 'tinacms'\n\nexport function Hello() {\n  const cms = useCMS()\n  const sayHello = React.useCallback(() => {\n    // get all of the \"hello\" plugins.\n    const helloPlugins = cms.plugins.all('hello')\n\n    // iterate over all of the \"hello\" plugins\n    helloPlugins.forEach(plugin => alert(`Hello, ${plugin.user}!`))\n  }, [])\n  return <button onClick={sayHello}>Say Hello</button>\n}\n```\n\n<!-- Question: How can I create my own plugin types? -->\n"}},"tocItems":"- [Adding Plugins](#adding-plugins)\n    + [Adding Plugins in Gatsby](#adding-plugins-in-gatsby)\n  * [Adding Plugins Dynamically](#adding-plugins-dynamically)\n- [Accessing Plugins](#accessing-plugins)","docsNav":[{"title":"Getting Started","id":"getting-started","items":[{"id":"/docs/getting-started/introduction","slug":"/docs/getting-started/introduction","title":"Introduction"}]},{"title":"CMS","id":"the-cms","items":[{"id":"/docs/cms","slug":"/docs/cms","title":"Overview"}]},{"title":"User Interface","id":"user-interface","items":[{"id":"/docs/ui","title":"Sidebar & Toolbar","slug":"/docs/ui"},{"title":"Inline Editing","id":"inline-editing","slug":"/docs/ui/inline-editing","items":[{"id":"/docs/ui/inline-editing/inline-text","title":"Inline Text","slug":"/docs/ui/inline-editing/inline-text"},{"id":"/docs/ui/inline-editing/inline-textarea","title":"Inline Textarea","slug":"/docs/ui/inline-editing/inline-textarea"},{"id":"/docs/ui/inline-editing/inline-wysiwyg","title":"Inline Wysiwyg","slug":"/docs/ui/inline-editing/inline-wysiwyg"},{"id":"/docs/ui/inline-editing/inline-image","title":"Inline Image","slug":"/docs/ui/inline-editing/inline-image"},{"id":"/docs/ui/inline-editing/inline-group","title":"Inline Group","slug":"/docs/ui/inline-editing/inline-group"},{"id":"/docs/ui/inline-editing/inline-blocks","title":"Inline Blocks","slug":"/docs/ui/inline-editing/inline-blocks"}]},{"id":"/docs/ui/alerts","title":"Alerts","slug":"/docs/ui/alerts"},{"id":"/docs/ui/styles","title":"Custom Styles","slug":"/docs/ui/styles"}]},{"id":"plugins","title":"Plugins","items":[{"title":"About Plugins","id":"forms","slug":"/docs/plugins"},{"title":"Forms","id":"forms","slug":"/docs/plugins/forms"},{"title":"Fields","id":"fields","slug":"/docs/plugins/fields","items":[{"id":"/docs/plugins/fields/text","slug":"/docs/plugins/fields/text","title":"Text"},{"id":"/docs/plugins/fields/textarea","slug":"/docs/plugins/fields/textarea","title":"Text Area"},{"id":"/docs/plugins/fields/number","slug":"/docs/plugins/fields/number","title":"Number"},{"id":"/docs/plugins/fields/image","slug":"/docs/plugins/fields/image","title":"Image"},{"id":"/docs/plugins/fields/color","slug":"/docs/plugins/fields/color","title":"Color"},{"id":"/docs/plugins/fields/toggle","slug":"/docs/plugins/fields/toggle","title":"Toggle"},{"id":"/docs/plugins/fields/select","slug":"/docs/plugins/fields/select","title":"Select"},{"id":"/docs/plugins/fields/tags","slug":"/docs/plugins/fields/tags","title":"Tags"},{"id":"/docs/plugins/fields/list","slug":"/docs/plugins/fields/list","title":"List"},{"id":"/docs/plugins/fields/group","slug":"/docs/plugins/fields/group","title":"Group"},{"id":"/docs/plugins/fields/group-list","slug":"/docs/plugins/fields/group-list","title":"Group List"},{"id":"/docs/plugins/fields/blocks","slug":"/docs/plugins/fields/blocks","title":"Blocks"},{"id":"/docs/plugins/fields/date","slug":"/docs/plugins/fields/date","title":"Date & Time"},{"id":"/docs/plugins/fields/markdown","slug":"/docs/plugins/fields/markdown","title":"Markdown"},{"id":"/docs/plugins/fields/html","slug":"/docs/plugins/fields/html","title":"HTML"},{"id":"/docs/plugins/fields/custom-fields","slug":"/docs/plugins/fields/custom-fields","title":"Custom Fields"}]},{"title":"Content Creators","id":"content-creator","slug":"/docs/plugins/content-creators"},{"title":"Screens","id":"screens","slug":"/docs/plugins/screens"},{"title":"Toolbar Widgets","id":"toolbar:widget","slug":"/docs/plugins/toolbar-widgets"}]},{"id":"events","title":"Events","items":[{"id":"/docs/events","slug":"/docs/events","title":"About Events"}]},{"title":"Media","id":"media","items":[{"id":"/docs/media","slug":"/docs/media","title":"About Media"}]},{"id":"apis","title":"External APIs","items":[{"id":"/docs/api","slug":"/docs/apis","title":"About APIs"}]},{"title":"Integrations","id":"nextjs","items":[{"id":"/docs/integrations/nextjs","slug":"/docs/integrations/nextjs","title":"Next.js"},{"id":"/docs/integrations/gatsby","slug":"/docs/integrations/gatsby","title":"Gatsby"}]},{"title":"Release Notes","id":"releases","items":[{"id":"/docs/releases","href":"/docs/releases","title":"All Releases"}]},{"title":"Packages","id":"packages","items":[{"id":"/packages/react-tinacms-date","slug":"/packages/react-tinacms-date","title":"react-tinacms-date"},{"id":"/packages/react-tinacms-editor","slug":"/packages/react-tinacms-editor","title":"react-tinacms-editor"},{"id":"/packages/react-tinacms-github","slug":"/packages/react-tinacms-github","title":"react-tinacms-github"},{"id":"/packages/react-tinacms-inline","slug":"/packages/react-tinacms-inline","title":"react-tinacms-inline"},{"id":"/packages/react-tinacms-strapi","slug":"/packages/react-tinacms-strapi","title":"react-tinacms-strapi"},{"id":"/packages/next-tinacms-github","slug":"/packages/next-tinacms-github","title":"next-tinacms-github"},{"id":"/packages/next-tinacms-json","slug":"/packages/next-tinacms-json","title":"next-tinacms-json"},{"id":"/packages/next-tinacms-markdown","slug":"/packages/next-tinacms-markdown","title":"next-tinacms-markdown"},{"id":"/packages/gatsby-plugin-tinacms","slug":"/packages/gatsby-plugin-tinacms","title":"gatsby-plugin-tinacms"},{"id":"/packages/gatsby-tinacms-git","slug":"/packages/gatsby-tinacms-git","title":"gatsby-tinacms-git"},{"id":"/packages/gatsby-tinacms-json","slug":"/packages/gatsby-tinacms-json","title":"gatsby-tinacms-json"},{"id":"/packages/gatsby-tinacms-remark","slug":"/packages/gatsby-tinacms-remark","title":"gatsby-tinacms-remark"}]}],"nextPage":{"slug":"/docs/plugins/forms","title":"Forms"},"prevPage":{"slug":"/docs/cms","title":"The CMS"}},"__N_SSG":true}