diff --git a/docs/config.d.ts b/docs/config.d.ts
index 12950f0e05064d..605606f1179e10 100644
--- a/docs/config.d.ts
+++ b/docs/config.d.ts
@@ -1,2 +1,7 @@
-// eslint-disable-next-line import/prefer-default-export
 export const LANGUAGES: string[];
+
+export const LANGUAGES_SSR: string[];
+
+export const LANGUAGES_IN_PROGRESS: string[];
+
+export const LANGUAGES_IGNORE_PAGES: (pathname: string) => boolean;
diff --git a/docs/config.js b/docs/config.js
index 4718083cf6aec2..3dfdb2d1a01e72 100644
--- a/docs/config.js
+++ b/docs/config.js
@@ -1,6 +1,29 @@
+// Valid languages to server-side render in production
+const LANGUAGES = ['en'];
+
+// Server side rendered languages
+const LANGUAGES_SSR = ['en'];
+
+// Work in progress
+const LANGUAGES_IN_PROGRESS = LANGUAGES.slice();
+
+const LANGUAGES_IGNORE_PAGES = (pathname) => {
+  // We don't have the bandwidth like Qt to translate our blog posts
+  // https://www.qt.io/zh-cn/blog
+  if (pathname === '/blog' || pathname.startsWith('/blog/')) {
+    return true;
+  }
+
+  if (pathname === '/size-snapshot/') {
+    return true;
+  }
+
+  return false;
+};
+
 module.exports = {
-  /**
-   * Valid languages to server-side render in production
-   */
-  LANGUAGES: ['en', 'zh', 'pt'],
+  LANGUAGES,
+  LANGUAGES_IN_PROGRESS,
+  LANGUAGES_SSR,
+  LANGUAGES_IGNORE_PAGES,
 };
diff --git a/docs/next.config.js b/docs/next.config.js
index aa41d36d65f252..5f5494d8897d15 100644
--- a/docs/next.config.js
+++ b/docs/next.config.js
@@ -3,7 +3,12 @@ const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
 const pkg = require('../package.json');
 const withDocsInfra = require('./nextConfigDocsInfra');
 const { findPages } = require('./src/modules/utils/find');
-const { LANGUAGES, LANGUAGES_SSR, LANGUAGES_IGNORE_PAGES } = require('./src/modules/constants');
+const {
+  LANGUAGES,
+  LANGUAGES_SSR,
+  LANGUAGES_IGNORE_PAGES,
+  LANGUAGES_IN_PROGRESS,
+} = require('./config');
 
 const workspaceRoot = path.join(__dirname, '../');
 
