`cosmos.config.json`

The Cosmos config is a JSON file, so it can only contain serializable values. This design decision is meant to discourage complex configuration, make it easy to embed config options into the Cosmos UI, and enable visual config editing.

Config Schema

You can enhance your Cosmos config with autocomplete in code editors like VS Code.

cosmos.config.json

{
  "$schema": "http://json.schemastore.org/cosmos-config",
  // your options...
}

And if you use VS Code you can map the Cosmos config schema globally by extending your user settings (opens in a new tab).

"json.schemas": [
  {
    "fileMatch": ["cosmos.config.json"],
    "url": "http://json.schemastore.org/cosmos-config"
  }
]

Alternatively, you can reference the local Cosmos config schema in your workspace configuration.

"json.schemas": [
  {
    "fileMatch": ["cosmos.config.json"],
    "url": "./node_modules/react-cosmos/config.schema.json"
  }
]

Config Options

To understand the Cosmos config options in more detail see config.schema.json (opens in a new tab).

Option	Description	Default
`detectLocalPlugins`	Automatically detect and load local plugins.	`true`
`disablePlugins`	Disable plugins.	`false`
`dom.containerQuerySelector`	Document selector for existing element to use as component parent (eg. #root). A blank container element is created from scratch if no selector is provided.	`null`
`exportPath`	Output directory for static exports.	`"cosmos-export"`
`exposeImports`	Expose user imports and config required for the Cosmos renderer. Used with React Native and in custom integrations. When a path is specified it requires a file extension (eg. "src/cosmos.imports.ts").	`false`
`fixtureFileSuffix`	Suffix for fixture files (eg. example.fixture.jsx).	`"fixture"`
`fixturesDir`	Name for directories that contain fixture files (eg. __fixtures__/example.jsx).	`"__fixtures__"`
`globalImports`	Modules to be imported before loading components. Stuff like reset.css, polyfills, etc.
`host`	Dev server host. Set to null to accept connections from any address that reaches the server.	`null`
`httpProxy`	Proxy some URLs to a different HTTP server (eg. an API backend dev server).
`https`	Server will be served over HTTPS.
`httpsOptions.certPath`	Path of a certificate file.
`httpsOptions.keyPath`	Path of a certificate's key file.
`ignore`	Patterns for ignoring fixture and decorator files (eg. ["/dist/"]).
`lazy`	Dynamically import fixture and decorator modules as they are loaded. When false all fixture and decorator modules are imported statically and bundled together.	`false`
`plugins`	Module IDs of Cosmos plugins (eg. "react-cosmos-plugin-open-fixture" or "../path/to/my-plugin").
`port`	Dev server port.	`5000`
`portRetries`	Max number of port retries.	`10`
`publicUrl`	Base URL for static assets.	`""`
`rendererUrl`	Required when renderer doesn't run on the same port (or host) as the Playground. Useful for integrations with build tools.	`null`
`rootDir`	The root directory that all others paths in this config are relative to. Usually the root of your repo. If omitted, rootDir is equal to the directory containing your Cosmos config. When you don't use a Cosmos config, rootDir defaults to the current working directory.
`staticPath`	Dir path to serve static assets from.
`ui.rendererPreview.backgroundColor`	Background color of the iframe preview.	`"#fff"`
`ui.responsivePreview.devices`	List of device viewports.
`watchDirs`	Directories where the Cosmos server watches for fixture files changes while running.	`["."]`

Viewport Plugin Settings