Storybook for LiquidJS

Storybook for LiquidJS is a UI development environment for your LiquidJS Components. With it, you can visualize different states of your Components and develop them interactively.

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 storybook@latest init --type html

Remove HTML framework/renderer and install LiquidJS framework/renderer:

npm remove @storybook/html @storybook/html-webpack5
npm install @deptdk/liquidjs-framework-webpack5 --save-dev

…or if you wanna use Vite

npm remove @storybook/html @storybook/html-webpack5
npm install @deptdk/liquidjs-framework-vite --save-dev

Replace .storybook/main.js with the below, setting up the correct paths as necessary.

module.exports = {
  // ...
  stories: ['RELATIVE_PATH_TO_STORIES'],
  framework: '@deptdk/liquidjs-framework-webpack5', // or '@deptdk/liquidjs-framework-vite'
};

Replace .storybook/preview.js with:

export const parameters = { 
  liquidjs: {
    //These options are passed to LiquidJS
  },
};

Read more about LiquidJS options in the LiquidJS Docs

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.