malobre/web-components-preview.md

Last active February 28, 2023 22:43

Star () You must be signed in to star a gist
Fork () You must be signed in to fork a gist

Learn more about clone URLs
Clone this repository at <script src="https://gist.github.com/malobre/7b80ce3e61ffd57b9ccd7a98ea8eb3ff.js"></script>
Save malobre/7b80ce3e61ffd57b9ccd7a98ea8eb3ff to your computer and use it in GitHub Desktop.

Simple web components preview

Raw

When building a web application with web components, you might want a way to preview your components outside of the app (makes rendering edge-cases and hard to reach states much easier). Storybook is a common option, but it can be complicated to setup and maintain.

Instead, you can create a simple HTML file for each component, e.g MyComponent.preview.html:

<!DOCTYPE html>
<title>My Component Preview</title>
<script type="module" src="./MyComponent.js"></script>

<my-component></my-component>