A storybook addon to add a `edit this page...` link

View on Github

Storybook Addon Edit Page

Storybook Edit Page Addon can add 'edit this page' links in Storybook.

Preview Edit on preview
Docs tab Edit on docs
mdx file Edit mdx

Live demo

sample-edit-page

Installation

npm i -D storybook-addon-edit-page

Configuration

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

Add following content to it (the configuration settings are optional):

import { editPage } from 'storybook-addon-edit-page';

const gitPageResolver = ({ fileName } ) => {
  return fileName;
}
editPage({
  fileNameResolve: gitPageResolver,
  editPageLabel: 'edit this page...',
  render: ({ filePath, shortName, ...rest }) => (
    <div>
      {filePath && (
        <div>
          <h3>{shortName}</h3>
          <a target="_blank" href={filePath}>
            here
          </a>
        </div>
      )}
    </div>
  ),
});

Usage

You can add the source file name to the stories metadata in CSF:

export default {
  title: 'Stories|With edit',
  component: Link,
  parameters: {
    edit: {
      fileName: 'https://github.com/storybookjs/design-system/blob/master/src/components/Link.js'
    },  
  }
};

Or to mdx files:

<Meta
  title="Test mdx|Add edit on Doc tab?"
  parameters={{
    edit:{ 
      fileName: 'https://github.com/storybookjs/storybook/blob/next/addons/docs/docs/docspage.md' 
    }  
 }}/>

Options

fileNameResolve: function to resolve the file name, by default returns the supplied fileName editPageLabel: label for the Edit this page link - by default Edit this page render: function to custom render the Edit this page panel

parameters : {
  filePath: string, //full file path
  shortName: string, //short name of the story file (component name)
  parameters: any,  //parameters of the current story
}