WebComponents.dev

studio.config.json

Example 

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

Details

packages.dir

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

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

packages.menu

Array of Package or Group-of-Packages.

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

doc.markdownEngine

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

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.