Newly Pregnant Mom
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.3 • Public • Published

    Addon for integrating to allow drag and drop page building inside storybook.

    Try it live

    Play around with our Storybook embedded editor example refer to our design systems example for lots of examples using your deisgn system + custom components + storybook.



    npm install

    How to use

    Make a free account over at and grab your public API key from your organization page

    Using your components in the editor

    See this design systems example for lots of examples using your deisgn system + custom components + storybook

    👉Tip: want to limit page building to only your components? Try components only mode

    Register a component

    import { Builder } from '';
    class SimpleText extends React.Component {
      render() {
        return <h1>{this.props.text}</h1>;
    Builder.registerComponent(SimpleText, {
      name: 'Simple Text',
      inputs: [{ name: 'text', type: 'string' }],

    in .storybook/preview.js Add builderDecorator as a global decorator for your storybook and pass BuilderComponent as a parameter

    import { addParameters, addDecorator } from '@storybook/react';
    import { BuilderComponent } from '';
    import { builderDecorator } from '';
    // builder-settings is where you configure your builder instance: init with api key, add custom menus ..
    import '../src/builder-settings';
    // add global decorator
    // pass preview component
      builder: {
        component: BuilderComponent,

    Mixed Content errors when hosting on insecure http

    Our embedded editor is on https and it'll try to load your current setup from your localhost, which when served on http will be blocked by the browser, you can fix this by serving storybook on https (ie. start-storybook -p 9009 -s public --https --ssl-cert [path-to.crt] -ssl-key [path-to.key])

    Or As a workaround, on Chrome you can allow insecure content on localhost, by toggling the insecure content option here chrome://settings/content/siteDetails?site=http%3A%2F%2Flocalhost%3A9009

    Learn more




    npm i

    DownloadsWeekly Downloads






    Unpacked Size

    21.7 kB

    Total Files


    Last publish


    • murtaza-haveliwala
    • gustavohgs
    • sanyamkamat
    • shyam-builder
    • manucorporat
    • steve8708
    • samijaber
    • caleb.amsden
    • teleaziz123
    • mrkoreye
    • dkendal
    • mhevery
    • adamdbradley