Storybook Addon Live Edit

Storybook Addon Live Edit allows user editing code in realtime

Features

• Typescript support
• Compatible with Storybook decorators
• Ability to enable/disable addon for specified story/component or for the whole project

Installation

1. Install addon

yarn add -D @toptal/davinci-storybook-live-edit-addon

2. Register this addon to Storybook

module.exports = {
  addons: ['@toptal/davinci-storybook-live-edit-addon']
}

This live-edit addon also brings @toptal/davinci-storybook-theme.

Usage

NOTE: You must specify a scope for each story, beforehand. It means, all variables that are used inside story must be specified inside the scope

ReferenceError: Component is not defined

After loading stories, there is a big chance you will get the error above. It happens due to a lack of defined scope.

To define a scope, you may use parameters from story, component or project levels:

// extra variables that are used inside stories
const extraVariable = 1;
const MyCustomComponent = () => null

export default {
  title: 'Example/Button',
  component: Button,
  parameters: {
    scope: {
      // all variables that are used inside stories must be defined inside the scope
      Button,
      extraVariable,
      MyCustomComponent
    },
  },
} as ComponentMeta<typeof Button>;

export const Primary = (args) => {
  return (
    <MyCustomComponent> // <-- MyCustomComponent must be defined
      <Button {...args}> // <-- Button must be defined
        {extraVariable} // <-- extraVariable must be defined
      </Button>
    </MyCustomComponent>
  )
};

Primary.args = {
  primary: true,
  label: 'Button',
};

Info

Instead of overriding the whole Canvas, this addon extends the default DocStory component and keeps default Canvas. Basically, it adds a new button Live Edit next to Show Code button.

Parameters:

disableLiveEdit — disable live edit. It might be used for a single story, component, or whole project. disableSourceCode — disable source code. There are cases when you want to display only the Live Edit button and hide the Show Code. Similarly to disableLiveEdit, you can use it for a single story, component, or whole project.

Example of disabling the addon globally:

// .storybook/preview.js
export const parameters = {
  disableLiveEdit: true // Disable Live Edit globally
}

Example of disabling the addon:

1. on a component level
2. only for a particular story

// MyComponent.stories.tsx
export default {
  title: 'MyComponent',
  component: MyComponent,
  parameters: {
    disableLiveEdit: true, // Disable Live Edit in all stories in the file
  }
}

const Template = (args) => ({
  // 👈 Your template goes here
});

export const Primary = Template.bind({});

Primary.parameters = {
  disableLiveEdit: true, // Disable Live Edit only for `Primary` story
};

Example of disabling source code globally:

// .storybook/preview.js
export const parameters = {
  disableSourceCode: true // Disable source code globally
}

Note: disableSourceCode is a parameter and can be used in the same way as disableLiveEdit.

Implementation

This addon uses react-live under the hood.