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.

Lazy Mode Plugins