Static Export

Get a nice component library that you can deploy to any static hosting service.

The exported Cosmos UI won't have all the features available in development (like opening the selected fixture in your code editor), but allows anybody with access to the static export URL to browse fixtures and play with component inputs.

Add cosmos-export script to package.json:

"scripts": {
  "cosmos": "cosmos",
  "cosmos-export": "cosmos-export"
}

Build React Cosmos export:

npm run cosmos-export

Serve the static export:

npx http-server ./cosmos-export

Configuration

Option	Description	Default
`exportPath`	Output directory for static exports.	`"cosmos-export"`

Bundler Integration

The cosmos-export command creates a static export of the Cosmos UI shell, which expects a corresponding static Renderer to connect with. Without a Cosmos bundler plugin, the latter will be missing.

The Vite or Webpack plugins take care of exporting automatically. Creating a static export in a custom bundler setup will require additional steps. See the Next.js guide for such an example.

Github Pages and Jekyll

You can publish a Cosmos static export using Github Pages. Commit the exported files to a /docs/ folder in the root of your project and you should be good to go.

When you deploy to Github Pages, it defaults to using Jekyll (opens in a new tab) and this can cause problems for Cosmos because Jekyll filters out files that start with an underscore (opens in a new tab) and for example Vite bundles like _virtual_cosmos-imports-DSXvW1uh.js won't be available when the renderer HTML needs them.

The solution is to put an empty .nojekyll file in the export folder. This will turn off Jekyll rendering and Cosmos should work just fine.

Lazy Mode Plugins