Components.studio

Previews

The preview panel, which is the the right end side of the Online studio or the main panel exposed by the CLI, can render the different parts of the selected component.

Stories

For files: *.stories.(jsx|js|ts|tsx).

This tab will show the different stories available.

> More details on Stories.

Tests

For files: *.(test|spec).(jsx|js|ts|tsx).

This tab will show the test report out of the test runner built-in.

> More details on Tests.

Website

The www folder contains the static content to promote or demo your component. It is automatically rendered and refreshed in the Website tab on right side.

Local files

Other files in the folder can be accessed

index.html

...
<link rel="stylesheet" href="style.css" />
...

Other pages in the folder can be linked

index.html

...
<a href="page2.html"></a>
...

Access Component Code

Compiled code can be accessed with ./dist

index.html

...
<script type="module" src="./dist/index.js"></script>
...

Full example

Loading a custom-element <my-counter> from the compiled code.

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>title</title>
    <link rel="stylesheet" href="./style.css" />
    <script type="module" src="./dist/my-counter.js"></script>
  </head>

  <body>
    <section>Welcome to the counter demo page!</section>
    <my-counter></my-counter>
  </body>
</html>