New
Automatic visual tests in Storybook, plus 2.2x faster build times for React+TSVisual test with Chromatic
Star80,481
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-addon-edit-page
A storybook addon to add a `edit this page...` link
npm install storybook-addon-edit-page
Last updated almost 4 years ago
3
Downloads per week
Readme 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
}
Join the community
6,324 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI