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.

  "$schema": ""
  // 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": ""

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).

detectLocalPluginsAutomatically detect and load local plugins.true
disablePluginsDisable plugins.false
dom.containerQuerySelectorDocument 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
exportPathOutput directory for static exports."cosmos-export"
exposeImportsExpose 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
fixtureFileSuffixSuffix for fixture files (eg. example.fixture.jsx)."fixture"
fixturesDirName for directories that contain fixture files (eg. __fixtures__/example.jsx)."__fixtures__"
globalImportsModules to be imported before loading components. Stuff like reset.css, polyfills, etc.
hostnameDev server hostname. Set to null to accept connections with any hostname.null
httpProxyProxy some URLs to a different HTTP server (eg. an API backend dev server).
httpsServer will be served over HTTPS.
httpsOptions.certPathPath of a certificate file.
httpsOptions.keyPathPath of a certificate's key file.
ignorePatterns for ignoring fixture and decorator files (eg. ["**/dist/**"]).
lazyDynamically import fixture and decorator modules as they are loaded. When false all fixture and decorator modules are imported statically and bundled together.false
pluginsModule IDs of Cosmos plugins (eg. "react-cosmos-plugin-open-fixture" or "../path/to/my-plugin").
portDev server port.5000
portRetriesMax number of port retries.10
publicUrlBase URL for static assets.""
rendererUrlRequired when renderer doesn't run on the same port (or host) as the Playground. Useful for integrations with build tools.null
rootDirThe 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.
staticPathDir path to serve static assets from.
watchDirsDirectories where the Cosmos server watches for fixture files changes while running.["."]