From 6bdcecd13554cdcb804155f04f3d0eaa96874d72 Mon Sep 17 00:00:00 2001
From: Pedro Ferreira <10789765+apedroferreira@users.noreply.github.com>
Date: Fri, 18 Apr 2025 20:32:08 +0100
Subject: [PATCH 01/11] Fix theme switcher in single demo as example

---
 .../dashboard-layout/DashboardLayoutBasic.js  | 38 ++++++++++++-------
 .../dashboard-layout/DashboardLayoutBasic.tsx | 38 ++++++++++++-------
 .../DashboardLayoutPattern.js                 |  4 +-
 .../DashboardLayoutPattern.tsx                |  4 +-
 .../src/AppProvider/AppProvider.tsx           |  4 +-
 .../src/AppProvider/AppThemeProvider.tsx      |  6 +--
 6 files changed, 57 insertions(+), 37 deletions(-)

diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBasic.js b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBasic.js
index e403954223a..613500d7b11 100644
--- a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBasic.js
+++ b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBasic.js
@@ -8,6 +8,8 @@ import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';
 import BarChartIcon from '@mui/icons-material/BarChart';
 import DescriptionIcon from '@mui/icons-material/Description';
 import LayersIcon from '@mui/icons-material/Layers';
+import createCache from '@emotion/cache';
+import { CacheProvider } from '@emotion/react';
 import { AppProvider } from '@toolpad/core/AppProvider';
 import { DashboardLayout } from '@toolpad/core/DashboardLayout';
 import { useDemoRouter } from '@toolpad/core/internal';
@@ -99,22 +101,32 @@ function DashboardLayoutBasic(props) {
 
   const router = useDemoRouter('/dashboard');
 
-  // Remove this const when copying and pasting into your project.
+  // Remove these variables when copying and pasting into your project.
   const demoWindow = window !== undefined ? window() : undefined;
+  const demoEmotionCache = React.useMemo(
+    () =>
+      createCache({
+        key: 'toolpad-demo-app',
+        container: demoWindow?.document.head,
+      }),
+    [demoWindow?.document.head],
+  );
 
   return (
-    // preview-start
-    <AppProvider
-      navigation={NAVIGATION}
-      router={router}
-      theme={demoTheme}
-      window={demoWindow}
-    >
-      <DashboardLayout>
-        <DemoPageContent pathname={router.pathname} />
-      </DashboardLayout>
-    </AppProvider>
-    // preview-end
+    <CacheProvider value={demoEmotionCache}>
+      {/* preview-start */}
+      <AppProvider
+        navigation={NAVIGATION}
+        router={router}
+        theme={demoTheme}
+        window={demoWindow}
+      >
+        <DashboardLayout>
+          <DemoPageContent pathname={router.pathname} />
+        </DashboardLayout>
+      </AppProvider>
+      {/* preview-end */}
+    </CacheProvider>
   );
 }
 
diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBasic.tsx b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBasic.tsx
index b8ec5f9b01d..885c69f72ff 100644
--- a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBasic.tsx
+++ b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBasic.tsx
@@ -7,6 +7,8 @@ import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';
 import BarChartIcon from '@mui/icons-material/BarChart';
 import DescriptionIcon from '@mui/icons-material/Description';
 import LayersIcon from '@mui/icons-material/Layers';
+import createCache from '@emotion/cache';
+import { CacheProvider } from '@emotion/react';
 import { AppProvider, type Navigation } from '@toolpad/core/AppProvider';
 import { DashboardLayout } from '@toolpad/core/DashboardLayout';
 import { useDemoRouter } from '@toolpad/core/internal';
@@ -102,21 +104,31 @@ export default function DashboardLayoutBasic(props: DemoProps) {
 
   const router = useDemoRouter('/dashboard');
 
-  // Remove this const when copying and pasting into your project.
+  // Remove these variables when copying and pasting into your project.
   const demoWindow = window !== undefined ? window() : undefined;
+  const demoEmotionCache = React.useMemo(
+    () =>
+      createCache({
+        key: 'toolpad-demo-app',
+        container: demoWindow?.document.head,
+      }),
+    [demoWindow?.document.head],
+  );
 
   return (
-    // preview-start
-    <AppProvider
-      navigation={NAVIGATION}
-      router={router}
-      theme={demoTheme}
-      window={demoWindow}
-    >
-      <DashboardLayout>
-        <DemoPageContent pathname={router.pathname} />
-      </DashboardLayout>
-    </AppProvider>
-    // preview-end
+    <CacheProvider value={demoEmotionCache}>
+      {/* preview-start */}
+      <AppProvider
+        navigation={NAVIGATION}
+        router={router}
+        theme={demoTheme}
+        window={demoWindow}
+      >
+        <DashboardLayout>
+          <DemoPageContent pathname={router.pathname} />
+        </DashboardLayout>
+      </AppProvider>
+      {/* preview-end */}
+    </CacheProvider>
   );
 }
diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutPattern.js b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutPattern.js
index 83912016e33..cee334b8a9d 100644
--- a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutPattern.js
+++ b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutPattern.js
@@ -38,9 +38,7 @@ function DemoPageContent({ pathname, navigate }) {
         textAlign: 'center',
       }}
     >
