diff --git a/components/StackBlitzPreview/index.jsx b/components/StackBlitzPreview/index.jsx
new file mode 100644
index 00000000..ae56aa2f
--- /dev/null
+++ b/components/StackBlitzPreview/index.jsx
@@ -0,0 +1,23 @@
+import styles from './index.module.css';
+
+export default function StackBlitzPreview(props = {}) {
+ const {
+ example = '',
+ description = 'Check out this guide live on StackBlitz.',
+ } = props;
+
+ const url = `https://stackblitz.com/github/webpack/webpack.js.org/tree/main/examples/${example}`;
+
+ return (
+
+ );
+}
diff --git a/components/StackBlitzPreview/index.module.css b/components/StackBlitzPreview/index.module.css
new file mode 100644
index 00000000..a8b89c82
--- /dev/null
+++ b/components/StackBlitzPreview/index.module.css
@@ -0,0 +1,43 @@
+@reference "../../styles/index.css";
+
+.preview {
+ @apply px-6
+ py-5
+ my-6
+ bg-neutral-100
+ dark:bg-neutral-900
+ border-l-[3px]
+ border-blue-600
+ dark:border-blue-500
+ text-neutral-900
+ dark:text-neutral-50
+ rounded-r-md;
+}
+
+.previewPrefix {
+ @apply capitalize
+ font-semibold
+ block
+ text-base
+ mt-0
+ mb-2
+ text-neutral-700
+ dark:text-neutral-400;
+}
+
+.preview p {
+ @apply mt-0
+ mb-5;
+}
+
+.preview a {
+ @apply inline-block
+ transition-opacity
+ hover:opacity-80;
+}
+
+.preview img {
+ @apply block
+ w-auto
+ h-auto;
+}
diff --git a/eslint.config.mjs b/eslint.config.mjs
index d8c9f875..7cd6ace1 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -29,6 +29,7 @@ export default [
'out/',
'.cache/',
'webpack/',
+ 'examples/',
'pages/api',
'pages/docs/api',
'pages/docs/loaders',
diff --git a/pages/guides/getting-started/concepts/module-federation.md b/pages/guides/getting-started/concepts/module-federation.md
index 453361f6..8ff39fa9 100644
--- a/pages/guides/getting-started/concepts/module-federation.md
+++ b/pages/guides/getting-started/concepts/module-federation.md
@@ -1,6 +1,7 @@
---
title: Module Federation
authors: sokra,chenxsan,EugeneHlushko,jamesgeorge007,ScriptedAlchemy,snitin315,XiaofengXie16,KyleBastien,Alevale,burhanuday,RexSkz,avivkeller
+mdx: true
---
# Module Federation
@@ -11,7 +12,7 @@ Multiple separate builds should be able to form a single application. These sepa
This is often called Micro-Frontends, but it is not limited to that pattern.
-
+
## Low-level concepts
diff --git a/pages/guides/getting-started/index.md b/pages/guides/getting-started/index.md
index 8938dec5..a7d9cd5e 100644
--- a/pages/guides/getting-started/index.md
+++ b/pages/guides/getting-started/index.md
@@ -1,6 +1,7 @@
---
title: Getting Started
authors: bebraw,varunjayaraman,cntanglijun,chrisVillanueva,johnstew,simon04,aaronang,TheDutchCoder,sudarsangp,Vanguard90,chenxsan,EugeneHlushko,ATGardner,ayvarot,bjarki,ztomasze,Spiral90210,byzyk,wizardofhogwarts,myshov,anshumanv,d3lm,snitin315,Etheryen,zowiebeha,avivkeller,alexander-akait
+mdx: true
---
# Getting Started
@@ -12,7 +13,7 @@ webpack is used to efficiently compile JavaScript modules. Once [installed](/gui
> [!WARNING]
> The examples in this guide use `webpack-cli` 7, which requires Node.js 20.9.0 or later.
-
+
## Quick start (minimal working example)
diff --git a/public/assets/open-in-stackblitz-button.svg b/public/assets/open-in-stackblitz-button.svg
new file mode 100644
index 00000000..d85bc3b2
--- /dev/null
+++ b/public/assets/open-in-stackblitz-button.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/scripts/html/doc-kit.config.mjs b/scripts/html/doc-kit.config.mjs
index 0782bd5a..2c4c48e7 100644
--- a/scripts/html/doc-kit.config.mjs
+++ b/scripts/html/doc-kit.config.mjs
@@ -114,6 +114,10 @@ export default {
'components/HomePage/HomeSponsorSection/index.jsx'
),
'#theme/Sponsors/Board': join(ROOT, 'layouts/Sponsors/Board.jsx'),
+ '#theme/StackBlitzPreview': join(
+ ROOT,
+ 'components/StackBlitzPreview/index.jsx'
+ ),
},
components: {
@@ -124,6 +128,7 @@ export default {
BlogLayout: '#theme/BlogLayout',
Byline: '#theme/Blog/Byline',
MetaBar: '#theme/Metabar',
+ StackBlitzPreview: '#theme/StackBlitzPreview',
},
bundler: createViteBundler({
plugins: [tailwindcss()],