{"id":29810045,"url":"https://github.com/dutscher/stencil-storybook","last_synced_at":"2026-02-28T04:42:20.542Z","repository":{"id":50128301,"uuid":"305196699","full_name":"dutscher/stencil-storybook","owner":"dutscher","description":"Storybook meets Stencil in 2021","archived":false,"fork":false,"pushed_at":"2021-12-06T12:11:12.000Z","size":5351,"stargazers_count":73,"open_issues_count":0,"forks_count":13,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-07-28T16:34:26.606Z","etag":null,"topics":["hmr","stencil","storybook"],"latest_commit_sha":null,"homepage":"https://dutscher.github.io/stencil-storybook","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dutscher.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-10-18T21:07:36.000Z","updated_at":"2024-08-27T17:38:37.000Z","dependencies_parsed_at":"2022-08-27T00:43:07.274Z","dependency_job_id":null,"html_url":"https://github.com/dutscher/stencil-storybook","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/dutscher/stencil-storybook","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dutscher%2Fstencil-storybook","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dutscher%2Fstencil-storybook/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dutscher%2Fstencil-storybook/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dutscher%2Fstencil-storybook/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dutscher","download_url":"https://codeload.github.com/dutscher/stencil-storybook/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dutscher%2Fstencil-storybook/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29924796,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-27T19:37:42.220Z","status":"online","status_checked_at":"2026-02-28T02:00:07.010Z","response_time":90,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["hmr","stencil","storybook"],"created_at":"2025-07-28T16:17:36.415Z","updated_at":"2026-02-28T04:42:20.529Z","avatar_url":"https://github.com/dutscher.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![Built With Stencil](https://img.shields.io/badge/-Built%20With%20Stencil-16161d.svg?logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjIuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI%2BCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI%2BCgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU%2BCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00MjQuNywzNzMuOWMwLDM3LjYtNTUuMSw2OC42LTkyLjcsNjguNkgxODAuNGMtMzcuOSwwLTkyLjctMzAuNy05Mi43LTY4LjZ2LTMuNmgzMzYuOVYzNzMuOXoiLz4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTQyNC43LDI5Mi4xSDE4MC40Yy0zNy42LDAtOTIuNy0zMS05Mi43LTY4LjZ2LTMuNkgzMzJjMzcuNiwwLDkyLjcsMzEsOTIuNyw2OC42VjI5Mi4xeiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNDI0LjcsMTQxLjdIODcuN3YtMy42YzAtMzcuNiw1NC44LTY4LjYsOTIuNy02OC42SDMzMmMzNy45LDAsOTIuNywzMC43LDkyLjcsNjguNlYxNDEuN3oiLz4KPC9zdmc%2BCg%3D%3D\u0026colorA=16161d\u0026style=flat-square)\n\n# [Stencil 2.5.2](https://stenciljs.com/) + [Storybook 6.2.9](https://storybook.js.org/) + Real Stencil HMR*\n\n[DEMO Storybook on gh-pages](https://dutscher.github.io/stencil-storybook/) | *hot module reloading\n\nThis is a starter project for building components with Stencil in Storybook.\nThis sample includes _Real_ HMR in Storybook, with the Stencil build running in watch mode.\nStorybook only knows the stories, markup of stencil and entry point.\n\nAswell its chromatic tested, this means visiual regression testing of your stories.\n\nThanks to stencil storybook starters [bjankord](https://github.com/bjankord/stencil-storybook-boilerplate), [elwynelwyn](https://github.com/elwynelwyn/stencilbook-ding)\u003cbr/\u003e\nAnd [shoelace](https://github.com/shoelace-style/shoelace) where i got the proxy hmr solution.\n\nAnd maybe this [issue](https://github.com/storybookjs/storybook/issues/4600#issuecomment-711443696) can be closed?\n\n✔️ NodeJS 14.13.1 ready (use nvm!)\u003cbr/\u003e\n✔️ Stencil 2 ready, not yet es5 tested but should work! + BEM and REM utils\u003cbr/\u003e\n✔️ Storybook 6+ WebComponents ready\u003cbr/\u003e\n✔️ Real HMR on development with Stencil Dev Server, this keep storybooks state of controls\u003cbr/\u003e\n✔️ chromatic.com visiual regression testing ready\u003cbr/\u003e\n✔️ Tested on Windows 10 and Mac 10.15.6\u003cbr/\u003e\n✔️ Bootstrap reset and Webfonts boilerplate included\u003cbr/\u003e\n\n## How the HMR works\n\nStencil has an included /~dev-server which can out of the box HMR.\nSo we start storybook with webpack and stencil dev mode with rollup.\nOn the top we have a proxy which include the /~dev-server of stencil into the storybook canvas iframe.html\nEt voilà, this is what we want!\n\n## When you have issues, please let me know!\n\nUse my issues section\n\n## Start to develop\n\n`npm install`\u003cbr/\u003e\n`npm start`\u003cbr/\u003e\n`your storybook will run under: http://localhost:3000`\n\n## Build your production\n\n`npm build`\n\n## Test your Stencil\n\n`npm test`\u003cbr/\u003e\n`npm test -t special.spec.ts`\n\nThat's it!\u003cbr/\u003e\nCheers dutscher\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdutscher%2Fstencil-storybook","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdutscher%2Fstencil-storybook","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdutscher%2Fstencil-storybook/lists"}