Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@storybook/addon-storysource

Package Overview
Dependencies
Maintainers
5
Versions
1873
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@storybook/addon-storysource

View a story’s source code to see how it works and paste into your app

  • 7.0.0
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
485K
increased by7.21%
Maintainers
5
Weekly downloads
 
Created

What is @storybook/addon-storysource?

@storybook/addon-storysource is an addon for Storybook that allows you to view the source code of your stories directly within the Storybook interface. This can be particularly useful for documentation purposes and for developers who want to see how a particular story is implemented.

What are @storybook/addon-storysource's main functionalities?

View Story Source Code

This feature allows you to view the source code of your stories directly within the Storybook interface. By using the `withStorySource` decorator, you can add the source code of the story to the Storybook panel.

import { withStorySource } from '@storybook/addon-storysource';

export default {
  title: 'Button',
  decorators: [withStorySource],
};

export const Primary = () => <button>Primary</button>;
Primary.story = {
  parameters: {
    storySource: {
      source: '<button>Primary</button>',
    },
  },
};

Automatic Source Code Extraction

This feature automatically extracts the source code of your stories and displays it in the Storybook panel. By setting `injectStoryParameters` to true, you can enable automatic source code extraction for all stories.

import { addParameters } from '@storybook/react';
import { withStorySource } from '@storybook/addon-storysource';

addParameters({
  storySource: {
    loaderOptions: {
      injectStoryParameters: true,
    },
  },
});

export default {
  title: 'Button',
  decorators: [withStorySource],
};

export const Secondary = () => <button>Secondary</button>;

Other packages similar to @storybook/addon-storysource

Keywords

FAQs

Package last updated on 31 Mar 2023

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc