storybook-addon-run-script

This storybook addon can be helpful to run a script inside your preview window by appending a script tag with your script content.

Addon Support Table

React	React Native	Vue	Angular	Polymer	Mithril	HTML	Marko	Svelte	Riot	Ember	Preact
						+

Getting started

First, install the addon.

> npm i storybook-addon-run-script -D
OR
> yarn add storybook-addon-run-script --dev

Usage

example for HTML with component:

import { storiesOf } from '@storybook/html';
import { withRunScript } from 'storybook-addon-run-script/html';
 
import Component from './component.html';
 
const runScript = `console.log('Hello World');`;
 
storiesOf('MyComponent', module)
  .addDecorator(withRunScript(runScript))
  .add('default', () => Component);
 

Tips

You may find it helpful to import a js file as a string to allow you to write JS code with IDE support. You can configure the Webpack config, read more in the docs.

Sample webpack.config.js config:

module.exports = async ({ config, mode }) => {
 
  config.module.rules.push({
    test: /\.runscript.js$/i,
    use: 'raw-loader',
  });
 
  // Return the altered config
  return config;
};

You may need to install raw-loader

> npm i raw-loader -D
OR
> yarn add raw-loader --dev

You may then use it as so:

import { storiesOf } from '@storybook/html';
import { withRunScript } from 'storybook-addon-run-script/html';
 
import Component from './component.html';
// The following imported file will be imported as a string
import runScript from './component.runscript.js';
 
storiesOf('MyComponent', module)
  .addDecorator(withRunScript(runScript))
  .add('default', () => Component);
 

Roadmap

• Support more libraries
• Add Tests
• Add CI