New
Styling Addon: configure styles and themes in StorybookAutomate with Chromatic
Storybook Day 2023
Star77,670
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-stories
A storybook addon to add a edit this... link
npm install storybook-addon-edit-stories
Last updated over 3 years ago
7
Downloads per week
Readme View on GitHub

storybook-addon-edit-stories

A storybook addon to turn your Storybok site into a CMS allowing the users to submit edit PRs for your components and documentation

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-stories

Setup

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://raw.githubusercontent.com/storybookjs/storybook/next/addons/docs/docs/docspage.md' 
    }  
 }}/>

Usage

In your addons.js, define your configuration and pass it in to the editStories initializer

mport { editStories } from '../dist';

const gitPageResolver = ({ fileName } ) => {
  return fileName;
}
editStories({
  fileNameResolve: gitPageResolver,
  editPageLabel: 'edit this page...',
});

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

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

Maintained by
Chromatic
Special thanks to Netlify and CircleCI