New
Integrate Next.js and Storybook automaticallyAutomate with Chromatic
Star75,440
Back to integrations
Add your integration
Categories
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
storybook-code-view
Storybook addon to view your component source.
npm install storybook-code-view
Last updated over 3 years ago
30
Downloads per week
Readme View on GitHub

Storybook Addon: Component source

Storybook Addon Component source allows you to view your component template in storybook addon panel.

Framework Support : Vue, React(Coming soon...)

Storybook Addon Notes Demo

Getting Started

yarn add -D component-source

Then create a file called addons.js in your Storybook config.

Add following content to it:

// register the notes addon as a tab
import 'component-source/register';

Now, you can use the source parameter to add a note to each story.

Vue

import { storiesOf } from '@storybook/vue';

import MyButton from '../src/components/MyButton.vue';

storiesOf('MyButton', module).add(
  'with some emoji',
  () => ({
    components: { MyButton },
    template: '<my-button>😀 😎 👍 💯</my-button>',
  }),
  { 
      source: {
        // Note: Path should be start from /src/ and must be end with file extension
           publicPath:'/src/components/MyButton.vue'
      },
  }
);
Join the community
5,858 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI