studio.config.json

Example

{

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

}

Details

dependencies.source

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)

dependencies.env

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

List of environment variables to set during bundling of dependencies.

Default: { "NODE_ENV" : "development" }

dependencies.minify

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

Should dependencies be served minified?

Default: true

thumbnail.story

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$

thumbnail.scaleFactor

Defines the scale factor of the rendering.

Default: 2

Thumbnails are rendered in a 640x360 browser window.