@@ -87,7 +92,16 @@ module.exports = withDocsInfra({
             oneOf: [
               {
                 resourceQuery: /@mui\/markdown/,
-                use: [options.defaultLoaders.babel, require.resolve('@mui/markdown/loader')],
+                use: [
+                  options.defaultLoaders.babel,
+                  {
+                    loader: require.resolve('@mui/markdown/loader'),
+                    options: {
+                      ignoreLanguagePages: LANGUAGES_IGNORE_PAGES,
+                      languagesInProgress: LANGUAGES_IN_PROGRESS,
+                    },
+                  },
+                ],
               },
               {
                 // used in some /getting-started/templates
diff --git a/docs/package.json b/docs/package.json
index 5e8fed8b18f855..8fb56e14d61599 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -36,6 +36,7 @@
     "@mui/icons-material": "^5.10.16",
     "@mui/joy": "5.0.0-alpha.56",
     "@mui/lab": "5.0.0-alpha.110",
+    "@mui/markdown": "*",
     "@mui/material": "^5.10.16",
     "@mui/material-next": "6.0.0-alpha.64",
     "@mui/styled-engine": "^5.10.16",
diff --git a/docs/scripts/reportBrokenLinks.js b/docs/scripts/reportBrokenLinks.js
index d562e9e32e99fd..c54170281180db 100644
--- a/docs/scripts/reportBrokenLinks.js
+++ b/docs/scripts/reportBrokenLinks.js
@@ -3,6 +3,7 @@ const path = require('path');
 const fse = require('fs-extra');
 const { createRender } = require('@mui/markdown');
 const { marked } = require('marked');
+const { LANGUAGES_IGNORE_PAGES } = require('../config');
 
 // Use renderer to extract all links into a markdown document
 const getPageLinks = (markdown) => {
@@ -66,7 +67,12 @@ function getLinksAndAnchors(fileName) {
   const toc = [];
   const headingHashes = {};
   const userLanguage = 'en';
-  const render = createRender({ headingHashes, toc, userLanguage });
+  const render = createRender({
+    headingHashes,
+    toc,
+    userLanguage,
+    ignoreLanguagePages: LANGUAGES_IGNORE_PAGES,
+  });
 
   const data = fse.readFileSync(fileName, { encoding: 'utf8' });
   render(data);
diff --git a/docs/src/featureToggle.js b/docs/src/featureToggle.js
index cf059914db5267..a94ee82968e6c8 100644
--- a/docs/src/featureToggle.js
+++ b/docs/src/featureToggle.js
@@ -1,4 +1,4 @@
-// need to use commonjs export so that docs/packages/markdown can use
+// need to use commonjs export so that @mui/markdown can use
 module.exports = {
   enable_website_banner: false,
   enable_toc_banner: true,
diff --git a/docs/src/modules/components/AppSearch.js b/docs/src/modules/components/AppSearch.js
index 7182eae0aaf5ae..537eb11aad1dd1 100644
--- a/docs/src/modules/components/AppSearch.js
+++ b/docs/src/modules/components/AppSearch.js
@@ -15,7 +15,7 @@ import KeyboardArrowRightRounded from '@mui/icons-material/KeyboardArrowRightRou
 import SearchIcon from '@mui/icons-material/Search';
 import GlobalStyles from '@mui/material/GlobalStyles';
 import { alpha, styled } from '@mui/material/styles';
-import { LANGUAGES_SSR } from 'docs/src/modules/constants';
+import { LANGUAGES_SSR } from 'docs/config';
 import Link from 'docs/src/modules/components/Link';
 import { useTranslate, useUserLanguage } from 'docs/src/modules/utils/i18n';
 import useLazyCSS from 'docs/src/modules/utils/useLazyCSS';
diff --git a/docs/src/modules/components/Head.tsx b/docs/src/modules/components/Head.tsx
index fc9e8ef9b88c5e..69012e15974c8e 100644
--- a/docs/src/modules/components/Head.tsx
+++ b/docs/src/modules/components/Head.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import NextHead from 'next/head';
 import { useRouter } from 'next/router';
-import { LANGUAGES_SSR } from 'docs/src/modules/constants';
+import { LANGUAGES_SSR } from 'docs/config';
 import { useUserLanguage, useTranslate } from 'docs/src/modules/utils/i18n';
 import { pathnameToLanguage } from 'docs/src/modules/utils/helpers';
 
diff --git a/docs/src/modules/components/Link.tsx b/docs/src/modules/components/Link.tsx
index 7640678f400254..6910ebaabf18ad 100644
--- a/docs/src/modules/components/Link.tsx
+++ b/docs/src/modules/components/Link.tsx
@@ -5,7 +5,7 @@ import NextLink, { LinkProps as NextLinkProps } from 'next/link';
 import MuiLink, { LinkProps as MuiLinkProps } from '@mui/material/Link';
 import { styled } from '@mui/material/styles';
 import { useUserLanguage } from 'docs/src/modules/utils/i18n';
-import { LANGUAGES_IGNORE_PAGES } from 'docs/src/modules/constants';
+import { LANGUAGES_IGNORE_PAGES } from 'docs/config';
 
 /**
  * File to keep in sync with:
diff --git a/docs/src/modules/constants.js b/docs/src/modules/constants.js
index 3a356d0cced23f..ae8a67edb3aeb4 100644
--- a/docs/src/modules/constants.js
+++ b/docs/src/modules/constants.js
@@ -1,16 +1,8 @@
-const { LANGUAGES } = require('../../config');
-
 const CODE_VARIANTS = {
   JS: 'JS',
   TS: 'TS',
 };
 
-// Server side rendered languages
-const LANGUAGES_SSR = ['en'];
-
-// Work in progress
-const LANGUAGES_IN_PROGRESS = LANGUAGES.slice();
-
 // Valid languages to use in production
 const LANGUAGES_LABEL = [
   {
@@ -19,25 +11,7 @@ const LANGUAGES_LABEL = [
   },
 ];
 
-const LANGUAGES_IGNORE_PAGES = (pathname) => {
-  // We don't have the bandwidth like Qt to translate our blog posts
-  // https://www.qt.io/zh-cn/blog
-  if (pathname === '/blog' || pathname.startsWith('/blog/')) {
-    return true;
-  }
-
-  if (pathname === '/size-snapshot/') {
-    return true;
-  }
-
-  return false;
-};
-
 module.exports = {
   CODE_VARIANTS,
-  LANGUAGES,
-  LANGUAGES_SSR,
   LANGUAGES_LABEL,
-  LANGUAGES_IN_PROGRESS,
-  LANGUAGES_IGNORE_PAGES,
 };
diff --git a/docs/src/modules/utils/helpers.ts b/docs/src/modules/utils/helpers.ts
index d1d61e9851a363..8139f09f08a3cd 100644
--- a/docs/src/modules/utils/helpers.ts
+++ b/docs/src/modules/utils/helpers.ts
@@ -1,6 +1,6 @@
 import upperFirst from 'lodash/upperFirst';
 import camelCase from 'lodash/camelCase';
-import { LANGUAGES } from '../constants';
+import { LANGUAGES } from 'docs/config';
 
 function pascalCase(str: string) {
   return upperFirst(camelCase(str));
diff --git a/docs/src/modules/utils/mapApiPageTranslations.js b/docs/src/modules/utils/mapApiPageTranslations.js
index fc2661fc65381b..42ea7365d8b43b 100644
--- a/docs/src/modules/utils/mapApiPageTranslations.js
+++ b/docs/src/modules/utils/mapApiPageTranslations.js
@@ -1,4 +1,5 @@
 import { createRender } from '@mui/markdown';
+import { LANGUAGES_IGNORE_PAGES } from '../../../config';
 
 const notEnglishJsonRegExp = /-([a-z]{2})\.json$/;
 
@@ -29,6 +30,7 @@ export default function mapApiPageTranslations(req) {
         toc: componentDescriptionToc,
         userLanguage,
         location: filenames,
+        ignoreLanguagePages: LANGUAGES_IGNORE_PAGES,
       });
       translation.componentDescription = render(translation.componentDescription);
       translation.componentDescriptionToc = componentDescriptionToc;
diff --git a/package.json b/package.json
index 5979a753eef130..f27d47f35287ce 100644
--- a/package.json
+++ b/package.json
@@ -239,7 +239,6 @@
     "benchmark",
     "packages/*",
     "docs",
-    "docs/packages/*",
     "test"
   ]
 }
diff --git a/docs/packages/feedback/README.md b/packages/feedback/README.md
similarity index 100%
rename from docs/packages/feedback/README.md
rename to packages/feedback/README.md
diff --git a/docs/packages/feedback/claudia.json b/packages/feedback/claudia.json
similarity index 100%
rename from docs/packages/feedback/claudia.json
rename to packages/feedback/claudia.json
diff --git a/docs/packages/feedback/example.json b/packages/feedback/example.json
similarity index 100%
rename from docs/packages/feedback/example.json
rename to packages/feedback/example.json
diff --git a/docs/packages/feedback/index.js b/packages/feedback/index.js
similarity index 100%
rename from docs/packages/feedback/index.js
rename to packages/feedback/index.js
diff --git a/docs/packages/feedback/package.json b/packages/feedback/package.json
similarity index 100%
rename from docs/packages/feedback/package.json
rename to packages/feedback/package.json
diff --git a/docs/packages/feedback/policies/access-dynamodb.json b/packages/feedback/policies/access-dynamodb.json
similarity index 100%
rename from docs/packages/feedback/policies/access-dynamodb.json
rename to packages/feedback/policies/access-dynamodb.json
diff --git a/docs/packages/markdown/extractImports.js b/packages/markdown/extractImports.js
similarity index 100%
rename from docs/packages/markdown/extractImports.js
rename to packages/markdown/extractImports.js
diff --git a/docs/packages/markdown/extractImports.test.js b/packages/markdown/extractImports.test.js
similarity index 100%
rename from docs/packages/markdown/extractImports.test.js
rename to packages/markdown/extractImports.test.js
diff --git a/docs/packages/markdown/index.d.ts b/packages/markdown/index.d.ts
similarity index 90%
rename from docs/packages/markdown/index.d.ts
rename to packages/markdown/index.d.ts
index e01dd2fc94caf1..7f8047214d32e8 100644
--- a/docs/packages/markdown/index.d.ts
+++ b/packages/markdown/index.d.ts
@@ -9,6 +9,7 @@ export function createRender(context: {
   headingHashes: Record<string, string>;
   toc: TableOfContentsEntry[];
   userLanguage: string;
+  ignoreLanguagePages: (path: string) => boolean;
 }): (markdown: string) => string;
 
 export function getHeaders(markdown: string): Record<string, string | string[]>;
diff --git a/docs/packages/markdown/index.js b/packages/markdown/index.js
similarity index 100%
rename from docs/packages/markdown/index.js
rename to packages/markdown/index.js
diff --git a/docs/packages/markdown/loader.js b/packages/markdown/loader.js
similarity index 93%
rename from docs/packages/markdown/loader.js
rename to packages/markdown/loader.js
index b42605ce214b18..ffb3a3b6733063 100644
--- a/docs/packages/markdown/loader.js
+++ b/packages/markdown/loader.js
@@ -4,8 +4,6 @@ const { prepareMarkdown } = require('./parseMarkdown');
 const extractImports = require('./extractImports');
 
 const notEnglishMarkdownRegExp = /-([a-z]{2})\.md$/;
-// TODO: pass as argument
-const LANGUAGES_IN_PROGRESS = ['en', 'zh', 'ru', 'pt', 'es', 'fr', 'de', 'ja'];
 
 /**
  * @param {string} string
@@ -39,14 +37,14 @@ const packages = [
   {
     product: 'material-ui',
     paths: [
-      path.join(__dirname, '../../../packages/mui-lab/src'),
-      path.join(__dirname, '../../../packages/mui-material/src'),
-      path.join(__dirname, '../../../packages/mui-base/src'),
+      path.join(__dirname, '../../packages/mui-lab/src'),
+      path.join(__dirname, '../../packages/mui-material/src'),
+      path.join(__dirname, '../../packages/mui-base/src'),
     ],
   },
   {
     product: 'base',
-    paths: [path.join(__dirname, '../../../packages/mui-base/src')],
+    paths: [path.join(__dirname, '../../packages/mui-base/src')],
   },
 ];
 
@@ -75,6 +73,7 @@ packages.forEach((pkg) => {
  */
 module.exports = async function demoLoader() {
   const englishFilepath = this.resourcePath;
+  const config = this.getOptions();
 
   const englishFilename = path.basename(englishFilepath, '.md');
 
@@ -94,7 +93,7 @@ module.exports = async function demoLoader() {
         if (
           filename.startsWith(englishFilename) &&
           matchNotEnglishMarkdown !== null &&
-          LANGUAGES_IN_PROGRESS.indexOf(matchNotEnglishMarkdown[1]) !== -1
+          config.languagesInProgress.indexOf(matchNotEnglishMarkdown[1]) !== -1
         ) {
           return {
             filename,
@@ -121,7 +120,12 @@ module.exports = async function demoLoader() {
     .replace(this.rootContext, '')
     // win32 to posix
     .replace(/\\/g, '/');
-  const { docs } = prepareMarkdown({ pageFilename, translations, componentPackageMapping });
+  const { docs } = prepareMarkdown({
+    pageFilename,
+    translations,
+    componentPackageMapping,
+    ignoreLanguagePages: config.ignoreLanguagePages,
+  });
 
   const demos = {};
   const importedModuleIDs = new Set();
diff --git a/docs/packages/markdown/package.json b/packages/markdown/package.json
similarity index 100%
rename from docs/packages/markdown/package.json
rename to packages/markdown/package.json
diff --git a/docs/packages/markdown/parseMarkdown.js b/packages/markdown/parseMarkdown.js
similarity index 96%
rename from docs/packages/markdown/parseMarkdown.js
rename to packages/markdown/parseMarkdown.js
index 2ef070fee80f36..c75da47861cdc0 100644
--- a/docs/packages/markdown/parseMarkdown.js
+++ b/packages/markdown/parseMarkdown.js
@@ -1,7 +1,6 @@
 const { marked } = require('marked');
 const kebabCase = require('lodash/kebabCase');
 const textToHash = require('./textToHash');
-const { LANGUAGES_IGNORE_PAGES } = require('../../src/modules/constants');
 const prism = require('./prism');
 
 const headerRegExp = /---[\r\n]([\s\S]*)[\r\n]---/;
@@ -174,9 +173,10 @@ const noSEOadvantage = [
  * @param {Record<string, string>} context.headingHashes - WILL BE MUTATED
  * @param {TableOfContentsEntry[]} context.toc - WILL BE MUTATED
  * @param {string} context.userLanguage
+ * @param {function(string):boolean} context.ignoreLanguagePages
  */
 function createRender(context) {
-  const { headingHashes, toc, userLanguage } = context;
+  const { headingHashes, toc, userLanguage, ignoreLanguagePages } = context;
   const headingHashesFallbackTranslated = {};
   let headingIndex = -1;
 
@@ -266,7 +266,7 @@ function createRender(context) {
 
       checkUrlHealth(href, linkText, context);
 
-      if (userLanguage !== 'en' && href.indexOf('/') === 0 && !LANGUAGES_IGNORE_PAGES(href)) {
+      if (userLanguage !== 'en' && href.indexOf('/') === 0 && !ignoreLanguagePages(href)) {
         finalHref = `/${userLanguage}${href}`;
       }
 
@@ -371,9 +371,10 @@ function resolveComponentApiUrl(product, componentPkg, component) {
  * @param {object} config
  * @param {Array<{ markdown: string, filename: string, userLanguage: string }>} config.translations - Mapping of locale to its markdown
  * @param {string} config.pageFilename - posix filename relative to nextjs pages directory
+ * @param {function(string):boolean} config.ignoreLanguagePages
  */
 function prepareMarkdown(config) {
-  const { pageFilename, translations, componentPackageMapping = {} } = config;
+  const { pageFilename, translations, componentPackageMapping = {}, ignoreLanguagePages } = config;
 
   const demos = {};
   /**
@@ -444,7 +445,13 @@ ${headers.components
       }
 
       const toc = [];
-      const render = createRender({ headingHashes, toc, userLanguage, location });
+      const render = createRender({
+        headingHashes,
+        toc,
+        userLanguage,
+        location,
+        ignoreLanguagePages,
+      });
 
       const rendered = contents.map((content) => {
         if (/^"(demo|component)": "(.*)"/.test(content)) {
diff --git a/docs/packages/markdown/parseMarkdown.test.js b/packages/markdown/parseMarkdown.test.js
similarity index 100%
rename from docs/packages/markdown/parseMarkdown.test.js
rename to packages/markdown/parseMarkdown.test.js
diff --git a/docs/packages/markdown/prism.d.ts b/packages/markdown/prism.d.ts
similarity index 100%
rename from docs/packages/markdown/prism.d.ts
rename to packages/markdown/prism.d.ts
diff --git a/docs/packages/markdown/prism.js b/packages/markdown/prism.js
similarity index 100%
rename from docs/packages/markdown/prism.js
rename to packages/markdown/prism.js
diff --git a/docs/packages/markdown/textToHash.js b/packages/markdown/textToHash.js
similarity index 100%
rename from docs/packages/markdown/textToHash.js
rename to packages/markdown/textToHash.js
diff --git a/docs/packages/markdown/textToHash.test.js b/packages/markdown/textToHash.test.js
similarity index 100%
rename from docs/packages/markdown/textToHash.test.js
rename to packages/markdown/textToHash.test.js
diff --git a/packages/mui-codemod/src/v5.0.0/theme-spacing.test/large-actual.js b/packages/mui-codemod/src/v5.0.0/theme-spacing.test/large-actual.js
index 42d6d500448786..01cd339dfd4b26 100644
--- a/packages/mui-codemod/src/v5.0.0/theme-spacing.test/large-actual.js
+++ b/packages/mui-codemod/src/v5.0.0/theme-spacing.test/large-actual.js
@@ -15,7 +15,7 @@ import KeyboardArrowRightRounded from '@mui/icons-material/KeyboardArrowRightRou
 import SearchIcon from '@mui/icons-material/Search';
 import GlobalStyles from '@mui/material/GlobalStyles';
 import { alpha, styled } from '@mui/material/styles';
-import { LANGUAGES_SSR } from 'docs/src/modules/constants';
+import { LANGUAGES_SSR } from 'docs/config';
 import Link from 'docs/src/modules/components/Link';
 import { useTranslate, useUserLanguage } from 'docs/src/modules/utils/i18n';
 import useLazyCSS from 'docs/src/modules/utils/useLazyCSS';
diff --git a/packages/mui-codemod/src/v5.0.0/theme-spacing.test/large-expected.js b/packages/mui-codemod/src/v5.0.0/theme-spacing.test/large-expected.js
index 16e86e1ea2959d..e7f6d929c4a5b3 100644
--- a/packages/mui-codemod/src/v5.0.0/theme-spacing.test/large-expected.js
+++ b/packages/mui-codemod/src/v5.0.0/theme-spacing.test/large-expected.js
@@ -15,7 +15,7 @@ import KeyboardArrowRightRounded from '@mui/icons-material/KeyboardArrowRightRou
 import SearchIcon from '@mui/icons-material/Search';
 import GlobalStyles from '@mui/material/GlobalStyles';
 import { alpha, styled } from '@mui/material/styles';
-import { LANGUAGES_SSR } from 'docs/src/modules/constants';
+import { LANGUAGES_SSR } from 'docs/config';
 import Link from 'docs/src/modules/components/Link';
 import { useTranslate, useUserLanguage } from 'docs/src/modules/utils/i18n';
 import useLazyCSS from 'docs/src/modules/utils/useLazyCSS';
diff --git a/tsconfig.json b/tsconfig.json
index a368a5fccb98b2..b9f23b977a7078 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -18,7 +18,7 @@
       "@mui/material/*": ["./packages/mui-material/src/*"],
       "@mui/lab": ["./packages/mui-lab/src"],
       "@mui/lab/*": ["./packages/mui-lab/src/*"],
-      "@mui/markdown": ["./docs/packages/markdown"],
+      "@mui/markdown": ["./packages/markdown"],
       "@mui/styled-engine": ["./packages/mui-styled-engine/src"],
       "@mui/styled-engine/*": ["./packages/mui-styled-engine/src/*"],
       "@mui/styled-engine-sc": ["./packages/mui-styled-engine-sc/src"],