Cosmos Plugins

A Cosmos plugin is a wrapper for two plugin types: server plugins and UI plugins. Each plugin type has a distinct API and runs in a different environment. Combining both into a single Cosmos plugin adds full-stack capabilities to React Cosmos with a single package.

Creating a Plugin

Create a cosmos.plugin.json file:

{
  "name": "Magic plugin",
  "server": "serverPlugin.js",
  "ui": "uiPlugin.js"
}

This JSON config is the plugin's entry point. A plugin name and at least one plugin type is required.

See the individual guides for each plugin type:

Enabling a Plugin

Add it to the plugins option in the cosmos.config.json of the host project:

{
  "plugins": ["../packages/magic-plugin/cosmos.plugin.json"]
}

If the Cosmos plugin is an NPM package, add the name of the package to plugins instead:

{
  "plugins": ["react-cosmos-plugin-magic"]
}

Publishing a Plugin

To publish a Cosmos plugin as an NPM package, set the main field in its package.json to "cosmos.plugin.json" (or a different path where the Cosmos plugin config is located):

{
  "name": "react-cosmos-plugin-magic",
  "version": "1.0.0",
  "main": "cosmos.plugin.json"
}

Existing Plugins

Open Fixture Plugin

This combines a server plugin with a UI plugin. It adds a renderer action that opens the selected fixture file in your default editor.

npm i -D react-cosmos-plugin-open-fixture

{
  "plugins": ["react-cosmos-plugin-open-fixture"]
}

Boolean Input Plugin

This is a UI plugin that turns boolean inputs in the Control Panel from a true/false button to a checkbox input.

npm i -D react-cosmos-plugin-boolean-input

{
  "plugins": ["react-cosmos-plugin-boolean-input"]
}