# Publishing to Marketplace

If you've created a new plugin, we strongly encourage you to share it with the community as an [NPM](https://www.npmjs.com/) package, so that it will become available in our [Marketplace](https://www.datocms.com/marketplace/plugins.md) and installable on every DatoCMS project in one click!

### Tweaking the `package.json`

To release a plugin, you need to make sure to fill the `package.json` with these information:

```json
{
  "name": "datocms-plugin-foobar",
  "version": "0.0.1",
  "homepage": "https://github.com/mark/foobar#readme",
  "description": "Add a small description for the plugin here",
  "keywords": ["datocms-plugin"],
  "datoCmsPlugin": {
    "title": "Plugin title",
    "coverImage": "docs/cover.png",
    "previewImage": "docs/preview.mp4",
    "entryPoint": "build/index.html",
    "permissions": [],
  },
  "devDependencies": { ... },
  "dependencies": { ... }
}
```

The following table describes the properties that can be set on the file:

-   `name` (required): NPM package name
-   `version` (required): Plugin version
    
-   `description` (required): Short description of what the plugin does
-   `keywords` (required): Plugin keywords, useful to help users find your plugin
    
-   `homepage`: URL of the plugin homepage, will be shown in the Marketplace
-   `datoCmsPlugin.title` (required): Plugin title
    
-   `datoCmsPlugin.entryPoint` (required): Relative path to the plugin entry point
-   `datoCmsPlugin.coverImage`: Relative path to an image in the repo (`.png`, `.webp`, `.gif`, `.jpeg`, `.jpg`) that will be used as the plugin's cover image (banner) in the [Marketplace](https://www.datocms.com/marketplace/plugins.md). SVGs arenotsupported due to CDN limitations; please rasterize them to one of the supported formats instead.
    
-   `datoCmsPlugin.previewImage`: Relative path to a file in the repo, either an image (`.png`, `.webp`, `.gif`, `.jpeg`, `.jpg`) or a short video (`.mp4`, `.mov`) showing the plugin in action. Videos demoing the real plugin flow are preferred. SVGs arenot supported.
-   `datoCmsPlugin.permissions` (required): [Additional permissions](https://www.datocms.com/docs/plugin-sdk/additional-permissions.md) your plugin needs to work
    

Make sure to strictly follow these rules, otherwise the plugin won't be visible in the Marketplace:

-   `name` MUST start with `datocms-plugin-`;
-   `entryPoint`, `previewImage` and `coverImage` MUST be files contained in the package, and need to be defined as paths relative to the package root (ie. `docs/image.png`);
    
-   `keywords` MUST contain the `datocms-plugin` keyword;
    

### Publishing the plugin

It is now time to publish your plugin as an NPM package. Inside your project, run the following command:

Terminal window

```bash
npm publish
```

Once published, the plugin will automatically be added in the Marketplace within one hour. The same applies also to new version releases.

> [!WARNING] Not showing up in the Marketplace?
> If you plugin is not showing up after 3 hours then please triple check that you've followed all the rules above in your `package.json`, then contact support.

### Plugin upgrades

To release a new version of your plugin, follow the [specific guide](https://www.datocms.com/docs/plugin-sdk/releasing-new-plugin-versions.md). Once you publish a new version, projects who have installed it will receive a notification asking them to upgrade:

(Image content)

Make sure in the new versions to [handle legacy configuration options properly](https://www.datocms.com/docs/plugin-sdk/event-hooks.md)!

### A word about external JS/CSS files required by the iframe

If your plugin is called `datocms-plugin-foobar` and the entry point specified in the `package.json` is `build/index.html`, the URL that will be loaded as an iframe will be:

```plaintext
https://plugins-cdn.datocms.com/datocms-plugin-tag-editor@0.1.2/build/index.html
```

This means that if the page requires a JS file with an absolute path like `/js/bundle.js` then it won't work, as the final URL will be `https://plugins-cdn.datocms.com/js/bundle.js`, which will be non-existent.

In general, make sure that any external resource you require is expressed as a relative path to the HTML page!

## Related content in "Plugin SDK"

- [Introduction to the DatoCMS Plugin SDK](https://www.datocms.com/docs/plugin-sdk/introduction.md)
- [Build your first DatoCMS plugin](https://www.datocms.com/docs/plugin-sdk/build-your-first-plugin.md)
- [Real-world examples](https://www.datocms.com/docs/plugin-sdk/real-world-examples.md)
- [What hooks are](https://www.datocms.com/docs/plugin-sdk/what-hooks-are.md)
- [Config screen](https://www.datocms.com/docs/plugin-sdk/config-screen.md)
- [Custom pages](https://www.datocms.com/docs/plugin-sdk/custom-pages.md)
- [Sidebars and sidebar panels](https://www.datocms.com/docs/plugin-sdk/sidebar-panels.md)
- [Outlets](https://www.datocms.com/docs/plugin-sdk/form-outlets.md)
- [Field extensions](https://www.datocms.com/docs/plugin-sdk/field-extensions.md)
- [Manual field extensions](https://www.datocms.com/docs/plugin-sdk/manual-field-extensions.md)
- [Dropdown actions](https://www.datocms.com/docs/plugin-sdk/dropdown-actions.md)
- [Structured Text customizations](https://www.datocms.com/docs/plugin-sdk/structured-text-customizations.md)
- [Asset sources](https://www.datocms.com/docs/plugin-sdk/asset-sources.md)
- [Opening modals](https://www.datocms.com/docs/plugin-sdk/modals.md)
- [Event hooks](https://www.datocms.com/docs/plugin-sdk/event-hooks.md)
- [Customize record presentation](https://www.datocms.com/docs/plugin-sdk/customize-presentation.md)
- [React UI Components](https://www.datocms.com/docs/plugin-sdk/react-datocms-ui.md)
- [Button](https://www.datocms.com/docs/plugin-sdk/button.md)
- [Button group](https://www.datocms.com/docs/plugin-sdk/button-group.md)
- [Dropdown](https://www.datocms.com/docs/plugin-sdk/dropdown.md)
- [Form](https://www.datocms.com/docs/plugin-sdk/form.md)
- [Section](https://www.datocms.com/docs/plugin-sdk/section.md)
- [Sidebar panel](https://www.datocms.com/docs/plugin-sdk/sidebar-panel.md)
- [Spinner](https://www.datocms.com/docs/plugin-sdk/spinner.md)
- [Toolbar](https://www.datocms.com/docs/plugin-sdk/toolbar.md)
- [Sidebars and split views](https://www.datocms.com/docs/plugin-sdk/sidebars-and-split-views.md)
- [Additional permissions](https://www.datocms.com/docs/plugin-sdk/additional-permissions.md)
- [Working with form values](https://www.datocms.com/docs/plugin-sdk/working-with-form-values.md)
- [Publishing to Marketplace](https://www.datocms.com/docs/plugin-sdk/publishing-to-marketplace.md)
- [Releasing new plugin versions](https://www.datocms.com/docs/plugin-sdk/releasing-new-plugin-versions.md)
- [Migrating from legacy plugins](https://www.datocms.com/docs/plugin-sdk/migrating-from-legacy-plugins.md)
- [Upgrading plugins for dark mode](https://www.datocms.com/docs/plugin-sdk/upgrading-plugins-for-dark-mode.md)