How to Sync Modly with Storybook in Under 10 Minutes

Step 1: Install the Modly Storybook addon

Open your terminal in your Storybook project directory and run the installation command.

npm install @modly/storybook-addon

Step 2: Configure your modly.config.js

Import the addon and configure the sync settings in your Storybook main configuration file.

import { configure } from '@storybook/react';
import { withModly } from '@modly/storybook-addon';

// Configure the addon with your workspace ID
const config = {
  addons: ['@modly/storybook-addon'],
  core: { disableStoryshots: true },
  modly: {
    workspaceId: 'ws_5f8a9b1c2d3e4f6a',
    autoSync: true,
    themes: ['light', 'dark']
  }
};

configure(stories => {
  stories.addStoriesWithAddon(withModly);
}, config);

Step 3: Map tokens to your Storybook theme

Once installed, open Storybook and navigate to the new Modly tab. Select a theme (e.g., "Light") and map your Modly color tokens to Storybook's global CSS variables.

Step 4: Enable auto-publish on merge

Configure a GitHub Actions workflow to automatically publish your Storybook modules to Modly whenever you push to the main branch.

name: Publish to Modly
on:
  push:
    branches: [ main ]

jobs:
  publish:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Install Modly CLI
        run: npm install -g @modly/cli
      - name: Publish Modules
        run: modly publish --repo=modly/my-storybook-app --branch=main

This workflow runs automatically on every successful push, ensuring your documentation is always up to date.

Troubleshooting Common Errors