diff --git a/packages/builder-vite/input/iframe.html b/packages/builder-vite/input/iframe.html
index 1a198d0b..bcabc10e 100644
--- a/packages/builder-vite/input/iframe.html
+++ b/packages/builder-vite/input/iframe.html
@@ -19,13 +19,6 @@
window.module = undefined;
-
diff --git a/packages/builder-vite/plugins/no-fouc.ts b/packages/builder-vite/plugins/no-fouc.ts
new file mode 100644
index 00000000..6d1e0608
--- /dev/null
+++ b/packages/builder-vite/plugins/no-fouc.ts
@@ -0,0 +1,49 @@
+import type { Plugin } from 'vite';
+
+/**
+ * This plugin is a workaround to inject some styles into the `` of the iframe to
+ * prevent the "no story" text from appearing breifly while the page loads in.
+ *
+ * It can be removed, and these styles placed back into the head,
+ * when https://github.com/vitejs/vite/issues/6737 is closed.
+ */
+export function noFouc(): Plugin {
+ return {
+ name: 'no-fouc',
+ enforce: 'post',
+ async transformIndexHtml(html, ctx) {
+ if (ctx.path !== '/iframe.html') {
+ return;
+ }
+
+ return insertHeadStyles(html);
+ },
+ };
+}
+
+function insertHeadStyles(html: string) {
+ return html.replace(
+ '',
+ `
+
+
+ `.trim()
+ );
+}
diff --git a/packages/builder-vite/vite-config.ts b/packages/builder-vite/vite-config.ts
index 06f61b0d..6e1cbd4c 100644
--- a/packages/builder-vite/vite-config.ts
+++ b/packages/builder-vite/vite-config.ts
@@ -7,6 +7,7 @@ import { mockCoreJs } from './mock-core-js';
import { codeGeneratorPlugin } from './code-generator-plugin';
import { injectExportOrderPlugin } from './inject-export-order-plugin';
import { mdxPlugin } from './mdx-plugin';
+import { noFouc } from './plugins/no-fouc';
import { sourceLoaderPlugin } from './source-loader-plugin';
import type { UserConfig } from 'vite';
@@ -58,6 +59,7 @@ export async function pluginConfig(options: ExtendedOptions, _type: PluginConfig
mockCoreJs(),
sourceLoaderPlugin(),
mdxPlugin(),
+ noFouc(),
injectExportOrderPlugin,
] as Plugin[];
if (framework === 'vue' || framework === 'vue3') {