{"id":19427392,"url":"https://github.com/codesandbox/storybook-addon","last_synced_at":"2025-04-24T17:31:31.427Z","repository":{"id":230065075,"uuid":"765247916","full_name":"codesandbox/storybook-addon","owner":"codesandbox","description":null,"archived":false,"fork":false,"pushed_at":"2024-10-11T09:31:20.000Z","size":621,"stargazers_count":20,"open_issues_count":2,"forks_count":4,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-04-24T04:37:06.226Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/codesandbox.png","metadata":{"files":{"readme":"README.md","changelog":null,"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":"2024-02-29T15:01:14.000Z","updated_at":"2025-04-04T03:56:11.000Z","dependencies_parsed_at":"2024-03-27T17:27:27.262Z","dependency_job_id":"4a42bea3-f9d1-43a6-a1df-8d43cb21fbe6","html_url":"https://github.com/codesandbox/storybook-addon","commit_stats":null,"previous_names":["codesandbox/storybook-addon"],"tags_count":0,"template":false,"template_full_name":"storybookjs/addon-kit","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codesandbox%2Fstorybook-addon","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codesandbox%2Fstorybook-addon/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codesandbox%2Fstorybook-addon/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codesandbox%2Fstorybook-addon/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/codesandbox","download_url":"https://codeload.github.com/codesandbox/storybook-addon/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250674347,"owners_count":21469204,"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":[],"created_at":"2024-11-10T14:11:36.700Z","updated_at":"2025-04-24T17:31:31.085Z","avatar_url":"https://github.com/codesandbox.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"right\"\u003e\n\u003cimg alt=\"Storybook CodeSandbox Addon\" src=\"https://github.com/codesandbox/sandpack/assets/4838076/464ec018-48e5-410b-aaca-c050a3a02743\" width=\"350\" /\u003e\n\u003c/p\u003e\n\n# Storybook CodeSandbox Addon\n\n[![Edit in CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/github/codesandbox/storybook-addon)\n\nThe `@codesandbox/storybook-addon` is a Storybook addon that allows users accessing a story-book page to export the code from the story as a CodeSandbox Sandbox.\nSandboxes will always be created within the same workspace providing a closed-circuit feedback system. The add-on also provides support for private dependencies.\n\n## Usage\n\nOnce configured, you can use the \"Open in CodeSandbox\" button within your Storybook environment to export stories to CodeSandbox effortlessly.\n\n## Configuration\n\n```js\n// .storybook/main.js\n\nmodule.exports = {\n  // ...\n  addons: [\"@codesandbox/storybook-addon\"],\n};\n```\n\n\u003cdetails\u003e\n  \u003csummary\u003eStorybook configuration (required)\u003c/summary\u003e\n\n\u003cbr /\u003e\n\nTo run the addon, you'll need to configure it in your Storybook's `.storybook/preview.js` file.\n\n```js\n// .storybook/preview.js\n\nconst preview: Preview = {\n  parameters: {\n    codesandbox: {\n      /**\n       * @required\n       * Workspace API key from codesandbox.io/t/permissions.\n       * This sandbox is created inside the given workspace\n       * and can be shared with team members.\n       */\n      apiToken: \"\u003capi-token\u003e\",\n\n      /**\n       * @optional\n       * If a given sandbox id is provided, all other options\n       * will be ignored and the addon will open the sandbox.\n       */\n      sandboxId: \"SANDBOX-ID\",\n\n      /**\n       * @optional\n       * Pass custom files/modules into the sandbox. These files\n       * will be added to the file system of the sandbox and can \n       * be imported by other files\n       */\n      files: {\n        // Example:\n        \"index.js\": `\nexport const foo = () =\u003e console.log(\"Hello World\");`\n        \"App.js\": `\nimport { foo } from \"./index.js\"; \n\nfoo();`,\n      },\n\n      /**\n       * @optional\n       * Template preset to be used in the sandbox. This will \n       * determine the initial setup of the sandbox, such as\n       * bundler, dependencies, and files.\n       */\n      template: \"react\" | \"angular\", // Defaults to \"react\"\n\n      /**\n       * @optional\n       * Dependencies list to be installed in the sandbox. \n       * \n       * @note You cannot use local modules or packages since\n       * this story runs in an isolated environment (sandbox)\n       * inside CodeSandbox. As such, the sandbox doesn't have\n       * access to your file system.\n       *\n       * Example:\n       */\n      dependencies: {\n        \"@radix-ui/themes\": \"latest\",\n        \"@myscope/mypackage\": \"1.0.0\",\n      },\n\n      /**\n       * @required\n       * CodeSandbox will try to import all components by default from\n       * the given package, in case `mapComponent` property is not provided.\n       *\n       * This property is useful when your components imports are predictable\n       * and come from a single package and entry point.\n       */\n      fallbackImport: \"@radix-ui/themes\",\n\n      /**\n       * @optional\n       * The default visibility of the new sandboxes inside the workspace.\n       *\n       * @note Use `private` if there is a private registry or private NPM\n       * configured in your workspace.\n       */\n      privacy: \"private\" | \"public\",\n\n      /**\n       * @optional\n       * All required providers to run the sandbox properly,\n       * such as themes, i18n, store, and so on.\n       *\n       * @note Remember to use only the dependencies listed above.\n       *\n       * Example:\n       */\n      provider: `import { Theme } from \"@radix-ui/themes\";\n        import '@radix-ui/themes/styles.css';\n\n        export default ThemeProvider = ({ children }) =\u003e {\n          return (\n            \u003cTheme\u003e\n              {children}\n            \u003c/Theme\u003e\n          )\n        }`,\n    },\n  },\n};\n\nexport default preview;\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003eStory configuration (recommended)\u003c/summary\u003e\n\n````ts\nimport type { Meta, StoryObj } from \"@storybook/react\";\n\nconst meta: Meta\u003ctypeof Button\u003e = {\n  title: \"Example/Button\",\n  component: Button,\n  parameters: {\n    codesandbox: {\n      /**\n       * To import all components used within each story in\n       * CodeSandbox, provide all necessary packages and modules.\n       *\n       * Given the following story:\n       * ```js\n       * import Provider from \"@myscope/mypackage\";\n       * import { Button } from \"@radix-ui/themes\";\n       * import \"@radix-ui/themes/styles.css\";\n       * ```\n       *\n       * You need to map all imports to the following:\n       */\n      mapComponent: {\n        // Example of default imports\n        \"@myscope/mypackage\": \"Provider\",\n\n        // Example of named functions\n        \"@radix-ui/themes\": [\"Button\"],\n\n        // Example of static imports\n        \"@radix-ui/themes/styles.css\": true,\n      },\n\n      /**\n       * @note You cannot use local modules or packages since\n       * this story runs in an isolated environment (sandbox)\n       * inside CodeSandbox. As such, the sandbox doesn't have\n       * access to your file system.\n       */\n    },\n  },\n};\n````\n\n\u003c/details\u003e\n\n\u003cbr /\u003e\n\nMake sure to provide the necessary values for [`apiToken`](https://codesandbox.io/t/permissions) and any additional dependencies or providers required for your specific setup.\n\nFor now, this addon only support [Component Story Format (CSF)](Component Story Format (CSF)) stories format.\n\n## Additional Notes\n\n- Ensure that you have proper permissions and access rights to the CodeSandbox workspace specified in the configuration.\n- Verify the correctness of the dependencies and providers listed in the configuration to ensure the sandbox runs smoothly.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodesandbox%2Fstorybook-addon","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodesandbox%2Fstorybook-addon","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodesandbox%2Fstorybook-addon/lists"}