A Storybook add-on for live editing stories. Supports React and TypeScript.
Example code using this add-on
Install as a dev dependency.
npm install --save-dev storybook-addon-code-editor
Add storybook-addon-code-editor
in your .storybook/main.ts
file and ensure the staticDirs
, addons
, and framework
fields contain the following:
// .storybook/main.ts
import type { StorybookConfig } from '@storybook/react-vite';
import { getCodeEditorStaticDirs } from 'storybook-addon-code-editor/getStaticDirs';
const config: StorybookConfig = {
staticDirs: [...getCodeEditorStaticDirs(__filename)],
addons: ['storybook-addon-code-editor'],
framework: {
name: '@storybook/react-vite',
options: {},
},
};
export default config;
Important:
@storybook/react-vite
is the only supported framework at this time.
Playground
Use the Playground
component in MDX format.
// MyComponent.stories.mdx
import { Playground } from 'storybook-addon-code-editor'
<Playground code="export default () => <h1>Hello</h1>;" />
Playground
props:
interface PlaygroundProps {
availableImports?: {
[importSpecifier: string]: {
[namedImport: string]: any;
};
};
code?: string;
height?: string;
id?: string | number | symbol;
modifyEditor?: (monaco: Monaco, editor: Monaco.editor.IStandaloneCodeEditor) => any;
}
React
is automatically imported if code
does not import it.
React TypeScript definitions will be automatically loaded if @types/react
is available.
createLiveEditStory
Use the createLiveEditStory
function in traditional stories:
// MyComponent.stories.ts
import type { Meta, StoryObj } from '@storybook/react';
import { createLiveEditStory } from 'storybook-addon-code-editor';
import * as MyLibrary from './index';
import storyCode from './MyStory.source.tsx?raw';
const meta = {
// Story defaults
} satisfies Meta<typeof MyLibrary.MyComponent>;
export default meta;
type Story = StoryObj<typeof meta>;
export const MyStory = createLiveEditStory<Story>({
availableImports: { 'my-library': MyLibrary },
code: storyCode,
});
createLiveEditStory
options:
interface LiveEditStoryOptions {
availableImports?: {
[importSpecifier: string]: {
[namedImport: string]: any;
};
};
code: string;
modifyEditor?: (monaco: Monaco, editor: Monaco.editor.IStandaloneCodeEditor) => any;
// Any other Storybook story options, e.g. `args`, `parameters`, etc..
}
setupMonaco
setupMonaco
allows customization of monaco-editor
.
Use this in your .storybook/preview.ts
to add type definitions or integrations.
Check out examples of monaco-editor
with different configurations.
// .storybook/preview.ts
import { setupMonaco } from 'storybook-addon-code-editor';
setupMonaco({
// https://microsoft.github.io/monaco-editor/typedoc/interfaces/Environment.html
monacoEnvironment: {
getWorker(moduleId, label) {
...
},
},
// onMonacoLoad is called when monaco is first loaded and before an editor instance is created.
onMonacoLoad(monaco) {
...
},
});
setupMonaco
options:
interface MonacoSetup {
monacoEnvironment?: Monaco.Environment;
onMonacoLoad?: (monaco: Monaco) => any;
}
npm install
npm run start:example
When making changes to the library, the server needs to be manually restarted.
npm run test
npm run format
npm run build
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.The automated release-please PR to the main branch can be merged to deploy a release.