storybook-addon-code-editor
A Storybook add-on for live editing stories. Supports React and TypeScript.
npm install storybook-addon-code-editor
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.
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!:
, orfix!:
,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.