New
Storybook 7.6Visual test with Chromatic
Star81,134
Back to integrations
Add your integration
Categories
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
Addon Preview Code
A storybook addon for previewing component files
npm install storybook-addon-code-preview
Last updated over 2 years ago
163
Downloads per week
Readme View on GitHub

Storybook Addon Code Preview

This Storybook addon gives you a preview for js|js|ts|tsx|css files of Storybook Components. It uses a custom Webpack config & loader and adds a preview tab for all files located under the components folder.

  • 📝 Easily access story/component code
  • ⚛️ History of accessed components
  • 📦 Many more to come

preview

Getting Started

Installation

First install the addon from npm:

npm i --save-dev storybook-addon-code-preview
# or
yarn add --dev storybook-addon-code-preview

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

module.exports = {
  addons: ['storybook-addon-code-preview']
};

After registering the addon you're all good to go 🚀

Join the community
6,385 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI