{"id":15062718,"url":"https://github.com/whitespace-se/storybook-addon-html","last_synced_at":"2025-04-08T08:12:34.859Z","repository":{"id":36463113,"uuid":"225407003","full_name":"whitespace-se/storybook-addon-html","owner":"whitespace-se","description":"A Storybook addon that extracts and displays compiled syntax-highlighted HTML","archived":false,"fork":false,"pushed_at":"2024-10-19T12:13:57.000Z","size":3748,"stargazers_count":95,"open_issues_count":21,"forks_count":46,"subscribers_count":13,"default_branch":"main","last_synced_at":"2025-04-01T05:35:40.747Z","etag":null,"topics":["html","storybook"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/whitespace-se.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-12-02T15:24:14.000Z","updated_at":"2025-03-29T12:58:13.000Z","dependencies_parsed_at":"2024-06-18T13:43:08.665Z","dependency_job_id":"8419f293-9338-4dd8-ade1-1ed699db8458","html_url":"https://github.com/whitespace-se/storybook-addon-html","commit_stats":{"total_commits":197,"total_committers":14,"mean_commits":"14.071428571428571","dds":"0.35532994923857864","last_synced_commit":"2b7b1ea59f6ecefcb1d44060ffb877e87f6c24ef"},"previous_names":[],"tags_count":28,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/whitespace-se%2Fstorybook-addon-html","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/whitespace-se%2Fstorybook-addon-html/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/whitespace-se%2Fstorybook-addon-html/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/whitespace-se%2Fstorybook-addon-html/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/whitespace-se","download_url":"https://codeload.github.com/whitespace-se/storybook-addon-html/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247801169,"owners_count":20998339,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["html","storybook"],"created_at":"2024-09-24T23:45:17.300Z","updated_at":"2025-04-08T08:12:34.839Z","avatar_url":"https://github.com/whitespace-se.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Storybook Addon HTML\n\nThis addon for Storybook adds a tab that displays the compiled HTML for each\nstory. It uses [highlight.js](https://highlightjs.org/) for syntax highlighting.\n\n![Animated preview](https://raw.githubusercontent.com/whitespace-se/storybook-addon-html/master/image.gif)\n\n## Requirements\n\nVersion 6 of this addon requires Storybook 8 and Prettier 3. If you are still\nusing Storybook 7, you can use version 5.\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 prettier react-syntax-highlighter\n```\n\nWith Yarn:\n\n```sh\nyarn add -D @whitespace/storybook-addon-html prettier react-syntax-highlighter\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\nThe HTML is formatted with Prettier. You can override the Prettier config\n(except `parser` and `plugins`) by providing an object following the\n[Prettier API override format](https://prettier.io/docs/en/options.html) in the\n`html` parameter:\n\n```js\n// .storybook/preview.js\n\nexport const parameters = {\n  // ...\n  html: {\n    prettier: {\n      tabWidth: 4,\n      useTabs: false,\n      htmlWhitespaceSensitivity: \"strict\",\n    },\n  },\n};\n```\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 `\u003c!----\u003e` and `\u003c!-- --\u003e`.\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) =\u003e {\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","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwhitespace-se%2Fstorybook-addon-html","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwhitespace-se%2Fstorybook-addon-html","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwhitespace-se%2Fstorybook-addon-html/lists"}