Live Edit - Jarle & Monaco

storybook.js addon providing react-live preview and monaco-editor editing

View on Github

storybook-addon-jarle-monaco

version

provide a live-editing editor and preview as storybook addon, it uses jarle and monaco editor

you could change code in editor and see the result in preview

Example

yarn # install dependencies
yarn storybook # start storybook

Demo storybook page

Usage

npm i --save-dev storybook-addon-jarle-monaco
# or
yarn add -D storybook-addon-jarle-monaco

Registry the addon to storybook

module.exports = {
  // ...
  addons: [
    // ... other addons
    'storybook-addon-jarle-monaco',
  ],
}

Use in stories

// *.stories.jsx
import { generateLivePreviewStory } from 'storybook-addon-jarle-monaco'

// use generateLivePreviewStory HoC to generate live preview
export const LiveEdit = generateLivePreviewStory({
  code: `() => <Button primary label={foo} />`,
  scope: {
    Button,
    foo: 'bar',
  }
})

export const LiveEditUseLivePreview = () => (
  <LivePreview
    channel={addons.getChannel()}
    code={`<Button primary label={'hello'} />`}
    providerProps={{
      scope: {
        Button,
      }
    }}
  />
)

// use LivePreview alone, you need to set showEditor manually
LiveEditUseLivePreview.parameters = {
  liveEdit: {
    showEditor: true,
  }
}

Use in MDX

import { Meta } from '@storybook/addon-docs';
import { Button } from './Button';
import { Playground } from '@pupu/storybook-addon-jarle-monaco';

<Meta title="Example/LiveEdit in MDX" />

> Use `Playground` in *.stories.mdx file, it provides live preview and editor

### Button

<Playground
  code="<Button primary label={'hello'} />"
  providerProps={{
    scope: {
      Button,
    },
  }}
/>

Typescript typings resolve

Check the story AutoTypings.stories.mdx

With liveDecorator

  1. add liveDecorator as global decorator
import { liveDecorator } from 'storybook-addon-jarle-monaco'

// .storybook/preview.js
export const decorators = [
  liveDecorator
]
  1. usage in stories
// *.stories.jsx

// with liveDecorator will read the story's source code,
// so we can avoid writing live preview's code in plain text.
export const LiveEditWithLiveDecorator = () => <Button primary label="hello" />

// but you still need to provide scope or custom LivePreviewProps
LiveEditWithLiveDecorator.parameters = {
  liveEdit: {
    showEditor: true,
    withLiveDecorator: true,
    scope: {
      Button,
    }
  }
}

Config

Monaco files

this addon use @monaco-editor/react, by default monaco files are being downloaded from CDN, you can change the paths to use another CDN domain.

e.g.

import { loader } from '@monaco-editor/react'

loader.config({ paths: { vs: 'https://cdn.bootcdn.net/ajax/libs/monaco-editor/0.33.0/min/vs' } })

Story parameters

liveEdit config in story's parameters

property type default description
showEditor boolean false show the live edit panel or not
withLiveDecorator boolean false wrap the story with LivePreview decorator or not

Playground Component

property type default description
code string -- required, the code for live edit
autoTypings boolean false enable auto typings featureļ¼Œif true, will set the language to typescript by default
defaultExpand boolean false expand the editor content
scope object -- prop of Jarle Preview, for global scope injection
providerProps ProviderProps -- props for Jarle Provider
resolveTypeDefinition (packageName: string) => Promise<string | null> | string | null -- provide custom type definitions for certain package
editorProps Partial<EditorProps> -- props for MonacoEditor
className string -- class for wrapper

you can add Jarle's Provider props in liveEdit, check the Jarle's docs for more information.