insert managerHead styles after emotion styles

[meeshan-dev]

@dosu, managerHead <style>....</style> styles inserted before emotion styles, but i want my styles to

[dosubot[bot]]

Storybook doesn't provide a built-in way to guarantee that managerHead styles are inserted after Emotion styles. This is because managerHead content is processed during the initial HTML generation, while Emotion injects its styles dynamically at runtime, usually after the static head content is in place (docs).

If you need your styles to override Emotion, you can try a workaround: inject a script via managerHead that waits for Emotion's styles to appear, then moves your style tag after them using JavaScript (for example, with a MutationObserver). If you want a code snippet for this, let me know your Storybook version and I can help tailor it.

To reply, just mention @dosu.

---

Docs are dead. Just use Dosu.

[dosubot[bot]]

This happens because Storybook copies your static assets (like favicon and fonts) from your configured staticDirs (such as /public) into the root of storybook-static, and also copies its own internal assets (including fonts and a default favicon) into the sb-common-assets directory for use by the manager UI. The manager UI specifically loads fonts from sb-common-assets, while the favicon is referenced from the root. So, if you have your own favicon or fonts, you'll see them in both places after build—once from your static assets, and once from Storybook's internal assets. This duplication is expected and required for Storybook's asset resolution logic (source, template.ejs, defaultStaticDirs).

If you have a specific issue with this duplication (like conflicts or unwanted files), let me know your use case.

To reply, just mention @dosu.

---

Share context across your team and agents. Try Dosu.

[meeshan-dev]

@dosu, how to custom fonts?

[dosubot[bot]]

To use custom fonts in Storybook, you have a few options:

1. Add your font files (e.g., .woff2, .ttf) to your static assets directory (like public/fonts) and make sure it's included in your staticDirs config. You can also use a CDN URL for fonts.

2. Reference your font in CSS using @font-face. For the preview iframe, add your CSS to .storybook/preview-head.html. For the manager UI, use .storybook/manager-head.html. Example:

