Back to integrations
Add your integration
Categories
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
Open Story on Codepen
Add an 'Open Story in Codepen' button to the Storybook toolbar.
npm install storybook-addon-codepen
Last updated about 1 year ago
1
Downloads per week
Readme View on GitHub

story-pen

Storybook Addon Codepen

Open a pen on Codepen with the click of a button, pre-filled with your story’s HTML and CSS.

sb-addon-cp

Installation

In the root directory of your Storybook project, run either

npm i -D storybook-addon-codepen

or

yarn add storybook-addon-codepen

Then, add the following to your .storybook/main.js file:

export default {
  addons: ['storybook-addon-codepen'],
};

Assumptions & Limitations

This addon was built for those times you would like to share the contents of a single story, either to seek help or to create a minimal use case, but are unable to share the full Storybook for whatever reason. Rather than copying and pasting somewhere else, the addon will pull the full story title, rendered HTML, and the contents of any defined <style> tags from your story and use them to prefill a new pen on Codepen.

  • Does not require a Codepen account to use.
  • Changing args passed to the story, either through the Controls panel, URL parameters, or other means, will be reflected correctly in the resulting pen provided they happen before opening the pen. (If they occur after, a new pen will need to be opened to see the changes.)
  • JavaScript is intentionally not included in what is sent to Codepen. Because Storybook supports so many tools that require large framework bundles when not minified (as they likely would be in development), and because JavaScript required for a single component might be spread among multiple bundles in the preview iframe, making it difficult to pick and choose effectively, this addon chooses to leave out the JavaScript when opening a pen. If your story requires interactive JavaScript, you will need to move it into the pen manually.
Join the community
6,588 developers and counting
WhyWhy StorybookComponent-driven UI
DocsGuidesTutorialsChangelogTelemetryStatus
CommunityAddonsGet involvedBlog
ShowcaseExploreProjectsComponent glossary
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI