storybook-addon-code-editor

A Storybook add-on for live editing stories. Supports JavaScript and TypeScript.

Demo

Usage example

Get started

Install as a dev dependency.

npm install --save-dev storybook-addon-code-editor

Add storybook-addon-code-editor in your .storybook/main.js file:

module.exports = {
  addons: [
    'storybook-addon-code-editor',
    ...

Playground

Use the Playground component in MDX format.

// MyComponent.stories.mdx
import { Playground } from 'storybook-addon-code-editor';

<Playground code="export default () => <h1>H1</h1>;"} />

More advanced example:

// MyComponent.stories.mdx
import { Playground } from 'storybook-addon-code-editor';
import * as MyLib from './index';
import storyCode from './MyStory.source.tsx?raw';
import ReactTypes from '@types/react/index.d.ts?raw';
import ExampleLibraryTypes from '../dist/types.d.ts?raw';

<Playground
  availableImports={{ 'my-lib': MyLib }}
  code={storyCode}
  height="560px"
  onCreateEditor={(editor, monaco) => {
    // editor docs: https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.IStandaloneCodeEditor.html
    // monaco docs: https://microsoft.github.io/monaco-editor/api/modules/monaco.html
    editor.getModel().updateOptions({ tabSize: 2 });
    monaco.editor.setTheme('vs-dark');
    monaco.languages.typescript.typescriptDefaults.addExtraLib(
      ReactTypes,
      'file:///node_modules/react/index.d.ts'
    );
    monaco.languages.typescript.typescriptDefaults.addExtraLib(
      ExampleLibraryTypes,
      'file:///node_modules/example-library/index.d.ts'
    );
  }}
/>

Playground props:

interface PlaygroundProps {
  code?: string;
  availableImports?: {
    [importSpecifier: string]: {
      [namedImport: string]: any;
    };
  };
  onCreateEditor?: (editor: Monaco.editor.IStandaloneCodeEditor, monaco: Monaco) => any;
  height?: string;
}

React is an available import by default and automatically imported if the code does not import it.

createLiveEditStory

Use the createLiveEditStory function in traditional stories:

// MyComponent.stories.js
import { createLiveEditStory } from 'storybook-addon-code-editor';
import * as MyLib from './index';
import storyCode from './MyStory.source.tsx?raw';

export const MyStory = createLiveEditStory({
  availableImports: { 'my-lib': MyLib },
  code: storyCode,
});

createLiveEditStory options:

interface Options {
  code: string;
  availableImports?: {
    [importSpecifier: string]: {
      [namedImport: string]: any;
    };
  };
  onCreateEditor?: (editor: Monaco.editor.IStandaloneCodeEditor, monaco: Monaco) => any;
}

Contributing

Install dependencies

npm i
npm run install-example-deps

See example

npm run start

Build library

npm run build

Build docs

npm run docs

Run tests

npm run test

Format code

npm run format

Commits

Use conventional commits to allow automatic versioned releases.

• fix: represents bug fixes, and correlates to a SemVer patch.
• feat: represents a new feature, and correlates to a SemVer minor.
• feat!:, or fix!:, refactor!:, etc., represent a breaking change (indicated by the !) and will result in a SemVer major.

Publishing

The automated release-please PR to the main branch can be merged to deploy a release.