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-react-live-edit
storybook.js addon providing live react story editing and preview
npm install storybook-addon-react-live-edit
Last updated over 4 years ago
1k
Downloads per week
Readme View on GitHub

storybook-addon-react-live-edit

DEMO

Installation

yarn add -D storybook-addon-react-live-edit

Configure storybook

To get this addon in your story book you have to register the panel, addLiveSource story creator and optionally add a scope decorator to make additional components and utilities available in live editor scope

Register the panel

Add to .storybook/addons.js

import 'storybook-addon-react-live-edit/dist/register';

Register the addLiveSource story creator

Add to .storybook/config.js

import {setAddon} from '@storybook/react';
import LiveEdit, {setOptions} from 'storybook-addon-react-live-edit';

setOptions({ theme: 'darcula', presets: ['react'] });

setAddon(LiveEdit);

Add withLiveEditScope story decorator

addDecorator to .storybook/config.js

import {addDecorator} from '@storybook/react';
import {withLiveEditScope} from 'storybook-addon-react-live-edit';

import ExternalComponent from 'a-apackage';

addDecorator(withLiveEditScope({ ExternalComponent }));

or

addDecorator to particular stories

import {withLiveEditScope} from 'storybook-addon-react-live-edit';
import ExternalComponent from 'a-apackage';

storiesOf("Demo", module)
  .addDecorator(withLiveEditScope({ React, ExternalComponent }))
  .addLiveSource('demo', `return <div>{scopeTest}</div>`);

Usage

When LiveEdit addon is registered with storybooks setAddon function new method addLiveSource to add a story from source provided as a string. This source can be edited in "Live edit" panel

storiesOf("Demo", module)
  .addLiveSource('demo', `return <div>{scopeTest}</div>`);

or

You can use withLiveEdit story creator

storiesOf("Demo", module)
  .add('demo', withLiveEdit(`return <div>{scopeTest}</div>`));

API

addLiveSource

addLiveSource(name, source[, scope]) 
  • name (string, required) - the story name
  • source (string, required) - story source to be rendered in preview and available for editing in "Live edit" panel
  • scope (object, optional) - variables provided to rendered story, these can be additional components, utilities or any other data. Scope is merged with all variables previously provided by withLiveEditScope decorators.

withLiveEdit

withLiveEdit(source[, scope]) 
  • source (string, required) - story source to be rendered in preview and available for editing in "Live edit" panel
  • scope (object, optional) - variables provided to rendered story, these can be additional components, utilities or any other data. Scope is merged with all variables previously provided by withLiveEditScope decorators.

withLiveEditScope decorator

withLiveEditScope(scope)
  • scope (object, required) - variables provided to rendered story, these can be additional components, utilities or any other data. Scope is merged with all variables previously provided by withLiveEditScope decorators. React should be imported and provided within the scope object.

Example

To run provided example execute following command, storybook will run on port 3000

yarn example
Join the community
6,559 developers and counting
WhyWhy StorybookComponent-driven UI
DocsGuidesTutorialsChangelogTelemetryStatus
CommunityIntegrationsGet involvedBlog
ShowcaseExploreProjectsComponent glossary
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI