WebComponents.dev

Previews

Test

The Tests panel contains the unit tests for the component.

Note: visible only when tests files are present (*.(test|spec).(jsx|js|ts|tsx)).

Stories

The Stories preview is dedicated to stories.

Note: visible only when stories files are present (*.stories.(jsx|js|ts|tsx)).

www/

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 from the Code folder 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>