-      <Typography>
-        <p>Dashboard content for {pathname}</p>
-      </Typography>
+      <Typography>Dashboard content for {pathname}</Typography>
       {pathname.startsWith('/orders') ? (
         <Stack direction="row" spacing={1} sx={{ pt: 1 }}>
           <Button
diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutPattern.tsx b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutPattern.tsx
index f504068d096..a8c0adb29b6 100644
--- a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutPattern.tsx
+++ b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutPattern.tsx
@@ -43,9 +43,7 @@ function DemoPageContent({
         textAlign: 'center',
       }}
     >
-      <Typography>
-        <p>Dashboard content for {pathname}</p>
-      </Typography>
+      <Typography>Dashboard content for {pathname}</Typography>
       {pathname.startsWith('/orders') ? (
         <Stack direction="row" spacing={1} sx={{ pt: 1 }}>
           <Button
diff --git a/packages/toolpad-core/src/AppProvider/AppProvider.tsx b/packages/toolpad-core/src/AppProvider/AppProvider.tsx
index e4c167707d0..f3dd9c9fe2c 100644
--- a/packages/toolpad-core/src/AppProvider/AppProvider.tsx
+++ b/packages/toolpad-core/src/AppProvider/AppProvider.tsx
@@ -11,7 +11,7 @@ import {
   WindowContext,
 } from '../shared/context';
 import type { LinkProps } from '../shared/Link';
-import { AppThemeProvider } from './AppThemeProvider';
+import { AppThemeProvider, COLOR_SCHEME_ATTRIBUTE } from './AppThemeProvider';
 import { LocalizationProvider, type LocaleText } from './LocalizationProvider';
 
 export interface NavigateOptions {
@@ -131,7 +131,7 @@ export interface AppProviderProps {
 function createTheme(): Theme {
   return createMuiTheme({
     cssVariables: {
-      colorSchemeSelector: 'data-toolpad-color-scheme',
+      colorSchemeSelector: COLOR_SCHEME_ATTRIBUTE,
     },
     colorSchemes: { dark: true },
   });
diff --git a/packages/toolpad-core/src/AppProvider/AppThemeProvider.tsx b/packages/toolpad-core/src/AppProvider/AppThemeProvider.tsx
index 444fcb889d1..d072e5d65ef 100644
--- a/packages/toolpad-core/src/AppProvider/AppThemeProvider.tsx
+++ b/packages/toolpad-core/src/AppProvider/AppThemeProvider.tsx
@@ -8,9 +8,9 @@ import { useLocalStorageState } from '../useLocalStorageState';
 import { PaletteModeContext } from '../shared/context';
 import type { AppTheme } from './AppProvider';
 
-const COLOR_SCHEME_ATTRIBUTE = 'data-toolpad-color-scheme';
-const COLOR_SCHEME_STORAGE_KEY = 'toolpad-color-scheme';
-const MODE_STORAGE_KEY = 'toolpad-mode';
+export const COLOR_SCHEME_ATTRIBUTE = 'data-toolpad-color-scheme';
+export const COLOR_SCHEME_STORAGE_KEY = 'toolpad-color-scheme';
+export const MODE_STORAGE_KEY = 'toolpad-mode';
 
 function usePreferredMode(window?: Window) {
   const prefersDarkMode = useMediaQuery(

From aff527b8ed8cbdd8b173212f9aff83c7e5cecf39 Mon Sep 17 00:00:00 2001
From: Pedro Ferreira <10789765+apedroferreira@users.noreply.github.com>
Date: Mon, 21 Apr 2025 12:16:46 +0100
Subject: [PATCH 02/11] Change every demo with the help of my AI assistant

---
 .../app-provider/AppProviderBasic.tsx         | 29 +++---
 .../app-provider/AppProviderTheme.tsx         | 29 +++---
 .../core/components/crud/CrudAdvanced.tsx     | 91 ++++++++++---------
 .../core/components/crud/CrudBasic.tsx        | 45 ++++-----
 .../core/components/crud/CrudCreate.tsx       | 45 ++++-----
 .../toolpad/core/components/crud/CrudEdit.tsx | 43 +++++----
 .../toolpad/core/components/crud/CrudList.tsx | 49 +++++-----
 .../core/components/crud/CrudListDataGrid.tsx | 57 ++++++------
 .../core/components/crud/CrudNoCache.tsx      | 45 ++++-----
 .../toolpad/core/components/crud/CrudShow.tsx | 45 ++++-----
 .../DashboardLayoutAccount.tsx                | 33 ++++---
 .../DashboardLayoutAccountSidebar.tsx         | 30 +++---
 .../dashboard-layout/DashboardLayoutBasic.tsx | 19 +---
 .../DashboardLayoutBranding.tsx               | 39 ++++----
 .../DashboardLayoutCustomThemeSwitcher.tsx    | 31 ++++---
 .../DashboardLayoutFullScreen.tsx             | 37 ++++----
 .../DashboardLayoutNavigationActions.tsx      | 57 ++++++------
 .../DashboardLayoutNavigationDividers.tsx     | 53 ++++++-----
 .../DashboardLayoutNavigationHeadings.tsx     | 67 +++++++-------
 .../DashboardLayoutNavigationLinks.tsx        | 51 ++++++-----
 .../DashboardLayoutNavigationNested.tsx       | 65 ++++++-------
 .../DashboardLayoutNoMiniSidebar.tsx          | 27 +++---
 .../DashboardLayoutPattern.tsx                | 53 ++++++-----
 .../DashboardLayoutSidebarCollapsed.tsx       | 24 +++--
 .../DashboardLayoutSidebarHidden.tsx          | 15 +--
 .../dashboard-layout/DashboardLayoutSlots.tsx | 35 +++----
 .../PageContainerFullScreen.tsx               | 41 +++++----
 .../toolpad/core/integrations/ReactRouter.tsx | 20 ++--
 .../core/introduction/Introduction.tsx        | 33 ++++---
 .../core/introduction/TutorialDefault.tsx     | 25 ++---
 .../core/introduction/TutorialPages.tsx       | 25 ++---
 .../toolpad/core/react-sign-in-page/index.js  |  7 +-
 packages/toolpad-core/package.json            |  4 +
 packages/toolpad-core/src/internal/context.ts |  4 -
 packages/toolpad-core/src/internal/demo.tsx   | 24 +++++
 packages/toolpad-core/src/internal/index.tsx  |  1 -
 pnpm-lock.yaml                                | 14 ++-
 37 files changed, 711 insertions(+), 601 deletions(-)
 delete mode 100644 packages/toolpad-core/src/internal/context.ts

diff --git a/docs/data/toolpad/core/components/app-provider/AppProviderBasic.tsx b/docs/data/toolpad/core/components/app-provider/AppProviderBasic.tsx
index 6d8fb9b3a5f..4a400a3b988 100644
--- a/docs/data/toolpad/core/components/app-provider/AppProviderBasic.tsx
+++ b/docs/data/toolpad/core/components/app-provider/AppProviderBasic.tsx
@@ -6,7 +6,7 @@ import DashboardIcon from '@mui/icons-material/Dashboard';
 import TimelineIcon from '@mui/icons-material/Timeline';
 import { AppProvider, type Navigation } from '@toolpad/core/AppProvider';
 import { DashboardLayout } from '@toolpad/core/DashboardLayout';
-import { useDemoRouter } from '@toolpad/core/internal';
+import { DemoProvider, useDemoRouter } from '@toolpad/core/internal';
 
 const NAVIGATION: Navigation = [
   {
@@ -74,17 +74,20 @@ export default function AppProviderBasic(props: DemoProps) {
   const demoWindow = window !== undefined ? window() : undefined;
 
   return (
-    // preview-start
-    <AppProvider
-      navigation={NAVIGATION}
-      router={router}
-      theme={demoTheme}
-      window={demoWindow}
-    >
-      <DashboardLayout>
-        <DemoPageContent pathname={router.pathname} />
-      </DashboardLayout>
-    </AppProvider>
-    // preview-end
+    // Remove this provider when copying and pasting into your project.
+    <DemoProvider window={demoWindow}>
+      {/* preview-start */}
+      <AppProvider
+        navigation={NAVIGATION}
+        router={router}
+        theme={demoTheme}
+        window={demoWindow}
+      >
+        <DashboardLayout>
+          <DemoPageContent pathname={router.pathname} />
+        </DashboardLayout>
+      </AppProvider>
+      {/* preview-end */}
+    </DemoProvider>
   );
 }
diff --git a/docs/data/toolpad/core/components/app-provider/AppProviderTheme.tsx b/docs/data/toolpad/core/components/app-provider/AppProviderTheme.tsx
index d6a772be78c..5548ee39d9d 100644
--- a/docs/data/toolpad/core/components/app-provider/AppProviderTheme.tsx
+++ b/docs/data/toolpad/core/components/app-provider/AppProviderTheme.tsx
@@ -6,7 +6,7 @@ import DashboardIcon from '@mui/icons-material/Dashboard';
 import TimelineIcon from '@mui/icons-material/Timeline';
 import { AppProvider, type Navigation } from '@toolpad/core/AppProvider';
 import { DashboardLayout } from '@toolpad/core/DashboardLayout';
-import { useDemoRouter } from '@toolpad/core/internal';
+import { DemoProvider, useDemoRouter } from '@toolpad/core/internal';
 
 const NAVIGATION: Navigation = [
   {
@@ -91,17 +91,20 @@ export default function AppProviderTheme(props: DemoProps) {
   const demoWindow = window !== undefined ? window() : undefined;
 
   return (
-    // preview-start
-    <AppProvider
-      navigation={NAVIGATION}
-      router={router}
-      theme={customTheme}
-      window={demoWindow}
-    >
-      <DashboardLayout>
-        <DemoPageContent pathname={router.pathname} />
-      </DashboardLayout>
-    </AppProvider>
-    // preview-end
+    // Remove this provider when copying and pasting into your project.
+    <DemoProvider window={demoWindow}>
+      {/* preview-start */}
+      <AppProvider
+        navigation={NAVIGATION}
+        router={router}
+        theme={customTheme}
+        window={demoWindow}
+      >
+        <DashboardLayout>
+          <DemoPageContent pathname={router.pathname} />
+        </DashboardLayout>
+      </AppProvider>
+      {/* preview-end */}
+    </DemoProvider>
   );
 }
diff --git a/docs/data/toolpad/core/components/crud/CrudAdvanced.tsx b/docs/data/toolpad/core/components/crud/CrudAdvanced.tsx
index cee3b21d0e2..1de9755f0d0 100644
--- a/docs/data/toolpad/core/components/crud/CrudAdvanced.tsx
+++ b/docs/data/toolpad/core/components/crud/CrudAdvanced.tsx
@@ -14,7 +14,7 @@ import {
   List,
   Show,
 } from '@toolpad/core/Crud';
-import { useDemoRouter } from '@toolpad/core/internal';
+import { DemoProvider, useDemoRouter } from '@toolpad/core/internal';
 
 const NAVIGATION: Navigation = [
   {
@@ -294,48 +294,51 @@ export default function CrudAdvanced(props: DemoProps) {
   const editNoteId = matchPath(editPath, router.pathname);
 
   return (
-    <AppProvider
-      navigation={NAVIGATION}
-      router={router}
-      theme={demoTheme}
-      window={demoWindow}
-    >
-      <DashboardLayout defaultSidebarCollapsed>
-        <PageContainer title={title}>
-          {/* preview-start */}
-          <CrudProvider<Note>
-            dataSource={notesDataSource}
-            dataSourceCache={notesCache}
-          >
-            {router.pathname === listPath ? (
-              <List<Note>
-                initialPageSize={10}
-                onRowClick={handleRowClick}
-                onCreateClick={handleCreateClick}
-                onEditClick={handleEditClick}
-              />
-            ) : null}
-            {router.pathname === createPath ? (
-              <Create<Note>
-                initialValues={{ title: 'New note' }}
-                onSubmitSuccess={handleCreate}
-                resetOnSubmit={false}
-              />
-            ) : null}
-            {router.pathname !== createPath && showNoteId ? (
-              <Show<Note>
-                id={showNoteId}
-                onEditClick={handleEditClick}
-                onDelete={handleDelete}
-              />
-            ) : null}
-            {editNoteId ? (
-              <Edit<Note> id={editNoteId} onSubmitSuccess={handleEdit} />
-            ) : null}
-          </CrudProvider>
-          {/* preview-end */}
-        </PageContainer>
-      </DashboardLayout>
-    </AppProvider>
+    // Remove this provider when copying and pasting into your project.
+    <DemoProvider window={demoWindow}>
+      <AppProvider
+        navigation={NAVIGATION}
+        router={router}
+        theme={demoTheme}
+        window={demoWindow}
+      >
+        <DashboardLayout defaultSidebarCollapsed>
+          <PageContainer title={title}>
+            {/* preview-start */}
+            <CrudProvider<Note>
+              dataSource={notesDataSource}
+              dataSourceCache={notesCache}
+            >
+              {router.pathname === listPath ? (
+                <List<Note>
+                  initialPageSize={10}
+                  onRowClick={handleRowClick}
+                  onCreateClick={handleCreateClick}
+                  onEditClick={handleEditClick}
+                />
+              ) : null}
+              {router.pathname === createPath ? (
+                <Create<Note>
+                  initialValues={{ title: 'New note' }}
+                  onSubmitSuccess={handleCreate}
+                  resetOnSubmit={false}
+                />
+              ) : null}
+              {router.pathname !== createPath && showNoteId ? (
+                <Show<Note>
+                  id={showNoteId}
+                  onEditClick={handleEditClick}
+                  onDelete={handleDelete}
+                />
+              ) : null}
+              {editNoteId ? (
+                <Edit<Note> id={editNoteId} onSubmitSuccess={handleEdit} />
+              ) : null}
+            </CrudProvider>
+            {/* preview-end */}
+          </PageContainer>
+        </DashboardLayout>
+      </AppProvider>
+    </DemoProvider>
   );
 }
diff --git a/docs/data/toolpad/core/components/crud/CrudBasic.tsx b/docs/data/toolpad/core/components/crud/CrudBasic.tsx
index e58449d51f5..276f48f9da7 100644
--- a/docs/data/toolpad/core/components/crud/CrudBasic.tsx
+++ b/docs/data/toolpad/core/components/crud/CrudBasic.tsx
@@ -5,7 +5,7 @@ import { AppProvider, type Navigation } from '@toolpad/core/AppProvider';
 import { DashboardLayout } from '@toolpad/core/DashboardLayout';
 import { PageContainer } from '@toolpad/core/PageContainer';
 import { Crud, DataModel, DataSource, DataSourceCache } from '@toolpad/core/Crud';
-import { useDemoRouter } from '@toolpad/core/internal';
+import { DemoProvider, useDemoRouter } from '@toolpad/core/internal';
 
 const NAVIGATION: Navigation = [
   {
@@ -247,25 +247,28 @@ export default function CrudBasic(props: DemoProps) {
   }, [router.pathname]);
 
   return (
-    <AppProvider
-      navigation={NAVIGATION}
-      router={router}
-      theme={demoTheme}
-      window={demoWindow}
-    >
-      <DashboardLayout defaultSidebarCollapsed>
-        <PageContainer title={title}>
-          {/* preview-start */}
-          <Crud<Note>
-            dataSource={notesDataSource}
-            dataSourceCache={notesCache}
-            rootPath="/notes"
-            initialPageSize={10}
-            defaultValues={{ title: 'New note' }}
-          />
-          {/* preview-end */}
-        </PageContainer>
-      </DashboardLayout>
-    </AppProvider>
+    // Remove this provider when copying and pasting into your project.
+    <DemoProvider window={demoWindow}>
+      {/* preview-start */}
+      <AppProvider
+        navigation={NAVIGATION}
+        router={router}
+        theme={demoTheme}
+        window={demoWindow}
+      >
+        <DashboardLayout defaultSidebarCollapsed>
+          <PageContainer title={title}>
+            <Crud<Note>
+              dataSource={notesDataSource}
+              dataSourceCache={notesCache}
+              rootPath="/notes"
+              initialPageSize={10}
+              defaultValues={{ title: 'New note' }}
+            />
+          </PageContainer>
+        </DashboardLayout>
+      </AppProvider>
+      {/* preview-end */}
+    </DemoProvider>
   );
 }
diff --git a/docs/data/toolpad/core/components/crud/CrudCreate.tsx b/docs/data/toolpad/core/components/crud/CrudCreate.tsx
index 3e331d1133f..2877590a3bb 100644
--- a/docs/data/toolpad/core/components/crud/CrudCreate.tsx
+++ b/docs/data/toolpad/core/components/crud/CrudCreate.tsx
@@ -5,7 +5,7 @@ import { AppProvider, type Navigation } from '@toolpad/core/AppProvider';
 import { DashboardLayout } from '@toolpad/core/DashboardLayout';
 import { PageContainer } from '@toolpad/core/PageContainer';
 import { DataModel, DataSource, Create, DataSourceCache } from '@toolpad/core/Crud';
-import { useDemoRouter } from '@toolpad/core/internal';
+import { DemoProvider, useDemoRouter } from '@toolpad/core/internal';
 
 const NAVIGATION: Navigation = [
   {
@@ -130,25 +130,28 @@ export default function CrudCreate(props: DemoProps) {
   }, []);
 
   return (
-    <AppProvider
-      navigation={NAVIGATION}
-      router={router}
-      theme={demoTheme}
-      window={demoWindow}
-    >
-      <DashboardLayout defaultSidebarCollapsed>
-        <PageContainer title="New Person">
-          {/* preview-start */}
-          <Create<Person>
-            dataSource={peopleDataSource}
-            dataSourceCache={peopleCache}
-            initialValues={{ age: 18 }}
-            onSubmitSuccess={handleSubmitSuccess}
-            resetOnSubmit
-          />
-          {/* preview-end */}
-        </PageContainer>
-      </DashboardLayout>
-    </AppProvider>
+    // Remove this provider when copying and pasting into your project.
+    <DemoProvider window={demoWindow}>
+      {/* preview-start */}
+      <AppProvider
+        navigation={NAVIGATION}
+        router={router}
+        theme={demoTheme}
+        window={demoWindow}
+      >
+        <DashboardLayout defaultSidebarCollapsed>
+          <PageContainer title="New Person">
+            <Create<Person>
+              dataSource={peopleDataSource}
+              dataSourceCache={peopleCache}
+              initialValues={{ age: 18 }}
+              onSubmitSuccess={handleSubmitSuccess}
+              resetOnSubmit
+            />
+          </PageContainer>
+        </DashboardLayout>
+      </AppProvider>
+      {/* preview-end */}
+    </DemoProvider>
   );
 }
diff --git a/docs/data/toolpad/core/components/crud/CrudEdit.tsx b/docs/data/toolpad/core/components/crud/CrudEdit.tsx
index 29cbbf7faae..11674307b7a 100644
--- a/docs/data/toolpad/core/components/crud/CrudEdit.tsx
+++ b/docs/data/toolpad/core/components/crud/CrudEdit.tsx
@@ -5,7 +5,7 @@ import { AppProvider, type Navigation } from '@toolpad/core/AppProvider';
 import { DashboardLayout } from '@toolpad/core/DashboardLayout';
 import { PageContainer } from '@toolpad/core/PageContainer';
 import { DataModel, DataSource, DataSourceCache, Edit } from '@toolpad/core/Crud';
-import { useDemoRouter } from '@toolpad/core/internal';
+import { DemoProvider, useDemoRouter } from '@toolpad/core/internal';
 
 const NAVIGATION: Navigation = [
   {
@@ -151,24 +151,27 @@ export default function CrudEdit(props: DemoProps) {
   }, []);
 
   return (
-    <AppProvider
-      navigation={NAVIGATION}
-      router={router}
-      theme={demoTheme}
-      window={demoWindow}
-    >
-      <DashboardLayout defaultSidebarCollapsed>
-        <PageContainer title="Edit Person">
-          {/* preview-start */}
-          <Edit<Person>
-            id={1}
-            dataSource={peopleDataSource}
-            dataSourceCache={peopleCache}
-            onSubmitSuccess={handleSubmitSuccess}
-          />
-          {/* preview-end */}
-        </PageContainer>
-      </DashboardLayout>
-    </AppProvider>
+    // Remove this provider when copying and pasting into your project.
+    <DemoProvider window={demoWindow}>
+      {/* preview-start */}
+      <AppProvider
+        navigation={NAVIGATION}
+        router={router}
+        theme={demoTheme}
+        window={demoWindow}
+      >
+        <DashboardLayout defaultSidebarCollapsed>
+          <PageContainer title="Edit Person">
+            <Edit<Person>
+              id={1}
+              dataSource={peopleDataSource}
+              dataSourceCache={peopleCache}
+              onSubmitSuccess={handleSubmitSuccess}
+            />
+          </PageContainer>
+        </DashboardLayout>
+      </AppProvider>
+      {/* preview-end */}
+    </DemoProvider>
   );
 }
diff --git a/docs/data/toolpad/core/components/crud/CrudList.tsx b/docs/data/toolpad/core/components/crud/CrudList.tsx
index eb945970443..e751702611d 100644
--- a/docs/data/toolpad/core/components/crud/CrudList.tsx
+++ b/docs/data/toolpad/core/components/crud/CrudList.tsx
@@ -5,7 +5,7 @@ import { AppProvider, type Navigation } from '@toolpad/core/AppProvider';
 import { DashboardLayout } from '@toolpad/core/DashboardLayout';
 import { PageContainer } from '@toolpad/core/PageContainer';
 import { DataModel, DataSource, DataSourceCache, List } from '@toolpad/core/Crud';
-import { useDemoRouter } from '@toolpad/core/internal';
+import { DemoProvider, useDemoRouter } from '@toolpad/core/internal';
 
 const NAVIGATION: Navigation = [
   {
@@ -181,27 +181,30 @@ export default function CrudList(props: DemoProps) {
   }, []);
 
   return (
-    <AppProvider
-      navigation={NAVIGATION}
-      router={router}
-      theme={demoTheme}
-      window={demoWindow}
-    >
-      <DashboardLayout defaultSidebarCollapsed>
-        <PageContainer>
-          {/* preview-start */}
-          <List<Person>
-            dataSource={peopleDataSource}
-            dataSourceCache={peopleCache}
-            initialPageSize={4}
-            onRowClick={handleRowClick}
-            onCreateClick={handleCreateClick}
-            onEditClick={handleEditClick}
-            onDelete={handleDelete}
-          />
-          {/* preview-end */}
-        </PageContainer>
-      </DashboardLayout>
-    </AppProvider>
+    // Remove this provider when copying and pasting into your project.
+    <DemoProvider window={demoWindow}>
+      <AppProvider
+        navigation={NAVIGATION}
+        router={router}
+        theme={demoTheme}
+        window={demoWindow}
+      >
+        <DashboardLayout defaultSidebarCollapsed>
+          <PageContainer>
+            {/* preview-start */}
+            <List<Person>
+              dataSource={peopleDataSource}
+              dataSourceCache={peopleCache}
+              initialPageSize={4}
+              onRowClick={handleRowClick}
+              onCreateClick={handleCreateClick}
+              onEditClick={handleEditClick}
+              onDelete={handleDelete}
+            />
+            {/* preview-end */}
+          </PageContainer>
+        </DashboardLayout>
+      </AppProvider>
+    </DemoProvider>
   );
 }
diff --git a/docs/data/toolpad/core/components/crud/CrudListDataGrid.tsx b/docs/data/toolpad/core/components/crud/CrudListDataGrid.tsx
index f004bfc6a8c..216e9043053 100644
--- a/docs/data/toolpad/core/components/crud/CrudListDataGrid.tsx
+++ b/docs/data/toolpad/core/components/crud/CrudListDataGrid.tsx
@@ -6,7 +6,7 @@ import { AppProvider, type Navigation } from '@toolpad/core/AppProvider';
 import { DashboardLayout } from '@toolpad/core/DashboardLayout';
 import { PageContainer } from '@toolpad/core/PageContainer';
 import { DataModel, DataSource, DataSourceCache, List } from '@toolpad/core/Crud';
-import { useDemoRouter } from '@toolpad/core/internal';
+import { DemoProvider, useDemoRouter } from '@toolpad/core/internal';
 
 const NAVIGATION: Navigation = [
   {
@@ -146,31 +146,34 @@ export default function CrudListDataGrid(props: DemoProps) {
   }, []);
 
   return (
-    <AppProvider
-      navigation={NAVIGATION}
-      router={router}
-      theme={demoTheme}
-      window={demoWindow}
-    >
-      <DashboardLayout defaultSidebarCollapsed>
-        <PageContainer>
-          {/* preview-start */}
-          <List<Person>
-            dataSource={peopleDataSource}
-            dataSourceCache={peopleCache}
-            initialPageSize={4}
-            onRowClick={handleRowClick}
-            onCreateClick={handleCreateClick}
-            onEditClick={handleEditClick}
-            onDelete={handleDelete}
-            slots={{ dataGrid: DataGridPro }}
-            slotProps={{
-              dataGrid: { checkboxSelection: true },
-            }}
-          />
-          {/* preview-end */}
-        </PageContainer>
-      </DashboardLayout>
-    </AppProvider>
+    // Remove this provider when copying and pasting into your project.
+    <DemoProvider window={demoWindow}>
+      <AppProvider
+        navigation={NAVIGATION}
+        router={router}
+        theme={demoTheme}
+        window={demoWindow}
+      >
+        <DashboardLayout defaultSidebarCollapsed>
+          <PageContainer>
+            {/* preview-start */}
+            <List<Person>
+              dataSource={peopleDataSource}
+              dataSourceCache={peopleCache}
+              initialPageSize={4}
+              onRowClick={handleRowClick}
+              onCreateClick={handleCreateClick}
+              onEditClick={handleEditClick}
+              onDelete={handleDelete}
+              slots={{ dataGrid: DataGridPro }}
+              slotProps={{
+                dataGrid: { checkboxSelection: true },
+              }}
+            />
+            {/* preview-end */}
+          </PageContainer>
+        </DashboardLayout>
+      </AppProvider>
+    </DemoProvider>
   );
 }
diff --git a/docs/data/toolpad/core/components/crud/CrudNoCache.tsx b/docs/data/toolpad/core/components/crud/CrudNoCache.tsx
index 68f60fca44d..f6737901ec3 100644
--- a/docs/data/toolpad/core/components/crud/CrudNoCache.tsx
+++ b/docs/data/toolpad/core/components/crud/CrudNoCache.tsx
@@ -5,7 +5,7 @@ import { AppProvider, type Navigation } from '@toolpad/core/AppProvider';
 import { DashboardLayout } from '@toolpad/core/DashboardLayout';
 import { PageContainer } from '@toolpad/core/PageContainer';
 import { Crud, DataModel, DataSource } from '@toolpad/core/Crud';
-import { useDemoRouter } from '@toolpad/core/internal';
+import { DemoProvider, useDemoRouter } from '@toolpad/core/internal';
 
 const NAVIGATION: Navigation = [
   {
@@ -237,25 +237,28 @@ export default function CrudNoCache(props: DemoProps) {
   }, [router.pathname]);
 
   return (
-    <AppProvider
-      navigation={NAVIGATION}
-      router={router}
-      theme={demoTheme}
-      window={demoWindow}
-    >
-      <DashboardLayout defaultSidebarCollapsed>
-        <PageContainer title={title}>
-          {/* preview-start */}
-          <Crud<Note>
-            dataSource={notesDataSource}
-            dataSourceCache={null}
-            rootPath="/notes"
-            initialPageSize={10}
-            defaultValues={{ title: 'New note' }}
-          />
-          {/* preview-end */}
-        </PageContainer>
-      </DashboardLayout>
-    </AppProvider>
+    // Remove this provider when copying and pasting into your project.
+    <DemoProvider window={demoWindow}>
+      <AppProvider
+        navigation={NAVIGATION}
+        router={router}
+        theme={demoTheme}
+        window={demoWindow}
+      >
+        <DashboardLayout defaultSidebarCollapsed>
+          <PageContainer title={title}>
+            {/* preview-start */}
+            <Crud<Note>
+              dataSource={notesDataSource}
+              dataSourceCache={null}
+              rootPath="/notes"
+              initialPageSize={10}
+              defaultValues={{ title: 'New note' }}
+            />
+            {/* preview-end */}
+          </PageContainer>
+        </DashboardLayout>
+      </AppProvider>
+    </DemoProvider>
   );
 }
diff --git a/docs/data/toolpad/core/components/crud/CrudShow.tsx b/docs/data/toolpad/core/components/crud/CrudShow.tsx
index d0b2ac9e871..5942051f23f 100644
--- a/docs/data/toolpad/core/components/crud/CrudShow.tsx
+++ b/docs/data/toolpad/core/components/crud/CrudShow.tsx
@@ -5,7 +5,7 @@ import { AppProvider, type Navigation } from '@toolpad/core/AppProvider';
 import { DashboardLayout } from '@toolpad/core/DashboardLayout';
 import { PageContainer } from '@toolpad/core/PageContainer';
 import { DataModel, DataSource, DataSourceCache, Show } from '@toolpad/core/Crud';
-import { useDemoRouter } from '@toolpad/core/internal';
+import { DemoProvider, useDemoRouter } from '@toolpad/core/internal';
 
 const NAVIGATION: Navigation = [
   {
@@ -119,25 +119,28 @@ export default function CrudShow(props: DemoProps) {
   }, []);
 
   return (
-    <AppProvider
-      navigation={NAVIGATION}
-      router={router}
-      theme={demoTheme}
-      window={demoWindow}
-    >
-      <DashboardLayout defaultSidebarCollapsed>
-        <PageContainer title="Person">
-          {/* preview-start */}
-          <Show<Person>
-            id={1}
-            dataSource={peopleDataSource}
-            dataSourceCache={peopleCache}
-            onEditClick={handleEditClick}
-            onDelete={handleDelete}
-          />
-          {/* preview-end */}
-        </PageContainer>
-      </DashboardLayout>
-    </AppProvider>
+    // Remove this provider when copying and pasting into your project.
+    <DemoProvider window={demoWindow}>
+      <AppProvider
+        navigation={NAVIGATION}
+        router={router}
+        theme={demoTheme}
+        window={demoWindow}
+      >
+        <DashboardLayout defaultSidebarCollapsed>
+          <PageContainer title="Person">
+            {/* preview-start */}
+            <Show<Person>
+              id={1}
+              dataSource={peopleDataSource}
+              dataSourceCache={peopleCache}
+              onEditClick={handleEditClick}
+              onDelete={handleDelete}
+            />
+            {/* preview-end */}
+          </PageContainer>
+        </DashboardLayout>
+      </AppProvider>
+    </DemoProvider>
   );
 }
diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutAccount.tsx b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutAccount.tsx
index 6439a2498fd..234fde2e500 100644
--- a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutAccount.tsx
+++ b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutAccount.tsx
@@ -9,7 +9,7 @@ import {
   type Navigation,
 } from '@toolpad/core/AppProvider';
 import { DashboardLayout } from '@toolpad/core/DashboardLayout';
-import { useDemoRouter } from '@toolpad/core/internal';
+import { DemoProvider, useDemoRouter } from '@toolpad/core/internal';
 
 const NAVIGATION: Navigation = [
   {
@@ -93,19 +93,22 @@ export default function DashboardLayoutAccount(props: DemoProps) {
   const demoWindow = window !== undefined ? window() : undefined;
 
   return (
-    // preview-start
-    <AppProvider
-      session={session}
-      authentication={authentication}
-      navigation={NAVIGATION}
-      router={router}
-      theme={demoTheme}
-      window={demoWindow}
-    >
-      <DashboardLayout>
-        <DemoPageContent pathname={router.pathname} />
-      </DashboardLayout>
-    </AppProvider>
-    // preview-end
+    // Remove this provider when copying and pasting into your project.
+    <DemoProvider window={demoWindow}>
+      {/* preview-start */}
+      <AppProvider
+        session={session}
+        authentication={authentication}
+        navigation={NAVIGATION}
+        router={router}
+        theme={demoTheme}
+        window={demoWindow}
+      >
+        <DashboardLayout>
+          <DemoPageContent pathname={router.pathname} />
+        </DashboardLayout>
+      </AppProvider>
+      {/* preview-end */}
+    </DemoProvider>
   );
 }
diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutAccountSidebar.tsx b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutAccountSidebar.tsx
index ba82b95c2c2..bd9beaf2a97 100644
--- a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutAccountSidebar.tsx
+++ b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutAccountSidebar.tsx
@@ -21,6 +21,7 @@ import {
   AccountPreviewProps,
 } from '@toolpad/core/Account';
 import type { Navigation, Router, Session } from '@toolpad/core/AppProvider';
+import { DemoProvider, useDemoRouter } from '@toolpad/core/internal';
 
 const NAVIGATION: Navigation = [
   {
@@ -254,19 +255,22 @@ export default function DashboardLayoutAccountSidebar(props: DemoProps) {
   }, []);
 
   return (
-    <AppProvider
-      navigation={NAVIGATION}
-      router={router}
-      theme={demoTheme}
-      window={demoWindow}
-      authentication={authentication}
-      session={session}
-    >
-      <DashboardLayout
-        slots={{ toolbarAccount: () => null, sidebarFooter: SidebarFooterAccount }}
+    // Remove this provider when copying and pasting into your project.
+    <DemoProvider window={demoWindow}>
+      <AppProvider
+        navigation={NAVIGATION}
+        router={router}
+        theme={demoTheme}
+        window={demoWindow}
+        authentication={authentication}
+        session={session}
       >
-        <DemoPageContent pathname={pathname} />
-      </DashboardLayout>
-    </AppProvider>
+        <DashboardLayout
+          slots={{ toolbarAccount: () => null, sidebarFooter: SidebarFooterAccount }}
+        >
+          <DemoPageContent pathname={pathname} />
+        </DashboardLayout>
+      </AppProvider>
+    </DemoProvider>
   );
 }
diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBasic.tsx b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBasic.tsx
index 885c69f72ff..53c88fa4b8f 100644
--- a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBasic.tsx
+++ b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBasic.tsx
@@ -7,11 +7,9 @@ import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';
 import BarChartIcon from '@mui/icons-material/BarChart';
 import DescriptionIcon from '@mui/icons-material/Description';
 import LayersIcon from '@mui/icons-material/Layers';
-import createCache from '@emotion/cache';
-import { CacheProvider } from '@emotion/react';
 import { AppProvider, type Navigation } from '@toolpad/core/AppProvider';
 import { DashboardLayout } from '@toolpad/core/DashboardLayout';
-import { useDemoRouter } from '@toolpad/core/internal';
+import { DemoProvider, useDemoRouter } from '@toolpad/core/internal';
 
 const NAVIGATION: Navigation = [
   {
@@ -104,19 +102,12 @@ export default function DashboardLayoutBasic(props: DemoProps) {
 
   const router = useDemoRouter('/dashboard');
 
-  // Remove these variables when copying and pasting into your project.
+  // Remove this const when copying and pasting into your project.
   const demoWindow = window !== undefined ? window() : undefined;
-  const demoEmotionCache = React.useMemo(
-    () =>
-      createCache({
-        key: 'toolpad-demo-app',
-        container: demoWindow?.document.head,
-      }),
-    [demoWindow?.document.head],
-  );
 
   return (
-    <CacheProvider value={demoEmotionCache}>
+    // Remove this provider when copying and pasting into your project.
+    <DemoProvider window={demoWindow}>
       {/* preview-start */}
       <AppProvider
         navigation={NAVIGATION}
@@ -129,6 +120,6 @@ export default function DashboardLayoutBasic(props: DemoProps) {
         </DashboardLayout>
       </AppProvider>
       {/* preview-end */}
-    </CacheProvider>
+    </DemoProvider>
   );
 }
diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBranding.tsx b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBranding.tsx
index 804d9c7ece1..a5cee58912f 100644
--- a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBranding.tsx
+++ b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBranding.tsx
@@ -6,7 +6,7 @@ import DashboardIcon from '@mui/icons-material/Dashboard';
 import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';
 import { AppProvider, type Navigation } from '@toolpad/core/AppProvider';
 import { DashboardLayout } from '@toolpad/core/DashboardLayout';
-import { useDemoRouter } from '@toolpad/core/internal';
+import { DemoProvider, useDemoRouter } from '@toolpad/core/internal';
 
 const NAVIGATION: Navigation = [
   {
@@ -70,22 +70,25 @@ export default function DashboardLayoutBranding(props: DemoProps) {
   const demoWindow = window !== undefined ? window() : undefined;
 
   return (
-    // preview-start
-    <AppProvider
-      navigation={NAVIGATION}
-      branding={{
-        logo: <img src="https://mui.com/static/logo.png" alt="MUI logo" />,
-        title: 'MUI',
-        homeUrl: '/toolpad/core/introduction',
-      }}
-      router={router}
-      theme={demoTheme}
-      window={demoWindow}
-    >
-      <DashboardLayout>
-        <DemoPageContent pathname={router.pathname} />
-      </DashboardLayout>
-    </AppProvider>
-    // preview-end
+    // Remove this provider when copying and pasting into your project.
+    <DemoProvider window={demoWindow}>
+      {/* preview-start */}
+      <AppProvider
+        navigation={NAVIGATION}
+        branding={{
+          logo: <img src="https://mui.com/static/logo.png" alt="MUI logo" />,
+          title: 'MUI',
+          homeUrl: '/toolpad/core/introduction',
+        }}
+        router={router}
+        theme={demoTheme}
+        window={demoWindow}
+      >
+        <DashboardLayout>
+          <DemoPageContent pathname={router.pathname} />
+        </DashboardLayout>
+      </AppProvider>
+      {/* preview-end */}
+    </DemoProvider>
   );
 }
diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutCustomThemeSwitcher.tsx b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutCustomThemeSwitcher.tsx
index 567db04cced..2c8882c28b4 100644
--- a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutCustomThemeSwitcher.tsx
+++ b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutCustomThemeSwitcher.tsx
@@ -15,7 +15,7 @@ import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';
 import SettingsIcon from '@mui/icons-material/Settings';
 import { AppProvider, type Navigation } from '@toolpad/core/AppProvider';
 import { DashboardLayout } from '@toolpad/core/DashboardLayout';
-import { useDemoRouter } from '@toolpad/core/internal';
+import { DemoProvider, useDemoRouter } from '@toolpad/core/internal';
 
 const NAVIGATION: Navigation = [
   {
@@ -143,19 +143,22 @@ export default function DashboardLayoutCustomThemeSwitcher(props: DemoProps) {
   const demoWindow = window !== undefined ? window() : undefined;
 
   return (
-    <AppProvider
-      navigation={NAVIGATION}
-      router={router}
-      theme={demoTheme}
-      window={demoWindow}
-    >
-      <DashboardLayout
-        slots={{
-          toolbarActions: CustomThemeSwitcher,
-        }}
+    // Remove this provider when copying and pasting into your project.
+    <DemoProvider window={demoWindow}>
+      <AppProvider
+        navigation={NAVIGATION}
+        router={router}
+        theme={demoTheme}
+        window={demoWindow}
       >
-        <DemoPageContent pathname={router.pathname} />
-      </DashboardLayout>
-    </AppProvider>
+        <DashboardLayout
+          slots={{
+            toolbarActions: CustomThemeSwitcher,
+          }}
+        >
+          <DemoPageContent pathname={router.pathname} />
+        </DashboardLayout>
+      </AppProvider>
+    </DemoProvider>
   );
 }
diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutFullScreen.tsx b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutFullScreen.tsx
index f526b2cda2c..e15b1f08cf1 100644
--- a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutFullScreen.tsx
+++ b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutFullScreen.tsx
@@ -3,7 +3,7 @@ import { createTheme } from '@mui/material/styles';
 import MapIcon from '@mui/icons-material/Map';
 import { AppProvider, type Navigation } from '@toolpad/core/AppProvider';
 import { DashboardLayout } from '@toolpad/core/DashboardLayout';
-import { useDemoRouter } from '@toolpad/core/internal';
+import { DemoProvider, useDemoRouter } from '@toolpad/core/internal';
 
 const NAVIGATION: Navigation = [
   {
@@ -46,21 +46,24 @@ export default function DashboardLayoutFullScreen(props: DemoProps) {
   const demoWindow = window !== undefined ? window() : undefined;
 
   return (
-    <AppProvider
-      navigation={NAVIGATION}
-      router={router}
-      theme={demoTheme}
-      window={demoWindow}
-    >
-      <DashboardLayout>
-        <iframe
-          title="Google Map"
-          src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d387190.2799181496!2d-74.25987571760744!3d40.69767006358627!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c259af18b60165%3A0x8b621f8a7a7d28a4!2sNew%20York%2C%20NY%2C%20USA!5e0!3m2!1sen!2s!4v1633452834502!5m2!1sen!2s"
-          style={{ flex: 1, border: 0 }}
-          allowFullScreen
-          loading="lazy"
-        />
-      </DashboardLayout>
-    </AppProvider>
+    // Remove this provider when copying and pasting into your project.
+    <DemoProvider window={demoWindow}>
+      <AppProvider
+        navigation={NAVIGATION}
+        router={router}
+        theme={demoTheme}
+        window={demoWindow}
+      >
+        <DashboardLayout>
+          <iframe
+            title="Google Map"
+            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d387190.2799181496!2d-74.25987571760744!3d40.69767006358627!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c259af18b60165%3A0x8b621f8a7a7d28a4!2sNew%20York%2C%20NY%2C%20USA!5e0!3m2!1sen!2s!4v1633452834502!5m2!1sen!2s"
+            style={{ flex: 1, border: 0 }}
+            allowFullScreen
+            loading="lazy"
+          />
+        </DashboardLayout>
+      </AppProvider>
+    </DemoProvider>
   );
 }
diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutNavigationActions.tsx b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutNavigationActions.tsx
index 2431c0da069..c5df89bda12 100644
--- a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutNavigationActions.tsx
+++ b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutNavigationActions.tsx
@@ -13,7 +13,7 @@ import CallMadeIcon from '@mui/icons-material/CallMade';
 import CallReceivedIcon from '@mui/icons-material/CallReceived';
 import { AppProvider, type Navigation } from '@toolpad/core/AppProvider';
 import { DashboardLayout } from '@toolpad/core/DashboardLayout';
-import { useDemoRouter } from '@toolpad/core/internal';
+import { DemoProvider, useDemoRouter } from '@toolpad/core/internal';
 
 const demoTheme = createTheme({
   cssVariables: {
@@ -118,31 +118,34 @@ export default function DashboardLayoutNavigationActions(props: DemoProps) {
   );
 
   return (
-    // preview-start
-    <AppProvider
-      navigation={[
-        {
-          segment: 'contacts',
-          title: 'Contacts',
-          icon: <PersonIcon />,
-          action: <Chip label={7} color="primary" size="small" />,
-        },
-        {
-          segment: 'calls',
-          title: 'Calls',
-          icon: <CallIcon />,
-          action: popoverMenuAction,
-          children: CALLS_NAVIGATION,
-        },
-      ]}
-      router={router}
-      theme={demoTheme}
-      window={demoWindow}
-    >
-      <DashboardLayout>
-        <DemoPageContent pathname={router.pathname} />
-      </DashboardLayout>
-    </AppProvider>
-    // preview-end
+    // Remove this provider when copying and pasting into your project.
+    <DemoProvider window={demoWindow}>
+      {/* preview-start */}
+      <AppProvider
+        navigation={[
+          {
+            segment: 'contacts',
+            title: 'Contacts',
+            icon: <PersonIcon />,
+            action: <Chip label={7} color="primary" size="small" />,
+          },
+          {
+            segment: 'calls',
+            title: 'Calls',
+            icon: <CallIcon />,
+            action: popoverMenuAction,
+            children: CALLS_NAVIGATION,
+          },
+        ]}
+        router={router}
+        theme={demoTheme}
+        window={demoWindow}
+      >
+        <DashboardLayout>
+          <DemoPageContent pathname={router.pathname} />
+        </DashboardLayout>
+      </AppProvider>
+      {/* preview-end */}
+    </DemoProvider>
   );
 }
diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutNavigationDividers.tsx b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutNavigationDividers.tsx
index a034bb281eb..f72f321c507 100644
--- a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutNavigationDividers.tsx
+++ b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutNavigationDividers.tsx
@@ -5,7 +5,7 @@ import { createTheme } from '@mui/material/styles';
 import DescriptionIcon from '@mui/icons-material/Description';
 import { AppProvider } from '@toolpad/core/AppProvider';
 import { DashboardLayout } from '@toolpad/core/DashboardLayout';
-import { useDemoRouter } from '@toolpad/core/internal';
+import { DemoProvider, useDemoRouter } from '@toolpad/core/internal';
 
 const demoTheme = createTheme({
   cssVariables: {
@@ -56,29 +56,32 @@ export default function DashboardLayoutNavigationDividers(props: DemoProps) {
   const demoWindow = window !== undefined ? window() : undefined;
 
   return (
-    // preview-start
-    <AppProvider
-      navigation={[
-        {
-          segment: 'star-wars',
-          title: 'Star Wars',
-          icon: <DescriptionIcon />,
-        },
-        { kind: 'divider' },
-        {
-          segment: 'eagle',
-          title: 'Eagle',
-          icon: <DescriptionIcon />,
-        },
-      ]}
-      router={router}
-      theme={demoTheme}
-      window={demoWindow}
-    >
-      <DashboardLayout>
-        <DemoPageContent pathname={router.pathname} />
-      </DashboardLayout>
-    </AppProvider>
-    // preview-end
+    // Remove this provider when copying and pasting into your project.
+    <DemoProvider window={demoWindow}>
+      {/* preview-start */}
+      <AppProvider
+        navigation={[
+          {
+            segment: 'star-wars',
+            title: 'Star Wars',
+            icon: <DescriptionIcon />,
+          },
+          { kind: 'divider' },
+          {
+            segment: 'eagle',
+            title: 'Eagle',
+            icon: <DescriptionIcon />,
+          },
+        ]}
+        router={router}
+        theme={demoTheme}
+        window={demoWindow}
+      >
+        <DashboardLayout>
+          <DemoPageContent pathname={router.pathname} />
+        </DashboardLayout>
+      </AppProvider>
+      {/* preview-end */}
+    </DemoProvider>
   );
 }
diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutNavigationHeadings.tsx b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutNavigationHeadings.tsx
index d427ff779fb..065be034ab4 100644
--- a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutNavigationHeadings.tsx
+++ b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutNavigationHeadings.tsx
@@ -5,7 +5,7 @@ import { createTheme } from '@mui/material/styles';
 import DescriptionIcon from '@mui/icons-material/Description';
 import { AppProvider } from '@toolpad/core/AppProvider';
 import { DashboardLayout } from '@toolpad/core/DashboardLayout';
-import { useDemoRouter } from '@toolpad/core/internal';
+import { DemoProvider, useDemoRouter } from '@toolpad/core/internal';
 
 const demoTheme = createTheme({
   cssVariables: {
@@ -56,36 +56,39 @@ export default function DashboardLayoutNavigationHeadings(props: DemoProps) {
   const demoWindow = window !== undefined ? window() : undefined;
 
   return (
-    // preview-start
-    <AppProvider
-      navigation={[
-        {
-          kind: 'header',
-          title: 'Animals',
-        },
-        {
-          segment: 'lion',
-          title: 'Lion',
-          icon: <DescriptionIcon />,
-        },
-        {
-          kind: 'header',
-          title: 'Movies',
-        },
-        {
-          segment: 'lord-of-the-rings',
-          title: 'Lord of the Rings',
-          icon: <DescriptionIcon />,
-        },
-      ]}
-      router={router}
-      theme={demoTheme}
-      window={demoWindow}
-    >
-      <DashboardLayout>
-        <DemoPageContent pathname={router.pathname} />
-      </DashboardLayout>
-    </AppProvider>
-    // preview-end
+    // Remove this provider when copying and pasting into your project.
+    <DemoProvider window={demoWindow}>
+      {/* preview-start */}
+      <AppProvider
+        navigation={[
+          {
+            kind: 'header',
+            title: 'Animals',
+          },
+          {
+            segment: 'lion',
+            title: 'Lion',
+            icon: <DescriptionIcon />,
+          },
+          {
+            kind: 'header',
+            title: 'Movies',
+          },
+          {
+            segment: 'lord-of-the-rings',
+            title: 'Lord of the Rings',
+            icon: <DescriptionIcon />,
+          },
+        ]}
+        router={router}
+        theme={demoTheme}
+        window={demoWindow}
+      >
+        <DashboardLayout>
+          <DemoPageContent pathname={router.pathname} />
+        </DashboardLayout>
+      </AppProvider>
+      {/* preview-end */}
+    </DemoProvider>
   );
 }
diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutNavigationLinks.tsx b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutNavigationLinks.tsx
index 4428dab4aec..698eb69d2fb 100644
--- a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutNavigationLinks.tsx
+++ b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutNavigationLinks.tsx
@@ -5,7 +5,7 @@ import { createTheme } from '@mui/material/styles';
 import DescriptionIcon from '@mui/icons-material/Description';
 import { AppProvider } from '@toolpad/core/AppProvider';
 import { DashboardLayout } from '@toolpad/core/DashboardLayout';
-import { useDemoRouter } from '@toolpad/core/internal';
+import { DemoProvider, useDemoRouter } from '@toolpad/core/internal';
 
 const demoTheme = createTheme({
   cssVariables: {
@@ -56,28 +56,31 @@ export default function DashboardLayoutNavigationLinks(props: DemoProps) {
   const demoWindow = window !== undefined ? window() : undefined;
 
   return (
-    // preview-start
-    <AppProvider
-      navigation={[
-        {
-          segment: 'home',
-          title: 'Home',
-          icon: <DescriptionIcon />,
-        },
-        {
-          segment: 'about',
-          title: 'About Us',
-          icon: <DescriptionIcon />,
-        },
-      ]}
-      router={router}
-      theme={demoTheme}
-      window={demoWindow}
-    >
-      <DashboardLayout>
-        <DemoPageContent pathname={router.pathname} />
-      </DashboardLayout>
-    </AppProvider>
-    // preview-end
+    // Remove this provider when copying and pasting into your project.
+    <DemoProvider window={demoWindow}>
+      {/* preview-start */}
+      <AppProvider
+        navigation={[
+          {
+            segment: 'home',
+            title: 'Home',
+            icon: <DescriptionIcon />,
+          },
+          {
+            segment: 'about',
+            title: 'About Us',
+            icon: <DescriptionIcon />,
+          },
+        ]}
+        router={router}
+        theme={demoTheme}
+        window={demoWindow}
+      >
+        <DashboardLayout>
+          <DemoPageContent pathname={router.pathname} />
+        </DashboardLayout>
+      </AppProvider>
+      {/* preview-end */}
+    </DemoProvider>
   );
 }
diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutNavigationNested.tsx b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutNavigationNested.tsx
index b818a230e8b..11c211c70c3 100644
--- a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutNavigationNested.tsx
+++ b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutNavigationNested.tsx
@@ -6,7 +6,7 @@ import DescriptionIcon from '@mui/icons-material/Description';
 import FolderIcon from '@mui/icons-material/Folder';
 import { AppProvider } from '@toolpad/core/AppProvider';
 import { DashboardLayout } from '@toolpad/core/DashboardLayout';
-import { useDemoRouter } from '@toolpad/core/internal';
+import { DemoProvider, useDemoRouter } from '@toolpad/core/internal';
 
 const demoTheme = createTheme({
   cssVariables: {
@@ -57,35 +57,38 @@ export default function DashboardLayoutNavigationNested(props: DemoProps) {
   const demoWindow = window !== undefined ? window() : undefined;
 
   return (
-    // preview-start
-    <AppProvider
-      navigation={[
-        {
-          segment: 'movies',
-          title: 'Movies',
-          icon: <FolderIcon />,
-          children: [
-            {
-              segment: 'lord-of-the-rings',
-              title: 'Lord of the Rings',
-              icon: <DescriptionIcon />,
-            },
-            {
-              segment: 'harry-potter',
-              title: 'Harry Potter',
-              icon: <DescriptionIcon />,
-            },
-          ],
-        },
-      ]}
-      router={router}
-      theme={demoTheme}
-      window={demoWindow}
-    >
-      <DashboardLayout>
-        <DemoPageContent pathname={router.pathname} />
-      </DashboardLayout>
-    </AppProvider>
-    // preview-end
+    // Remove this provider when copying and pasting into your project.
+    <DemoProvider window={demoWindow}>
+      {/* preview-start */}
+      <AppProvider
+        navigation={[
+          {
+            segment: 'movies',
+            title: 'Movies',
+            icon: <FolderIcon />,
+            children: [
+              {
+                segment: 'lord-of-the-rings',
+                title: 'Lord of the Rings',
+                icon: <DescriptionIcon />,
+              },
+              {
+                segment: 'harry-potter',
+                title: 'Harry Potter',
+                icon: <DescriptionIcon />,
+              },
+            ],
+          },
+        ]}
+        router={router}
+        theme={demoTheme}
+        window={demoWindow}
+      >
+        <DashboardLayout>
+          <DemoPageContent pathname={router.pathname} />
+        </DashboardLayout>
+      </AppProvider>
+      {/* preview-end */}
+    </DemoProvider>
   );
 }
diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutNoMiniSidebar.tsx b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutNoMiniSidebar.tsx
index c9b65ffa7e2..81d9a8bde1f 100644
--- a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutNoMiniSidebar.tsx
+++ b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutNoMiniSidebar.tsx
@@ -7,7 +7,7 @@ import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';
 import BarChartIcon from '@mui/icons-material/BarChart';
 import { AppProvider, type Navigation } from '@toolpad/core/AppProvider';
 import { DashboardLayout } from '@toolpad/core/DashboardLayout';
-import { useDemoRouter } from '@toolpad/core/internal';
+import { DemoProvider, useDemoRouter } from '@toolpad/core/internal';
 
 const NAVIGATION: Navigation = [
   {
@@ -76,15 +76,20 @@ export default function DashboardLayoutNoMiniSidebar(props: DemoProps) {
   const demoWindow = window !== undefined ? window() : undefined;
 
   return (
-    <AppProvider
-      navigation={NAVIGATION}
-      router={router}
-      theme={demoTheme}
-      window={demoWindow}
-    >
-      <DashboardLayout disableCollapsibleSidebar>
-        <DemoPageContent pathname={router.pathname} />
-      </DashboardLayout>
-    </AppProvider>
+    // Remove this provider when copying and pasting into your project.
+    <DemoProvider window={demoWindow}>
+      {/* preview-start */}
+      <AppProvider
+        navigation={NAVIGATION}
+        router={router}
+        theme={demoTheme}
+        window={demoWindow}
+      >
+        <DashboardLayout disableCollapsibleSidebar>
+          <DemoPageContent pathname={router.pathname} />
+        </DashboardLayout>
+      </AppProvider>
+      {/* preview-end */}
+    </DemoProvider>
   );
 }
diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutPattern.tsx b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutPattern.tsx
index a8c0adb29b6..e922e7b2fbb 100644
--- a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutPattern.tsx
+++ b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutPattern.tsx
@@ -8,7 +8,7 @@ import DashboardIcon from '@mui/icons-material/Dashboard';
 import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';
 import { AppProvider } from '@toolpad/core/AppProvider';
 import { DashboardLayout } from '@toolpad/core/DashboardLayout';
-import { useDemoRouter } from '@toolpad/core/internal';
+import { DemoProvider, useDemoRouter } from '@toolpad/core/internal';
 
 const demoTheme = createTheme({
   cssVariables: {
@@ -90,29 +90,32 @@ export default function DashboardLayoutPattern(props: DemoProps) {
   const demoWindow = window !== undefined ? window() : undefined;
 
   return (
-    // preview-start
-    <AppProvider
-      navigation={[
-        {
-          segment: 'dashboard',
-          title: 'Dashboard',
-          icon: <DashboardIcon />,
-        },
-        {
-          segment: 'orders',
-          title: 'Orders',
-          icon: <ShoppingCartIcon />,
-          pattern: 'orders{/:orderId}*',
-        },
-      ]}
-      router={router}
-      theme={demoTheme}
-      window={demoWindow}
-    >
-      <DashboardLayout>
-        <DemoPageContent pathname={router.pathname} navigate={router.navigate} />
-      </DashboardLayout>
-    </AppProvider>
-    // preview-end
+    // Remove this provider when copying and pasting into your project.
+    <DemoProvider window={demoWindow}>
+      {/* preview-start */}
+      <AppProvider
+        navigation={[
+          {
+            segment: 'dashboard',
+            title: 'Dashboard',
+            icon: <DashboardIcon />,
+          },
+          {
+            segment: 'orders',
+            title: 'Orders',
+            icon: <ShoppingCartIcon />,
+            pattern: 'orders{/:orderId}*',
+          },
+        ]}
+        router={router}
+        theme={demoTheme}
+        window={demoWindow}
+      >
+        <DashboardLayout>
+          <DemoPageContent pathname={router.pathname} navigate={router.navigate} />
+        </DashboardLayout>
+      </AppProvider>
+      {/* preview-end */}
+    </DemoProvider>
   );
 }
diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutSidebarCollapsed.tsx b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutSidebarCollapsed.tsx
index 2877b54cd4f..a1cd8498c08 100644
--- a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutSidebarCollapsed.tsx
+++ b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutSidebarCollapsed.tsx
@@ -11,6 +11,7 @@ import {
   type Navigation,
 } from '@toolpad/core/AppProvider';
 import { DashboardLayout } from '@toolpad/core/DashboardLayout';
+import { DemoProvider, useDemoRouter } from '@toolpad/core/internal';
 
 const NAVIGATION: Navigation = [
   {
@@ -87,15 +88,18 @@ export default function DashboardLayoutSidebarCollapsed(props: DemoProps) {
   const demoWindow = window !== undefined ? window() : undefined;
 
   return (
-    <AppProvider
-      navigation={NAVIGATION}
-      router={router}
-      theme={demoTheme}
-      window={demoWindow}
-    >
-      <DashboardLayout defaultSidebarCollapsed>
-        <DemoPageContent pathname={pathname} />
-      </DashboardLayout>
-    </AppProvider>
+    // Remove this provider when copying and pasting into your project.
+    <DemoProvider window={demoWindow}>
+      <AppProvider
+        navigation={NAVIGATION}
+        router={router}
+        theme={demoTheme}
+        window={demoWindow}
+      >
+        <DashboardLayout defaultSidebarCollapsed>
+          <DemoPageContent pathname={pathname} />
+        </DashboardLayout>
+      </AppProvider>
+    </DemoProvider>
   );
 }
diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutSidebarHidden.tsx b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutSidebarHidden.tsx
index 9b2bb58c4a7..c1358724873 100644
--- a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutSidebarHidden.tsx
+++ b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutSidebarHidden.tsx
@@ -4,7 +4,7 @@ import Typography from '@mui/material/Typography';
 import { createTheme } from '@mui/material/styles';
 import { AppProvider } from '@toolpad/core/AppProvider';
 import { DashboardLayout } from '@toolpad/core/DashboardLayout';
-import { useDemoRouter } from '@toolpad/core/internal';
+import { DemoProvider, useDemoRouter } from '@toolpad/core/internal';
 
 const demoTheme = createTheme({
   cssVariables: {
@@ -55,10 +55,13 @@ export default function DashboardLayoutSidebarHidden(props: DemoProps) {
   const demoWindow = window !== undefined ? window() : undefined;
 
   return (
-    <AppProvider router={router} theme={demoTheme} window={demoWindow}>
-      <DashboardLayout hideNavigation>
-        <DemoPageContent pathname={router.pathname} />
-      </DashboardLayout>
-    </AppProvider>
+    // Remove this provider when copying and pasting into your project.
+    <DemoProvider window={demoWindow}>
+      <AppProvider router={router} theme={demoTheme} window={demoWindow}>
+        <DashboardLayout hideNavigation>
+          <DemoPageContent pathname={router.pathname} />
+        </DashboardLayout>
+      </AppProvider>
+    </DemoProvider>
   );
 }
diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutSlots.tsx b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutSlots.tsx
index 0864e54c197..3262c20eea6 100644
--- a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutSlots.tsx
+++ b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutSlots.tsx
@@ -18,7 +18,7 @@ import {
   ThemeSwitcher,
   type SidebarFooterProps,
 } from '@toolpad/core/DashboardLayout';
-import { useDemoRouter } from '@toolpad/core/internal';
+import { DemoProvider, useDemoRouter } from '@toolpad/core/internal';
 
 const NAVIGATION: Navigation = [
   {
@@ -147,21 +147,24 @@ export default function DashboardLayoutSlots(props: DemoProps) {
   const demoWindow = window !== undefined ? window() : undefined;
 
   return (
-    <AppProvider
-      navigation={NAVIGATION}
-      router={router}
-      theme={demoTheme}
-      window={demoWindow}
-    >
-      <DashboardLayout
-        slots={{
-          appTitle: CustomAppTitle,
-          toolbarActions: ToolbarActionsSearch,
-          sidebarFooter: SidebarFooter,
-        }}
+    // Remove this provider when copying and pasting into your project.
+    <DemoProvider window={demoWindow}>
+      <AppProvider
+        navigation={NAVIGATION}
+        router={router}
+        theme={demoTheme}
+        window={demoWindow}
       >
-        <DemoPageContent pathname={router.pathname} />
-      </DashboardLayout>
-    </AppProvider>
+        <DashboardLayout
+          slots={{
+            appTitle: CustomAppTitle,
+            toolbarActions: ToolbarActionsSearch,
+            sidebarFooter: SidebarFooter,
+          }}
+        >
+          <DemoPageContent pathname={router.pathname} />
+        </DashboardLayout>
+      </AppProvider>
+    </DemoProvider>
   );
 }
diff --git a/docs/data/toolpad/core/components/page-container/PageContainerFullScreen.tsx b/docs/data/toolpad/core/components/page-container/PageContainerFullScreen.tsx
index 4b3ff0fdb3c..9b872e1f6ec 100644
--- a/docs/data/toolpad/core/components/page-container/PageContainerFullScreen.tsx
+++ b/docs/data/toolpad/core/components/page-container/PageContainerFullScreen.tsx
@@ -4,7 +4,7 @@ import MapIcon from '@mui/icons-material/Map';
 import { AppProvider, type Navigation } from '@toolpad/core/AppProvider';
 import { DashboardLayout } from '@toolpad/core/DashboardLayout';
 import { PageContainer } from '@toolpad/core/PageContainer';
-import { useDemoRouter } from '@toolpad/core/internal';
+import { DemoProvider, useDemoRouter } from '@toolpad/core/internal';
 
 const NAVIGATION: Navigation = [
   {
@@ -47,23 +47,26 @@ export default function PageContainerFullScreen(props: DemoProps) {
   const demoWindow = window !== undefined ? window() : undefined;
 
   return (
-    <AppProvider
-      navigation={NAVIGATION}
-      router={router}
-      theme={demoTheme}
-      window={demoWindow}
-    >
-      <DashboardLayout defaultSidebarCollapsed>
-        <PageContainer>
-          <iframe
-            title="Google Map"
-            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d387190.2799181496!2d-74.25987571760744!3d40.69767006358627!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c259af18b60165%3A0x8b621f8a7a7d28a4!2sNew%20York%2C%20NY%2C%20USA!5e0!3m2!1sen!2s!4v1633452834502!5m2!1sen!2s"
-            style={{ flex: 1, border: 0 }}
-            allowFullScreen
-            loading="lazy"
-          />
-        </PageContainer>
-      </DashboardLayout>
-    </AppProvider>
+    // Remove this provider when copying and pasting into your project.
+    <DemoProvider window={demoWindow}>
+      <AppProvider
+        navigation={NAVIGATION}
+        router={router}
+        theme={demoTheme}
+        window={demoWindow}
+      >
+        <DashboardLayout defaultSidebarCollapsed>
+          <PageContainer>
+            <iframe
+              title="Google Map"
+              src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d387190.2799181496!2d-74.25987571760744!3d40.69767006358627!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c259af18b60165%3A0x8b621f8a7a7d28a4!2sNew%20York%2C%20NY%2C%20USA!5e0!3m2!1sen!2s!4v1633452834502!5m2!1sen!2s"
+              style={{ flex: 1, border: 0 }}
+              allowFullScreen
+              loading="lazy"
+            />
+          </PageContainer>
+        </DashboardLayout>
+      </AppProvider>
+    </DemoProvider>
   );
 }
diff --git a/docs/data/toolpad/core/integrations/ReactRouter.tsx b/docs/data/toolpad/core/integrations/ReactRouter.tsx
index e84f94173e4..46a02f74692 100644
--- a/docs/data/toolpad/core/integrations/ReactRouter.tsx
+++ b/docs/data/toolpad/core/integrations/ReactRouter.tsx
@@ -7,6 +7,7 @@ import { createMemoryRouter, RouterProvider, Outlet } from 'react-router';
 import { ReactRouterAppProvider } from '@toolpad/core/react-router';
 import { DashboardLayout } from '@toolpad/core/DashboardLayout';
 import { PageContainer } from '@toolpad/core/PageContainer';
+import { DemoProvider } from '@toolpad/core/internal';
 import type { Navigation } from '@toolpad/core/AppProvider';
 
 function Layout() {
@@ -67,14 +68,17 @@ function App(props: { window?: Window }) {
   const { window } = props;
 
   return (
-    <ReactRouterAppProvider
-      navigation={NAVIGATION}
-      branding={BRANDING}
-      theme={demoTheme}
-      window={window}
-    >
-      <Outlet />
-    </ReactRouterAppProvider>
+    // Remove this provider when copying and pasting into your project.
+    <DemoProvider window={window}>
+      <ReactRouterAppProvider
+        navigation={NAVIGATION}
+        branding={BRANDING}
+        theme={demoTheme}
+        window={window}
+      >
+        <Outlet />
+      </ReactRouterAppProvider>
+    </DemoProvider>
   );
 }
 
diff --git a/docs/data/toolpad/core/introduction/Introduction.tsx b/docs/data/toolpad/core/introduction/Introduction.tsx
index 611e6327567..4fea4d6d34a 100644
--- a/docs/data/toolpad/core/introduction/Introduction.tsx
+++ b/docs/data/toolpad/core/introduction/Introduction.tsx
@@ -8,7 +8,7 @@ import { AppProvider, type Navigation } from '@toolpad/core/AppProvider';
 import { DashboardLayout } from '@toolpad/core/DashboardLayout';
 import { PageContainer } from '@toolpad/core/PageContainer';
 import { Crud, DataModel, DataSource, DataSourceCache } from '@toolpad/core/Crud';
-import { useDemoRouter } from '@toolpad/core/internal';
+import { DemoProvider, useDemoRouter } from '@toolpad/core/internal';
 
 const NAVIGATION: Navigation = [
   {
@@ -296,19 +296,22 @@ export default function Introduction(props: DemoProps) {
   }, [router.pathname]);
 
   return (
-    // preview-start
-    <AppProvider
-      navigation={NAVIGATION}
-      router={router}
-      theme={demoTheme}
-      window={demoWindow}
-    >
-      <DashboardLayout defaultSidebarCollapsed>
-        <PageContainer title={title}>
-          <DemoPageContent pathname={router.pathname} />
-        </PageContainer>
-      </DashboardLayout>
-    </AppProvider>
-    // preview-end
+    // Remove this provider when copying and pasting into your project.
+    <DemoProvider window={demoWindow}>
+      {/* preview-start */}
+      <AppProvider
+        navigation={NAVIGATION}
+        router={router}
+        theme={demoTheme}
+        window={demoWindow}
+      >
+        <DashboardLayout defaultSidebarCollapsed>
+          <PageContainer title={title}>
+            <DemoPageContent pathname={router.pathname} />
+          </PageContainer>
+        </DashboardLayout>
+      </AppProvider>
+      {/* preview-end */}
+    </DemoProvider>
   );
 }
diff --git a/docs/data/toolpad/core/introduction/TutorialDefault.tsx b/docs/data/toolpad/core/introduction/TutorialDefault.tsx
index ee9ce386b87..b41aaa01ea5 100644
--- a/docs/data/toolpad/core/introduction/TutorialDefault.tsx
+++ b/docs/data/toolpad/core/introduction/TutorialDefault.tsx
@@ -5,7 +5,7 @@ import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';
 import { AppProvider } from '@toolpad/core/AppProvider';
 import { DashboardLayout } from '@toolpad/core/DashboardLayout';
 import { PageContainer } from '@toolpad/core/PageContainer';
-import { useDemoRouter } from '@toolpad/core/internal';
+import { DemoProvider, useDemoRouter } from '@toolpad/core/internal';
 import type { Navigation } from '@toolpad/core/AppProvider';
 
 const NAVIGATION: Navigation = [
@@ -65,15 +65,18 @@ export default function TutorialDefault(props: DemoProps) {
   const demoRouter = useDemoRouter('/page');
 
   return (
-    <AppProvider
-      navigation={NAVIGATION}
-      router={demoRouter}
-      theme={demoTheme}
-      window={demoWindow}
-    >
-      <DashboardLayout>
-        <DemoPageContent pathname={demoRouter.pathname} />
-      </DashboardLayout>
-    </AppProvider>
+    // Remove this provider when copying and pasting into your project.
+    <DemoProvider window={demoWindow}>
+      <AppProvider
+        navigation={NAVIGATION}
+        router={demoRouter}
+        theme={demoTheme}
+        window={demoWindow}
+      >
+        <DashboardLayout>
+          <DemoPageContent pathname={demoRouter.pathname} />
+        </DashboardLayout>
+      </AppProvider>
+    </DemoProvider>
   );
 }
diff --git a/docs/data/toolpad/core/introduction/TutorialPages.tsx b/docs/data/toolpad/core/introduction/TutorialPages.tsx
index fb24c7d6a95..3d5c5148dc3 100644
--- a/docs/data/toolpad/core/introduction/TutorialPages.tsx
+++ b/docs/data/toolpad/core/introduction/TutorialPages.tsx
@@ -6,7 +6,7 @@ import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';
 import TimelineIcon from '@mui/icons-material/Timeline';
 import { AppProvider } from '@toolpad/core/AppProvider';
 import { DashboardLayout } from '@toolpad/core/DashboardLayout';
-import { useDemoRouter } from '@toolpad/core/internal';
+import { DemoProvider, useDemoRouter } from '@toolpad/core/internal';
 import { PageContainer } from '@toolpad/core/PageContainer';
 import type { Navigation } from '@toolpad/core/AppProvider';
 
@@ -83,15 +83,18 @@ export default function TutorialPages(props: DemoProps) {
   const demoRouter = useDemoRouter('/page-2');
 
   return (
-    <AppProvider
-      navigation={NAVIGATION}
-      router={demoRouter}
-      theme={demoTheme}
-      window={demoWindow}
-    >
-      <DashboardLayout>
-        <DemoPageContent pathname={demoRouter.pathname} />
-      </DashboardLayout>
-    </AppProvider>
+    // Remove this provider when copying and pasting into your project.
+    <DemoProvider window={demoWindow}>
+      <AppProvider
+        navigation={NAVIGATION}
+        router={demoRouter}
+        theme={demoTheme}
+        window={demoWindow}
+      >
+        <DashboardLayout>
+          <DemoPageContent pathname={demoRouter.pathname} />
+        </DashboardLayout>
+      </AppProvider>
+    </DemoProvider>
   );
 }
diff --git a/docs/pages/toolpad/core/react-sign-in-page/index.js b/docs/pages/toolpad/core/react-sign-in-page/index.js
index 8c196df45e9..12dd8f2a6b5 100644
--- a/docs/pages/toolpad/core/react-sign-in-page/index.js
+++ b/docs/pages/toolpad/core/react-sign-in-page/index.js
@@ -1,12 +1,7 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import { DocsContext } from '@toolpad/core/internal';
 import * as pageProps from '../../../../data/toolpad/core/components/sign-in-page/sign-in-page.md?muiMarkdown';
 
 export default function Page() {
-  return (
-    <DocsContext.Provider value>
-      <MarkdownDocs disableAd {...pageProps} />
-    </DocsContext.Provider>
-  );
+  return <MarkdownDocs disableAd {...pageProps} />;
 }
diff --git a/packages/toolpad-core/package.json b/packages/toolpad-core/package.json
index 42333bb2a37..4d96f7e1d64 100644
--- a/packages/toolpad-core/package.json
+++ b/packages/toolpad-core/package.json
@@ -55,6 +55,8 @@
     "prop-types": "15.8.1"
   },
   "devDependencies": {
+    "@emotion/cache": "11.14.0",
+    "@emotion/react": "11.14.0",
     "@mui/icons-material": "^7.0.2",
     "@mui/material": "^7.0.2",
     "@mui/x-data-grid-premium": "^8.0.0 || ^8.0.0-beta",
@@ -73,6 +75,8 @@
     "vitest": "2.1.9"
   },
   "peerDependencies": {
+    "@emotion/cache": "^11",
+    "@emotion/react": "^11",
     "@mui/icons-material": "^7.0.0-beta || ^7.0.0",
     "@mui/material": "^7.0.0-beta || ^7.0.0",
     "next": "^14 || ^15",
diff --git a/packages/toolpad-core/src/internal/context.ts b/packages/toolpad-core/src/internal/context.ts
deleted file mode 100644
index f3edbe55743..00000000000
--- a/packages/toolpad-core/src/internal/context.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-'use client';
-import * as React from 'react';
-
-export const DocsContext = React.createContext<boolean>(false);
diff --git a/packages/toolpad-core/src/internal/demo.tsx b/packages/toolpad-core/src/internal/demo.tsx
index 04e542cb3e0..bd95696156e 100644
--- a/packages/toolpad-core/src/internal/demo.tsx
+++ b/packages/toolpad-core/src/internal/demo.tsx
@@ -1,5 +1,7 @@
 'use client';
 import * as React from 'react';
+import createCache from '@emotion/cache';
+import { CacheProvider } from '@emotion/react';
 import { Router } from '../AppProvider';
 
 /**
@@ -7,6 +9,28 @@ import { Router } from '../AppProvider';
  * @ignore - internal component.
  */
 
+interface DemoProviderProps {
+  /**
+   * The window where the application is rendered.
+   * @default window
+   */
+  window?: Window;
+  children: React.ReactNode;
+}
+
+export function DemoProvider({ window, children }: DemoProviderProps) {
+  const demoEmotionCache = React.useMemo(
+    () =>
+      createCache({
+        key: 'toolpad-demo-app',
+        container: window?.document.head,
+      }),
+    [window?.document.head],
+  );
+
+  return <CacheProvider value={demoEmotionCache}>{children}</CacheProvider>;
+}
+
 const DUMMY_BASE = 'https://example.com';
 
 /**
diff --git a/packages/toolpad-core/src/internal/index.tsx b/packages/toolpad-core/src/internal/index.tsx
index e3391b5e1a2..2ff87712938 100644
--- a/packages/toolpad-core/src/internal/index.tsx
+++ b/packages/toolpad-core/src/internal/index.tsx
@@ -1,4 +1,3 @@
 export { Link } from '../shared/Link';
 
 export * from './demo';
-export { DocsContext } from './context';
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index fecf86d5fa4..ddaa9db0627 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -201,7 +201,7 @@ importers:
         version: 7.37.4(eslint@8.57.1)
       eslint-plugin-react-compiler:
         specifier: latest
-        version: 19.0.0-beta-ebf51a3-20250411(eslint@8.57.1)
+        version: 19.0.0-beta-af1b7da-20250417(eslint@8.57.1)
       eslint-plugin-react-hooks:
         specifier: 5.2.0
         version: 5.2.0(eslint@8.57.1)
@@ -650,6 +650,12 @@ importers:
         specifier: ^18 || ^19
         version: 19.0.0
     devDependencies:
+      '@emotion/cache':
+        specifier: 11.14.0
+        version: 11.14.0
+      '@emotion/react':
+        specifier: 11.14.0
+        version: 11.14.0(@types/react@19.0.12)(react@19.0.0)
       '@mui/icons-material':
         specifier: ^7.0.2
         version: 7.0.2(@mui/material@7.0.2(@emotion/react@11.14.0(@types/react@19.0.12)(react@19.0.0))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@19.0.12)(react@19.0.0))(@types/react@19.0.12)(react@19.0.0))(@types/react@19.0.12)(react-dom@19.0.0(react@19.0.0))(react@19.0.0))(@types/react@19.0.12)(react@19.0.0)
@@ -5600,8 +5606,8 @@ packages:
     peerDependencies:
       eslint: '>=7.0.0'
 
-  eslint-plugin-react-compiler@19.0.0-beta-ebf51a3-20250411:
-    resolution: {integrity: sha512-R7ncuwbCPFAoeMlS56DGGSJFxmRtlWafYH/iWyep5Ks0RaPqTCL4k5gA87axUBBcITsaIgUGkbqAxDxl8Xfm5A==}
+  eslint-plugin-react-compiler@19.0.0-beta-af1b7da-20250417:
+    resolution: {integrity: sha512-m3eVzHqtXFtu6rViWx/kBhv9Jcpj+Q4pkfRWyF47TIBa+Jo8DAB90OoeDh0JR896rtG1OXogLKKd+b6lzFup0A==}
     engines: {node: ^14.17.0 || ^16.0.0 || >= 18.0.0}
     peerDependencies:
       eslint: '>=7'
@@ -15409,7 +15415,7 @@ snapshots:
       globals: 13.24.0
       rambda: 7.5.0
 
-  eslint-plugin-react-compiler@19.0.0-beta-ebf51a3-20250411(eslint@8.57.1):
+  eslint-plugin-react-compiler@19.0.0-beta-af1b7da-20250417(eslint@8.57.1):
     dependencies:
       '@babel/core': 7.26.10
       '@babel/parser': 7.27.0

From 450603ef1c1299bf97f363465e71e28ce0d34e7c Mon Sep 17 00:00:00 2001
From: Pedro Ferreira <10789765+apedroferreira@users.noreply.github.com>
Date: Mon, 21 Apr 2025 12:21:52 +0100
Subject: [PATCH 03/11] Fix AI weirdness

---
 docs/data/toolpad/core/components/crud/CrudBasic.tsx          | 4 ++--
 docs/data/toolpad/core/components/crud/CrudCreate.tsx         | 4 ++--
 docs/data/toolpad/core/components/crud/CrudEdit.tsx           | 4 ++--
 .../dashboard-layout/DashboardLayoutNoMiniSidebar.tsx         | 2 --
 4 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/docs/data/toolpad/core/components/crud/CrudBasic.tsx b/docs/data/toolpad/core/components/crud/CrudBasic.tsx
index 276f48f9da7..0f1c726c621 100644
--- a/docs/data/toolpad/core/components/crud/CrudBasic.tsx
+++ b/docs/data/toolpad/core/components/crud/CrudBasic.tsx
@@ -249,7 +249,6 @@ export default function CrudBasic(props: DemoProps) {
   return (
     // Remove this provider when copying and pasting into your project.
     <DemoProvider window={demoWindow}>
-      {/* preview-start */}
       <AppProvider
         navigation={NAVIGATION}
         router={router}
@@ -258,6 +257,7 @@ export default function CrudBasic(props: DemoProps) {
       >
         <DashboardLayout defaultSidebarCollapsed>
           <PageContainer title={title}>
+            {/* preview-start */}
             <Crud<Note>
               dataSource={notesDataSource}
               dataSourceCache={notesCache}
@@ -265,10 +265,10 @@ export default function CrudBasic(props: DemoProps) {
               initialPageSize={10}
               defaultValues={{ title: 'New note' }}
             />
+            {/* preview-end */}
           </PageContainer>
         </DashboardLayout>
       </AppProvider>
-      {/* preview-end */}
     </DemoProvider>
   );
 }
diff --git a/docs/data/toolpad/core/components/crud/CrudCreate.tsx b/docs/data/toolpad/core/components/crud/CrudCreate.tsx
index 2877590a3bb..cfb197c6404 100644
--- a/docs/data/toolpad/core/components/crud/CrudCreate.tsx
+++ b/docs/data/toolpad/core/components/crud/CrudCreate.tsx
@@ -132,7 +132,6 @@ export default function CrudCreate(props: DemoProps) {
   return (
     // Remove this provider when copying and pasting into your project.
     <DemoProvider window={demoWindow}>
-      {/* preview-start */}
       <AppProvider
         navigation={NAVIGATION}
         router={router}
@@ -141,6 +140,7 @@ export default function CrudCreate(props: DemoProps) {
       >
         <DashboardLayout defaultSidebarCollapsed>
           <PageContainer title="New Person">
+            {/* preview-start */}
             <Create<Person>
               dataSource={peopleDataSource}
               dataSourceCache={peopleCache}
@@ -148,10 +148,10 @@ export default function CrudCreate(props: DemoProps) {
               onSubmitSuccess={handleSubmitSuccess}
               resetOnSubmit
             />
+            {/* preview-end */}
           </PageContainer>
         </DashboardLayout>
       </AppProvider>
-      {/* preview-end */}
     </DemoProvider>
   );
 }
diff --git a/docs/data/toolpad/core/components/crud/CrudEdit.tsx b/docs/data/toolpad/core/components/crud/CrudEdit.tsx
index 11674307b7a..752a326513e 100644
--- a/docs/data/toolpad/core/components/crud/CrudEdit.tsx
+++ b/docs/data/toolpad/core/components/crud/CrudEdit.tsx
@@ -153,7 +153,6 @@ export default function CrudEdit(props: DemoProps) {
   return (
     // Remove this provider when copying and pasting into your project.
     <DemoProvider window={demoWindow}>
-      {/* preview-start */}
       <AppProvider
         navigation={NAVIGATION}
         router={router}
@@ -162,16 +161,17 @@ export default function CrudEdit(props: DemoProps) {
       >
         <DashboardLayout defaultSidebarCollapsed>
           <PageContainer title="Edit Person">
+            {/* preview-start */}
             <Edit<Person>
               id={1}
               dataSource={peopleDataSource}
               dataSourceCache={peopleCache}
               onSubmitSuccess={handleSubmitSuccess}
             />
+            {/* preview-end */}
           </PageContainer>
         </DashboardLayout>
       </AppProvider>
-      {/* preview-end */}
     </DemoProvider>
   );
 }
diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutNoMiniSidebar.tsx b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutNoMiniSidebar.tsx
index 81d9a8bde1f..6ba187f9f52 100644
--- a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutNoMiniSidebar.tsx
+++ b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutNoMiniSidebar.tsx
@@ -78,7 +78,6 @@ export default function DashboardLayoutNoMiniSidebar(props: DemoProps) {
   return (
     // Remove this provider when copying and pasting into your project.
     <DemoProvider window={demoWindow}>
-      {/* preview-start */}
       <AppProvider
         navigation={NAVIGATION}
         router={router}
@@ -89,7 +88,6 @@ export default function DashboardLayoutNoMiniSidebar(props: DemoProps) {
           <DemoPageContent pathname={router.pathname} />
         </DashboardLayout>
       </AppProvider>
-      {/* preview-end */}
     </DemoProvider>
   );
 }

From 5d05a70dba92e2c778695973fcce1d64a8ce86ea Mon Sep 17 00:00:00 2001
From: Pedro Ferreira <10789765+apedroferreira@users.noreply.github.com>
Date: Mon, 21 Apr 2025 12:22:13 +0100
Subject: [PATCH 04/11] Regenerate docs

---
 .../app-provider/AppProviderBasic.js          | 29 ++++---
 .../app-provider/AppProviderTheme.js          | 29 ++++---
 .../core/components/crud/CrudAdvanced.js      | 85 ++++++++++---------
 .../toolpad/core/components/crud/CrudBasic.js | 45 +++++-----
 .../core/components/crud/CrudCreate.js        | 45 +++++-----
 .../toolpad/core/components/crud/CrudEdit.js  | 43 +++++-----
 .../toolpad/core/components/crud/CrudList.js  | 49 ++++++-----
 .../core/components/crud/CrudListDataGrid.js  | 57 +++++++------
 .../core/components/crud/CrudNoCache.js       | 45 +++++-----
 .../toolpad/core/components/crud/CrudShow.js  | 45 +++++-----
 .../DashboardLayoutAccount.js                 | 33 +++----
 .../DashboardLayoutAccountSidebar.js          | 31 ++++---
 .../DashboardLayoutAccountSidebar.tsx.preview | 21 +++--
 .../dashboard-layout/DashboardLayoutBasic.js  | 19 ++---
 .../DashboardLayoutBranding.js                | 39 +++++----
 .../DashboardLayoutCustomThemeSwitcher.js     | 31 ++++---
 ...boardLayoutCustomThemeSwitcher.tsx.preview | 23 +++--
 .../DashboardLayoutFullScreen.js              | 37 ++++----
 .../DashboardLayoutFullScreen.tsx.preview     |  9 --
 .../DashboardLayoutNavigationActions.js       | 57 +++++++------
 .../DashboardLayoutNavigationDividers.js      | 53 ++++++------
 .../DashboardLayoutNavigationHeadings.js      | 67 ++++++++-------
 .../DashboardLayoutNavigationLinks.js         | 51 +++++------
 .../DashboardLayoutNavigationNested.js        | 65 +++++++-------
 .../DashboardLayoutNoMiniSidebar.js           | 25 +++---
 .../DashboardLayoutNoMiniSidebar.tsx.preview  | 15 +++-
 .../DashboardLayoutPattern.js                 | 53 ++++++------
 .../DashboardLayoutSidebarCollapsed.js        | 24 +++---
 ...ashboardLayoutSidebarCollapsed.tsx.preview | 15 +++-
 .../DashboardLayoutSidebarHidden.js           | 15 ++--
 .../DashboardLayoutSidebarHidden.tsx.preview  | 10 ++-
 .../dashboard-layout/DashboardLayoutSlots.js  | 35 ++++----
 .../DashboardLayoutSlots.tsx.preview          |  9 --
 .../page-container/PageContainerFullScreen.js | 41 ++++-----
 .../PageContainerFullScreen.tsx.preview       | 11 ---
 .../toolpad/core/integrations/ReactRouter.js  | 20 +++--
 .../toolpad/core/introduction/Introduction.js | 33 +++----
 .../core/introduction/TutorialDefault.js      | 25 +++---
 .../introduction/TutorialDefault.tsx.preview  | 15 +++-
 .../core/introduction/TutorialPages.js        | 25 +++---
 .../introduction/TutorialPages.tsx.preview    | 15 +++-
 41 files changed, 755 insertions(+), 639 deletions(-)
 delete mode 100644 docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutFullScreen.tsx.preview
 delete mode 100644 docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutSlots.tsx.preview
 delete mode 100644 docs/data/toolpad/core/components/page-container/PageContainerFullScreen.tsx.preview

diff --git a/docs/data/toolpad/core/components/app-provider/AppProviderBasic.js b/docs/data/toolpad/core/components/app-provider/AppProviderBasic.js
index 3ed2c822614..36aa6e20c6f 100644
--- a/docs/data/toolpad/core/components/app-provider/AppProviderBasic.js
+++ b/docs/data/toolpad/core/components/app-provider/AppProviderBasic.js
@@ -7,7 +7,7 @@ import DashboardIcon from '@mui/icons-material/Dashboard';
 import TimelineIcon from '@mui/icons-material/Timeline';
 import { AppProvider } from '@toolpad/core/AppProvider';
 import { DashboardLayout } from '@toolpad/core/DashboardLayout';
-import { useDemoRouter } from '@toolpad/core/internal';
+import { DemoProvider, useDemoRouter } from '@toolpad/core/internal';
 
 const NAVIGATION = [
   {
@@ -71,18 +71,21 @@ function AppProviderBasic(props) {
   const demoWindow = window !== undefined ? window() : undefined;
 
   return (
-    // preview-start
-    <AppProvider
-      navigation={NAVIGATION}
-      router={router}
-      theme={demoTheme}
-      window={demoWindow}
-    >
-      <DashboardLayout>
-        <DemoPageContent pathname={router.pathname} />
-      </DashboardLayout>
-    </AppProvider>
-    // preview-end
+    // Remove this provider when copying and pasting into your project.
+    <DemoProvider window={demoWindow}>
+      {/* preview-start */}
+      <AppProvider
+        navigation={NAVIGATION}
+        router={router}
+        theme={demoTheme}
+        window={demoWindow}
+      >
+        <DashboardLayout>
+          <DemoPageContent pathname={router.pathname} />
+        </DashboardLayout>
+      </AppProvider>
+      {/* preview-end */}
+    </DemoProvider>
   );
 }
 
diff --git a/docs/data/toolpad/core/components/app-provider/AppProviderTheme.js b/docs/data/toolpad/core/components/app-provider/AppProviderTheme.js
index c064cf711be..1cbb963cf33 100644
--- a/docs/data/toolpad/core/components/app-provider/AppProviderTheme.js
+++ b/docs/data/toolpad/core/components/app-provider/AppProviderTheme.js
@@ -7,7 +7,7 @@ import DashboardIcon from '@mui/icons-material/Dashboard';
 import TimelineIcon from '@mui/icons-material/Timeline';
 import { AppProvider } from '@toolpad/core/AppProvider';
 import { DashboardLayout } from '@toolpad/core/DashboardLayout';
-import { useDemoRouter } from '@toolpad/core/internal';
+import { DemoProvider, useDemoRouter } from '@toolpad/core/internal';
 
 const NAVIGATION = [
   {
@@ -88,18 +88,21 @@ function AppProviderTheme(props) {
   const demoWindow = window !== undefined ? window() : undefined;
 
   return (
-    // preview-start
-    <AppProvider
-      navigation={NAVIGATION}
-      router={router}
-      theme={customTheme}
-      window={demoWindow}
-    >
-      <DashboardLayout>
-        <DemoPageContent pathname={router.pathname} />
-      </DashboardLayout>
-    </AppProvider>
-    // preview-end
+    // Remove this provider when copying and pasting into your project.
+    <DemoProvider window={demoWindow}>
+      {/* preview-start */}
+      <AppProvider
+        navigation={NAVIGATION}
+        router={router}
+        theme={customTheme}
+        window={demoWindow}
+      >
+        <DashboardLayout>
+          <DemoPageContent pathname={router.pathname} />
+        </DashboardLayout>
+      </AppProvider>
+      {/* preview-end */}
+    </DemoProvider>
   );
 }
 
diff --git a/docs/data/toolpad/core/components/crud/CrudAdvanced.js b/docs/data/toolpad/core/components/crud/CrudAdvanced.js
index 7fd30bf777c..05cca6d443d 100644
--- a/docs/data/toolpad/core/components/crud/CrudAdvanced.js
+++ b/docs/data/toolpad/core/components/crud/CrudAdvanced.js
@@ -13,7 +13,7 @@ import {
   List,
   Show,
 } from '@toolpad/core/Crud';
-import { useDemoRouter } from '@toolpad/core/internal';
+import { DemoProvider, useDemoRouter } from '@toolpad/core/internal';
 
 const NAVIGATION = [
   {
@@ -273,46 +273,49 @@ function CrudAdvanced(props) {
   const editNoteId = matchPath(editPath, router.pathname);
 
   return (
-    <AppProvider
-      navigation={NAVIGATION}
-      router={router}
-      theme={demoTheme}
-      window={demoWindow}
-    >
-      <DashboardLayout defaultSidebarCollapsed>
-        <PageContainer title={title}>
-          {/* preview-start */}
-          <CrudProvider dataSource={notesDataSource} dataSourceCache={notesCache}>
-            {router.pathname === listPath ? (
-              <List
-                initialPageSize={10}
-                onRowClick={handleRowClick}
-                onCreateClick={handleCreateClick}
-                onEditClick={handleEditClick}
-              />
-            ) : null}
-            {router.pathname === createPath ? (
-              <Create
-                initialValues={{ title: 'New note' }}
-                onSubmitSuccess={handleCreate}
-                resetOnSubmit={false}
-              />
-            ) : null}
-            {router.pathname !== createPath && showNoteId ? (
-              <Show
-                id={showNoteId}
-                onEditClick={handleEditClick}
-                onDelete={handleDelete}
-              />
-            ) : null}
-            {editNoteId ? (
-              <Edit id={editNoteId} onSubmitSuccess={handleEdit} />
-            ) : null}
-          </CrudProvider>
-          {/* preview-end */}
-        </PageContainer>
-      </DashboardLayout>
-    </AppProvider>
+    // Remove this provider when copying and pasting into your project.
+    <DemoProvider window={demoWindow}>
+      <AppProvider
+        navigation={NAVIGATION}
+        router={router}
+        theme={demoTheme}
+        window={demoWindow}
+      >
+        <DashboardLayout defaultSidebarCollapsed>
+          <PageContainer title={title}>
+            {/* preview-start */}
+            <CrudProvider dataSource={notesDataSource} dataSourceCache={notesCache}>
+              {router.pathname === listPath ? (
+                <List
+                  initialPageSize={10}
+                  onRowClick={handleRowClick}
+                  onCreateClick={handleCreateClick}
+                  onEditClick={handleEditClick}
+                />
+              ) : null}
+              {router.pathname === createPath ? (
+                <Create
+                  initialValues={{ title: 'New note' }}
+                  onSubmitSuccess={handleCreate}
+                  resetOnSubmit={false}
+                />
+              ) : null}
+              {router.pathname !== createPath && showNoteId ? (
+                <Show
+                  id={showNoteId}
+                  onEditClick={handleEditClick}
+                  onDelete={handleDelete}
+                />
+              ) : null}
+              {editNoteId ? (
+                <Edit id={editNoteId} onSubmitSuccess={handleEdit} />
+              ) : null}
+            </CrudProvider>
+            {/* preview-end */}
+          </PageContainer>
+        </DashboardLayout>
+      </AppProvider>
+    </DemoProvider>
   );
 }
 
diff --git a/docs/data/toolpad/core/components/crud/CrudBasic.js b/docs/data/toolpad/core/components/crud/CrudBasic.js
index 00f12c47456..289a751a521 100644
--- a/docs/data/toolpad/core/components/crud/CrudBasic.js
+++ b/docs/data/toolpad/core/components/crud/CrudBasic.js
@@ -6,7 +6,7 @@ import { AppProvider } from '@toolpad/core/AppProvider';
 import { DashboardLayout } from '@toolpad/core/DashboardLayout';
 import { PageContainer } from '@toolpad/core/PageContainer';
 import { Crud, DataSourceCache } from '@toolpad/core/Crud';
-import { useDemoRouter } from '@toolpad/core/internal';
+import { DemoProvider, useDemoRouter } from '@toolpad/core/internal';
 
 const NAVIGATION = [
   {
@@ -228,26 +228,29 @@ function CrudBasic(props) {
   }, [router.pathname]);
 
   return (
-    <AppProvider
-      navigation={NAVIGATION}
-      router={router}
-      theme={demoTheme}
-      window={demoWindow}
-    >
-      <DashboardLayout defaultSidebarCollapsed>
-        <PageContainer title={title}>
-          {/* preview-start */}
-          <Crud
-            dataSource={notesDataSource}
-            dataSourceCache={notesCache}
-            rootPath="/notes"
-            initialPageSize={10}
-            defaultValues={{ title: 'New note' }}
-          />
-          {/* preview-end */}
-        </PageContainer>
-      </DashboardLayout>
-    </AppProvider>
+    // Remove this provider when copying and pasting into your project.
+    <DemoProvider window={demoWindow}>
+      <AppProvider
+        navigation={NAVIGATION}
+        router={router}
+        theme={demoTheme}
+        window={demoWindow}
+      >
+        <DashboardLayout defaultSidebarCollapsed>
+          <PageContainer title={title}>
+            {/* preview-start */}
+            <Crud
+              dataSource={notesDataSource}
+              dataSourceCache={notesCache}
+              rootPath="/notes"
+              initialPageSize={10}
+              defaultValues={{ title: 'New note' }}
+            />
+            {/* preview-end */}
+          </PageContainer>
+        </DashboardLayout>
+      </AppProvider>
+    </DemoProvider>
   );
 }
 
diff --git a/docs/data/toolpad/core/components/crud/CrudCreate.js b/docs/data/toolpad/core/components/crud/CrudCreate.js
index 44754879de1..489584269f4 100644
--- a/docs/data/toolpad/core/components/crud/CrudCreate.js
+++ b/docs/data/toolpad/core/components/crud/CrudCreate.js
@@ -6,7 +6,7 @@ import { AppProvider } from '@toolpad/core/AppProvider';
 import { DashboardLayout } from '@toolpad/core/DashboardLayout';
 import { PageContainer } from '@toolpad/core/PageContainer';
 import { Create, DataSourceCache } from '@toolpad/core/Crud';
-import { useDemoRouter } from '@toolpad/core/internal';
+import { DemoProvider, useDemoRouter } from '@toolpad/core/internal';
 
 const NAVIGATION = [
   {
@@ -115,26 +115,29 @@ function CrudCreate(props) {
   }, []);
 
   return (
-    <AppProvider
-      navigation={NAVIGATION}
-      router={router}
-      theme={demoTheme}
-      window={demoWindow}
-    >
-      <DashboardLayout defaultSidebarCollapsed>
-        <PageContainer title="New Person">
-          {/* preview-start */}
-          <Create
-            dataSource={peopleDataSource}
-            dataSourceCache={peopleCache}
-            initialValues={{ age: 18 }}
-            onSubmitSuccess={handleSubmitSuccess}
-            resetOnSubmit
-          />
-          {/* preview-end */}
-        </PageContainer>
-      </DashboardLayout>
-    </AppProvider>
+    // Remove this provider when copying and pasting into your project.
+    <DemoProvider window={demoWindow}>
+      <AppProvider
+        navigation={NAVIGATION}
+        router={router}
+        theme={demoTheme}
+        window={demoWindow}
+      >
+        <DashboardLayout defaultSidebarCollapsed>
+          <PageContainer title="New Person">
+            {/* preview-start */}
+            <Create
+              dataSource={peopleDataSource}
+              dataSourceCache={peopleCache}
+              initialValues={{ age: 18 }}
+              onSubmitSuccess={handleSubmitSuccess}
+              resetOnSubmit
+            />
+            {/* preview-end */}
+          </PageContainer>
+        </DashboardLayout>
+      </AppProvider>
+    </DemoProvider>
   );
 }
 
diff --git a/docs/data/toolpad/core/components/crud/CrudEdit.js b/docs/data/toolpad/core/components/crud/CrudEdit.js
index d386ba38f27..6f99b53fe9a 100644
--- a/docs/data/toolpad/core/components/crud/CrudEdit.js
+++ b/docs/data/toolpad/core/components/crud/CrudEdit.js
@@ -6,7 +6,7 @@ import { AppProvider } from '@toolpad/core/AppProvider';
 import { DashboardLayout } from '@toolpad/core/DashboardLayout';
 import { PageContainer } from '@toolpad/core/PageContainer';
 import { DataSourceCache, Edit } from '@toolpad/core/Crud';
-import { useDemoRouter } from '@toolpad/core/internal';
+import { DemoProvider, useDemoRouter } from '@toolpad/core/internal';
 
 const NAVIGATION = [
   {
@@ -136,25 +136,28 @@ function CrudEdit(props) {
   }, []);
 
   return (
-    <AppProvider
-      navigation={NAVIGATION}
-      router={router}
-      theme={demoTheme}
-      window={demoWindow}
-    >
-      <DashboardLayout defaultSidebarCollapsed>
-        <PageContainer title="Edit Person">
-          {/* preview-start */}
-          <Edit
-            id={1}
-            dataSource={peopleDataSource}
-            dataSourceCache={peopleCache}
-            onSubmitSuccess={handleSubmitSuccess}
-          />
-          {/* preview-end */}
-        </PageContainer>
-      </DashboardLayout>
-    </AppProvider>
+    // Remove this provider when copying and pasting into your project.
+    <DemoProvider window={demoWindow}>
+      <AppProvider
+        navigation={NAVIGATION}
+        router={router}
+        theme={demoTheme}
+        window={demoWindow}
+      >
+        <DashboardLayout defaultSidebarCollapsed>
+          <PageContainer title="Edit Person">
+            {/* preview-start */}
+            <Edit
+              id={1}
+              dataSource={peopleDataSource}
+              dataSourceCache={peopleCache}
+              onSubmitSuccess={handleSubmitSuccess}
+            />
+            {/* preview-end */}
+          </PageContainer>
+        </DashboardLayout>
+      </AppProvider>
+    </DemoProvider>
   );
 }
 
diff --git a/docs/data/toolpad/core/components/crud/CrudList.js b/docs/data/toolpad/core/components/crud/CrudList.js
index 4b698e18e71..a0fea33c1e5 100644
--- a/docs/data/toolpad/core/components/crud/CrudList.js
+++ b/docs/data/toolpad/core/components/crud/CrudList.js
@@ -6,7 +6,7 @@ import { AppProvider } from '@toolpad/core/AppProvider';
 import { DashboardLayout } from '@toolpad/core/DashboardLayout';
 import { PageContainer } from '@toolpad/core/PageContainer';
 import { DataSourceCache, List } from '@toolpad/core/Crud';
-import { useDemoRouter } from '@toolpad/core/internal';
+import { DemoProvider, useDemoRouter } from '@toolpad/core/internal';
 
 const NAVIGATION = [
   {
@@ -166,28 +166,31 @@ function CrudList(props) {
   }, []);
 
   return (
-    <AppProvider
-      navigation={NAVIGATION}
-      router={router}
-      theme={demoTheme}
-      window={demoWindow}
-    >
-      <DashboardLayout defaultSidebarCollapsed>
-        <PageContainer>
-          {/* preview-start */}
-          <List
-            dataSource={peopleDataSource}
-            dataSourceCache={peopleCache}
-            initialPageSize={4}
-            onRowClick={handleRowClick}
-            onCreateClick={handleCreateClick}
-            onEditClick={handleEditClick}
-            onDelete={handleDelete}
-          />
-          {/* preview-end */}
-        </PageContainer>
-      </DashboardLayout>
-    </AppProvider>
+    // Remove this provider when copying and pasting into your project.
+    <DemoProvider window={demoWindow}>
+      <AppProvider
+        navigation={NAVIGATION}
+        router={router}
+        theme={demoTheme}
+        window={demoWindow}
+      >
+        <DashboardLayout defaultSidebarCollapsed>
+          <PageContainer>
+            {/* preview-start */}
+            <List
+              dataSource={peopleDataSource}
+              dataSourceCache={peopleCache}
+              initialPageSize={4}
+              onRowClick={handleRowClick}
+              onCreateClick={handleCreateClick}
+              onEditClick={handleEditClick}
+              onDelete={handleDelete}
+            />
+            {/* preview-end */}
+          </PageContainer>
+        </DashboardLayout>
+      </AppProvider>
+    </DemoProvider>
   );
 }
 
diff --git a/docs/data/toolpad/core/components/crud/CrudListDataGrid.js b/docs/data/toolpad/core/components/crud/CrudListDataGrid.js
index 34c40584d93..484afda3f25 100644
--- a/docs/data/toolpad/core/components/crud/CrudListDataGrid.js
+++ b/docs/data/toolpad/core/components/crud/CrudListDataGrid.js
@@ -7,7 +7,7 @@ import { AppProvider } from '@toolpad/core/AppProvider';
 import { DashboardLayout } from '@toolpad/core/DashboardLayout';
 import { PageContainer } from '@toolpad/core/PageContainer';
 import { DataSourceCache, List } from '@toolpad/core/Crud';
-import { useDemoRouter } from '@toolpad/core/internal';
+import { DemoProvider, useDemoRouter } from '@toolpad/core/internal';
 
 const NAVIGATION = [
   {
@@ -136,32 +136,35 @@ function CrudListDataGrid(props) {
   }, []);
 
   return (
-    <AppProvider
-      navigation={NAVIGATION}
-      router={router}
-      theme={demoTheme}
-      window={demoWindow}
-    >
-      <DashboardLayout defaultSidebarCollapsed>
-        <PageContainer>
-          {/* preview-start */}
-          <List
-            dataSource={peopleDataSource}
-            dataSourceCache={peopleCache}
-            initialPageSize={4}
-            onRowClick={handleRowClick}
-            onCreateClick={handleCreateClick}
-            onEditClick={handleEditClick}
-            onDelete={handleDelete}
-            slots={{ dataGrid: DataGridPro }}
-            slotProps={{
-              dataGrid: { checkboxSelection: true },
-            }}
-          />
-          {/* preview-end */}
-        </PageContainer>
-      </DashboardLayout>
-    </AppProvider>
+    // Remove this provider when copying and pasting into your project.
+    <DemoProvider window={demoWindow}>
+      <AppProvider
+        navigation={NAVIGATION}
+        router={router}
+        theme={demoTheme}
+        window={demoWindow}
+      >
+        <DashboardLayout defaultSidebarCollapsed>
+          <PageContainer>
+            {/* preview-start */}
+            <List
+              dataSource={peopleDataSource}
+              dataSourceCache={peopleCache}
+              initialPageSize={4}
+              onRowClick={handleRowClick}
+              onCreateClick={handleCreateClick}
+              onEditClick={handleEditClick}
+              onDelete={handleDelete}
+              slots={{ dataGrid: DataGridPro }}
+              slotProps={{
+                dataGrid: { checkboxSelection: true },
+              }}
+            />
+            {/* preview-end */}
+          </PageContainer>
+        </DashboardLayout>
+      </AppProvider>
+    </DemoProvider>
   );
 }
 
diff --git a/docs/data/toolpad/core/components/crud/CrudNoCache.js b/docs/data/toolpad/core/components/crud/CrudNoCache.js
index c227be51f98..a6b4b3764ff 100644
--- a/docs/data/toolpad/core/components/crud/CrudNoCache.js
+++ b/docs/data/toolpad/core/components/crud/CrudNoCache.js
@@ -6,7 +6,7 @@ import { AppProvider } from '@toolpad/core/AppProvider';
 import { DashboardLayout } from '@toolpad/core/DashboardLayout';
 import { PageContainer } from '@toolpad/core/PageContainer';
 import { Crud } from '@toolpad/core/Crud';
-import { useDemoRouter } from '@toolpad/core/internal';
+import { DemoProvider, useDemoRouter } from '@toolpad/core/internal';
 
 const NAVIGATION = [
   {
@@ -224,26 +224,29 @@ function CrudNoCache(props) {
   }, [router.pathname]);
 
   return (
-    <AppProvider
-      navigation={NAVIGATION}
-      router={router}
-      theme={demoTheme}
-      window={demoWindow}
-    >
-      <DashboardLayout defaultSidebarCollapsed>
-        <PageContainer title={title}>
-          {/* preview-start */}
-          <Crud
-            dataSource={notesDataSource}
-            dataSourceCache={null}
-            rootPath="/notes"
-            initialPageSize={10}
-            defaultValues={{ title: 'New note' }}
-          />
-          {/* preview-end */}
-        </PageContainer>
-      </DashboardLayout>
-    </AppProvider>
+    // Remove this provider when copying and pasting into your project.
+    <DemoProvider window={demoWindow}>
+      <AppProvider
+        navigation={NAVIGATION}
+        router={router}
+        theme={demoTheme}
+        window={demoWindow}
+      >
+        <DashboardLayout defaultSidebarCollapsed>
+          <PageContainer title={title}>
+            {/* preview-start */}
+            <Crud
+              dataSource={notesDataSource}
+              dataSourceCache={null}
+              rootPath="/notes"
+              initialPageSize={10}
+              defaultValues={{ title: 'New note' }}
+            />
+            {/* preview-end */}
+          </PageContainer>
+        </DashboardLayout>
+      </AppProvider>
+    </DemoProvider>
   );
 }
 
diff --git a/docs/data/toolpad/core/components/crud/CrudShow.js b/docs/data/toolpad/core/components/crud/CrudShow.js
index 43ebcb39dbd..722ed76b57a 100644
--- a/docs/data/toolpad/core/components/crud/CrudShow.js
+++ b/docs/data/toolpad/core/components/crud/CrudShow.js
@@ -6,7 +6,7 @@ import { AppProvider } from '@toolpad/core/AppProvider';
 import { DashboardLayout } from '@toolpad/core/DashboardLayout';
 import { PageContainer } from '@toolpad/core/PageContainer';
 import { DataSourceCache, Show } from '@toolpad/core/Crud';
-import { useDemoRouter } from '@toolpad/core/internal';
+import { DemoProvider, useDemoRouter } from '@toolpad/core/internal';
 
 const NAVIGATION = [
   {
@@ -104,26 +104,29 @@ function CrudShow(props) {
   }, []);
 
   return (
-    <AppProvider
-      navigation={NAVIGATION}
-      router={router}
-      theme={demoTheme}
-      window={demoWindow}
-    >
-      <DashboardLayout defaultSidebarCollapsed>
-        <PageContainer title="Person">
-          {/* preview-start */}
-          <Show
-            id={1}
-            dataSource={peopleDataSource}
-            dataSourceCache={peopleCache}
-            onEditClick={handleEditClick}
-            onDelete={handleDelete}
-          />
-          {/* preview-end */}
-        </PageContainer>
-      </DashboardLayout>
-    </AppProvider>
+    // Remove this provider when copying and pasting into your project.
+    <DemoProvider window={demoWindow}>
+      <AppProvider
+        navigation={NAVIGATION}
+        router={router}
+        theme={demoTheme}
+        window={demoWindow}
+      >
+        <DashboardLayout defaultSidebarCollapsed>
+          <PageContainer title="Person">
+            {/* preview-start */}
+            <Show
+              id={1}
+              dataSource={peopleDataSource}
+              dataSourceCache={peopleCache}
+              onEditClick={handleEditClick}
+              onDelete={handleDelete}
+            />
+            {/* preview-end */}
+          </PageContainer>
+        </DashboardLayout>
+      </AppProvider>
+    </DemoProvider>
   );
 }
 
diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutAccount.js b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutAccount.js
index 27d0b93c54e..c9485144c72 100644
--- a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutAccount.js
+++ b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutAccount.js
@@ -6,7 +6,7 @@ import { createTheme } from '@mui/material/styles';
 import DashboardIcon from '@mui/icons-material/Dashboard';
 import { AppProvider } from '@toolpad/core/AppProvider';
 import { DashboardLayout } from '@toolpad/core/DashboardLayout';
-import { useDemoRouter } from '@toolpad/core/internal';
+import { DemoProvider, useDemoRouter } from '@toolpad/core/internal';
 
 const NAVIGATION = [
   {
@@ -86,20 +86,23 @@ function DashboardLayoutAccount(props) {
   const demoWindow = window !== undefined ? window() : undefined;
 
   return (
-    // preview-start
-    <AppProvider
-      session={session}
-      authentication={authentication}
-      navigation={NAVIGATION}
-      router={router}
-      theme={demoTheme}
-      window={demoWindow}
-    >
-      <DashboardLayout>
-        <DemoPageContent pathname={router.pathname} />
-      </DashboardLayout>
-    </AppProvider>
-    // preview-end
+    // Remove this provider when copying and pasting into your project.
+    <DemoProvider window={demoWindow}>
+      {/* preview-start */}
+      <AppProvider
+        session={session}
+        authentication={authentication}
+        navigation={NAVIGATION}
+        router={router}
+        theme={demoTheme}
+        window={demoWindow}
+      >
+        <DashboardLayout>
+          <DemoPageContent pathname={router.pathname} />
+        </DashboardLayout>
+      </AppProvider>
+      {/* preview-end */}
+    </DemoProvider>
   );
 }
 
diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutAccountSidebar.js b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutAccountSidebar.js
index 1ee1fc58259..77e4d2c9034 100644
--- a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutAccountSidebar.js
+++ b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutAccountSidebar.js
@@ -21,6 +21,8 @@ import {
   SignOutButton,
 } from '@toolpad/core/Account';
 
+import { DemoProvider } from '@toolpad/core/internal';
+
 const NAVIGATION = [
   {
     kind: 'header',
@@ -267,20 +269,23 @@ function DashboardLayoutAccountSidebar(props) {
   }, []);
 
   return (
-    <AppProvider
-      navigation={NAVIGATION}
-      router={router}
-      theme={demoTheme}
-      window={demoWindow}
-      authentication={authentication}
-      session={session}
-    >
-      <DashboardLayout
-        slots={{ toolbarAccount: () => null, sidebarFooter: SidebarFooterAccount }}
+    // Remove this provider when copying and pasting into your project.
+    <DemoProvider window={demoWindow}>
+      <AppProvider
+        navigation={NAVIGATION}
+        router={router}
+        theme={demoTheme}
+        window={demoWindow}
+        authentication={authentication}
+        session={session}
       >
-        <DemoPageContent pathname={pathname} />
-      </DashboardLayout>
-    </AppProvider>
+        <DashboardLayout
+          slots={{ toolbarAccount: () => null, sidebarFooter: SidebarFooterAccount }}
+        >
+          <DemoPageContent pathname={pathname} />
+        </DashboardLayout>
+      </AppProvider>
+    </DemoProvider>
   );
 }
 
diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutAccountSidebar.tsx.preview b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutAccountSidebar.tsx.preview
index f567d5793e9..2f36c1c0aba 100644
--- a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutAccountSidebar.tsx.preview
+++ b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutAccountSidebar.tsx.preview
@@ -1,5 +1,16 @@
-<DashboardLayout
-  slots={{ toolbarAccount: () => null, sidebarFooter: SidebarFooterAccount }}
->
-  <DemoPageContent pathname={pathname} />
-</DashboardLayout>
\ No newline at end of file
+<DemoProvider window={demoWindow}>
+  <AppProvider
+    navigation={NAVIGATION}
+    router={router}
+    theme={demoTheme}
+    window={demoWindow}
+    authentication={authentication}
+    session={session}
+  >
+    <DashboardLayout
+      slots={{ toolbarAccount: () => null, sidebarFooter: SidebarFooterAccount }}
+    >
+      <DemoPageContent pathname={pathname} />
+    </DashboardLayout>
+  </AppProvider>
+</DemoProvider>
\ No newline at end of file
diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBasic.js b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBasic.js
index 613500d7b11..2cff4b90ccf 100644
--- a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBasic.js
+++ b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBasic.js
@@ -8,11 +8,9 @@ import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';
 import BarChartIcon from '@mui/icons-material/BarChart';
 import DescriptionIcon from '@mui/icons-material/Description';
 import LayersIcon from '@mui/icons-material/Layers';
-import createCache from '@emotion/cache';
-import { CacheProvider } from '@emotion/react';
 import { AppProvider } from '@toolpad/core/AppProvider';
 import { DashboardLayout } from '@toolpad/core/DashboardLayout';
-import { useDemoRouter } from '@toolpad/core/internal';
+import { DemoProvider, useDemoRouter } from '@toolpad/core/internal';
 
 const NAVIGATION = [
   {
@@ -101,19 +99,12 @@ function DashboardLayoutBasic(props) {
 
   const router = useDemoRouter('/dashboard');
 
-  // Remove these variables when copying and pasting into your project.
+  // Remove this const when copying and pasting into your project.
   const demoWindow = window !== undefined ? window() : undefined;
-  const demoEmotionCache = React.useMemo(
-    () =>
-      createCache({
-        key: 'toolpad-demo-app',
-        container: demoWindow?.document.head,
-      }),
-    [demoWindow?.document.head],
-  );
 
   return (
-    <CacheProvider value={demoEmotionCache}>
+    // Remove this provider when copying and pasting into your project.
+    <DemoProvider window={demoWindow}>
       {/* preview-start */}
       <AppProvider
         navigation={NAVIGATION}
@@ -126,7 +117,7 @@ function DashboardLayoutBasic(props) {
         </DashboardLayout>
       </AppProvider>
       {/* preview-end */}
-    </CacheProvider>
+    </DemoProvider>
   );
 }
 
diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBranding.js b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBranding.js
index 82f06a76bb0..b641bafeac0 100644
--- a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBranding.js
+++ b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBranding.js
@@ -7,7 +7,7 @@ import DashboardIcon from '@mui/icons-material/Dashboard';
 import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';
 import { AppProvider } from '@toolpad/core/AppProvider';
 import { DashboardLayout } from '@toolpad/core/DashboardLayout';
-import { useDemoRouter } from '@toolpad/core/internal';
+import { DemoProvider, useDemoRouter } from '@toolpad/core/internal';
 
 const NAVIGATION = [
   {
@@ -67,23 +67,26 @@ function DashboardLayoutBranding(props) {
   const demoWindow = window !== undefined ? window() : undefined;
 
   return (
-    // preview-start
-    <AppProvider
-      navigation={NAVIGATION}
-      branding={{
-        logo: <img src="https://mui.com/static/logo.png" alt="MUI logo" />,
-        title: 'MUI',
-        homeUrl: '/toolpad/core/introduction',
-      }}
-      router={router}
-      theme={demoTheme}
-      window={demoWindow}
-    >
-      <DashboardLayout>
-        <DemoPageContent pathname={router.pathname} />
-      </DashboardLayout>
-    </AppProvider>
-    // preview-end
+    // Remove this provider when copying and pasting into your project.
+    <DemoProvider window={demoWindow}>
+      {/* preview-start */}
+      <AppProvider
+        navigation={NAVIGATION}
+        branding={{
+          logo: <img src="https://mui.com/static/logo.png" alt="MUI logo" />,
+          title: 'MUI',
+          homeUrl: '/toolpad/core/introduction',
+        }}
+        router={router}
+        theme={demoTheme}
+        window={demoWindow}
+      >
+        <DashboardLayout>
+          <DemoPageContent pathname={router.pathname} />
+        </DashboardLayout>
+      </AppProvider>
+      {/* preview-end */}
+    </DemoProvider>
   );
 }
 
diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutCustomThemeSwitcher.js b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutCustomThemeSwitcher.js
index bc46d147d7d..2ca57a673d7 100644
--- a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutCustomThemeSwitcher.js
+++ b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutCustomThemeSwitcher.js
@@ -16,7 +16,7 @@ import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';
 import SettingsIcon from '@mui/icons-material/Settings';
 import { AppProvider } from '@toolpad/core/AppProvider';
 import { DashboardLayout } from '@toolpad/core/DashboardLayout';
-import { useDemoRouter } from '@toolpad/core/internal';
+import { DemoProvider, useDemoRouter } from '@toolpad/core/internal';
 
 const NAVIGATION = [
   {
@@ -140,20 +140,23 @@ function DashboardLayoutCustomThemeSwitcher(props) {
   const demoWindow = window !== undefined ? window() : undefined;
 
   return (
-    <AppProvider
-      navigation={NAVIGATION}
-      router={router}
-      theme={demoTheme}
-      window={demoWindow}
-    >
-      <DashboardLayout
-        slots={{
-          toolbarActions: CustomThemeSwitcher,
-        }}
+    // Remove this provider when copying and pasting into your project.
+    <DemoProvider window={demoWindow}>
+      <AppProvider
+        navigation={NAVIGATION}
+        router={router}
+        theme={demoTheme}
+        window={demoWindow}
       >
-        <DemoPageContent pathname={router.pathname} />
-      </DashboardLayout>
-    </AppProvider>
+        <DashboardLayout
+          slots={{
+            toolbarActions: CustomThemeSwitcher,
+          }}
+        >
+          <DemoPageContent pathname={router.pathname} />
+        </DashboardLayout>
+      </AppProvider>
+    </DemoProvider>
   );
 }
 
diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutCustomThemeSwitcher.tsx.preview b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutCustomThemeSwitcher.tsx.preview
index c6e4f10b119..59ce3642633 100644
--- a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutCustomThemeSwitcher.tsx.preview
+++ b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutCustomThemeSwitcher.tsx.preview
@@ -1,7 +1,16 @@
-<DashboardLayout
-  slots={{
-    toolbarActions: CustomThemeSwitcher,
-  }}
->
-  <DemoPageContent pathname={router.pathname} />
-</DashboardLayout>
\ No newline at end of file
+<DemoProvider window={demoWindow}>
+  <AppProvider
+    navigation={NAVIGATION}
+    router={router}
+    theme={demoTheme}
+    window={demoWindow}
+  >
+    <DashboardLayout
+      slots={{
+        toolbarActions: CustomThemeSwitcher,
+      }}
+    >
+      <DemoPageContent pathname={router.pathname} />
+    </DashboardLayout>
+  </AppProvider>
+</DemoProvider>
\ No newline at end of file
diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutFullScreen.js b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutFullScreen.js
index 2205c2f6f0b..7f77e8a3fb3 100644
--- a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutFullScreen.js
+++ b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutFullScreen.js
@@ -4,7 +4,7 @@ import { createTheme } from '@mui/material/styles';
 import MapIcon from '@mui/icons-material/Map';
 import { AppProvider } from '@toolpad/core/AppProvider';
 import { DashboardLayout } from '@toolpad/core/DashboardLayout';
-import { useDemoRouter } from '@toolpad/core/internal';
+import { DemoProvider, useDemoRouter } from '@toolpad/core/internal';
 
 const NAVIGATION = [
   {
@@ -39,22 +39,25 @@ function DashboardLayoutFullScreen(props) {
   const demoWindow = window !== undefined ? window() : undefined;
 
   return (
-    <AppProvider
-      navigation={NAVIGATION}
-      router={router}
-      theme={demoTheme}
-      window={demoWindow}
-    >
-      <DashboardLayout>
-        <iframe
-          title="Google Map"
-          src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d387190.2799181496!2d-74.25987571760744!3d40.69767006358627!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c259af18b60165%3A0x8b621f8a7a7d28a4!2sNew%20York%2C%20NY%2C%20USA!5e0!3m2!1sen!2s!4v1633452834502!5m2!1sen!2s"
-          style={{ flex: 1, border: 0 }}
-          allowFullScreen
-          loading="lazy"
-        />
-      </DashboardLayout>
-    </AppProvider>
+    // Remove this provider when copying and pasting into your project.
+    <DemoProvider window={demoWindow}>
+      <AppProvider
+        navigation={NAVIGATION}
+        router={router}
+        theme={demoTheme}
+        window={demoWindow}
+      >
+        <DashboardLayout>
+          <iframe
+            title="Google Map"
+            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d387190.2799181496!2d-74.25987571760744!3d40.69767006358627!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c259af18b60165%3A0x8b621f8a7a7d28a4!2sNew%20York%2C%20NY%2C%20USA!5e0!3m2!1sen!2s!4v1633452834502!5m2!1sen!2s"
+            style={{ flex: 1, border: 0 }}
+            allowFullScreen
+            loading="lazy"
+          />
+        </DashboardLayout>
+      </AppProvider>
+    </DemoProvider>
   );
 }
 
diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutFullScreen.tsx.preview b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutFullScreen.tsx.preview
deleted file mode 100644
index d14789aaa5e..00000000000
--- a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutFullScreen.tsx.preview
+++ /dev/null
@@ -1,9 +0,0 @@
-<DashboardLayout>
-  <iframe
-    title="Google Map"
-    src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d387190.2799181496!2d-74.25987571760744!3d40.69767006358627!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c259af18b60165%3A0x8b621f8a7a7d28a4!2sNew%20York%2C%20NY%2C%20USA!5e0!3m2!1sen!2s!4v1633452834502!5m2!1sen!2s"
-    style={{ flex: 1, border: 0 }}
-    allowFullScreen
-    loading="lazy"
-  />
-</DashboardLayout>
\ No newline at end of file
diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutNavigationActions.js b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutNavigationActions.js
index ecdfe76da68..28e52a22fde 100644
--- a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutNavigationActions.js
+++ b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutNavigationActions.js
@@ -14,7 +14,7 @@ import CallMadeIcon from '@mui/icons-material/CallMade';
 import CallReceivedIcon from '@mui/icons-material/CallReceived';
 import { AppProvider } from '@toolpad/core/AppProvider';
 import { DashboardLayout } from '@toolpad/core/DashboardLayout';
-import { useDemoRouter } from '@toolpad/core/internal';
+import { DemoProvider, useDemoRouter } from '@toolpad/core/internal';
 
 const demoTheme = createTheme({
   cssVariables: {
@@ -114,32 +114,35 @@ function DashboardLayoutNavigationActions(props) {
   );
 
   return (
-    // preview-start
-    <AppProvider
-      navigation={[
-        {
-          segment: 'contacts',
-          title: 'Contacts',
-          icon: <PersonIcon />,
-          action: <Chip label={7} color="primary" size="small" />,
-        },
-        {
-          segment: 'calls',
-          title: 'Calls',
-          icon: <CallIcon />,
-          action: popoverMenuAction,
-          children: CALLS_NAVIGATION,
-        },
-      ]}
-      router={router}
-      theme={demoTheme}
-      window={demoWindow}
-    >
-      <DashboardLayout>
-        <DemoPageContent pathname={router.pathname} />
-      </DashboardLayout>
-    </AppProvider>
-    // preview-end
+    // Remove this provider when copying and pasting into your project.
+    <DemoProvider window={demoWindow}>
+      {/* preview-start */}
+      <AppProvider
+        navigation={[
+          {
+            segment: 'contacts',
+            title: 'Contacts',
+            icon: <PersonIcon />,
+            action: <Chip label={7} color="primary" size="small" />,
+          },
+          {
+            segment: 'calls',
+            title: 'Calls',
+            icon: <CallIcon />,
+            action: popoverMenuAction,
+            children: CALLS_NAVIGATION,
+          },
+        ]}
+        router={router}
+        theme={demoTheme}
+        window={demoWindow}
+      >
+        <DashboardLayout>
+          <DemoPageContent pathname={router.pathname} />
+        </DashboardLayout>
+      </AppProvider>
+      {/* preview-end */}
+    </DemoProvider>
   );
 }
 
diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutNavigationDividers.js b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutNavigationDividers.js
index 8ce503b3e41..203a4056a61 100644
--- a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutNavigationDividers.js
+++ b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutNavigationDividers.js
@@ -6,7 +6,7 @@ import { createTheme } from '@mui/material/styles';
 import DescriptionIcon from '@mui/icons-material/Description';
 import { AppProvider } from '@toolpad/core/AppProvider';
 import { DashboardLayout } from '@toolpad/core/DashboardLayout';
-import { useDemoRouter } from '@toolpad/core/internal';
+import { DemoProvider, useDemoRouter } from '@toolpad/core/internal';
 
 const demoTheme = createTheme({
   cssVariables: {
@@ -53,30 +53,33 @@ function DashboardLayoutNavigationDividers(props) {
   const demoWindow = window !== undefined ? window() : undefined;
 
   return (
-    // preview-start
-    <AppProvider
-      navigation={[
-        {
-          segment: 'star-wars',
-          title: 'Star Wars',
-          icon: <DescriptionIcon />,
-        },
-        { kind: 'divider' },
-        {
-          segment: 'eagle',
-          title: 'Eagle',
-          icon: <DescriptionIcon />,
-        },
-      ]}
-      router={router}
-      theme={demoTheme}
-      window={demoWindow}
-    >
-      <DashboardLayout>
-        <DemoPageContent pathname={router.pathname} />
-      </DashboardLayout>
-    </AppProvider>
-    // preview-end
+    // Remove this provider when copying and pasting into your project.
+    <DemoProvider window={demoWindow}>
+      {/* preview-start */}
+      <AppProvider
+        navigation={[
+          {
+            segment: 'star-wars',
+            title: 'Star Wars',
+            icon: <DescriptionIcon />,
+          },
+          { kind: 'divider' },
+          {
+            segment: 'eagle',
+            title: 'Eagle',
+            icon: <DescriptionIcon />,
+          },
+        ]}
+        router={router}
+        theme={demoTheme}
+        window={demoWindow}
+      >
+        <DashboardLayout>
+          <DemoPageContent pathname={router.pathname} />
+        </DashboardLayout>
+      </AppProvider>
+      {/* preview-end */}
+    </DemoProvider>
   );
 }
 
diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutNavigationHeadings.js b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutNavigationHeadings.js
index 337ca3a1c89..a33276dc196 100644
--- a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutNavigationHeadings.js
+++ b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutNavigationHeadings.js
@@ -6,7 +6,7 @@ import { createTheme } from '@mui/material/styles';
 import DescriptionIcon from '@mui/icons-material/Description';
 import { AppProvider } from '@toolpad/core/AppProvider';
 import { DashboardLayout } from '@toolpad/core/DashboardLayout';
-import { useDemoRouter } from '@toolpad/core/internal';
+import { DemoProvider, useDemoRouter } from '@toolpad/core/internal';
 
 const demoTheme = createTheme({
   cssVariables: {
@@ -53,37 +53,40 @@ function DashboardLayoutNavigationHeadings(props) {
   const demoWindow = window !== undefined ? window() : undefined;
 
   return (
-    // preview-start
-    <AppProvider
-      navigation={[
-        {
-          kind: 'header',
-          title: 'Animals',
-        },
-        {
-          segment: 'lion',
-          title: 'Lion',
-          icon: <DescriptionIcon />,
-        },
-        {
-          kind: 'header',
-          title: 'Movies',
-        },
-        {
-          segment: 'lord-of-the-rings',
-          title: 'Lord of the Rings',
-          icon: <DescriptionIcon />,
-        },
-      ]}
-      router={router}
-      theme={demoTheme}
-      window={demoWindow}
-    >
-      <DashboardLayout>
-        <DemoPageContent pathname={router.pathname} />
-      </DashboardLayout>
-    </AppProvider>
-    // preview-end
+    // Remove this provider when copying and pasting into your project.
+    <DemoProvider window={demoWindow}>
+      {/* preview-start */}
+      <AppProvider
+        navigation={[
+          {
+            kind: 'header',
+            title: 'Animals',
+          },
+          {
+            segment: 'lion',
+            title: 'Lion',
+            icon: <DescriptionIcon />,
+          },
+          {
+            kind: 'header',
+            title: 'Movies',
+          },
+          {
+            segment: 'lord-of-the-rings',
+            title: 'Lord of the Rings',
+            icon: <DescriptionIcon />,
+          },
+        ]}
+        router={router}
+        theme={demoTheme}
+        window={demoWindow}
+      >
+        <DashboardLayout>
+          <DemoPageContent pathname={router.pathname} />
+        </DashboardLayout>
+      </AppProvider>
+      {/* preview-end */}
+    </DemoProvider>
   );
 }
 
diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutNavigationLinks.js b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutNavigationLinks.js
index e3417db76c9..ea5fd1da952 100644
--- a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutNavigationLinks.js
+++ b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutNavigationLinks.js
@@ -6,7 +6,7 @@ import { createTheme } from '@mui/material/styles';
 import DescriptionIcon from '@mui/icons-material/Description';
 import { AppProvider } from '@toolpad/core/AppProvider';
 import { DashboardLayout } from '@toolpad/core/DashboardLayout';
-import { useDemoRouter } from '@toolpad/core/internal';
+import { DemoProvider, useDemoRouter } from '@toolpad/core/internal';
 
 const demoTheme = createTheme({
   cssVariables: {
@@ -53,29 +53,32 @@ function DashboardLayoutNavigationLinks(props) {
   const demoWindow = window !== undefined ? window() : undefined;
 
   return (
-    // preview-start
-    <AppProvider
-      navigation={[
-        {
-          segment: 'home',
-          title: 'Home',
-          icon: <DescriptionIcon />,
-        },
-        {
-          segment: 'about',
-          title: 'About Us',
-          icon: <DescriptionIcon />,
-        },
-      ]}
-      router={router}
-      theme={demoTheme}
-      window={demoWindow}
-    >
-      <DashboardLayout>
-        <DemoPageContent pathname={router.pathname} />
-      </DashboardLayout>
-    </AppProvider>
-    // preview-end
+    // Remove this provider when copying and pasting into your project.
+    <DemoProvider window={demoWindow}>
+      {/* preview-start */}
+      <AppProvider
+        navigation={[
+          {
+            segment: 'home',
+            title: 'Home',
+            icon: <DescriptionIcon />,
+          },
+          {
+            segment: 'about',
+            title: 'About Us',
+            icon: <DescriptionIcon />,
+          },
+        ]}
+        router={router}
+        theme={demoTheme}
+        window={demoWindow}
+      >
+        <DashboardLayout>
+          <DemoPageContent pathname={router.pathname} />
+        </DashboardLayout>
+      </AppProvider>
+      {/* preview-end */}
+    </DemoProvider>
   );
 }
 
diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutNavigationNested.js b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutNavigationNested.js
index 62fef512955..d8a8365a34f 100644
--- a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutNavigationNested.js
+++ b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutNavigationNested.js
@@ -7,7 +7,7 @@ import DescriptionIcon from '@mui/icons-material/Description';
 import FolderIcon from '@mui/icons-material/Folder';
 import { AppProvider } from '@toolpad/core/AppProvider';
 import { DashboardLayout } from '@toolpad/core/DashboardLayout';
-import { useDemoRouter } from '@toolpad/core/internal';
+import { DemoProvider, useDemoRouter } from '@toolpad/core/internal';
 
 const demoTheme = createTheme({
   cssVariables: {
@@ -54,36 +54,39 @@ function DashboardLayoutNavigationNested(props) {
   const demoWindow = window !== undefined ? window() : undefined;
 
   return (
-    // preview-start
-    <AppProvider
-      navigation={[
-        {
-          segment: 'movies',
-          title: 'Movies',
-          icon: <FolderIcon />,
-          children: [
-            {
-              segment: 'lord-of-the-rings',
-              title: 'Lord of the Rings',
-              icon: <DescriptionIcon />,
-            },
-            {
-              segment: 'harry-potter',
-              title: 'Harry Potter',
-              icon: <DescriptionIcon />,
-            },
-          ],
-        },
-      ]}
-      router={router}
-      theme={demoTheme}
-      window={demoWindow}
-    >
-      <DashboardLayout>
-        <DemoPageContent pathname={router.pathname} />
-      </DashboardLayout>
-    </AppProvider>
-    // preview-end
+    // Remove this provider when copying and pasting into your project.
+    <DemoProvider window={demoWindow}>
+      {/* preview-start */}
+      <AppProvider
+        navigation={[
+          {
+            segment: 'movies',
+            title: 'Movies',
+            icon: <FolderIcon />,
+            children: [
+              {
+                segment: 'lord-of-the-rings',
+                title: 'Lord of the Rings',
+                icon: <DescriptionIcon />,
+              },
+              {
+                segment: 'harry-potter',
+                title: 'Harry Potter',
+                icon: <DescriptionIcon />,
+              },
+            ],
+          },
+        ]}
+        router={router}
+        theme={demoTheme}
+        window={demoWindow}
+      >
+        <DashboardLayout>
+          <DemoPageContent pathname={router.pathname} />
+        </DashboardLayout>
+      </AppProvider>
+      {/* preview-end */}
+    </DemoProvider>
   );
 }
 
diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutNoMiniSidebar.js b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutNoMiniSidebar.js
index 8018cb8092a..92b27c7f3d4 100644
--- a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutNoMiniSidebar.js
+++ b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutNoMiniSidebar.js
@@ -8,7 +8,7 @@ import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';
 import BarChartIcon from '@mui/icons-material/BarChart';
 import { AppProvider } from '@toolpad/core/AppProvider';
 import { DashboardLayout } from '@toolpad/core/DashboardLayout';
-import { useDemoRouter } from '@toolpad/core/internal';
+import { DemoProvider, useDemoRouter } from '@toolpad/core/internal';
 
 const NAVIGATION = [
   {
@@ -73,16 +73,19 @@ function DashboardLayoutNoMiniSidebar(props) {
   const demoWindow = window !== undefined ? window() : undefined;
 
   return (
-    <AppProvider
-      navigation={NAVIGATION}
-      router={router}
-      theme={demoTheme}
-      window={demoWindow}
-    >
-      <DashboardLayout disableCollapsibleSidebar>
-        <DemoPageContent pathname={router.pathname} />
-      </DashboardLayout>
-    </AppProvider>
+    // Remove this provider when copying and pasting into your project.
+    <DemoProvider window={demoWindow}>
+      <AppProvider
+        navigation={NAVIGATION}
+        router={router}
+        theme={demoTheme}
+        window={demoWindow}
+      >
+        <DashboardLayout disableCollapsibleSidebar>
+          <DemoPageContent pathname={router.pathname} />
+        </DashboardLayout>
+      </AppProvider>
+    </DemoProvider>
   );
 }
 
diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutNoMiniSidebar.tsx.preview b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutNoMiniSidebar.tsx.preview
index d103d12cec8..9f970c0fd4c 100644
--- a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutNoMiniSidebar.tsx.preview
+++ b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutNoMiniSidebar.tsx.preview
@@ -1,3 +1,12 @@
-<DashboardLayout disableCollapsibleSidebar>
-  <DemoPageContent pathname={router.pathname} />
-</DashboardLayout>
\ No newline at end of file
+<DemoProvider window={demoWindow}>
+  <AppProvider
+    navigation={NAVIGATION}
+    router={router}
+    theme={demoTheme}
+    window={demoWindow}
+  >
+    <DashboardLayout disableCollapsibleSidebar>
+      <DemoPageContent pathname={router.pathname} />
+    </DashboardLayout>
+  </AppProvider>
+</DemoProvider>
\ No newline at end of file
diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutPattern.js b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutPattern.js
index cee334b8a9d..9a94b9b5129 100644
--- a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutPattern.js
+++ b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutPattern.js
@@ -9,7 +9,7 @@ import DashboardIcon from '@mui/icons-material/Dashboard';
 import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';
 import { AppProvider } from '@toolpad/core/AppProvider';
 import { DashboardLayout } from '@toolpad/core/DashboardLayout';
-import { useDemoRouter } from '@toolpad/core/internal';
+import { DemoProvider, useDemoRouter } from '@toolpad/core/internal';
 
 const demoTheme = createTheme({
   cssVariables: {
@@ -82,30 +82,33 @@ function DashboardLayoutPattern(props) {
   const demoWindow = window !== undefined ? window() : undefined;
 
   return (
-    // preview-start
-    <AppProvider
-      navigation={[
-        {
-          segment: 'dashboard',
-          title: 'Dashboard',
-          icon: <DashboardIcon />,
-        },
-        {
-          segment: 'orders',
-          title: 'Orders',
-          icon: <ShoppingCartIcon />,
-          pattern: 'orders{/:orderId}*',
-        },
-      ]}
-      router={router}
-      theme={demoTheme}
-      window={demoWindow}
-    >
-      <DashboardLayout>
-        <DemoPageContent pathname={router.pathname} navigate={router.navigate} />
-      </DashboardLayout>
-    </AppProvider>
-    // preview-end
+    // Remove this provider when copying and pasting into your project.
+    <DemoProvider window={demoWindow}>
+      {/* preview-start */}
+      <AppProvider
+        navigation={[
+          {
+            segment: 'dashboard',
+            title: 'Dashboard',
+            icon: <DashboardIcon />,
+          },
+          {
+            segment: 'orders',
+            title: 'Orders',
+            icon: <ShoppingCartIcon />,
+            pattern: 'orders{/:orderId}*',
+          },
+        ]}
+        router={router}
+        theme={demoTheme}
+        window={demoWindow}
+      >
+        <DashboardLayout>
+          <DemoPageContent pathname={router.pathname} navigate={router.navigate} />
+        </DashboardLayout>
+      </AppProvider>
+      {/* preview-end */}
+    </DemoProvider>
   );
 }
 
diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutSidebarCollapsed.js b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutSidebarCollapsed.js
index ba077fd5553..707c78b5bdb 100644
--- a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutSidebarCollapsed.js
+++ b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutSidebarCollapsed.js
@@ -8,6 +8,7 @@ import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';
 import BarChartIcon from '@mui/icons-material/BarChart';
 import { AppProvider } from '@toolpad/core/AppProvider';
 import { DashboardLayout } from '@toolpad/core/DashboardLayout';
+import { DemoProvider } from '@toolpad/core/internal';
 
 const NAVIGATION = [
   {
@@ -80,16 +81,19 @@ function DashboardLayoutSidebarCollapsed(props) {
   const demoWindow = window !== undefined ? window() : undefined;
 
   return (
-    <AppProvider
-      navigation={NAVIGATION}
-      router={router}
-      theme={demoTheme}
-      window={demoWindow}
-    >
-      <DashboardLayout defaultSidebarCollapsed>
-        <DemoPageContent pathname={pathname} />
-      </DashboardLayout>
-    </AppProvider>
+    // Remove this provider when copying and pasting into your project.
+    <DemoProvider window={demoWindow}>
+      <AppProvider
+        navigation={NAVIGATION}
+        router={router}
+        theme={demoTheme}
+        window={demoWindow}
+      >
+        <DashboardLayout defaultSidebarCollapsed>
+          <DemoPageContent pathname={pathname} />
+        </DashboardLayout>
+      </AppProvider>
+    </DemoProvider>
   );
 }
 
diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutSidebarCollapsed.tsx.preview b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutSidebarCollapsed.tsx.preview
index 7dd9dd6cce6..e525906b8db 100644
--- a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutSidebarCollapsed.tsx.preview
+++ b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutSidebarCollapsed.tsx.preview
@@ -1,3 +1,12 @@
-<DashboardLayout defaultSidebarCollapsed>
-  <DemoPageContent pathname={pathname} />
-</DashboardLayout>
\ No newline at end of file
+<DemoProvider window={demoWindow}>
+  <AppProvider
+    navigation={NAVIGATION}
+    router={router}
+    theme={demoTheme}
+    window={demoWindow}
+  >
+    <DashboardLayout defaultSidebarCollapsed>
+      <DemoPageContent pathname={pathname} />
+    </DashboardLayout>
+  </AppProvider>
+</DemoProvider>
\ No newline at end of file
diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutSidebarHidden.js b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutSidebarHidden.js
index 8fb42b4408e..a02a72a0fb0 100644
--- a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutSidebarHidden.js
+++ b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutSidebarHidden.js
@@ -5,7 +5,7 @@ import Typography from '@mui/material/Typography';
 import { createTheme } from '@mui/material/styles';
 import { AppProvider } from '@toolpad/core/AppProvider';
 import { DashboardLayout } from '@toolpad/core/DashboardLayout';
-import { useDemoRouter } from '@toolpad/core/internal';
+import { DemoProvider, useDemoRouter } from '@toolpad/core/internal';
 
 const demoTheme = createTheme({
   cssVariables: {
@@ -52,11 +52,14 @@ function DashboardLayoutSidebarHidden(props) {
   const demoWindow = window !== undefined ? window() : undefined;
 
   return (
-    <AppProvider router={router} theme={demoTheme} window={demoWindow}>
-      <DashboardLayout hideNavigation>
-        <DemoPageContent pathname={router.pathname} />
-      </DashboardLayout>
-    </AppProvider>
+    // Remove this provider when copying and pasting into your project.
+    <DemoProvider window={demoWindow}>
+      <AppProvider router={router} theme={demoTheme} window={demoWindow}>
+        <DashboardLayout hideNavigation>
+          <DemoPageContent pathname={router.pathname} />
+        </DashboardLayout>
+      </AppProvider>
+    </DemoProvider>
   );
 }
 
diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutSidebarHidden.tsx.preview b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutSidebarHidden.tsx.preview
index 4fd4fe5422d..705c13f977a 100644
--- a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutSidebarHidden.tsx.preview
+++ b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutSidebarHidden.tsx.preview
@@ -1,3 +1,7 @@
-<DashboardLayout hideNavigation>
-  <DemoPageContent pathname={router.pathname} />
-</DashboardLayout>
\ No newline at end of file
+<DemoProvider window={demoWindow}>
+  <AppProvider router={router} theme={demoTheme} window={demoWindow}>
+    <DashboardLayout hideNavigation>
+      <DemoPageContent pathname={router.pathname} />
+    </DashboardLayout>
+  </AppProvider>
+</DemoProvider>
\ No newline at end of file
diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutSlots.js b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutSlots.js
index d816fa3451e..0371d6be4dd 100644
--- a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutSlots.js
+++ b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutSlots.js
@@ -15,7 +15,7 @@ import CheckCircleIcon from '@mui/icons-material/CheckCircle';
 import SearchIcon from '@mui/icons-material/Search';
 import { AppProvider } from '@toolpad/core/AppProvider';
 import { DashboardLayout, ThemeSwitcher } from '@toolpad/core/DashboardLayout';
-import { useDemoRouter } from '@toolpad/core/internal';
+import { DemoProvider, useDemoRouter } from '@toolpad/core/internal';
 
 const NAVIGATION = [
   {
@@ -144,22 +144,25 @@ function DashboardLayoutSlots(props) {
   const demoWindow = window !== undefined ? window() : undefined;
 
   return (
-    <AppProvider
-      navigation={NAVIGATION}
-      router={router}
-      theme={demoTheme}
-      window={demoWindow}
-    >
-      <DashboardLayout
-        slots={{
-          appTitle: CustomAppTitle,
-          toolbarActions: ToolbarActionsSearch,
-          sidebarFooter: SidebarFooter,
-        }}
+    // Remove this provider when copying and pasting into your project.
+    <DemoProvider window={demoWindow}>
+      <AppProvider
+        navigation={NAVIGATION}
+        router={router}
+        theme={demoTheme}
+        window={demoWindow}
       >
-        <DemoPageContent pathname={router.pathname} />
-      </DashboardLayout>
-    </AppProvider>
+        <DashboardLayout
+          slots={{
+            appTitle: CustomAppTitle,
+            toolbarActions: ToolbarActionsSearch,
+            sidebarFooter: SidebarFooter,
+          }}
+        >
+          <DemoPageContent pathname={router.pathname} />
+        </DashboardLayout>
+      </AppProvider>
+    </DemoProvider>
   );
 }
 
diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutSlots.tsx.preview b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutSlots.tsx.preview
deleted file mode 100644
index 80e9af3f0ca..00000000000
--- a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutSlots.tsx.preview
+++ /dev/null
@@ -1,9 +0,0 @@
-<DashboardLayout
-  slots={{
-    appTitle: CustomAppTitle,
-    toolbarActions: ToolbarActionsSearch,
-    sidebarFooter: SidebarFooter,
-  }}
->
-  <DemoPageContent pathname={router.pathname} />
-</DashboardLayout>
\ No newline at end of file
diff --git a/docs/data/toolpad/core/components/page-container/PageContainerFullScreen.js b/docs/data/toolpad/core/components/page-container/PageContainerFullScreen.js
index 43d867e76ce..50a238ae1d3 100644
--- a/docs/data/toolpad/core/components/page-container/PageContainerFullScreen.js
+++ b/docs/data/toolpad/core/components/page-container/PageContainerFullScreen.js
@@ -5,7 +5,7 @@ import MapIcon from '@mui/icons-material/Map';
 import { AppProvider } from '@toolpad/core/AppProvider';
 import { DashboardLayout } from '@toolpad/core/DashboardLayout';
 import { PageContainer } from '@toolpad/core/PageContainer';
-import { useDemoRouter } from '@toolpad/core/internal';
+import { DemoProvider, useDemoRouter } from '@toolpad/core/internal';
 
 const NAVIGATION = [
   {
@@ -40,24 +40,27 @@ function PageContainerFullScreen(props) {
   const demoWindow = window !== undefined ? window() : undefined;
 
   return (
-    <AppProvider
-      navigation={NAVIGATION}
-      router={router}
-      theme={demoTheme}
-      window={demoWindow}
-    >
-      <DashboardLayout defaultSidebarCollapsed>
-        <PageContainer>
-          <iframe
-            title="Google Map"
-            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d387190.2799181496!2d-74.25987571760744!3d40.69767006358627!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c259af18b60165%3A0x8b621f8a7a7d28a4!2sNew%20York%2C%20NY%2C%20USA!5e0!3m2!1sen!2s!4v1633452834502!5m2!1sen!2s"
-            style={{ flex: 1, border: 0 }}
-            allowFullScreen
-            loading="lazy"
-          />
-        </PageContainer>
-      </DashboardLayout>
-    </AppProvider>
+    // Remove this provider when copying and pasting into your project.
+    <DemoProvider window={demoWindow}>
+      <AppProvider
+        navigation={NAVIGATION}
+        router={router}
+        theme={demoTheme}
+        window={demoWindow}
+      >
+        <DashboardLayout defaultSidebarCollapsed>
+          <PageContainer>
+            <iframe
+              title="Google Map"
+              src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d387190.2799181496!2d-74.25987571760744!3d40.69767006358627!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c259af18b60165%3A0x8b621f8a7a7d28a4!2sNew%20York%2C%20NY%2C%20USA!5e0!3m2!1sen!2s!4v1633452834502!5m2!1sen!2s"
+              style={{ flex: 1, border: 0 }}
+              allowFullScreen
+              loading="lazy"
+            />
+          </PageContainer>
+        </DashboardLayout>
+      </AppProvider>
+    </DemoProvider>
   );
 }
 
diff --git a/docs/data/toolpad/core/components/page-container/PageContainerFullScreen.tsx.preview b/docs/data/toolpad/core/components/page-container/PageContainerFullScreen.tsx.preview
deleted file mode 100644
index 973c30fdb99..00000000000
--- a/docs/data/toolpad/core/components/page-container/PageContainerFullScreen.tsx.preview
+++ /dev/null
@@ -1,11 +0,0 @@
-<DashboardLayout defaultSidebarCollapsed>
-  <PageContainer>
-    <iframe
-      title="Google Map"
-      src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d387190.2799181496!2d-74.25987571760744!3d40.69767006358627!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c259af18b60165%3A0x8b621f8a7a7d28a4!2sNew%20York%2C%20NY%2C%20USA!5e0!3m2!1sen!2s!4v1633452834502!5m2!1sen!2s"
-      style={{ flex: 1, border: 0 }}
-      allowFullScreen
-      loading="lazy"
-    />
-  </PageContainer>
-</DashboardLayout>
\ No newline at end of file
diff --git a/docs/data/toolpad/core/integrations/ReactRouter.js b/docs/data/toolpad/core/integrations/ReactRouter.js
index 8498907f251..4352895c43f 100644
--- a/docs/data/toolpad/core/integrations/ReactRouter.js
+++ b/docs/data/toolpad/core/integrations/ReactRouter.js
@@ -8,6 +8,7 @@ import { createMemoryRouter, RouterProvider, Outlet } from 'react-router';
 import { ReactRouterAppProvider } from '@toolpad/core/react-router';
 import { DashboardLayout } from '@toolpad/core/DashboardLayout';
 import { PageContainer } from '@toolpad/core/PageContainer';
+import { DemoProvider } from '@toolpad/core/internal';
 
 function Layout() {
   return (
@@ -67,14 +68,17 @@ function App(props) {
   const { window } = props;
 
   return (
-    <ReactRouterAppProvider
-      navigation={NAVIGATION}
-      branding={BRANDING}
-      theme={demoTheme}
-      window={window}
-    >
-      <Outlet />
-    </ReactRouterAppProvider>
+    // Remove this provider when copying and pasting into your project.
+    <DemoProvider window={window}>
+      <ReactRouterAppProvider
+        navigation={NAVIGATION}
+        branding={BRANDING}
+        theme={demoTheme}
+        window={window}
+      >
+        <Outlet />
+      </ReactRouterAppProvider>
+    </DemoProvider>
   );
 }
 
diff --git a/docs/data/toolpad/core/introduction/Introduction.js b/docs/data/toolpad/core/introduction/Introduction.js
index 4ed73322c3f..d212663c398 100644
--- a/docs/data/toolpad/core/introduction/Introduction.js
+++ b/docs/data/toolpad/core/introduction/Introduction.js
@@ -9,7 +9,7 @@ import { AppProvider } from '@toolpad/core/AppProvider';
 import { DashboardLayout } from '@toolpad/core/DashboardLayout';
 import { PageContainer } from '@toolpad/core/PageContainer';
 import { Crud, DataSourceCache } from '@toolpad/core/Crud';
-import { useDemoRouter } from '@toolpad/core/internal';
+import { DemoProvider, useDemoRouter } from '@toolpad/core/internal';
 
 const NAVIGATION = [
   {
@@ -286,20 +286,23 @@ function Introduction(props) {
   }, [router.pathname]);
 
   return (
-    // preview-start
-    <AppProvider
-      navigation={NAVIGATION}
-      router={router}
-      theme={demoTheme}
-      window={demoWindow}
-    >
-      <DashboardLayout defaultSidebarCollapsed>
-        <PageContainer title={title}>
-          <DemoPageContent pathname={router.pathname} />
-        </PageContainer>
-      </DashboardLayout>
-    </AppProvider>
-    // preview-end
+    // Remove this provider when copying and pasting into your project.
+    <DemoProvider window={demoWindow}>
+      {/* preview-start */}
+      <AppProvider
+        navigation={NAVIGATION}
+        router={router}
+        theme={demoTheme}
+        window={demoWindow}
+      >
+        <DashboardLayout defaultSidebarCollapsed>
+          <PageContainer title={title}>
+            <DemoPageContent pathname={router.pathname} />
+          </PageContainer>
+        </DashboardLayout>
+      </AppProvider>
+      {/* preview-end */}
+    </DemoProvider>
   );
 }
 
diff --git a/docs/data/toolpad/core/introduction/TutorialDefault.js b/docs/data/toolpad/core/introduction/TutorialDefault.js
index 355c955e6ff..7408d03008f 100644
--- a/docs/data/toolpad/core/introduction/TutorialDefault.js
+++ b/docs/data/toolpad/core/introduction/TutorialDefault.js
@@ -6,7 +6,7 @@ import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';
 import { AppProvider } from '@toolpad/core/AppProvider';
 import { DashboardLayout } from '@toolpad/core/DashboardLayout';
 import { PageContainer } from '@toolpad/core/PageContainer';
-import { useDemoRouter } from '@toolpad/core/internal';
+import { DemoProvider, useDemoRouter } from '@toolpad/core/internal';
 
 const NAVIGATION = [
   {
@@ -61,16 +61,19 @@ function TutorialDefault(props) {
   const demoRouter = useDemoRouter('/page');
 
   return (
-    <AppProvider
-      navigation={NAVIGATION}
-      router={demoRouter}
-      theme={demoTheme}
-      window={demoWindow}
-    >
-      <DashboardLayout>
-        <DemoPageContent pathname={demoRouter.pathname} />
-      </DashboardLayout>
-    </AppProvider>
+    // Remove this provider when copying and pasting into your project.
+    <DemoProvider window={demoWindow}>
+      <AppProvider
+        navigation={NAVIGATION}
+        router={demoRouter}
+        theme={demoTheme}
+        window={demoWindow}
+      >
+        <DashboardLayout>
+          <DemoPageContent pathname={demoRouter.pathname} />
+        </DashboardLayout>
+      </AppProvider>
+    </DemoProvider>
   );
 }
 
diff --git a/docs/data/toolpad/core/introduction/TutorialDefault.tsx.preview b/docs/data/toolpad/core/introduction/TutorialDefault.tsx.preview
index 934392cc699..5aa55014463 100644
--- a/docs/data/toolpad/core/introduction/TutorialDefault.tsx.preview
+++ b/docs/data/toolpad/core/introduction/TutorialDefault.tsx.preview
@@ -1,3 +1,12 @@
-<DashboardLayout>
-  <DemoPageContent pathname={demoRouter.pathname} />
-</DashboardLayout>
\ No newline at end of file
+<DemoProvider window={demoWindow}>
+  <AppProvider
+    navigation={NAVIGATION}
+    router={demoRouter}
+    theme={demoTheme}
+    window={demoWindow}
+  >
+    <DashboardLayout>
+      <DemoPageContent pathname={demoRouter.pathname} />
+    </DashboardLayout>
+  </AppProvider>
+</DemoProvider>
\ No newline at end of file
diff --git a/docs/data/toolpad/core/introduction/TutorialPages.js b/docs/data/toolpad/core/introduction/TutorialPages.js
index 1388f38a053..a6bb57cf94c 100644
--- a/docs/data/toolpad/core/introduction/TutorialPages.js
+++ b/docs/data/toolpad/core/introduction/TutorialPages.js
@@ -7,7 +7,7 @@ import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';
 import TimelineIcon from '@mui/icons-material/Timeline';
 import { AppProvider } from '@toolpad/core/AppProvider';
 import { DashboardLayout } from '@toolpad/core/DashboardLayout';
-import { useDemoRouter } from '@toolpad/core/internal';
+import { DemoProvider, useDemoRouter } from '@toolpad/core/internal';
 import { PageContainer } from '@toolpad/core/PageContainer';
 
 const NAVIGATION = [
@@ -80,16 +80,19 @@ function TutorialPages(props) {
   const demoRouter = useDemoRouter('/page-2');
 
   return (
-    <AppProvider
-      navigation={NAVIGATION}
-      router={demoRouter}
-      theme={demoTheme}
-      window={demoWindow}
-    >
-      <DashboardLayout>
-        <DemoPageContent pathname={demoRouter.pathname} />
-      </DashboardLayout>
-    </AppProvider>
+    // Remove this provider when copying and pasting into your project.
+    <DemoProvider window={demoWindow}>
+      <AppProvider
+        navigation={NAVIGATION}
+        router={demoRouter}
+        theme={demoTheme}
+        window={demoWindow}
+      >
+        <DashboardLayout>
+          <DemoPageContent pathname={demoRouter.pathname} />
+        </DashboardLayout>
+      </AppProvider>
+    </DemoProvider>
   );
 }
 
diff --git a/docs/data/toolpad/core/introduction/TutorialPages.tsx.preview b/docs/data/toolpad/core/introduction/TutorialPages.tsx.preview
index 934392cc699..5aa55014463 100644
--- a/docs/data/toolpad/core/introduction/TutorialPages.tsx.preview
+++ b/docs/data/toolpad/core/introduction/TutorialPages.tsx.preview
@@ -1,3 +1,12 @@
-<DashboardLayout>
-  <DemoPageContent pathname={demoRouter.pathname} />
-</DashboardLayout>
\ No newline at end of file
+<DemoProvider window={demoWindow}>
+  <AppProvider
+    navigation={NAVIGATION}
+    router={demoRouter}
+    theme={demoTheme}
+    window={demoWindow}
+  >
+    <DashboardLayout>
+      <DemoPageContent pathname={demoRouter.pathname} />
+    </DashboardLayout>
+  </AppProvider>
+</DemoProvider>
\ No newline at end of file

From 0c894600646bcf9ac8c10a94afae84eac55fc536 Mon Sep 17 00:00:00 2001
From: Pedro Ferreira <10789765+apedroferreira@users.noreply.github.com>
Date: Mon, 21 Apr 2025 12:36:59 +0100
Subject: [PATCH 05/11] Refix previews

---
 .../DashboardLayoutAccountSidebar.tsx.preview | 28 +++++++++----------
 ...boardLayoutCustomThemeSwitcher.tsx.preview | 28 +++++++++----------
 .../DashboardLayoutFullScreen.tsx.preview     | 16 +++++++++++
 .../DashboardLayoutNoMiniSidebar.tsx.preview  | 22 +++++++--------
 ...ashboardLayoutSidebarCollapsed.tsx.preview | 22 +++++++--------
 .../DashboardLayoutSidebarHidden.tsx.preview  | 12 ++++----
 .../DashboardLayoutSlots.tsx.preview          | 16 +++++++++++
 .../introduction/TutorialDefault.tsx.preview  | 22 +++++++--------
 .../introduction/TutorialPages.tsx.preview    | 22 +++++++--------
 docs/scripts/formattedTSDemos.js              |  2 +-
 10 files changed, 104 insertions(+), 86 deletions(-)
 create mode 100644 docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutFullScreen.tsx.preview
 create mode 100644 docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutSlots.tsx.preview

diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutAccountSidebar.tsx.preview b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutAccountSidebar.tsx.preview
index 2f36c1c0aba..0d7c209aa8e 100644
--- a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutAccountSidebar.tsx.preview
+++ b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutAccountSidebar.tsx.preview
@@ -1,16 +1,14 @@
-<DemoProvider window={demoWindow}>
-  <AppProvider
-    navigation={NAVIGATION}
-    router={router}
-    theme={demoTheme}
-    window={demoWindow}
-    authentication={authentication}
-    session={session}
+<AppProvider
+  navigation={NAVIGATION}
+  router={router}
+  theme={demoTheme}
+  window={demoWindow}
+  authentication={authentication}
+  session={session}
+>
+  <DashboardLayout
+    slots={{ toolbarAccount: () => null, sidebarFooter: SidebarFooterAccount }}
   >
-    <DashboardLayout
-      slots={{ toolbarAccount: () => null, sidebarFooter: SidebarFooterAccount }}
-    >
-      <DemoPageContent pathname={pathname} />
-    </DashboardLayout>
-  </AppProvider>
-</DemoProvider>
\ No newline at end of file
+    <DemoPageContent pathname={pathname} />
+  </DashboardLayout>
+</AppProvider>
\ No newline at end of file
diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutCustomThemeSwitcher.tsx.preview b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutCustomThemeSwitcher.tsx.preview
index 59ce3642633..99657e69165 100644
--- a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutCustomThemeSwitcher.tsx.preview
+++ b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutCustomThemeSwitcher.tsx.preview
@@ -1,16 +1,14 @@
-<DemoProvider window={demoWindow}>
-  <AppProvider
-    navigation={NAVIGATION}
-    router={router}
-    theme={demoTheme}
-    window={demoWindow}
+<AppProvider
+  navigation={NAVIGATION}
+  router={router}
+  theme={demoTheme}
+  window={demoWindow}
+>
+  <DashboardLayout
+    slots={{
+      toolbarActions: CustomThemeSwitcher,
+    }}
   >
-    <DashboardLayout
-      slots={{
-        toolbarActions: CustomThemeSwitcher,
-      }}
-    >
-      <DemoPageContent pathname={router.pathname} />
-    </DashboardLayout>
-  </AppProvider>
-</DemoProvider>
\ No newline at end of file
+    <DemoPageContent pathname={router.pathname} />
+  </DashboardLayout>
+</AppProvider>
\ No newline at end of file
diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutFullScreen.tsx.preview b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutFullScreen.tsx.preview
new file mode 100644
index 00000000000..1b075ab4c40
--- /dev/null
+++ b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutFullScreen.tsx.preview
@@ -0,0 +1,16 @@
+<AppProvider
+  navigation={NAVIGATION}
+  router={router}
+  theme={demoTheme}
+  window={demoWindow}
+>
+  <DashboardLayout>
+    <iframe
+      title="Google Map"
+      src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d387190.2799181496!2d-74.25987571760744!3d40.69767006358627!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c259af18b60165%3A0x8b621f8a7a7d28a4!2sNew%20York%2C%20NY%2C%20USA!5e0!3m2!1sen!2s!4v1633452834502!5m2!1sen!2s"
+      style={{ flex: 1, border: 0 }}
+      allowFullScreen
+      loading="lazy"
+    />
+  </DashboardLayout>
+</AppProvider>
\ No newline at end of file
diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutNoMiniSidebar.tsx.preview b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutNoMiniSidebar.tsx.preview
index 9f970c0fd4c..bfaa1804703 100644
--- a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutNoMiniSidebar.tsx.preview
+++ b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutNoMiniSidebar.tsx.preview
@@ -1,12 +1,10 @@
-<DemoProvider window={demoWindow}>
-  <AppProvider
-    navigation={NAVIGATION}
-    router={router}
-    theme={demoTheme}
-    window={demoWindow}
-  >
-    <DashboardLayout disableCollapsibleSidebar>
-      <DemoPageContent pathname={router.pathname} />
-    </DashboardLayout>
-  </AppProvider>
-</DemoProvider>
\ No newline at end of file
+<AppProvider
+  navigation={NAVIGATION}
+  router={router}
+  theme={demoTheme}
+  window={demoWindow}
+>
+  <DashboardLayout disableCollapsibleSidebar>
+    <DemoPageContent pathname={router.pathname} />
+  </DashboardLayout>
+</AppProvider>
\ No newline at end of file
diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutSidebarCollapsed.tsx.preview b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutSidebarCollapsed.tsx.preview
index e525906b8db..30b16ff77ca 100644
--- a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutSidebarCollapsed.tsx.preview
+++ b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutSidebarCollapsed.tsx.preview
@@ -1,12 +1,10 @@
-<DemoProvider window={demoWindow}>
-  <AppProvider
-    navigation={NAVIGATION}
-    router={router}
-    theme={demoTheme}
-    window={demoWindow}
-  >
-    <DashboardLayout defaultSidebarCollapsed>
-      <DemoPageContent pathname={pathname} />
-    </DashboardLayout>
-  </AppProvider>
-</DemoProvider>
\ No newline at end of file
+<AppProvider
+  navigation={NAVIGATION}
+  router={router}
+  theme={demoTheme}
+  window={demoWindow}
+>
+  <DashboardLayout defaultSidebarCollapsed>
+    <DemoPageContent pathname={pathname} />
+  </DashboardLayout>
+</AppProvider>
\ No newline at end of file
diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutSidebarHidden.tsx.preview b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutSidebarHidden.tsx.preview
index 705c13f977a..08ab509046c 100644
--- a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutSidebarHidden.tsx.preview
+++ b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutSidebarHidden.tsx.preview
@@ -1,7 +1,5 @@
-<DemoProvider window={demoWindow}>
-  <AppProvider router={router} theme={demoTheme} window={demoWindow}>
-    <DashboardLayout hideNavigation>
-      <DemoPageContent pathname={router.pathname} />
-    </DashboardLayout>
-  </AppProvider>
-</DemoProvider>
\ No newline at end of file
+<AppProvider router={router} theme={demoTheme} window={demoWindow}>
+  <DashboardLayout hideNavigation>
+    <DemoPageContent pathname={router.pathname} />
+  </DashboardLayout>
+</AppProvider>
\ No newline at end of file
diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutSlots.tsx.preview b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutSlots.tsx.preview
new file mode 100644
index 00000000000..d90be1afe43
--- /dev/null
+++ b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutSlots.tsx.preview
@@ -0,0 +1,16 @@
+<AppProvider
+  navigation={NAVIGATION}
+  router={router}
+  theme={demoTheme}
+  window={demoWindow}
+>
+  <DashboardLayout
+    slots={{
+      appTitle: CustomAppTitle,
+      toolbarActions: ToolbarActionsSearch,
+      sidebarFooter: SidebarFooter,
+    }}
+  >
+    <DemoPageContent pathname={router.pathname} />
+  </DashboardLayout>
+</AppProvider>
\ No newline at end of file
diff --git a/docs/data/toolpad/core/introduction/TutorialDefault.tsx.preview b/docs/data/toolpad/core/introduction/TutorialDefault.tsx.preview
index 5aa55014463..9c60bc9c8ad 100644
--- a/docs/data/toolpad/core/introduction/TutorialDefault.tsx.preview
+++ b/docs/data/toolpad/core/introduction/TutorialDefault.tsx.preview
@@ -1,12 +1,10 @@
-<DemoProvider window={demoWindow}>
-  <AppProvider
-    navigation={NAVIGATION}
-    router={demoRouter}
-    theme={demoTheme}
-    window={demoWindow}
-  >
-    <DashboardLayout>
-      <DemoPageContent pathname={demoRouter.pathname} />
-    </DashboardLayout>
-  </AppProvider>
-</DemoProvider>
\ No newline at end of file
+<AppProvider
+  navigation={NAVIGATION}
+  router={demoRouter}
+  theme={demoTheme}
+  window={demoWindow}
+>
+  <DashboardLayout>
+    <DemoPageContent pathname={demoRouter.pathname} />
+  </DashboardLayout>
+</AppProvider>
\ No newline at end of file
diff --git a/docs/data/toolpad/core/introduction/TutorialPages.tsx.preview b/docs/data/toolpad/core/introduction/TutorialPages.tsx.preview
index 5aa55014463..9c60bc9c8ad 100644
--- a/docs/data/toolpad/core/introduction/TutorialPages.tsx.preview
+++ b/docs/data/toolpad/core/introduction/TutorialPages.tsx.preview
@@ -1,12 +1,10 @@
-<DemoProvider window={demoWindow}>
-  <AppProvider
-    navigation={NAVIGATION}
-    router={demoRouter}
-    theme={demoTheme}
-    window={demoWindow}
-  >
-    <DashboardLayout>
-      <DemoPageContent pathname={demoRouter.pathname} />
-    </DashboardLayout>
-  </AppProvider>
-</DemoProvider>
\ No newline at end of file
+<AppProvider
+  navigation={NAVIGATION}
+  router={demoRouter}
+  theme={demoTheme}
+  window={demoWindow}
+>
+  <DashboardLayout>
+    <DemoPageContent pathname={demoRouter.pathname} />
+  </DashboardLayout>
+</AppProvider>
\ No newline at end of file
diff --git a/docs/scripts/formattedTSDemos.js b/docs/scripts/formattedTSDemos.js
index 6979f3a8cfe..0d310a3b78e 100644
--- a/docs/scripts/formattedTSDemos.js
+++ b/docs/scripts/formattedTSDemos.js
@@ -92,7 +92,7 @@ async function transpileFile(tsxPath, project) {
           {
             maxLines: 16,
             outputFilename: `${tsxPath}.preview`,
-            wrapperTypes: ['div', 'Box', 'Stack', 'AppProvider'],
+            wrapperTypes: ['div', 'Box', 'Stack', 'AppProvider', 'DemoProvider'],
           },
         ],
       ]);

From 704ed0cab569bf30857e2d90100c958e1131fc08 Mon Sep 17 00:00:00 2001
From: Pedro Ferreira <10789765+apedroferreira@users.noreply.github.com>
Date: Mon, 21 Apr 2025 12:43:27 +0100
Subject: [PATCH 06/11] Fix previews more

---
 .../DashboardLayoutAccountSidebar.js          |  2 ++
 .../DashboardLayoutAccountSidebar.tsx         |  2 ++
 .../DashboardLayoutAccountSidebar.tsx.preview | 17 +++----------
 .../DashboardLayoutCustomThemeSwitcher.js     |  2 ++
 .../DashboardLayoutCustomThemeSwitcher.tsx    |  2 ++
 ...boardLayoutCustomThemeSwitcher.tsx.preview | 19 +++++---------
 .../DashboardLayoutFullScreen.js              |  2 ++
 .../DashboardLayoutFullScreen.tsx             |  2 ++
 .../DashboardLayoutFullScreen.tsx.preview     | 25 +++++++------------
 .../DashboardLayoutNoMiniSidebar.js           |  2 ++
 .../DashboardLayoutNoMiniSidebar.tsx          |  2 ++
 .../DashboardLayoutNoMiniSidebar.tsx.preview  | 13 +++-------
 .../DashboardLayoutSidebarCollapsed.js        |  2 ++
 .../DashboardLayoutSidebarCollapsed.tsx       |  2 ++
 ...ashboardLayoutSidebarCollapsed.tsx.preview | 13 +++-------
 .../DashboardLayoutSidebarHidden.js           |  2 ++
 .../DashboardLayoutSidebarHidden.tsx          |  2 ++
 .../DashboardLayoutSidebarHidden.tsx.preview  |  8 +++---
 .../dashboard-layout/DashboardLayoutSlots.js  |  2 ++
 .../dashboard-layout/DashboardLayoutSlots.tsx |  2 ++
 .../DashboardLayoutSlots.tsx.preview          | 23 ++++++-----------
 .../core/introduction/TutorialDefault.js      |  2 ++
 .../core/introduction/TutorialDefault.tsx     |  2 ++
 .../introduction/TutorialDefault.tsx.preview  | 13 +++-------
 .../core/introduction/TutorialPages.js        |  2 ++
 .../core/introduction/TutorialPages.tsx       |  2 ++
 .../introduction/TutorialPages.tsx.preview    | 13 +++-------
 27 files changed, 78 insertions(+), 102 deletions(-)

diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutAccountSidebar.js b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutAccountSidebar.js
index 77e4d2c9034..66e996bc4cc 100644
--- a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutAccountSidebar.js
+++ b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutAccountSidebar.js
@@ -279,11 +279,13 @@ function DashboardLayoutAccountSidebar(props) {
         authentication={authentication}
         session={session}
       >
+        {/* preview-start */}
         <DashboardLayout
           slots={{ toolbarAccount: () => null, sidebarFooter: SidebarFooterAccount }}
         >
           <DemoPageContent pathname={pathname} />
         </DashboardLayout>
+        {/* preview-end */}
       </AppProvider>
     </DemoProvider>
   );
diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutAccountSidebar.tsx b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutAccountSidebar.tsx
index bd9beaf2a97..e2d79a940ed 100644
--- a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutAccountSidebar.tsx
+++ b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutAccountSidebar.tsx
@@ -265,11 +265,13 @@ export default function DashboardLayoutAccountSidebar(props: DemoProps) {
         authentication={authentication}
         session={session}
       >
+        {/* preview-start */}
         <DashboardLayout
           slots={{ toolbarAccount: () => null, sidebarFooter: SidebarFooterAccount }}
         >
           <DemoPageContent pathname={pathname} />
         </DashboardLayout>
+        {/* preview-end */}
       </AppProvider>
     </DemoProvider>
   );
diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutAccountSidebar.tsx.preview b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutAccountSidebar.tsx.preview
index 0d7c209aa8e..f567d5793e9 100644
--- a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutAccountSidebar.tsx.preview
+++ b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutAccountSidebar.tsx.preview
@@ -1,14 +1,5 @@
-<AppProvider
-  navigation={NAVIGATION}
-  router={router}
-  theme={demoTheme}
-  window={demoWindow}
-  authentication={authentication}
-  session={session}
+<DashboardLayout
+  slots={{ toolbarAccount: () => null, sidebarFooter: SidebarFooterAccount }}
 >
-  <DashboardLayout
-    slots={{ toolbarAccount: () => null, sidebarFooter: SidebarFooterAccount }}
-  >
-    <DemoPageContent pathname={pathname} />
-  </DashboardLayout>
-</AppProvider>
\ No newline at end of file
+  <DemoPageContent pathname={pathname} />
+</DashboardLayout>
\ No newline at end of file
diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutCustomThemeSwitcher.js b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutCustomThemeSwitcher.js
index 2ca57a673d7..149bf92fd22 100644
--- a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutCustomThemeSwitcher.js
+++ b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutCustomThemeSwitcher.js
@@ -148,6 +148,7 @@ function DashboardLayoutCustomThemeSwitcher(props) {
         theme={demoTheme}
         window={demoWindow}
       >
+        {/* preview-start */}
         <DashboardLayout
           slots={{
             toolbarActions: CustomThemeSwitcher,
@@ -155,6 +156,7 @@ function DashboardLayoutCustomThemeSwitcher(props) {
         >
           <DemoPageContent pathname={router.pathname} />
         </DashboardLayout>
+        {/* preview-end */}
       </AppProvider>
     </DemoProvider>
   );
diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutCustomThemeSwitcher.tsx b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutCustomThemeSwitcher.tsx
index 2c8882c28b4..65e0136126e 100644
--- a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutCustomThemeSwitcher.tsx
+++ b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutCustomThemeSwitcher.tsx
@@ -151,6 +151,7 @@ export default function DashboardLayoutCustomThemeSwitcher(props: DemoProps) {
         theme={demoTheme}
         window={demoWindow}
       >
+        {/* preview-start */}
         <DashboardLayout
           slots={{
             toolbarActions: CustomThemeSwitcher,
@@ -158,6 +159,7 @@ export default function DashboardLayoutCustomThemeSwitcher(props: DemoProps) {
         >
           <DemoPageContent pathname={router.pathname} />
         </DashboardLayout>
+        {/* preview-end */}
       </AppProvider>
     </DemoProvider>
   );
diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutCustomThemeSwitcher.tsx.preview b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutCustomThemeSwitcher.tsx.preview
index 99657e69165..c6e4f10b119 100644
--- a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutCustomThemeSwitcher.tsx.preview
+++ b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutCustomThemeSwitcher.tsx.preview
@@ -1,14 +1,7 @@
-<AppProvider
-  navigation={NAVIGATION}
-  router={router}
-  theme={demoTheme}
-  window={demoWindow}
+<DashboardLayout
+  slots={{
+    toolbarActions: CustomThemeSwitcher,
+  }}
 >
-  <DashboardLayout
-    slots={{
-      toolbarActions: CustomThemeSwitcher,
-    }}
-  >
-    <DemoPageContent pathname={router.pathname} />
-  </DashboardLayout>
-</AppProvider>
\ No newline at end of file
+  <DemoPageContent pathname={router.pathname} />
+</DashboardLayout>
\ No newline at end of file
diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutFullScreen.js b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutFullScreen.js
index 7f77e8a3fb3..f757179ede1 100644
--- a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutFullScreen.js
+++ b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutFullScreen.js
@@ -47,6 +47,7 @@ function DashboardLayoutFullScreen(props) {
         theme={demoTheme}
         window={demoWindow}
       >
+        {/* preview-start */}
         <DashboardLayout>
           <iframe
             title="Google Map"
@@ -56,6 +57,7 @@ function DashboardLayoutFullScreen(props) {
             loading="lazy"
           />
         </DashboardLayout>
+        {/* preview-end */}
       </AppProvider>
     </DemoProvider>
   );
diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutFullScreen.tsx b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutFullScreen.tsx
index e15b1f08cf1..fa976ee1881 100644
--- a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutFullScreen.tsx
+++ b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutFullScreen.tsx
@@ -54,6 +54,7 @@ export default function DashboardLayoutFullScreen(props: DemoProps) {
         theme={demoTheme}
         window={demoWindow}
       >
+        {/* preview-start */}
         <DashboardLayout>
           <iframe
             title="Google Map"
@@ -63,6 +64,7 @@ export default function DashboardLayoutFullScreen(props: DemoProps) {
             loading="lazy"
           />
         </DashboardLayout>
+        {/* preview-end */}
       </AppProvider>
     </DemoProvider>
   );
diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutFullScreen.tsx.preview b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutFullScreen.tsx.preview
index 1b075ab4c40..d14789aaa5e 100644
--- a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutFullScreen.tsx.preview
+++ b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutFullScreen.tsx.preview
@@ -1,16 +1,9 @@
-<AppProvider
-  navigation={NAVIGATION}
-  router={router}
-  theme={demoTheme}
-  window={demoWindow}
->
-  <DashboardLayout>
-    <iframe
-      title="Google Map"
-      src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d387190.2799181496!2d-74.25987571760744!3d40.69767006358627!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c259af18b60165%3A0x8b621f8a7a7d28a4!2sNew%20York%2C%20NY%2C%20USA!5e0!3m2!1sen!2s!4v1633452834502!5m2!1sen!2s"
-      style={{ flex: 1, border: 0 }}
-      allowFullScreen
-      loading="lazy"
-    />
-  </DashboardLayout>
-</AppProvider>
\ No newline at end of file
+<DashboardLayout>
+  <iframe
+    title="Google Map"
+    src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d387190.2799181496!2d-74.25987571760744!3d40.69767006358627!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c259af18b60165%3A0x8b621f8a7a7d28a4!2sNew%20York%2C%20NY%2C%20USA!5e0!3m2!1sen!2s!4v1633452834502!5m2!1sen!2s"
+    style={{ flex: 1, border: 0 }}
+    allowFullScreen
+    loading="lazy"
+  />
+</DashboardLayout>
\ No newline at end of file
diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutNoMiniSidebar.js b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutNoMiniSidebar.js
index 92b27c7f3d4..4345f39620d 100644
--- a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutNoMiniSidebar.js
+++ b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutNoMiniSidebar.js
@@ -81,9 +81,11 @@ function DashboardLayoutNoMiniSidebar(props) {
         theme={demoTheme}
         window={demoWindow}
       >
+        {/* preview-start */}
         <DashboardLayout disableCollapsibleSidebar>
           <DemoPageContent pathname={router.pathname} />
         </DashboardLayout>
+        {/* preview-end */}
       </AppProvider>
     </DemoProvider>
   );
diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutNoMiniSidebar.tsx b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutNoMiniSidebar.tsx
index 6ba187f9f52..8589f7cc95a 100644
--- a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutNoMiniSidebar.tsx
+++ b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutNoMiniSidebar.tsx
@@ -84,9 +84,11 @@ export default function DashboardLayoutNoMiniSidebar(props: DemoProps) {
         theme={demoTheme}
         window={demoWindow}
       >
+        {/* preview-start */}
         <DashboardLayout disableCollapsibleSidebar>
           <DemoPageContent pathname={router.pathname} />
         </DashboardLayout>
+        {/* preview-end */}
       </AppProvider>
     </DemoProvider>
   );
diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutNoMiniSidebar.tsx.preview b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutNoMiniSidebar.tsx.preview
index bfaa1804703..d103d12cec8 100644
--- a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutNoMiniSidebar.tsx.preview
+++ b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutNoMiniSidebar.tsx.preview
@@ -1,10 +1,3 @@
-<AppProvider
-  navigation={NAVIGATION}
-  router={router}
-  theme={demoTheme}
-  window={demoWindow}
->
-  <DashboardLayout disableCollapsibleSidebar>
-    <DemoPageContent pathname={router.pathname} />
-  </DashboardLayout>
-</AppProvider>
\ No newline at end of file
+<DashboardLayout disableCollapsibleSidebar>
+  <DemoPageContent pathname={router.pathname} />
+</DashboardLayout>
\ No newline at end of file
diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutSidebarCollapsed.js b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutSidebarCollapsed.js
index 707c78b5bdb..6fbac857dc8 100644
--- a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutSidebarCollapsed.js
+++ b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutSidebarCollapsed.js
@@ -89,9 +89,11 @@ function DashboardLayoutSidebarCollapsed(props) {
         theme={demoTheme}
         window={demoWindow}
       >
+        {/* preview-start */}
         <DashboardLayout defaultSidebarCollapsed>
           <DemoPageContent pathname={pathname} />
         </DashboardLayout>
+        {/* preview-end */}
       </AppProvider>
     </DemoProvider>
   );
diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutSidebarCollapsed.tsx b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutSidebarCollapsed.tsx
index a1cd8498c08..05a142be308 100644
--- a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutSidebarCollapsed.tsx
+++ b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutSidebarCollapsed.tsx
@@ -96,9 +96,11 @@ export default function DashboardLayoutSidebarCollapsed(props: DemoProps) {
         theme={demoTheme}
         window={demoWindow}
       >
+        {/* preview-start */}
         <DashboardLayout defaultSidebarCollapsed>
           <DemoPageContent pathname={pathname} />
         </DashboardLayout>
+        {/* preview-end */}
       </AppProvider>
     </DemoProvider>
   );
diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutSidebarCollapsed.tsx.preview b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutSidebarCollapsed.tsx.preview
index 30b16ff77ca..7dd9dd6cce6 100644
--- a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutSidebarCollapsed.tsx.preview
+++ b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutSidebarCollapsed.tsx.preview
@@ -1,10 +1,3 @@
-<AppProvider
-  navigation={NAVIGATION}
-  router={router}
-  theme={demoTheme}
-  window={demoWindow}
->
-  <DashboardLayout defaultSidebarCollapsed>
-    <DemoPageContent pathname={pathname} />
-  </DashboardLayout>
-</AppProvider>
\ No newline at end of file
+<DashboardLayout defaultSidebarCollapsed>
+  <DemoPageContent pathname={pathname} />
+</DashboardLayout>
\ No newline at end of file
diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutSidebarHidden.js b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutSidebarHidden.js
index a02a72a0fb0..98243e77513 100644
--- a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutSidebarHidden.js
+++ b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutSidebarHidden.js
@@ -55,9 +55,11 @@ function DashboardLayoutSidebarHidden(props) {
     // Remove this provider when copying and pasting into your project.
     <DemoProvider window={demoWindow}>
       <AppProvider router={router} theme={demoTheme} window={demoWindow}>
+        {/* preview-start */}
         <DashboardLayout hideNavigation>
           <DemoPageContent pathname={router.pathname} />
         </DashboardLayout>
+        {/* preview-end */}
       </AppProvider>
     </DemoProvider>
   );
diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutSidebarHidden.tsx b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutSidebarHidden.tsx
index c1358724873..5d3b2581b14 100644
--- a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutSidebarHidden.tsx
+++ b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutSidebarHidden.tsx
@@ -58,9 +58,11 @@ export default function DashboardLayoutSidebarHidden(props: DemoProps) {
     // Remove this provider when copying and pasting into your project.
     <DemoProvider window={demoWindow}>
       <AppProvider router={router} theme={demoTheme} window={demoWindow}>
+        {/* preview-start */}
         <DashboardLayout hideNavigation>
           <DemoPageContent pathname={router.pathname} />
         </DashboardLayout>
+        {/* preview-end */}
       </AppProvider>
     </DemoProvider>
   );
diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutSidebarHidden.tsx.preview b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutSidebarHidden.tsx.preview
index 08ab509046c..4fd4fe5422d 100644
--- a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutSidebarHidden.tsx.preview
+++ b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutSidebarHidden.tsx.preview
@@ -1,5 +1,3 @@
-<AppProvider router={router} theme={demoTheme} window={demoWindow}>
-  <DashboardLayout hideNavigation>
-    <DemoPageContent pathname={router.pathname} />
-  </DashboardLayout>
-</AppProvider>
\ No newline at end of file
+<DashboardLayout hideNavigation>
+  <DemoPageContent pathname={router.pathname} />
+</DashboardLayout>
\ No newline at end of file
diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutSlots.js b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutSlots.js
index 0371d6be4dd..cc71dc1308b 100644
--- a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutSlots.js
+++ b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutSlots.js
@@ -152,6 +152,7 @@ function DashboardLayoutSlots(props) {
         theme={demoTheme}
         window={demoWindow}
       >
+        {/* preview-start */}
         <DashboardLayout
           slots={{
             appTitle: CustomAppTitle,
@@ -161,6 +162,7 @@ function DashboardLayoutSlots(props) {
         >
           <DemoPageContent pathname={router.pathname} />
         </DashboardLayout>
+        {/* preview-end */}
       </AppProvider>
     </DemoProvider>
   );
diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutSlots.tsx b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutSlots.tsx
index 3262c20eea6..ad0789f864e 100644
--- a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutSlots.tsx
+++ b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutSlots.tsx
@@ -155,6 +155,7 @@ export default function DashboardLayoutSlots(props: DemoProps) {
         theme={demoTheme}
         window={demoWindow}
       >
+        {/* preview-start */}
         <DashboardLayout
           slots={{
             appTitle: CustomAppTitle,
@@ -164,6 +165,7 @@ export default function DashboardLayoutSlots(props: DemoProps) {
         >
           <DemoPageContent pathname={router.pathname} />
         </DashboardLayout>
+        {/* preview-end */}
       </AppProvider>
     </DemoProvider>
   );
diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutSlots.tsx.preview b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutSlots.tsx.preview
index d90be1afe43..80e9af3f0ca 100644
--- a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutSlots.tsx.preview
+++ b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutSlots.tsx.preview
@@ -1,16 +1,9 @@
-<AppProvider
-  navigation={NAVIGATION}
-  router={router}
-  theme={demoTheme}
-  window={demoWindow}
+<DashboardLayout
+  slots={{
+    appTitle: CustomAppTitle,
+    toolbarActions: ToolbarActionsSearch,
+    sidebarFooter: SidebarFooter,
+  }}
 >
-  <DashboardLayout
-    slots={{
-      appTitle: CustomAppTitle,
-      toolbarActions: ToolbarActionsSearch,
-      sidebarFooter: SidebarFooter,
-    }}
-  >
-    <DemoPageContent pathname={router.pathname} />
-  </DashboardLayout>
-</AppProvider>
\ No newline at end of file
+  <DemoPageContent pathname={router.pathname} />
+</DashboardLayout>
\ No newline at end of file
diff --git a/docs/data/toolpad/core/introduction/TutorialDefault.js b/docs/data/toolpad/core/introduction/TutorialDefault.js
index 7408d03008f..dfbc114fcff 100644
--- a/docs/data/toolpad/core/introduction/TutorialDefault.js
+++ b/docs/data/toolpad/core/introduction/TutorialDefault.js
@@ -69,9 +69,11 @@ function TutorialDefault(props) {
         theme={demoTheme}
         window={demoWindow}
       >
+        {/* preview-start */}
         <DashboardLayout>
           <DemoPageContent pathname={demoRouter.pathname} />
         </DashboardLayout>
+        {/* preview-end */}
       </AppProvider>
     </DemoProvider>
   );
diff --git a/docs/data/toolpad/core/introduction/TutorialDefault.tsx b/docs/data/toolpad/core/introduction/TutorialDefault.tsx
index b41aaa01ea5..6a654e39d84 100644
--- a/docs/data/toolpad/core/introduction/TutorialDefault.tsx
+++ b/docs/data/toolpad/core/introduction/TutorialDefault.tsx
@@ -73,9 +73,11 @@ export default function TutorialDefault(props: DemoProps) {
         theme={demoTheme}
         window={demoWindow}
       >
+        {/* preview-start */}
         <DashboardLayout>
           <DemoPageContent pathname={demoRouter.pathname} />
         </DashboardLayout>
+        {/* preview-end */}
       </AppProvider>
     </DemoProvider>
   );
diff --git a/docs/data/toolpad/core/introduction/TutorialDefault.tsx.preview b/docs/data/toolpad/core/introduction/TutorialDefault.tsx.preview
index 9c60bc9c8ad..934392cc699 100644
--- a/docs/data/toolpad/core/introduction/TutorialDefault.tsx.preview
+++ b/docs/data/toolpad/core/introduction/TutorialDefault.tsx.preview
@@ -1,10 +1,3 @@
-<AppProvider
-  navigation={NAVIGATION}
-  router={demoRouter}
-  theme={demoTheme}
-  window={demoWindow}
->
-  <DashboardLayout>
-    <DemoPageContent pathname={demoRouter.pathname} />
-  </DashboardLayout>
-</AppProvider>
\ No newline at end of file
+<DashboardLayout>
+  <DemoPageContent pathname={demoRouter.pathname} />
+</DashboardLayout>
\ No newline at end of file
diff --git a/docs/data/toolpad/core/introduction/TutorialPages.js b/docs/data/toolpad/core/introduction/TutorialPages.js
index a6bb57cf94c..75bc08503b2 100644
--- a/docs/data/toolpad/core/introduction/TutorialPages.js
+++ b/docs/data/toolpad/core/introduction/TutorialPages.js
@@ -88,9 +88,11 @@ function TutorialPages(props) {
         theme={demoTheme}
         window={demoWindow}
       >
+        {/* preview-start */}
         <DashboardLayout>
           <DemoPageContent pathname={demoRouter.pathname} />
         </DashboardLayout>
+        {/* preview-end */}
       </AppProvider>
     </DemoProvider>
   );
diff --git a/docs/data/toolpad/core/introduction/TutorialPages.tsx b/docs/data/toolpad/core/introduction/TutorialPages.tsx
index 3d5c5148dc3..580aae29cbf 100644
--- a/docs/data/toolpad/core/introduction/TutorialPages.tsx
+++ b/docs/data/toolpad/core/introduction/TutorialPages.tsx
@@ -91,9 +91,11 @@ export default function TutorialPages(props: DemoProps) {
         theme={demoTheme}
         window={demoWindow}
       >
+        {/* preview-start */}
         <DashboardLayout>
           <DemoPageContent pathname={demoRouter.pathname} />
         </DashboardLayout>
+        {/* preview-end */}
       </AppProvider>
     </DemoProvider>
   );
diff --git a/docs/data/toolpad/core/introduction/TutorialPages.tsx.preview b/docs/data/toolpad/core/introduction/TutorialPages.tsx.preview
index 9c60bc9c8ad..934392cc699 100644
--- a/docs/data/toolpad/core/introduction/TutorialPages.tsx.preview
+++ b/docs/data/toolpad/core/introduction/TutorialPages.tsx.preview
@@ -1,10 +1,3 @@
-<AppProvider
-  navigation={NAVIGATION}
-  router={demoRouter}
-  theme={demoTheme}
-  window={demoWindow}
->
-  <DashboardLayout>
-    <DemoPageContent pathname={demoRouter.pathname} />
-  </DashboardLayout>
-</AppProvider>
\ No newline at end of file
+<DashboardLayout>
+  <DemoPageContent pathname={demoRouter.pathname} />
+</DashboardLayout>
\ No newline at end of file

From dafaeb8074db087ab94883966a9814150775f5cb Mon Sep 17 00:00:00 2001
From: Pedro Ferreira <10789765+apedroferreira@users.noreply.github.com>
Date: Mon, 21 Apr 2025 12:49:09 +0100
Subject: [PATCH 07/11] wee

---
 .../dashboard-layout/DashboardLayoutAccountSidebar.tsx          | 2 +-
 .../dashboard-layout/DashboardLayoutSidebarCollapsed.tsx        | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutAccountSidebar.tsx b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutAccountSidebar.tsx
index e2d79a940ed..78ab570494d 100644
--- a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutAccountSidebar.tsx
+++ b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutAccountSidebar.tsx
@@ -21,7 +21,7 @@ import {
   AccountPreviewProps,
 } from '@toolpad/core/Account';
 import type { Navigation, Router, Session } from '@toolpad/core/AppProvider';
-import { DemoProvider, useDemoRouter } from '@toolpad/core/internal';
+import { DemoProvider } from '@toolpad/core/internal';
 
 const NAVIGATION: Navigation = [
   {
diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutSidebarCollapsed.tsx b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutSidebarCollapsed.tsx
index 05a142be308..f053b3654ac 100644
--- a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutSidebarCollapsed.tsx
+++ b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutSidebarCollapsed.tsx
@@ -11,7 +11,7 @@ import {
   type Navigation,
 } from '@toolpad/core/AppProvider';
 import { DashboardLayout } from '@toolpad/core/DashboardLayout';
-import { DemoProvider, useDemoRouter } from '@toolpad/core/internal';
+import { DemoProvider } from '@toolpad/core/internal';
 
 const NAVIGATION: Navigation = [
   {

From bbc31a196988a3b60ac3a205a96e0c00c18de984 Mon Sep 17 00:00:00 2001
From: Pedro Ferreira <10789765+apedroferreira@users.noreply.github.com>
Date: Tue, 22 Apr 2025 17:05:58 +0100
Subject: [PATCH 08/11] Add console warning for internal features

---
 packages/toolpad-core/src/internal/demo.tsx | 25 ++++++++++++++++++---
 1 file changed, 22 insertions(+), 3 deletions(-)

diff --git a/packages/toolpad-core/src/internal/demo.tsx b/packages/toolpad-core/src/internal/demo.tsx
index bd95696156e..e4f7b5ad117 100644
--- a/packages/toolpad-core/src/internal/demo.tsx
+++ b/packages/toolpad-core/src/internal/demo.tsx
@@ -9,6 +9,21 @@ import { Router } from '../AppProvider';
  * @ignore - internal component.
  */
 
+function useExternalProductionWarning({ featureName }: { featureName?: string }) {
+  const isExternalProduction =
+    typeof window !== 'undefined' &&
+    window.location.hostname !== 'mui.com' &&
+    process.env.NODE_ENV === 'production';
+
+  React.useEffect(() => {
+    if (isExternalProduction) {
+      console.warn(
+        `${featureName} is an internal feature of Toolpad Core. This feature is not meant for general usage in production.`,
+      );
+    }
+  }, [featureName, isExternalProduction]);
+}
+
 interface DemoProviderProps {
   /**
    * The window where the application is rendered.
@@ -17,15 +32,17 @@ interface DemoProviderProps {
   window?: Window;
   children: React.ReactNode;
 }
+// Wrapper for demo applications in the documentation
+export function DemoProvider({ window: appWindow, children }: DemoProviderProps) {
+  useExternalProductionWarning({ featureName: 'DemoProvider' });
 
-export function DemoProvider({ window, children }: DemoProviderProps) {
   const demoEmotionCache = React.useMemo(
     () =>
       createCache({
         key: 'toolpad-demo-app',
-        container: window?.document.head,
+        container: appWindow?.document.head,
       }),
-    [window?.document.head],
+    [appWindow?.document.head],
   );
 
   return <CacheProvider value={demoEmotionCache}>{children}</CacheProvider>;
@@ -38,6 +55,8 @@ const DUMMY_BASE = 'https://example.com';
  * @returns An in-memory router To be used in demos demos.
  */
 export function useDemoRouter(initialUrl: string = '/') {
+  useExternalProductionWarning({ featureName: 'useDemoRouter' });
+
   const [url, setUrl] = React.useState(() => new URL(initialUrl, DUMMY_BASE));
 
   const router = React.useMemo<Router>(() => {

From 57af160d2f4e6f4c91001b4726bbf609fba6472f Mon Sep 17 00:00:00 2001
From: Pedro Ferreira <10789765+apedroferreira@users.noreply.github.com>
Date: Tue, 22 Apr 2025 17:07:24 +0100
Subject: [PATCH 09/11] Don't need this anymore

---
 packages/toolpad-core/src/internal/demo.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/toolpad-core/src/internal/demo.tsx b/packages/toolpad-core/src/internal/demo.tsx
index e4f7b5ad117..8b0d32b64d9 100644
--- a/packages/toolpad-core/src/internal/demo.tsx
+++ b/packages/toolpad-core/src/internal/demo.tsx
@@ -33,16 +33,16 @@ interface DemoProviderProps {
   children: React.ReactNode;
 }
 // Wrapper for demo applications in the documentation
-export function DemoProvider({ window: appWindow, children }: DemoProviderProps) {
+export function DemoProvider({ window, children }: DemoProviderProps) {
   useExternalProductionWarning({ featureName: 'DemoProvider' });
 
   const demoEmotionCache = React.useMemo(
     () =>
       createCache({
         key: 'toolpad-demo-app',
-        container: appWindow?.document.head,
+        container: window?.document.head,
       }),
-    [appWindow?.document.head],
+    [window?.document.head],
   );
 
   return <CacheProvider value={demoEmotionCache}>{children}</CacheProvider>;

From 86c5a3a03135902489783c0e9df82a6615731f2e Mon Sep 17 00:00:00 2001
From: Pedro Ferreira <10789765+apedroferreira@users.noreply.github.com>
Date: Thu, 24 Apr 2025 00:36:23 +0100
Subject: [PATCH 10/11] Fix broken lockfile

---
 pnpm-lock.yaml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index dbe55f50011..670a7c7a87e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -655,7 +655,7 @@ importers:
         version: 11.14.0
       '@emotion/react':
         specifier: 11.14.0
-        version: 11.14.0(@types/react@19.0.12)(react@19.0.0)
+        version: 11.14.0(@types/react@19.1.2)(react@19.1.0)
       '@mui/icons-material':
         specifier: ^7.0.2
         version: 7.0.2(@mui/material@7.0.2(@emotion/react@11.14.0(@types/react@19.1.2)(react@19.1.0))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@19.1.2)(react@19.1.0))(@types/react@19.1.2)(react@19.1.0))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(@types/react@19.1.2)(react@19.1.0)

From c69fca7613a093c81ffa445eacf0af58a1566906 Mon Sep 17 00:00:00 2001
From: Pedro Ferreira <10789765+apedroferreira@users.noreply.github.com>
Date: Thu, 24 Apr 2025 00:48:05 +0100
Subject: [PATCH 11/11] Self-review

---
 packages/toolpad-core/src/internal/demo.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/toolpad-core/src/internal/demo.tsx b/packages/toolpad-core/src/internal/demo.tsx
index 8b0d32b64d9..9154f6ebc52 100644
--- a/packages/toolpad-core/src/internal/demo.tsx
+++ b/packages/toolpad-core/src/internal/demo.tsx
@@ -9,7 +9,7 @@ import { Router } from '../AppProvider';
  * @ignore - internal component.
  */
 
-function useExternalProductionWarning({ featureName }: { featureName?: string }) {
+function useExternalProductionWarning({ featureName }: { featureName: string }) {
   const isExternalProduction =
     typeof window !== 'undefined' &&
     window.location.hostname !== 'mui.com' &&