<!-- .storybook/preview-head.html or .storybook/manager-head.html -->
<style>
@font-face {
  font-family: 'MyCustomFont';
  src: url('/fonts/my-custom-font.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
html, body {
  font-family: 'MyCustomFont', sans-serif;
}
</style>

If using a CDN (like Google Fonts), you can add a <link> tag instead.

3. For the manager UI, you can also create a custom theme in .storybook/YourTheme.js using the create() function from @storybook/theming and set the font and text variables, then apply it in .storybook/manager.js with addons.setConfig({ theme: YourTheme }) (docs).

Caveats:

• Storybook may copy your font files to both the root of storybook-static and sb-common-assets during build.
• CSS in manager-head.html may be overridden by Emotion/styled-components, so use high specificity if needed.
• Storybook's internal HTML structure can change, so test after upgrades.

If you run into issues with fonts not loading, check the file paths and make sure your static assets are being copied as expected.

To reply, just mention @dosu.

---

Docs are dead. Just use Dosu.

[meeshan-dev]

@dosu, this is main.ts, sb still copy /public files in storybook-static

import { defineMain } from '@storybook/react-vite/node';

export default defineMain({
  stories: ['../app/**/*.stories.@(ts|tsx)'],
  addons: ['@storybook/addon-themes'],
  framework: {
    name: '@storybook/react-vite',
    options: {
      builder: {
        viteConfigPath: './storybook-vite.config.ts',
      },
    },
  },
  staticDirs: [],
  managerHead: (head) => `${head} 
  <style>
    body, 
    #storybook-preview-wrapper, 
    #storybook-preview-iframe {
      background: #000000;
    }
  </style>
  `,
});

[dosubot[bot]]

Setting staticDirs: [] in main.ts should fully prevent Storybook from copying /public or any static assets into storybook-static for all frameworks, including @storybook/react-vite (docs). If /public is still being copied, it's likely caused by something outside Storybook's config—like another Storybook config file (main.js, main.cjs), a Vite plugin, or a custom script.

Please check for:

• Any other Storybook config files in your project (main.js, main.cjs, etc).
• Vite plugins or vite.config.* that might copy /public.
• Custom npm scripts, post-build steps, or CI/CD actions that might copy /public.
• Stale files in storybook-static from previous builds (try deleting and rebuilding).

If none of these apply, please share a minimal reproduction or more details about your project structure and build process so we can dig deeper.

To reply, just mention @dosu.

---

Docs are dead. Just use Dosu.

[meeshan-dev]

@dosu, in manager.ts, i can change preview color,

import { addons } from 'storybook/manager-api';
import { create } from 'storybook/theming';

const theme = create({
  base: 'dark',
  fontBase: "'Noto Sans Variable', sans-serif",
  appPreviewBg: '#555555',
});

addons.setConfig({
  theme,
});

how can i change loader bg in iframe preview

[dosubot[bot]]

The loader background in the preview iframe is controlled by the .sb-preparing-story and .sb-preparing-docs CSS classes, not by the theming API or anything in manager.ts. To change it, add this to your .storybook/preview-head.html:

<style>
  .sb-preparing-story,
  .sb-preparing-docs {
    background-color: #181818 !important; /* or any color you want */
  }
</style>

This will set the loader overlay to your desired color before your stories render. The theme config in manager.ts only affects the manager UI, not the preview iframe or its loader background.
More details: see the default loader CSS here.

To reply, just mention @dosu.

---

Docs are dead. Just use Dosu.

[meeshan-dev]

@dosu, storybook theme addon delayes 3secs adding dark class on html i want to read globals theme:dark and want to apply dark immediatly on load

[dosubot[bot]]

The delay happens because the theme addon and its decorators only run after Storybook loads and hydrates, so the dark class is applied late. To set the dark class on the preview iframe’s as soon as possible, add a custom decorator in .storybook/preview.ts:

import type { Preview } from "@storybook/nextjs-vite";

const preview: Preview = {
  decorators: [
    (storyFn, context) => {
      const theme = context.globals.theme ?? context.globals.backgrounds?.value ?? "";
      if (theme === "dark") {
        document.documentElement.classList.add("dark");
      } else {
        document.documentElement.classList.remove("dark");
      }
      return storyFn();
    },
  ],
};

export default preview;

This applies the class as soon as globals are available, minimizing the white flash (example).

For the manager UI, there’s no way to set the class before JS runs, but you can inject a script in managerHead that waits for window['theme'] and adds the class:

managerHead: (head) => `${head}
<script>
  (function() {
    function applyTheme() {
      if (window['theme'] === 'dark') {
        document.documentElement.classList.add('dark');
      }
    }
    if ('theme' in window) {
      applyTheme();
    } else {
      document.addEventListener('DOMContentLoaded', applyTheme);
    }
  })();
</script>
`

This won’t eliminate the flash entirely, but it applies the class as early as possible. There’s no built-in way to server-render the class or guarantee it before hydration (details).

If you need both preview and manager UI perfectly in sync, you’ll need to coordinate globals and custom scripts, but some flash may remain due to Storybook’s architecture.

To reply, just mention @dosu.

---

Share context across your team and agents. Try Dosu.

[meeshan-dev]

@dosu, how can i render storybook servside

[dosubot[bot]]

Storybook supports server-side rendering (SSR) via the @storybook/server renderer, called "Storybook for Server". This lets you develop and preview UI components rendered by your backend server, not just in the browser.

To use it:

1. Initialize with:

   npx storybook@latest init -t server
   

2. In .storybook/preview.js, set your backend endpoint:

   export const parameters = {
     server: {
       url: 'http://localhost:YOUR_PORT/storybook_preview',
     },
   };

3. Write stories as JSON (or YAML) files describing your components and the server route that returns their HTML. Example:

   {
     "title": "Button",
     "stories": [
       {
         "name": "Primary",
         "parameters": {
           "server": { "id": "button/primary" }
         }
       }
     ]
   }

4. In .storybook/main.js, point stories to your JSON files:

   export default {
     stories: ['../stories/**/*.stories.json'],
   };

5. When you view a story, Storybook fetches the HTML from your server at ${parameters.server.url}/{parameters.server.id} and displays it in the preview. You can pass args/params as query params for dynamic rendering.

Limitations: Some addons that require client-side JS may not work. Theming and HTML class manipulation (like adding a dark class) still happen after the initial HTML loads, so you may see similar timing issues as with client-side Storybook.

Docs and code:

• Storybook for Server README
• Server renderer code

Let me know if you want a minimal example or have a specific SSR use case.

To reply, just mention @dosu.

---

Docs are dead. Just use Dosu.