Storybook Addon Live Edit
allows user editing code in realtime
- Typescript support
- Compatible with
Storybook
decorators - Ability to enable/disable addon for specified story/component or for the whole project
yarn add -D @toptal/davinci-storybook-live-edit-addon
module.exports = {
addons: ['@toptal/davinci-storybook-live-edit-addon']
}
This live-edit
addon also brings @toptal/davinci-storybook-theme
.
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',
};
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.
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:
- on a component level
- 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
.
This addon uses react-live under the hood.