{"_id":"@beeq/storybook-addon-html","_rev":"3-d8bdef25067a4712640facb0d88a0f05","name":"@beeq/storybook-addon-html","dist-tags":{"latest":"7.0.0"},"versions":{"5.1.7":{"name":"@beeq/storybook-addon-html","version":"5.1.7","keywords":["storybook-addon","html","code","popular","storybook-addons"],"author":{"name":"Whitespace","email":"code@whitespace.se"},"license":"AGPL-3.0-or-later","_id":"@beeq/storybook-addon-html@5.1.7","maintainers":[{"name":"dgonzalezr","email":"dgonzalez83@gmail.com"}],"homepage":"https://github.com/dgonzalezr/storybook-addon-html#readme","bugs":{"url":"https://github.com/dgonzalezr/storybook-addon-html/issues"},"dist":{"shasum":"9d5677c990804bf0e8d00a4dee19eabb56f71de7","tarball":"https://registry.npmjs.org/@beeq/storybook-addon-html/-/storybook-addon-html-5.1.7.tgz","fileCount":26,"integrity":"sha512-EIR7gr2NyOERhcE8UXDlElB64w8eG3gdfKDkuDijdToYX8g+96U5DgcHTNqivI9ecKfLDKyazXaGFzo2h0oZkw==","signatures":[{"sig":"MEUCIQDAoypnyljdVdy7uR4pAV3SAbP8JLIuzMclCH64B/WHJAIgUFhdrZvapr9ifJYX4BVNiKffX46FB4LFAIX7IvHyQmk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":97199},"main":"dist/cjs/index.js","types":"dist/ts/index.d.ts","module":"dist/esm/index.js","gitHead":"66341c5bee695a49d5c7a75aa518b4df04af18be","scripts":{"lint":"eslint '**/*.{js,jsx}'","test":"echo \"Error: no test specified\" && exit 1","build":"concurrently \"yarn buildBabel\" \"yarn buildTsc\"","clean":"rimraf ./dist","start":"concurrently \"yarn build:watch\" \"yarn storybook -- --no-manager-cache --quiet\"","format":"run-s format:*","release":"yarn build && auto shipit","buildTsc":"tsc --declaration --emitDeclarationOnly --outDir ./dist/ts","eject-ts":"zx scripts/eject-typescript.mjs","prebuild":"yarn clean","storybook":"start-storybook -p 6006","buildBabel":"concurrently \"yarn buildBabel:cjs\" \"yarn buildBabel:esm\"","prerelease":"zx scripts/prepublish-checks.mjs","build:watch":"concurrently \"yarn buildBabel:esm -- --watch\" \"yarn buildTsc -- --watch\"","format:eslint":"eslint --fix '**/*.{js,jsx}' || true","buildBabel:cjs":"babel ./src -d ./dist/cjs --extensions \".js,.jsx,.ts,.tsx\"","buildBabel:esm":"babel ./src -d ./dist/esm --env-name esm --extensions \".js,.jsx,.ts,.tsx\"","build-storybook":"build-storybook","format:prettier":"prettier --write '**/*.{js,jsx,json,md,mdx,yml,html,css}'"},"_npmUser":{"name":"dgonzalezr","email":"dgonzalez83@gmail.com"},"storybook":{"icon":"https://avatars1.githubusercontent.com/u/10450088?s=400&u=b2a95469b7d2addf63366a93a17f0bd06f9894cc&v=4","displayName":"HTML Preview","supportedFrameworks":["react","vue","angular","web-components","ember","html","svelte","preact","react-native"]},"repository":{"url":"git+https://github.com/dgonzalezr/storybook-addon-html.git","type":"git"},"_npmVersion":"9.6.7","description":"A Storybook addon that extracts and displays compiled syntax-highlighted HTML","directories":{},"_nodeVersion":"18.17.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"packageManager":"yarn@1.22.19","devDependencies":{"zx":"^1.15.2","auto":"^10.37.6","boxen":"^5.1.2","react":"^18.0.0","dedent":"^0.7.0","eslint":"^8.29.0","rimraf":"^3.0.2","webpack":"^5.83.1","prettier":"^3.0.3","react-dom":"^18.0.0","@babel/cli":"^7.21.5","prop-types":"^15.8.1","typescript":"^4.9.4","@babel/core":"^7.21.8","@types/node":"^16.0.0","npm-run-all":"^4.1.5","babel-loader":"^9.1.2","concurrently":"^6.5.1","@storybook/react":"^8.0.0","@babel/preset-env":"^7.21.5","@storybook/theming":"^8.0.0","@babel/preset-react":"^7.18.6","eslint-plugin-react":"^7.31.11","eslint-plugin-import":"^2.26.0","@storybook/components":"^8.0.0","@storybook/core-events":"^8.0.0","@storybook/preview-api":"^8.0.0","@babel/preset-typescript":"^7.21.5","react-syntax-highlighter":"^15.5.0","@storybook/addon-essentials":"^8.0.0"},"peerDependencies":{"prettier":"^3.0.3","react-syntax-highlighter":"^15.0.0"},"_npmOperationalInternal":{"tmp":"tmp/storybook-addon-html_5.1.7_1710856849027_0.04617675399673793","host":"s3://npm-registry-packages"}},"6.0.0":{"name":"@beeq/storybook-addon-html","version":"6.0.0","keywords":["storybook-addon","html","code","popular","storybook-addons"],"author":{"name":"Whitespace","email":"code@whitespace.se"},"license":"AGPL-3.0-or-later","_id":"@beeq/storybook-addon-html@6.0.0","maintainers":[{"name":"dgonzalezr","email":"dgonzalez83@gmail.com"}],"homepage":"https://github.com/dgonzalezr/storybook-addon-html#readme","bugs":{"url":"https://github.com/dgonzalezr/storybook-addon-html/issues"},"dist":{"shasum":"03b850593f509d1258200d38180101e718ad2ed6","tarball":"https://registry.npmjs.org/@beeq/storybook-addon-html/-/storybook-addon-html-6.0.0.tgz","fileCount":26,"integrity":"sha512-OhpLp8AHV6qEh/+Sb8kLka/I3hluvt79C+XSKv6HwG2LRldD5EgegAVGE4ZLqM2afr8JHYrHLmEKrqH7brZd1w==","signatures":[{"sig":"MEUCIDFaflQMJMjkcqhMuvLvzW2fVKyVtRjcW7K0appdIn4uAiEA9UBTwZNAOXhSU4Mu24tQviVIfWWs581WJAvV6lmJOxc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":97199},"main":"dist/cjs/index.js","types":"dist/ts/index.d.ts","module":"dist/esm/index.js","gitHead":"8b202d14f6f3b5ea9a455dec8f870f95559b2179","scripts":{"lint":"eslint '**/*.{js,jsx}'","test":"echo \"Error: no test specified\" && exit 1","build":"concurrently \"yarn buildBabel\" \"yarn buildTsc\"","clean":"rimraf ./dist","start":"concurrently \"yarn build:watch\" \"yarn storybook -- --no-manager-cache --quiet\"","format":"run-s format:*","release":"yarn build && auto shipit","buildTsc":"tsc --declaration --emitDeclarationOnly --outDir ./dist/ts","eject-ts":"zx scripts/eject-typescript.mjs","prebuild":"yarn clean","storybook":"start-storybook -p 6006","buildBabel":"concurrently \"yarn buildBabel:cjs\" \"yarn buildBabel:esm\"","prerelease":"zx scripts/prepublish-checks.mjs","build:watch":"concurrently \"yarn buildBabel:esm -- --watch\" \"yarn buildTsc -- --watch\"","format:eslint":"eslint --fix '**/*.{js,jsx}' || true","buildBabel:cjs":"babel ./src -d ./dist/cjs --extensions \".js,.jsx,.ts,.tsx\"","buildBabel:esm":"babel ./src -d ./dist/esm --env-name esm --extensions \".js,.jsx,.ts,.tsx\"","build-storybook":"build-storybook","format:prettier":"prettier --write '**/*.{js,jsx,json,md,mdx,yml,html,css}'"},"_npmUser":{"name":"dgonzalezr","email":"dgonzalez83@gmail.com"},"storybook":{"icon":"https://avatars1.githubusercontent.com/u/10450088?s=400&u=b2a95469b7d2addf63366a93a17f0bd06f9894cc&v=4","displayName":"HTML Preview","supportedFrameworks":["react","vue","angular","web-components","ember","html","svelte","preact","react-native"]},"repository":{"url":"git+https://github.com/dgonzalezr/storybook-addon-html.git","type":"git"},"_npmVersion":"9.6.7","description":"A Storybook addon that extracts and displays compiled syntax-highlighted HTML","directories":{},"_nodeVersion":"18.17.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"packageManager":"yarn@1.22.19","devDependencies":{"zx":"^1.15.2","auto":"^10.37.6","boxen":"^5.1.2","react":"^18.0.0","dedent":"^0.7.0","eslint":"^8.29.0","rimraf":"^3.0.2","webpack":"^5.83.1","prettier":"^3.0.3","react-dom":"^18.0.0","@babel/cli":"^7.21.5","prop-types":"^15.8.1","typescript":"^4.9.4","@babel/core":"^7.21.8","@types/node":"^16.0.0","npm-run-all":"^4.1.5","babel-loader":"^9.1.2","concurrently":"^6.5.1","@storybook/react":"^8.0.0","@babel/preset-env":"^7.21.5","@storybook/theming":"^8.0.0","@babel/preset-react":"^7.18.6","eslint-plugin-react":"^7.31.11","eslint-plugin-import":"^2.26.0","@storybook/components":"^8.0.0","@storybook/core-events":"^8.0.0","@storybook/preview-api":"^8.0.0","@babel/preset-typescript":"^7.21.5","react-syntax-highlighter":"^15.5.0","@storybook/addon-essentials":"^8.0.0"},"peerDependencies":{"prettier":"^3.0.3","react-syntax-highlighter":"^15.0.0"},"_npmOperationalInternal":{"tmp":"tmp/storybook-addon-html_6.0.0_1710862905903_0.548460425301609","host":"s3://npm-registry-packages"}},"7.0.0":{"name":"@beeq/storybook-addon-html","version":"7.0.0","description":"A Storybook addon that extracts and displays compiled syntax-highlighted HTML","keywords":["storybook-addon","html","code","popular","storybook-addons"],"repository":{"type":"git","url":"git+https://github.com/beeq/storybook-addon-html.git"},"license":"AGPL-3.0-or-later","author":{"name":"Whitespace","email":"code@whitespace.se"},"type":"module","exports":{".":{"types":"./dist/index.d.ts","default":"./dist/index.js"},"./preview":{"types":"./dist/preview.d.ts","default":"./dist/preview.js"},"./preset":"./dist/preset.js","./manager":"./dist/manager.js","./package.json":"./package.json"},"scripts":{"prebuild":"node -e \"fs.rmSync('./dist', { recursive: true, force: true })\"","build":"tsup","build-storybook":"storybook build","build:watch":"npm run build -- --watch","eject-ts":"zx scripts/eject-typescript.js","format":"prettier --write .","lint":"eslint --cache .","lint:fix":"pnpm lint --fix","prerelease":"zx scripts/prepublish-checks.js","release":"npm run build && auto shipit","start":"run-p build:watch \"storybook --quiet\"","storybook":"storybook dev -p 6006","test":"echo \"Error: no test specified\" && exit 1"},"devDependencies":{"@storybook/addon-docs":"^10.2.3","@storybook/react-vite":"^10.2.3","@types/node":"^25.2.0","@types/react":"^19.2.10","@types/react-dom":"^19.2.3","@vitejs/plugin-react":"^5.1.2","auto":"^11.3.6","boxen":"^8.0.1","eslint":"^9.39.2","eslint-config-prettier":"^10.1.8","eslint-plugin-prettier":"^5.5.5","eslint-plugin-react":"^7.37.5","eslint-plugin-storybook":"^10.2.3","npm-run-all2":"^8.0.4","prettier":"^3.8.1","prompts":"^2.4.2","react":"^19.2.4","react-dom":"^19.2.4","storybook":"^10.2.3","ts-dedent":"^2.2.0","tsup":"^8.5.1","typescript":"^5.9.3","typescript-eslint":"^8.54.0","vite":"^7.3.1","zx":"^8.8.5"},"peerDependencies":{"storybook":"^10.0.0"},"publishConfig":{"access":"public"},"bundler":{"managerEntries":["src/manager.ts"],"previewEntries":["src/preview.ts","src/index.ts"],"nodeEntries":["src/preset.ts"]},"storybook":{"displayName":"HTML Preview","supportedFrameworks":["react","vue","angular","web-components","ember","html","svelte","preact","react-native"],"icon":"https://avatars1.githubusercontent.com/u/10450088?s=400&u=b2a95469b7d2addf63366a93a17f0bd06f9894cc&v=4"},"_id":"@beeq/storybook-addon-html@7.0.0","gitHead":"dc30fe7410d1e2dee75e4c5083ab3a8738f60d9f","bugs":{"url":"https://github.com/beeq/storybook-addon-html/issues"},"homepage":"https://github.com/beeq/storybook-addon-html#readme","_nodeVersion":"22.19.0","_npmVersion":"10.9.3","dist":{"integrity":"sha512-QG108kGA/bpmK5JfMssZqKuTi3fMtBzHtCuiathAdOnBzecc5Tjr+2uXE97t4R/IRrEu4F4/CrRnmtF+eGe7nw==","shasum":"9eefba944474116ddbcd04cb04a89964170011ef","tarball":"https://registry.npmjs.org/@beeq/storybook-addon-html/-/storybook-addon-html-7.0.0.tgz","fileCount":15,"unpackedSize":325047,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIAwSohK4bynSxcnN9Nzh/D/K+7gpbttIMezKHwqSKACBAiEA4N4X9fj2b17Eqf7ro2zwKxH7n6fXzcHofHJSHB6jKIQ="}]},"_npmUser":{"name":"dgonzalezr","email":"dgonzalez83@gmail.com"},"directories":{},"maintainers":[{"name":"dgonzalezr","email":"dgonzalez83@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/storybook-addon-html_7.0.0_1770021739203_0.6667241913309914"},"_hasShrinkwrap":false}},"time":{"created":"2024-03-19T14:00:48.929Z","modified":"2026-02-02T08:42:19.505Z","5.1.7":"2024-03-19T14:00:49.199Z","6.0.0":"2024-03-19T15:41:46.067Z","7.0.0":"2026-02-02T08:42:19.365Z"},"bugs":{"url":"https://github.com/beeq/storybook-addon-html/issues"},"author":{"name":"Whitespace","email":"code@whitespace.se"},"license":"AGPL-3.0-or-later","homepage":"https://github.com/beeq/storybook-addon-html#readme","keywords":["storybook-addon","html","code","popular","storybook-addons"],"repository":{"type":"git","url":"git+https://github.com/beeq/storybook-addon-html.git"},"description":"A Storybook addon that extracts and displays compiled syntax-highlighted HTML","maintainers":[{"name":"dgonzalezr","email":"dgonzalez83@gmail.com"}],"readme":"# Storybook Addon HTML\n\nThis addon for Storybook adds a tab that displays the compiled HTML for each\nstory.\n\n![Animated preview](https://raw.githubusercontent.com/whitespace-se/storybook-addon-html/master/image.gif)\n\n## Requirements\n\n### Storybook 10.x\n\nUse version 9.x of this addon.\n\n### Storybook 9.x\n\nUse version 8.x of this addon.\n\n### Storybook 8.x\n\nUse version 7.x of this addon.\n\n## Getting Started\n\nInstall the addon and its dependencies.\n\nWith NPM:\n\n```sh\nnpm i --save-dev @whitespace/storybook-addon-html\n```\n\nWith Yarn:\n\n```sh\nyarn add -D @whitespace/storybook-addon-html\n```\n\nWith PNPM:\n\n```sh\npnpm add -D @whitespace/storybook-addon-html\n```\n\n### Register addon\n\n```js\n// .storybook/main.js\n\nmodule.exports = {\n  // ...\n  addons: [\n    '@whitespace/storybook-addon-html',\n    // ...\n  ],\n};\n```\n\n## Usage\n\nYou can override the wrapper element selector used to grab the component HTML.\n\n```js\nexport const parameters = {\n  html: {\n    root: '#my-custom-wrapper', // default: #root\n  },\n};\n```\n\nSome frameworks put comments inside the HTML. If you want to remove these you\ncan use the `removeComments` parameter. Set it to `true` to remove all comments\nor set it to a regular expression that matches the content of the comments you\nwant to remove.\n\n```js\nexport const parameters = {\n  html: {\n    removeComments: /^\\s*remove me\\s*$/, // default: false\n  },\n};\n```\n\nYou can also use the `removeEmptyComments` parameter to remove only empty\ncomments like `<!---->` and `<!-- -->`.\n\n```js\nexport const parameters = {\n  html: {\n    removeEmptyComments: true, // default: false\n  },\n};\n```\n\nYou can override the `showLineNumbers` and `wrapLines` settings for the syntax\nhighlighter by using the `highlighter` parameter:\n\n```js\nexport const parameters = {\n  html: {\n    highlighter: {\n      showLineNumbers: true, // default: false\n      wrapLines: false, // default: true\n    },\n  },\n};\n```\n\nAnother way of hiding unwanted code is to define the `transform` option. It\nallows you to perform any change to the output code, e.g. removing attributes\ninjected by frameworks.\n\n```js\nhtml: {\n  transform: (code) => {\n    // Remove attributes `_nghost` and `ng-reflect` injected by Angular:\n    return code.replace(/(?:_nghost|ng-reflect).*?=\"[\\S\\s]*?\"/g, '');\n  };\n}\n```\n\nYou can disable the HTML panel by setting the `disable` parameter to true.\nThis will hide and disable the HTML addon in your stories.\n\n```js\nhtml: {\n  disable: true, // default: false\n}\n```\n","readmeFilename":"README.md"}