New
Community Showcase #5Visual test with Chromatic
Star78,967
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-code-editor
A Storybook add-on for live editing stories. Supports React and TypeScript.
npm install storybook-addon-code-editor
Last updated about 2 months ago
5.1k
Downloads per week
Readme View on GitHub

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.

Join the community
6,191 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI