TypeScript icon, indicating that this package has built-in type declarations

    6.3.0-alpha.22 • Public • Published


    ⚠️️ @storybook/lit is currently experimental and everything related to it is subject to breaking changes at any time. Please DO NOT use it in real projects.


    Storybook for lit

    Storybook for lit is a UI development environment for your lit web-component snippets. With it, you can visualize different states of your UI components and develop them interactively.

    Storybook Screenshot

    Storybook runs outside of your app. So you can develop UI components in isolation without worrying about app specific dependencies and requirements.

    Getting Started

    cd my-app
    npx -p @storybook/cli sb init -t lit

    For more information visit: storybook.js.org

    Storybook also comes with a lot of addons and a great API to customize as you wish. You can also build a static version of your storybook and deploy it anywhere you want.

    Setup es6/7 dependencies

    By default storybook only works with precompiled ES5 code but as most web components themselves and their libs are distributed as ES2017 you will need to manually mark those packages as "needs transpilation".

    For example if you have a library called my-library which is in ES2017 then you can add it like so

    // .storybook/main.js
    module.exports = { 
      webpackFinal: async config => {
        // find web-components rule for extra transpilation
        const webComponentsRule = config.module.rules.find(
          rule => rule.use && rule.use.options && rule.use.options.babelrc === false
        // add your own `my-library`
        webComponentsRule.test.push(new RegExp(`node_modules(\\/|\\\\)my-library(.*)\\.js$`));
        return config;

    By default the following folders are included

    • src/*.js
    • packages/*/src/*.js
    • node_modules/lit-html/*.js
    • node_modules/lit-element/*.js
    • node_modules/@open-wc/*.js
    • node_modules/@polymer/*.js
    • node_modules/@vaadin/*.js

    As you can see the src folder is also included. The reason for that is as it has some extra configuration to allow for example import.meta. If you use a different folder you will need to make sure webpack/babel can handle it.


    • While working on my component I get the error Failed to execute 'define' on 'CustomElementRegistry': the name "..." has already been used with this registry => please see Setup page reload via HMR


    npm i @storybook/lit

    DownloadsWeekly Downloads






    Unpacked Size

    6.12 kB

    Total Files


    Last publish


    • kylegach
    • tooppaaa
    • ndelangen
    • shilman
    • alexandrebodin
    • hypnosphi
    • danielduan
    • igor-dv
    • pksunkara
    • tmeasday
    • gongreg
    • domyen
    • usulpro
    • kylesuss
    • ghengeveld
    • pago
    • dandean
    • codebyalex
    • mrmckeb
    • dannyhw
    • winkervsbecks
    • rvasikarla
    • amalik2
    • lshadler
    • phated
    • yannbf
    • dylanpiercey
    • monkeyworks
    • darleendenno