{"id":22889202,"url":"https://github.com/reme3d2y/storybook-addon-live-examples","last_synced_at":"2025-07-11T06:40:55.231Z","repository":{"id":55134527,"uuid":"399333794","full_name":"reme3d2y/storybook-addon-live-examples","owner":"reme3d2y","description":"⚡ Storybook addon that make your code examples live","archived":false,"fork":false,"pushed_at":"2024-07-11T11:15:50.000Z","size":5562,"stargazers_count":20,"open_issues_count":6,"forks_count":10,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-03-28T22:23:40.066Z","etag":null,"topics":["code-playground","live","playground","react","storybook","storybook-addon"],"latest_commit_sha":null,"homepage":"https://reme3d2y.github.io/storybook-addon-live-examples","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/reme3d2y.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"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":"2021-08-24T04:25:55.000Z","updated_at":"2024-12-25T21:04:20.000Z","dependencies_parsed_at":"2024-06-18T20:03:22.112Z","dependency_job_id":"8bd40664-f422-4858-8dcf-ce25bb78c307","html_url":"https://github.com/reme3d2y/storybook-addon-live-examples","commit_stats":{"total_commits":155,"total_committers":43,"mean_commits":3.604651162790698,"dds":0.7870967741935484,"last_synced_commit":"3d47c691d5edb6ade5a6006a172cf81c6fe8a539"},"previous_names":[],"tags_count":45,"template":false,"template_full_name":"storybookjs/addon-kit","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reme3d2y%2Fstorybook-addon-live-examples","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reme3d2y%2Fstorybook-addon-live-examples/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reme3d2y%2Fstorybook-addon-live-examples/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reme3d2y%2Fstorybook-addon-live-examples/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/reme3d2y","download_url":"https://codeload.github.com/reme3d2y/storybook-addon-live-examples/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249109042,"owners_count":21214105,"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":["code-playground","live","playground","react","storybook","storybook-addon"],"created_at":"2024-12-13T21:18:48.940Z","updated_at":"2025-04-15T16:34:54.790Z","avatar_url":"https://github.com/reme3d2y.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 style={{ textAlign: \"center\" }} align=\"center\"\u003e⚡ Storybook Addon Live Examples ⚡\u003c/h1\u003e\n\n\u003ch3 style={{ textAlign: \"center\" }} align=\"center\"\u003e Code playground with live editing inside your storybook\u003c/h3\u003e\n\n- 🧑‍💻 Play with code without 3rd-party service services like codepen\n- 👥 Share examples with others\n- 🐛 Share links to bug reproductions with others\n- 🧱 Check how the components work together\n- \u003cimg src=\"https://raw.githubusercontent.com/github/explore/80688e429a7d4ef2fca1e82350fe8e3517d3494d/topics/typescript/typescript.png\" width=\"18\" height=\"18\" align=\"center\" /\u003e Typescript supported\n\n[Read docs](https://reme3d2y.github.io/storybook-addon-live-examples/?path=/story/components-docs--page) or [Try live demo](https://core-ds.github.io/core-components/master/?path=/docs/sandbox--docs)\n\n## Getting started\n\n\n\n### 1. Install addon\n\n```bash\nyarn add -D storybook-addon-live-examples\n# npm install --save-dev storybook-addon-live-examples\n```\n\n### 2. Register addon in main.js\n\n```js\nmodule.exports = {\n    addons: ['storybook-addon-live-examples'],\n};\n```\n\n### 3. Setup addon in preview.js (optional step)\n\n```js\nimport { addons } from '@storybook/addons';\nimport { LIVE_EXAMPLES_ADDON_ID } from 'storybook-addon-live-examples';\nimport theme from 'prism-react-renderer/themes/github';\n\nimport AllComponents from '../packages';\n\naddons.setConfig({\n    [LIVE_EXAMPLES_ADDON_ID]: {\n        // custom theme from prism-react-renderer (optional)\n        editorTheme: theme,\n        // internationalization (optional)\n        copyText: ['Copy', 'Copied'],\n        expandText: ['Show code', 'Hide code'],\n        shareText: ['Share', 'Shared'],\n        // scope (globally accessible components \u0026 functions) (optional)\n        scope: {\n            ...AllComponents,\n            someFunction: () =\u003e 42\n        },\n    },\n});\n```\n\n### 4. Configure webpack (for storybook 7 only)\n\n```js\nconst { patchWebpackConfig } = require('storybook-addon-live-examples/dist/cjs/utils');\n\nmodule.exports = {\n    webpackFinal: (config) =\u003e {\n        patchWebpackConfig(config);\n        \n        return config;\n    }\n};\n```\n\n## Usage\n\n### CSF\n\nLive examples will be rendered instead of the default addon-docs canvas.\n\nYour can customize examples by parameters:\n\n```tsx\nexport default {\n    title: 'Components/Button',\n    parameters: {\n        scope: {\n            scopeValue,\n        },\n    }\n};\n\nconst scopeValue = 42;\n\nexport const Primary = () =\u003e \u003cbutton\u003e{scopeValue}\u003c/button\u003e;\n\nPrimary.parameters = {\n    expanded: true\n};\n\nexport const Secondary = () =\u003e \u003cbutton\u003e{scopeValue}\u003c/button\u003e;\n```\n\n**NOTE:**\n*Most likely you will get errors after addon installing. Don't panic, just pass all variables that are used in your story to scope*\n\n### MDX\n\nInside MDX-based stories you can write your code examples with plain markdown.\n\n**Just put your code inside triple quotes**\n\n```markdown\n|```tsx live\n|\u003ch4\u003eWow, so simple\u003c/h4\u003e\n|```\n```\n\n**Or render custom Canvas**\n\n```tsx\n// Import custom Canvas from addon\nimport { Canvas } from 'storybook-addon-live-examples';\n\n\u003cCanvas live={true} scope={{ value: 42 }}\u003e\n    \u003ch4\u003eWow, so simple, {value}\u003c/h4\u003e\n\u003c/Canvas\u003e\n```\n\n**Or use Example directly**\n\n```tsx\nimport { Example } from 'storybook-addon-live-examples';\n\n\u003cExample live={true} code={`\u003ch4\u003eWow, so simple\u003c/h4\u003e`} /\u003e\n```\n\n### [CSF With MDX](https://github.com/storybookjs/storybook/blob/master/addons/docs/docs/recipes.md#csf-stories-with-arbitrary-mdx)\n\n```tsx\n// Button.stories.js\n\nimport mdx from './Button.mdx';\n\nexport default {\n    title: 'Components/Button',\n    parameters: {\n        docs: {\n            page: mdx,\n        },\n    },\n};\n\nconst scopeValue = 42;\n\nexport const Primary = () =\u003e \u003cbutton\u003e{scopeValue}\u003c/button\u003e;\n\nPrimary.parameters = {\n    scope: {\n        scopeValue,\n    },\n};\n```\n\n```tsx\n// Button.mdx\n\nimport { ArgsTable, Story } from '@storybook/addon-docs';\n\nimport { Button } from './Button';\n\n# Button\n\n\u003cArgsTable of={Button} /\u003e\n\n\u003cStory id='components-button--primary' /\u003e\n```\n\n\n\n## Example props\n\nYou can customize the display of examples with props or metastring\n\n### live\n\n```markdown\n|```tsx live\n|\u003cspan\u003eThis example can be edited\u003c/span\u003e\n|```\n```\n\n```tsx live\n\u003cspan\u003eThis example can be edited\u003c/span\u003e\n```\n\n### expanded\n\n```markdown\n|```tsx live expanded\n|\u003cspan\u003eThis example will be rendered with expanded code sources\u003c/span\u003e\n|```\n```\n\n```tsx live expanded\n\u003cspan\u003eThis example will be rendered with expanded code sources\u003c/span\u003e\n```\n\n## Complex examples\n\n```tsx live expanded\nrender(() =\u003e {\n    const [counter, setCounter] = React.useState(0);\n    return (\n        \u003c\u003e\n            \u003ch2\u003eSuper live counter: {counter}\u003c/h2\u003e\n            \u003cbutton type='button' onClick={() =\u003e setCounter((c) =\u003e c + 1)}\u003e\n                Increment\n            \u003c/button\u003e\n        \u003c/\u003e\n    );\n});\n```\n\n## Scope\n\nStorybook-addon-live-examples uses [react-live](https://github.com/FormidableLabs/react-live) under the hood.\n\nScope allows you to pass some globals to your code examples.\nBy default it injects React only, which means that you can use it in code like this:\n\n```tsx\nrender(() =\u003e {\n//                                ↓↓↓↓↓\n    const [counter, setCounter] = React.useState(0);\n    return counter;\n}\n```\n\n#### - Pass your own components to scope by props\n\n```tsx\nimport { Canvas } from 'storybook-addon-live-examples';\nimport MyComponent from '../packages/my-component';\n\n\u003cCanvas live={true} scope={{ MyComponent }}\u003e\n    \u003cMyComponent\u003eAmazing\u003c/MyComponent\u003e\n\u003c/Canvas\u003e\n```\n\n#### - Setup scope globally\n\nThis is the easiest way to setup scope once for an entire project\n\n```tsx\n//.storybook/manager.js\n\nimport { addons } from '@storybook/addons';\nimport { LIVE_EXAMPLES_ADDON_ID } from 'storybook-addon-live-examples';\n\naddons.setConfig({\n    [LIVE_EXAMPLES_ADDON_ID]: {\n        scope: {\n            MyComponent,\n        },\n    },\n});\n```\n\n```tsx\n\u003cMyComponent\u003eNow, you can use MyComponent in all examples\u003c/MyComponent\u003e\n```\n\n#### - Setup scope inside monorepo\n\nThis is an example of how you can add all used components and helpers to the scope.\n\n```tsx\n// .storybook/scope.ts\n\nimport { ComponentType } from 'react';\n\nimport * as icons from 'some-icons-pack';\nimport * as knobs from '@storybook/addon-knobs';\n\n// packages/{componentName}/index.ts\nconst req = require.context('../packages', true, /^\\.\\/(.*)\\/index.ts$/);\n\nconst components = req.keys().reduce((acc: Record\u003cstring, ComponentType\u003e, key) =\u003e {\n    Object.entries(req(key)).forEach(([componentName, component]: [string, any]) =\u003e {\n        acc[componentName] = component;\n    });\n\n    return acc;\n}, {});\n\nexport default {\n    ...components,\n    ...icons,\n    ...knobs,\n};\n\n// .storybook/manager.js\n\nimport scope from './scope';\n\naddons.setConfig({\n    [LIVE_EXAMPLES_ADDON_ID]: {\n        scope,\n    },\n});\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freme3d2y%2Fstorybook-addon-live-examples","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Freme3d2y%2Fstorybook-addon-live-examples","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freme3d2y%2Fstorybook-addon-live-examples/lists"}