Plugin SDK > Publishing to Marketplace

If you've created a new plugin, we strongly encourage you to share it with the community as an NPM package, so that it will become available in our Marketplace 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:

1
{
2
  "name": "datocms-plugin-foobar",
3
  "version": "0.0.1",
4
  "homepage": "https://github.com/mark/foobar#readme",
5
  "description": "Add a small description for the plugin here",
6
  "keywords": ["datocms-plugin"],
7
  "datoCmsPlugin": {
8
    "title": "Plugin title",
9
    "coverImage": "docs/cover.png",
10
    "previewImage": "docs/preview.mp4",
11
    "entryPoint": "build/index.html",
12
    "permissions": [],
13
  },
14
  "devDependencies": { ... },
15
  "dependencies": { ... }
16
}

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.previewImage: Relative path to a video/image showing the plugin in action (better if it's a MP4 video)

• datoCmsPlugin.coverImage: Relative path to a cover image that will be used in the Marketplace

• datoCmsPlugin.permissions (required): Additional permissions 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:

npm publish

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

Plugin upgrades

To release a new version of your plugin, follow the specific guide. Once you publish a new version, projects who have installed it will receive a notification asking them to upgrade:

Make sure in the new versions to handle legacy configuration options properly!

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:

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!