diff --git a/docs/next.config.ts b/docs/next.config.ts
index e8a43b3562a494..5486f267eb09cc 100644
--- a/docs/next.config.ts
+++ b/docs/next.config.ts
@@ -127,6 +127,7 @@ export default withDocsInfra({
                   {
                     loader: require.resolve('@mui/internal-markdown/loader'),
                     options: {
+                      enableOpenInNewTab: true,
                       workspaceRoot,
                       ignoreLanguagePages: LANGUAGES_IGNORE_PAGES,
                       languagesInProgress: LANGUAGES_IN_PROGRESS,
diff --git a/docs/pages/_document.js b/docs/pages/_document.js
index 4899191841ba80..64e35b3b70aabe 100644
--- a/docs/pages/_document.js
+++ b/docs/pages/_document.js
@@ -170,6 +170,16 @@ export default class MyDocument extends Document {
           <MuiInitColorSchemeScript defaultMode="system" />
           <JoyInitColorSchemeScript defaultMode="system" />
           <Main />
+          <script
+            // Avoid doc page being rendered before the page is hydrated and the demo is rendered
+            // eslint-disable-next-line react/no-danger
+            dangerouslySetInnerHTML={{
+              __html: `
+              if ((new URLSearchParams(window.location.search)).get('scopedDemo')) {
+                document.body.style.visibility = 'hidden';
+              }`,
+            }}
+          />
           <script
             // eslint-disable-next-line react/no-danger
             dangerouslySetInnerHTML={{
diff --git a/docs/src/modules/components/AppFrame.tsx b/docs/src/modules/components/AppFrame.tsx
index 944265133efaa3..e7a411483cd89c 100644
--- a/docs/src/modules/components/AppFrame.tsx
+++ b/docs/src/modules/components/AppFrame.tsx
@@ -23,6 +23,7 @@ import LogoWithCopyMenu from 'docs/src/components/action/LogoWithCopyMenu';
 import AppFrameBanner from 'docs/src/components/banner/AppFrameBanner';
 import { DemoPageThemeProvider } from 'docs/src/theming';
 import { pathnameToLanguage } from 'docs/src/modules/utils/helpers';
+import useScopedDemo from '../utils/useScopedDemo';
 
 const nProgressStart = debounce(() => {
   NProgress.start();
@@ -187,73 +188,82 @@ export default function AppFrame(props: AppFrameProps) {
   const disablePermanent = activePage?.disableDrawer === true || disableDrawer === true;
   const isJoy = canonicalAs.startsWith('/joy-ui/');
 
+  const scopedDemo = useScopedDemo();
+
   return (
     <DemoPageThemeProvider hasJoy={isJoy}>
-      <RootDiv className={className}>
-        <StyledAppBar
-          disablePermanent={disablePermanent}
-          sx={{ minHeight: 'var(--MuiDocs-header-height)' }}
-        >
-          <GlobalStyles
-            styles={{
-              ':root': {
-                '--MuiDocs-header-height': `${HEIGHT}px`,
-              },
-            }}
-          />
-          <Stack direction="row" sx={{ alignItems: 'center', position: 'relative', width: '100%' }}>
-            <NavIconButton
-              edge="start"
-              color="primary"
-              size="small"
-              aria-label={t('appFrame.openDrawer')}
-              disablePermanent={disablePermanent}
-              onClick={() => setMobileOpen(true)}
-              sx={{ ml: '1px' }}
+      {scopedDemo ? (
+        children
+      ) : (
+        <RootDiv className={className}>
+          <StyledAppBar
+            disablePermanent={disablePermanent}
+            sx={{ minHeight: 'var(--MuiDocs-header-height)' }}
+          >
+            <GlobalStyles
+              styles={{
+                ':root': {
+                  '--MuiDocs-header-height': `${HEIGHT}px`,
+                },
+              }}
+            />
+            <Stack
+              direction="row"
+              sx={{ alignItems: 'center', position: 'relative', width: '100%' }}
             >
-              <SvgHamburgerMenu />
-            </NavIconButton>
-            <Box sx={{ display: { xs: 'flex', md: 'flex', lg: 'none' } }}>
-              <LogoWithCopyMenu
-                logo={productIdentifier.logo}
-                logoSvgString={productIdentifier.logoSvg}
-                wordmarkSvgString={productIdentifier.wordmarkSvg}
-                marginLeft
-              />
-            </Box>
-            <Stack direction="row" spacing={1} useFlexGap sx={{ ml: 'auto' }}>
-              <BannerComponent />
-              <DeferredAppSearch />
-              <Tooltip title={t('appFrame.github')} enterDelay={300}>
-                <IconButton
-                  component="a"
-                  color="primary"
-                  size="small"
-                  href={process.env.SOURCE_CODE_REPO}
-                  data-ga-event-category="header"
-                  data-ga-event-action="github"
-                >
-                  <GitHubIcon fontSize="small" />
-                </IconButton>
-              </Tooltip>
-              <Notifications />
-              <Tooltip title={t('appFrame.toggleSettings')} enterDelay={300}>
-                <IconButton color="primary" size="small" onClick={() => setSettingsOpen(true)}>
-                  <SettingsIcon fontSize="small" />
-                </IconButton>
-              </Tooltip>
+              <NavIconButton
+                edge="start"
+                color="primary"
+                size="small"
+                aria-label={t('appFrame.openDrawer')}
+                disablePermanent={disablePermanent}
+                onClick={() => setMobileOpen(true)}
+                sx={{ ml: '1px' }}
+              >
+                <SvgHamburgerMenu />
+              </NavIconButton>
+              <Box sx={{ display: { xs: 'flex', md: 'flex', lg: 'none' } }}>
+                <LogoWithCopyMenu
+                  logo={productIdentifier.logo}
+                  logoSvgString={productIdentifier.logoSvg}
+                  wordmarkSvgString={productIdentifier.wordmarkSvg}
+                  marginLeft
+                />
+              </Box>
+              <Stack direction="row" spacing={1} useFlexGap sx={{ ml: 'auto' }}>
+                <BannerComponent />
+                <DeferredAppSearch />
+                <Tooltip title={t('appFrame.github')} enterDelay={300}>
+                  <IconButton
+                    component="a"
+                    color="primary"
+                    size="small"
+                    href={process.env.SOURCE_CODE_REPO}
+                    data-ga-event-category="header"
+                    data-ga-event-action="github"
+                  >
+                    <GitHubIcon fontSize="small" />
+                  </IconButton>
+                </Tooltip>
+                <Notifications />
+                <Tooltip title={t('appFrame.toggleSettings')} enterDelay={300}>
+                  <IconButton color="primary" size="small" onClick={() => setSettingsOpen(true)}>
+                    <SettingsIcon fontSize="small" />
+                  </IconButton>
+                </Tooltip>
+              </Stack>
             </Stack>
-          </Stack>
-        </StyledAppBar>
-        <StyledAppNavDrawer
-          disablePermanent={disablePermanent}
-          onClose={closeDrawer}
-          onOpen={openDrawer}
-          mobileOpen={mobileOpen}
-        />
-        {children}
-        <AppSettingsDrawer onClose={() => setSettingsOpen(false)} open={settingsOpen} />
-      </RootDiv>
+          </StyledAppBar>
+          <StyledAppNavDrawer
+            disablePermanent={disablePermanent}
+            onClose={closeDrawer}
+            onOpen={openDrawer}
+            mobileOpen={mobileOpen}
+          />
+          {children}
+          <AppSettingsDrawer onClose={() => setSettingsOpen(false)} open={settingsOpen} />
+        </RootDiv>
+      )}
     </DemoPageThemeProvider>
   );
 }
diff --git a/docs/src/modules/components/Demo.js b/docs/src/modules/components/Demo.js
index d2d2e48a3b1080..1fbe16f7b8d093 100644
--- a/docs/src/modules/components/Demo.js
+++ b/docs/src/modules/components/Demo.js
@@ -313,7 +313,7 @@ const selectionOverride = (theme) => ({
 });
 
 export default function Demo(props) {
-  const { demo, demoOptions, disableAd, githubLocation } = props;
+  const { demo, demoOptions, disableAd, githubLocation, enableOpenInNewTab } = props;
 
   if (process.env.NODE_ENV !== 'production') {
     if (demoOptions.hideToolbar === false) {
@@ -552,6 +552,7 @@ export default function Demo(props) {
                   onResetDemoClick={resetDemo}
                   openDemoSource={openDemoSource}
                   showPreview={showPreview}
+                  enableOpenInNewTab={enableOpenInNewTab}
                 />
               </React.Suspense>
             </NoSsr>
@@ -636,5 +637,6 @@ Demo.propTypes = {
    */
   demoOptions: PropTypes.object.isRequired,
   disableAd: PropTypes.bool.isRequired,
+  enableOpenInNewTab: PropTypes.bool,
   githubLocation: PropTypes.string.isRequired,
 };
diff --git a/docs/src/modules/components/DemoToolbar.js b/docs/src/modules/components/DemoToolbar.js
index 4f67cd2d50ce31..d264810f2f345b 100644
--- a/docs/src/modules/components/DemoToolbar.js
+++ b/docs/src/modules/components/DemoToolbar.js
@@ -17,6 +17,7 @@ import Tooltip from '@mui/material/Tooltip';
 import Divider from '@mui/material/Divider';
 import RefreshRoundedIcon from '@mui/icons-material/RefreshRounded';
 import ResetFocusIcon from '@mui/icons-material/CenterFocusWeak';
+import OpenInNewIcon from '@mui/icons-material/OpenInNew';
 import { useRouter } from 'next/router';
 import { CODE_VARIANTS } from 'docs/src/modules/constants';
 import { useSetCodeVariant } from 'docs/src/modules/utils/codeVariant';
@@ -286,6 +287,7 @@ export default function DemoToolbar(props) {
     onResetDemoClick,
     openDemoSource,
     showPreview,
+    enableOpenInNewTab,
   } = props;
 
   const setCodeVariant = useSetCodeVariant();
@@ -520,13 +522,32 @@ export default function DemoToolbar(props) {
               </DemoTooltip>
             </React.Fragment>
           )}
+          {enableOpenInNewTab && (
+            <DemoTooltip title={t('openInNewTab')} placement="bottom">
+              <IconButton
+                data-ga-event-category="demo"
+                data-ga-event-label={demo.gaLabel}
+                data-ga-event-action="openInNewTab"
+                onClick={() => {
+                  const url = new URL(window.location.href);
+                  url.hash = '';
+                  url.searchParams.set('scopedDemo', demoOptions.demo);
+                  window.open(url.toString(), '_blank');
+                }}
+                {...getControlProps(6)}
+                sx={{ borderRadius: 1 }}
+              >
+                <OpenInNewIcon />
+              </IconButton>
+            </DemoTooltip>
+          )}
           <DemoTooltip title={t('copySource')} placement="bottom">
             <IconButton
               data-ga-event-category="demo"
               data-ga-event-label={demo.gaLabel}
               data-ga-event-action="copy"
               onClick={copyButtonOnClick}
-              {...getControlProps(6)}
+              {...getControlProps(7)}
               sx={{ borderRadius: 1 }}
             >
               {copyIcon}
@@ -538,7 +559,7 @@ export default function DemoToolbar(props) {
               data-ga-event-label={demo.gaLabel}
               data-ga-event-action="reset-focus"
               onClick={handleResetFocusClick}
-              {...getControlProps(7)}
+              {...getControlProps(8)}
               sx={{ borderRadius: 1 }}
             >
               <ResetFocusIcon />
@@ -551,7 +572,7 @@ export default function DemoToolbar(props) {
               data-ga-event-label={demo.gaLabel}
               data-ga-event-action="reset"
               onClick={onResetDemoClick}
-              {...getControlProps(8)}
+              {...getControlProps(9)}
               sx={{ borderRadius: 1 }}
             >
               <RefreshRoundedIcon />
@@ -562,7 +583,7 @@ export default function DemoToolbar(props) {
             aria-label={t('seeMore')}
             aria-owns={anchorEl ? 'demo-menu-more' : undefined}
             aria-haspopup="true"
-            {...getControlProps(9)}
+            {...getControlProps(10)}
             sx={{ borderRadius: 1 }}
           >
             <MoreVertIcon />
@@ -634,6 +655,7 @@ DemoToolbar.propTypes = {
   demoName: PropTypes.string.isRequired,
   demoOptions: PropTypes.object.isRequired,
   demoSourceId: PropTypes.string,
+  enableOpenInNewTab: PropTypes.bool,
   hasNonSystemDemos: PropTypes.string,
   initialFocusRef: PropTypes.shape({ current: PropTypes.object }).isRequired,
   onCodeOpenChange: PropTypes.func.isRequired,
diff --git a/docs/src/modules/components/MarkdownDocs.js b/docs/src/modules/components/MarkdownDocs.js
index 8a1b1bffc1c5fc..d25b72bcd63260 100644
--- a/docs/src/modules/components/MarkdownDocs.js
+++ b/docs/src/modules/components/MarkdownDocs.js
@@ -5,6 +5,9 @@ import { Ad, AdGuest } from '@mui/docs/Ad';
 import RichMarkdownElement from 'docs/src/modules/components/RichMarkdownElement';
 import AppLayoutDocs from 'docs/src/modules/components/AppLayoutDocs';
 import { useUserLanguage } from '@mui/docs/i18n';
+import { useRouter } from 'next/router';
+import { DemoPageThemeProvider } from 'docs/src/theming';
+import useScopedDemo from '../utils/useScopedDemo';
 
 export default function MarkdownDocs(props) {
   const {
@@ -14,11 +17,38 @@ export default function MarkdownDocs(props) {
     docs,
     demoComponents,
     srcComponents,
+    enableOpenInNewTab = false,
   } = props;
 
   const userLanguage = useUserLanguage();
   const localizedDoc = docs[userLanguage] || docs.en;
 
+  const router = useRouter();
+  const scopedDemo = useScopedDemo();
+
+  if (scopedDemo) {
+    const canonicalAs = router.asPath || '';
+    const isJoy = canonicalAs.startsWith('/joy-ui/');
+    return (
+      <DemoPageThemeProvider hasJoy={isJoy}>
+        <div style={{ width: '100%', height: '100vh', padding: '4px' }}>
+          <RichMarkdownElement
+            demoComponents={demoComponents}
+            demos={demos}
+            disableAd={disableAd}
+            localizedDoc={localizedDoc}
+            srcComponents={srcComponents}
+            renderedMarkdownOrDemo={{
+              demo: scopedDemo,
+              hideToolbar: true,
+              bg: false,
+            }}
+          />
+        </div>
+      </DemoPageThemeProvider>
+    );
+  }
+
   return (
     <AppLayoutDocs
       cardOptions={{
@@ -46,6 +76,7 @@ export default function MarkdownDocs(props) {
           localizedDoc={localizedDoc}
           renderedMarkdownOrDemo={renderedMarkdownOrDemo}
           srcComponents={srcComponents}
+          enableOpenInNewTab={enableOpenInNewTab}
         />
       ))}
     </AppLayoutDocs>
@@ -58,6 +89,7 @@ MarkdownDocs.propTypes = {
   disableAd: PropTypes.bool,
   disableToc: PropTypes.bool,
   docs: PropTypes.object.isRequired,
+  enableOpenInNewTab: PropTypes.bool,
   srcComponents: PropTypes.object,
 };
 
diff --git a/docs/src/modules/components/MarkdownDocsV2.js b/docs/src/modules/components/MarkdownDocsV2.js
index 87ae6c543b9d45..1da4025c767b48 100644
--- a/docs/src/modules/components/MarkdownDocsV2.js
+++ b/docs/src/modules/components/MarkdownDocsV2.js
@@ -14,6 +14,7 @@ import { HEIGHT as AppFrameHeight } from 'docs/src/modules/components/AppFrame';
 import { HEIGHT as TabsHeight } from 'docs/src/modules/components/ComponentPageTabs';
 import { getPropsToC } from 'docs/src/modules/components/ApiPage/sections/PropertiesSection';
 import { getClassesToC } from 'docs/src/modules/components/ApiPage/sections/ClassesSection';
+import useScopedDemo from '../utils/useScopedDemo';
 
 function getHookTranslatedHeader(t, header) {
   const translations = {
@@ -51,6 +52,7 @@ export default function MarkdownDocsV2(props) {
     componentsApiPageContents,
     hooksApiDescriptions,
     hooksApiPageContents,
+    enableOpenInNewTab = false,
   } = props;
 
   const userLanguage = useUserLanguage();
@@ -185,6 +187,7 @@ export default function MarkdownDocsV2(props) {
         localizedDoc={localizedDoc}
         renderedMarkdownOrDemo={renderedMarkdownOrDemo}
         srcComponents={srcComponents}
+        enableOpenInNewTab={enableOpenInNewTab}
       />,
     );
     i += 1;
@@ -211,6 +214,28 @@ export default function MarkdownDocsV2(props) {
     return false;
   });
 
+  const scopedDemo = useScopedDemo();
+
+  if (scopedDemo) {
+    return (
+      <div style={{ width: '100%', height: '100vh', padding: '4px' }}>
+        <RichMarkdownElement
+          activeTab={activeTab}
+          demoComponents={demoComponents}
+          demos={demos}
+          disableAd={disableAd}
+          localizedDoc={localizedDoc}
+          srcComponents={srcComponents}
+          renderedMarkdownOrDemo={{
+            demo: scopedDemo,
+            hideToolbar: true,
+            bg: false,
+          }}
+        />
+      </div>
+    );
+  }
+
   return (
     <AppLayoutDocs
       cardOptions={{
@@ -252,6 +277,7 @@ export default function MarkdownDocsV2(props) {
                 localizedDoc={localizedDoc}
                 renderedMarkdownOrDemo={renderedMarkdownOrDemo}
                 srcComponents={srcComponents}
+                enableOpenInNewTab={enableOpenInNewTab}
               />
             ))}
         {activeTab === 'components-api' && (
@@ -279,6 +305,7 @@ MarkdownDocsV2.propTypes = {
   disableAd: PropTypes.bool,
   disableToc: PropTypes.bool,
   docs: PropTypes.object.isRequired,
+  enableOpenInNewTab: PropTypes.bool,
   hooksApiDescriptions: PropTypes.object,
   hooksApiPageContents: PropTypes.object,
   srcComponents: PropTypes.object,
diff --git a/docs/src/modules/components/RichMarkdownElement.js b/docs/src/modules/components/RichMarkdownElement.js
index c07eccf2384749..61724f66bebca9 100644
--- a/docs/src/modules/components/RichMarkdownElement.js
+++ b/docs/src/modules/components/RichMarkdownElement.js
@@ -20,6 +20,7 @@ export default function RichMarkdownElement(props) {
     localizedDoc,
     renderedMarkdownOrDemo,
     srcComponents,
+    enableOpenInNewTab,
   } = props;
   const userLanguage = useUserLanguage();
   const t = useTranslate();
@@ -115,6 +116,7 @@ export default function RichMarkdownElement(props) {
       disableAd={disableAd}
       demoOptions={renderedMarkdownOrDemo}
       githubLocation={`${process.env.SOURCE_CODE_REPO}/blob/v${process.env.LIB_VERSION}${fileNameWithLocation}`}
+      enableOpenInNewTab={enableOpenInNewTab}
     />
   );
 }
@@ -124,6 +126,7 @@ RichMarkdownElement.propTypes = {
   demoComponents: PropTypes.any,
   demos: PropTypes.any,
   disableAd: PropTypes.bool,
+  enableOpenInNewTab: PropTypes.bool,
   localizedDoc: PropTypes.any,
   renderedMarkdownOrDemo: PropTypes.oneOfType([
     PropTypes.string,
diff --git a/docs/src/modules/utils/useScopedDemo.ts b/docs/src/modules/utils/useScopedDemo.ts
new file mode 100644
index 00000000000000..d6d7a2771d5563
--- /dev/null
+++ b/docs/src/modules/utils/useScopedDemo.ts
@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { useRouter } from 'next/router';
+
+const isBrowser = typeof window !== 'undefined';
+
+export default function useScopedDemo() {
+  const router = useRouter();
+
+  return React.useMemo(() => {
+    const queryParam = router.query.scopedDemo;
+
+    let scopedDemo = Array.isArray(queryParam) ? undefined : queryParam;
+
+    if (scopedDemo === undefined && isBrowser) {
+      // In production, the next router query params are `undefined` on the first render
+      // Fall back to window.location to get query params ASAP
+      scopedDemo = new URLSearchParams(window.location.search).get('scopedDemo') ?? undefined;
+    }
+
+    if (scopedDemo && isBrowser) {
+      // Undo the document.body.style.visibility = 'hidden'; in _document.js
+      document.body.style.visibility = 'initial';
+    }
+
+    return scopedDemo;
+  }, [router.query.scopedDemo]);
+}
diff --git a/packages/markdown/loader.mjs b/packages/markdown/loader.mjs
index 72b489d32da79f..12d2a9c320070b 100644
--- a/packages/markdown/loader.mjs
+++ b/packages/markdown/loader.mjs
@@ -633,6 +633,8 @@ ${Array.from(componentModuleIDs)
   })
   .join('\n')}
 };
+
+export const enableOpenInNewTab = ${options.enableOpenInNewTab || false};
 `;
 
   return transformed;
diff --git a/packages/mui-docs/src/translations/translations.json b/packages/mui-docs/src/translations/translations.json
index b59f7a6c77dfda..8d5be607cd91b1 100644
--- a/packages/mui-docs/src/translations/translations.json
+++ b/packages/mui-docs/src/translations/translations.json
@@ -150,6 +150,7 @@
   "mainNavigation": "documentation",
   "newest": "Newest",
   "openDrawer": "Open documentation navigation",
+  "openInNewTab": "Open in new tab",
   "or": "or",
   "pageTOC": "Page table of contents",
   "praise": "Praise for MUI",