Publishing plugins

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 Plugins Explorer:

In order to properly 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
    "previewImage": "docs/preview.gif",
10
    "entryPoint": "dist/index.html",
11
    "fieldTypes": ["json"],
12
    "pluginType": "sidebar",
13
    "parameters": {
14
      "global": [ ... ],
15
      "instance": [ ... ]
16
    }
17
  },
18
  "devDependencies": { ... },
19
  "dependencies": { ... }
20
}

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 Plugin Explorer

• datoCmsPlugin.title (required): Plugin title

• `datoCmsPlugin.previewImage: Relative path to a plugin preview image (better if it's a GIF)

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

• datoCmsPlugin.entryPoint (required): Relative path to the plugin entry point

• datoCmsPlugin.pluginType (required): The type of plugin

• datoCmsPlugin.fieldTypes (required): The types of field the plugin can be used with

• datoCmsPlugin.parameters (required): Configuration parameters for the plugin

Make sure to follow these rules:

• name MUST be prefixed with datocms-plugin;

• datoCmsPlugin.entryPoint, datoCmsPlugin.previewImage and datoCmsPlugin.coverImage must be files contained in the package, and need to be defined as relative paths to the package root;

• keywords MUST contain the datocms-plugin keyword, otherwise the plugin won't be visible in the Plugin explorer;

• datoCmsPlugin.fieldTypes MUST contain one or more of the following values: boolean, date, date_time, float, integer, string, text, lat_lon, json, seo, link, links, video, color;

• datoCmsPlugin.pluginType MUST be one of the following values: field_editor, field_addon or sidebar;

• datoCmsPlugin.parameters MUST follow the syntax detailed in the Configuration parameters section of this guide.

Requiring external JS/CSS inside of your entrypoint

We'll use unpkg.com to serve the entrypoint as an iframe, so ie. if your plugin is called datocms-plugin-foobar and the entry point specified in the package.json is dist/index.html, the URL that will be loaded will be something like this:

https://unpkg.com/datocms-plugin-foobar/dist/index.html

This means that if the page you requires a JS file with an absolute path like /js/bundle.js then it won't work, as the final URL will be https://unpkg.com/js/bundle.js, which will be non-existent. Make sure that any external resource you require is expressed as a relative path to the HTML page!