"dependencies": {
    "env": {
      "NODE_ENV": "development"
    "minify": "true"
  "thumbnail": {
    "story": "storyThumbnail",
    "scaleFactor": 1



Path to the packages. This activates the component as monorepo with multiple packages.

Default: "" (Packages are at the root of the repository)

Array of Package or Group-of-Packages.

Defines the order and the grouping of the packages in the navigation toolbar.


By default, .md files are processed by a mdjs.

You can define other engines:

  • vue: Markdown will be process with MD Vue engine. This allows to import Vue components in the documentation. Ideal for Vue components but also works well with custom elements. See Default: mdjs


By default, npm dependencies are loaded from our custom CDN. This provides the best compatibility across wide varieties of packages.

You can define another source by using one of these values:

  • skypack: Dependencies imported from skypack (No bundle)
  • jspm: Dependencies imported from jspm (No bundle)
  • unpkg: Dependencies imported from unpkg (No bundle)
  • esbuild: Use esbuild in our custom CDN (Experimental)


Only for our custom CDN. (no dependencies.source)

List of environment variables to set during bundling of dependencies.

Default: { "NODE_ENV" : "development" }


Only for our custom CDN. (no dependencies.source)

Should dependencies be served minified?

Default: true


Defines the name of the exported story to use as the thumbnail of the component.

To use thumb stories as default thumbnails:

  thumbnail {
    "story": "thumb"

The following values can also be used:

  • $first$ : first story in the csf .stories.js file.
  • $last$ : last story in the csf .stories.js file.

Default: $first$


Defines the scale factor of the rendering.

Default: 2

Thumbnails are rendered in a 640x360 browser window.