{"pageProps":{"error":null,"preview":false,"file":{"fileRelativePath":"content/docs/plugins/content-creators.md","data":{"frontmatter":{"title":"Content Creator Plugins","prev":"/docs/plugins/fields","next":"/docs/plugins/screens"},"excerpt":" The ability to create content is one of the key responsibilities of any CMS. The content-creator plugin type is one way Tina lets you add this behaviour. content-creator-plugin-tinacms Interface&hellip;","markdownBody":"\nThe ability to create content is one of the key responsibilities of any CMS. The `content-creator` plugin type is one way Tina lets you add this behaviour.\n\n![content-creator-plugin-tinacms](/img/content-creator-ex.jpg)\n\n## Interface\n\n```ts\ninterface ContentCreatorPlugin<FormShape> {\n  __type: 'content-creator'\n  name: string\n  fields: Field[]\n  onSubmit(value: FormShape, cms: CMS): Promise<void> | void\n}\n```\n\n| Option     | Description                                                                             |\n| ---------- | --------------------------------------------------------------------------------------- |\n| `__type`   | The name of the plugin. Always `'content-creator'`.                                     |\n| `name`     | The text to be displayed in the \"Add Content\" menu.                                     |\n| `fields`   | An array of fields that populate a modal form. Field values can populate new file data. |\n| `onSubmit` | A function that creates content. Called once the form is submitted.                     |\n\n## Examples\n\n### Building a _ContentCreatorPlugin_\n\n```ts\nconst BlogPostCreatorPlugin = {\n  __type: 'content-creator',\n  fields: [\n    {\n      label: 'Title',\n      name: 'title',\n      component: 'text',\n      validation(title) {\n        if (!title) return \"Required.\n      }\n    },\n    {\n      label: 'Date',\n      name: 'date',\n      component: 'date',\n      description: 'The default will be today.',\n    },\n    {\n      label: 'Author',\n      name: 'author_name',\n      component: 'text',\n      description: 'Who wrote this, yo?',\n    },\n  ],\n  onSubmit(values, cms) {\n    // Call functions that create the new blog post. For example:\n    cms.apis.someBackend.createPost(values)\n  },\n}\n```\n\nAfter [registering the plugin](/docs/plugins#adding-plugins) with the CMS it will be accessible.\n\n```ts\ncms.plugins.add(BlogPostCreator)\n```\n\n## Further Reading\n\n- Read more on [creating new files](/guides/gatsby/git/create-new-files) in the **Gatsby-Git workflow** guide\n- Learn how to [register plugins](/docs/plugins#adding-plugins) with the CMS\n- Visit the [Field Plugins](/docs/plugins/fields) docs to learn about how you can customize your form.\n"}},"tocItems":"- [Interface](#interface)\n- [Examples](#examples)\n  * [Building a _ContentCreatorPlugin_](#building-a-contentcreatorplugin)\n- [Further Reading](#further-reading)","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/screens","title":"Screen Plugins"},"prevPage":{"slug":"/docs/plugins/fields","title":"Field Plugins"}},"__N_SSG":true}