diff --git a/docs/next.config.js b/docs/next.config.js
index 500d8e8674d849..e7b34d38ae4e21 100644
--- a/docs/next.config.js
+++ b/docs/next.config.js
@@ -90,6 +90,7 @@ module.exports = {
       module: {
         ...config.module,
         rules: config.module.rules.concat([
+          // used in some /getting-started/templates
           {
             test: /\.md$/,
             loader: 'raw-loader',
@@ -155,7 +156,8 @@ module.exports = {
     }
 
     // We want to speed-up the build of pull requests.
-    if (process.env.PULL_REQUEST === 'true') {
+    // TODO: revert. Only flipped for debugging
+    if (process.env.PULL_REQUEST === 'false') {
       // eslint-disable-next-line no-console
       console.log('Considering only English for SSR');
       traverse(pages, 'en');
diff --git a/docs/pages/api-docs/alert-title.js b/docs/pages/api-docs/alert-title.js
index 0896cb155e02a6..6dfc542a39886a 100644
--- a/docs/pages/api-docs/alert-title.js
+++ b/docs/pages/api-docs/alert-title.js
@@ -1,7 +1,16 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import markdown from './alert-title.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <MarkdownDocs markdown={markdown} />;
+const pageFilename = 'api/alert-title';
+const requireRaw = require.context('!raw-loader!./', false, /alert-title\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/api-docs/alert.js b/docs/pages/api-docs/alert.js
index fcdd8f0115652a..d886dff1b1a055 100644
--- a/docs/pages/api-docs/alert.js
+++ b/docs/pages/api-docs/alert.js
@@ -1,7 +1,16 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import markdown from './alert.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <MarkdownDocs markdown={markdown} />;
+const pageFilename = 'api/alert';
+const requireRaw = require.context('!raw-loader!./', false, /alert\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/api-docs/app-bar.js b/docs/pages/api-docs/app-bar.js
index ae8901420117fa..154fde3c957c0b 100644
--- a/docs/pages/api-docs/app-bar.js
+++ b/docs/pages/api-docs/app-bar.js
@@ -1,7 +1,16 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import markdown from './app-bar.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <MarkdownDocs markdown={markdown} />;
+const pageFilename = 'api/app-bar';
+const requireRaw = require.context('!raw-loader!./', false, /app-bar\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/api-docs/autocomplete.js b/docs/pages/api-docs/autocomplete.js
index f5d20ef899b13c..7fff2551eb6501 100644
--- a/docs/pages/api-docs/autocomplete.js
+++ b/docs/pages/api-docs/autocomplete.js
@@ -1,7 +1,16 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import markdown from './autocomplete.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <MarkdownDocs markdown={markdown} />;
+const pageFilename = 'api/autocomplete';
+const requireRaw = require.context('!raw-loader!./', false, /autocomplete\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/api-docs/avatar-group.js b/docs/pages/api-docs/avatar-group.js
index d2069e3cb6ddf4..d43bbd37ec1af8 100644
--- a/docs/pages/api-docs/avatar-group.js
+++ b/docs/pages/api-docs/avatar-group.js
@@ -1,7 +1,16 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import markdown from './avatar-group.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <MarkdownDocs markdown={markdown} />;
+const pageFilename = 'api/avatar-group';
+const requireRaw = require.context('!raw-loader!./', false, /avatar-group\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/api-docs/avatar.js b/docs/pages/api-docs/avatar.js
index 469cb9f6306046..ac8d01475a1643 100644
--- a/docs/pages/api-docs/avatar.js
+++ b/docs/pages/api-docs/avatar.js
@@ -1,7 +1,16 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import markdown from './avatar.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <MarkdownDocs markdown={markdown} />;
+const pageFilename = 'api/avatar';
+const requireRaw = require.context('!raw-loader!./', false, /avatar\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/api-docs/backdrop.js b/docs/pages/api-docs/backdrop.js
index b4f219888e17c9..47e811a8da47fd 100644
--- a/docs/pages/api-docs/backdrop.js
+++ b/docs/pages/api-docs/backdrop.js
@@ -1,7 +1,16 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import markdown from './backdrop.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <MarkdownDocs markdown={markdown} />;
+const pageFilename = 'api/backdrop';
+const requireRaw = require.context('!raw-loader!./', false, /backdrop\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/api-docs/badge.js b/docs/pages/api-docs/badge.js
index 6e867a2392d94c..00a54b4469404e 100644
--- a/docs/pages/api-docs/badge.js
+++ b/docs/pages/api-docs/badge.js
@@ -1,7 +1,16 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import markdown from './badge.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <MarkdownDocs markdown={markdown} />;
+const pageFilename = 'api/badge';
+const requireRaw = require.context('!raw-loader!./', false, /badge\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/api-docs/bottom-navigation-action.js b/docs/pages/api-docs/bottom-navigation-action.js
index db08c792293e68..3cdcf91bf36846 100644
--- a/docs/pages/api-docs/bottom-navigation-action.js
+++ b/docs/pages/api-docs/bottom-navigation-action.js
@@ -1,7 +1,16 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import markdown from './bottom-navigation-action.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <MarkdownDocs markdown={markdown} />;
+const pageFilename = 'api/bottom-navigation-action';
+const requireRaw = require.context('!raw-loader!./', false, /bottom-navigation-action\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/api-docs/bottom-navigation.js b/docs/pages/api-docs/bottom-navigation.js
index bfbd1437f9cc54..75294928cc0ba5 100644
--- a/docs/pages/api-docs/bottom-navigation.js
+++ b/docs/pages/api-docs/bottom-navigation.js
@@ -1,7 +1,16 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import markdown from './bottom-navigation.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <MarkdownDocs markdown={markdown} />;
+const pageFilename = 'api/bottom-navigation';
+const requireRaw = require.context('!raw-loader!./', false, /bottom-navigation\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/api-docs/breadcrumbs.js b/docs/pages/api-docs/breadcrumbs.js
index 275672d0dd0fd4..a9a739a16befa8 100644
--- a/docs/pages/api-docs/breadcrumbs.js
+++ b/docs/pages/api-docs/breadcrumbs.js
@@ -1,7 +1,16 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import markdown from './breadcrumbs.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <MarkdownDocs markdown={markdown} />;
+const pageFilename = 'api/breadcrumbs';
+const requireRaw = require.context('!raw-loader!./', false, /breadcrumbs\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/api-docs/button-base.js b/docs/pages/api-docs/button-base.js
index e71774f579c82f..249d4f182e23cc 100644
--- a/docs/pages/api-docs/button-base.js
+++ b/docs/pages/api-docs/button-base.js
@@ -1,7 +1,16 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import markdown from './button-base.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <MarkdownDocs markdown={markdown} />;
+const pageFilename = 'api/button-base';
+const requireRaw = require.context('!raw-loader!./', false, /button-base\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/api-docs/button-group.js b/docs/pages/api-docs/button-group.js
index de74650b853371..a9a8011d38db07 100644
--- a/docs/pages/api-docs/button-group.js
+++ b/docs/pages/api-docs/button-group.js
@@ -1,7 +1,16 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import markdown from './button-group.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <MarkdownDocs markdown={markdown} />;
+const pageFilename = 'api/button-group';
+const requireRaw = require.context('!raw-loader!./', false, /button-group\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/api-docs/button.js b/docs/pages/api-docs/button.js
index 8e1457f6633e88..b28ee7c9b3bb01 100644
--- a/docs/pages/api-docs/button.js
+++ b/docs/pages/api-docs/button.js
@@ -1,7 +1,16 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import markdown from './button.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <MarkdownDocs markdown={markdown} />;
+const pageFilename = 'api/button';
+const requireRaw = require.context('!raw-loader!./', false, /button\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/api-docs/card-action-area.js b/docs/pages/api-docs/card-action-area.js
index 82ec6f68b9bf05..17cf535a331e8d 100644
--- a/docs/pages/api-docs/card-action-area.js
+++ b/docs/pages/api-docs/card-action-area.js
@@ -1,7 +1,16 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import markdown from './card-action-area.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <MarkdownDocs markdown={markdown} />;
+const pageFilename = 'api/card-action-area';
+const requireRaw = require.context('!raw-loader!./', false, /card-action-area\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/api-docs/card-actions.js b/docs/pages/api-docs/card-actions.js
index 02ae6aaf6f1063..200785749cf32a 100644
--- a/docs/pages/api-docs/card-actions.js
+++ b/docs/pages/api-docs/card-actions.js
@@ -1,7 +1,16 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import markdown from './card-actions.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <MarkdownDocs markdown={markdown} />;
+const pageFilename = 'api/card-actions';
+const requireRaw = require.context('!raw-loader!./', false, /card-actions\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/api-docs/card-content.js b/docs/pages/api-docs/card-content.js
index a73b705a69e6f5..48889759f376ef 100644
--- a/docs/pages/api-docs/card-content.js
+++ b/docs/pages/api-docs/card-content.js
@@ -1,7 +1,16 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import markdown from './card-content.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <MarkdownDocs markdown={markdown} />;
+const pageFilename = 'api/card-content';
+const requireRaw = require.context('!raw-loader!./', false, /card-content\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/api-docs/card-header.js b/docs/pages/api-docs/card-header.js
index bf907e4298a4f9..a087280a54fb45 100644
--- a/docs/pages/api-docs/card-header.js
+++ b/docs/pages/api-docs/card-header.js
@@ -1,7 +1,16 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import markdown from './card-header.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <MarkdownDocs markdown={markdown} />;
+const pageFilename = 'api/card-header';
+const requireRaw = require.context('!raw-loader!./', false, /card-header\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/api-docs/card-media.js b/docs/pages/api-docs/card-media.js
index 6654796aa5514d..59b5fdb44e694c 100644
--- a/docs/pages/api-docs/card-media.js
+++ b/docs/pages/api-docs/card-media.js
@@ -1,7 +1,16 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import markdown from './card-media.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <MarkdownDocs markdown={markdown} />;
+const pageFilename = 'api/card-media';
+const requireRaw = require.context('!raw-loader!./', false, /card-media\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/api-docs/card.js b/docs/pages/api-docs/card.js
index a02b43f8b0d9b8..2e625dc692b59d 100644
--- a/docs/pages/api-docs/card.js
+++ b/docs/pages/api-docs/card.js
@@ -1,7 +1,16 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import markdown from './card.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <MarkdownDocs markdown={markdown} />;
+const pageFilename = 'api/card';
+const requireRaw = require.context('!raw-loader!./', false, /card\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/api-docs/checkbox.js b/docs/pages/api-docs/checkbox.js
index 0265aeeac496fa..99dd1535420d35 100644
--- a/docs/pages/api-docs/checkbox.js
+++ b/docs/pages/api-docs/checkbox.js
@@ -1,7 +1,16 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import markdown from './checkbox.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <MarkdownDocs markdown={markdown} />;
+const pageFilename = 'api/checkbox';
+const requireRaw = require.context('!raw-loader!./', false, /checkbox\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/api-docs/chip.js b/docs/pages/api-docs/chip.js
index 443792405f5b32..64bbbf4b7adf71 100644
--- a/docs/pages/api-docs/chip.js
+++ b/docs/pages/api-docs/chip.js
@@ -1,7 +1,16 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import markdown from './chip.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <MarkdownDocs markdown={markdown} />;
+const pageFilename = 'api/chip';
+const requireRaw = require.context('!raw-loader!./', false, /chip\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/api-docs/circular-progress.js b/docs/pages/api-docs/circular-progress.js
index 058a9065078bbb..5d125ea66de882 100644
--- a/docs/pages/api-docs/circular-progress.js
+++ b/docs/pages/api-docs/circular-progress.js
@@ -1,7 +1,16 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import markdown from './circular-progress.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <MarkdownDocs markdown={markdown} />;
+const pageFilename = 'api/circular-progress';
+const requireRaw = require.context('!raw-loader!./', false, /circular-progress\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/api-docs/click-away-listener.js b/docs/pages/api-docs/click-away-listener.js
index 42c2729cd8677d..33b35d131a8c78 100644
--- a/docs/pages/api-docs/click-away-listener.js
+++ b/docs/pages/api-docs/click-away-listener.js
@@ -1,7 +1,16 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import markdown from './click-away-listener.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <MarkdownDocs markdown={markdown} />;
+const pageFilename = 'api/click-away-listener';
+const requireRaw = require.context('!raw-loader!./', false, /click-away-listener\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/api-docs/collapse.js b/docs/pages/api-docs/collapse.js
index 68ed222904788b..a95997b4ff847b 100644
--- a/docs/pages/api-docs/collapse.js
+++ b/docs/pages/api-docs/collapse.js
@@ -1,7 +1,16 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import markdown from './collapse.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <MarkdownDocs markdown={markdown} />;
+const pageFilename = 'api/collapse';
+const requireRaw = require.context('!raw-loader!./', false, /collapse\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/api-docs/container.js b/docs/pages/api-docs/container.js
index c380b62d8a3946..c5dbebd70d2ad4 100644
--- a/docs/pages/api-docs/container.js
+++ b/docs/pages/api-docs/container.js
@@ -1,7 +1,16 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import markdown from './container.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <MarkdownDocs markdown={markdown} />;
+const pageFilename = 'api/container';
+const requireRaw = require.context('!raw-loader!./', false, /container\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/api-docs/css-baseline.js b/docs/pages/api-docs/css-baseline.js
index ccd98d01a06f7e..cd262415d25855 100644
--- a/docs/pages/api-docs/css-baseline.js
+++ b/docs/pages/api-docs/css-baseline.js
@@ -1,7 +1,16 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import markdown from './css-baseline.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <MarkdownDocs markdown={markdown} />;
+const pageFilename = 'api/css-baseline';
+const requireRaw = require.context('!raw-loader!./', false, /css-baseline\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/api-docs/dialog-actions.js b/docs/pages/api-docs/dialog-actions.js
index 7f6bc06c59940e..296fb9b94723d5 100644
--- a/docs/pages/api-docs/dialog-actions.js
+++ b/docs/pages/api-docs/dialog-actions.js
@@ -1,7 +1,16 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import markdown from './dialog-actions.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <MarkdownDocs markdown={markdown} />;
+const pageFilename = 'api/dialog-actions';
+const requireRaw = require.context('!raw-loader!./', false, /dialog-actions\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/api-docs/dialog-content-text.js b/docs/pages/api-docs/dialog-content-text.js
index 1b11d0846bde64..6bba03700ba632 100644
--- a/docs/pages/api-docs/dialog-content-text.js
+++ b/docs/pages/api-docs/dialog-content-text.js
@@ -1,7 +1,16 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import markdown from './dialog-content-text.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <MarkdownDocs markdown={markdown} />;
+const pageFilename = 'api/dialog-content-text';
+const requireRaw = require.context('!raw-loader!./', false, /dialog-content-text\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/api-docs/dialog-content.js b/docs/pages/api-docs/dialog-content.js
index d3388028c8c22b..79f51214acad0f 100644
--- a/docs/pages/api-docs/dialog-content.js
+++ b/docs/pages/api-docs/dialog-content.js
@@ -1,7 +1,16 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import markdown from './dialog-content.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <MarkdownDocs markdown={markdown} />;
+const pageFilename = 'api/dialog-content';
+const requireRaw = require.context('!raw-loader!./', false, /dialog-content\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/api-docs/dialog-title.js b/docs/pages/api-docs/dialog-title.js
index 5091d22f6c5f1c..cba97b433d5d81 100644
--- a/docs/pages/api-docs/dialog-title.js
+++ b/docs/pages/api-docs/dialog-title.js
@@ -1,7 +1,16 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import markdown from './dialog-title.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <MarkdownDocs markdown={markdown} />;
+const pageFilename = 'api/dialog-title';
+const requireRaw = require.context('!raw-loader!./', false, /dialog-title\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/api-docs/dialog.js b/docs/pages/api-docs/dialog.js
index de8c6d1194cd43..024e23779f4182 100644
--- a/docs/pages/api-docs/dialog.js
+++ b/docs/pages/api-docs/dialog.js
@@ -1,7 +1,16 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import markdown from './dialog.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <MarkdownDocs markdown={markdown} />;
+const pageFilename = 'api/dialog';
+const requireRaw = require.context('!raw-loader!./', false, /dialog\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/api-docs/divider.js b/docs/pages/api-docs/divider.js
index 57deaf0b582abd..9fe90287508aca 100644
--- a/docs/pages/api-docs/divider.js
+++ b/docs/pages/api-docs/divider.js
@@ -1,7 +1,16 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import markdown from './divider.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <MarkdownDocs markdown={markdown} />;
+const pageFilename = 'api/divider';
+const requireRaw = require.context('!raw-loader!./', false, /divider\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/api-docs/drawer.js b/docs/pages/api-docs/drawer.js
index e3305135d7987c..af5bd517f6f69a 100644
--- a/docs/pages/api-docs/drawer.js
+++ b/docs/pages/api-docs/drawer.js
@@ -1,7 +1,16 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import markdown from './drawer.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <MarkdownDocs markdown={markdown} />;
+const pageFilename = 'api/drawer';
+const requireRaw = require.context('!raw-loader!./', false, /drawer\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/api-docs/expansion-panel-actions.js b/docs/pages/api-docs/expansion-panel-actions.js
index 4905bc20267430..b0eff1e5d4ec49 100644
--- a/docs/pages/api-docs/expansion-panel-actions.js
+++ b/docs/pages/api-docs/expansion-panel-actions.js
@@ -1,7 +1,16 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import markdown from './expansion-panel-actions.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <MarkdownDocs markdown={markdown} />;
+const pageFilename = 'api/expansion-panel-actions';
+const requireRaw = require.context('!raw-loader!./', false, /expansion-panel-actions\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/api-docs/expansion-panel-details.js b/docs/pages/api-docs/expansion-panel-details.js
index 111c2d2087bb7a..2915795a9f4df6 100644
--- a/docs/pages/api-docs/expansion-panel-details.js
+++ b/docs/pages/api-docs/expansion-panel-details.js
@@ -1,7 +1,16 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import markdown from './expansion-panel-details.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <MarkdownDocs markdown={markdown} />;
+const pageFilename = 'api/expansion-panel-details';
+const requireRaw = require.context('!raw-loader!./', false, /expansion-panel-details\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/api-docs/expansion-panel-summary.js b/docs/pages/api-docs/expansion-panel-summary.js
index 9acee5141e5e9c..ae6808df32ede3 100644
--- a/docs/pages/api-docs/expansion-panel-summary.js
+++ b/docs/pages/api-docs/expansion-panel-summary.js
@@ -1,7 +1,16 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import markdown from './expansion-panel-summary.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <MarkdownDocs markdown={markdown} />;
+const pageFilename = 'api/expansion-panel-summary';
+const requireRaw = require.context('!raw-loader!./', false, /expansion-panel-summary\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/api-docs/expansion-panel.js b/docs/pages/api-docs/expansion-panel.js
index 7f0f7336648b93..8b2e9dc3b08a71 100644
--- a/docs/pages/api-docs/expansion-panel.js
+++ b/docs/pages/api-docs/expansion-panel.js
@@ -1,7 +1,16 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import markdown from './expansion-panel.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <MarkdownDocs markdown={markdown} />;
+const pageFilename = 'api/expansion-panel';
+const requireRaw = require.context('!raw-loader!./', false, /expansion-panel\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/api-docs/fab.js b/docs/pages/api-docs/fab.js
index 5a7931ea7f4785..a6180999b6e590 100644
--- a/docs/pages/api-docs/fab.js
+++ b/docs/pages/api-docs/fab.js
@@ -1,7 +1,16 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import markdown from './fab.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <MarkdownDocs markdown={markdown} />;
+const pageFilename = 'api/fab';
+const requireRaw = require.context('!raw-loader!./', false, /fab\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/api-docs/fade.js b/docs/pages/api-docs/fade.js
index 02adcb7766cd91..0d4f13d6acca7e 100644
--- a/docs/pages/api-docs/fade.js
+++ b/docs/pages/api-docs/fade.js
@@ -1,7 +1,16 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import markdown from './fade.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <MarkdownDocs markdown={markdown} />;
+const pageFilename = 'api/fade';
+const requireRaw = require.context('!raw-loader!./', false, /fade\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/api-docs/filled-input.js b/docs/pages/api-docs/filled-input.js
index 977a6f7143dd45..9365f2c0a3f347 100644
--- a/docs/pages/api-docs/filled-input.js
+++ b/docs/pages/api-docs/filled-input.js
@@ -1,7 +1,16 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import markdown from './filled-input.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <MarkdownDocs markdown={markdown} />;
+const pageFilename = 'api/filled-input';
+const requireRaw = require.context('!raw-loader!./', false, /filled-input\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/api-docs/form-control-label.js b/docs/pages/api-docs/form-control-label.js
index 0726b549fe4c5a..ddde010b9b200a 100644
--- a/docs/pages/api-docs/form-control-label.js
+++ b/docs/pages/api-docs/form-control-label.js
@@ -1,7 +1,16 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import markdown from './form-control-label.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <MarkdownDocs markdown={markdown} />;
+const pageFilename = 'api/form-control-label';
+const requireRaw = require.context('!raw-loader!./', false, /form-control-label\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/api-docs/form-control.js b/docs/pages/api-docs/form-control.js
index f353c255bedab0..782f23ad131cdc 100644
--- a/docs/pages/api-docs/form-control.js
+++ b/docs/pages/api-docs/form-control.js
@@ -1,7 +1,16 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import markdown from './form-control.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <MarkdownDocs markdown={markdown} />;
+const pageFilename = 'api/form-control';
+const requireRaw = require.context('!raw-loader!./', false, /form-control\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/api-docs/form-group.js b/docs/pages/api-docs/form-group.js
index dba394f3f7199c..f99281dd74e89a 100644
--- a/docs/pages/api-docs/form-group.js
+++ b/docs/pages/api-docs/form-group.js
@@ -1,7 +1,16 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import markdown from './form-group.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <MarkdownDocs markdown={markdown} />;
+const pageFilename = 'api/form-group';
+const requireRaw = require.context('!raw-loader!./', false, /form-group\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/api-docs/form-helper-text.js b/docs/pages/api-docs/form-helper-text.js
index fb2c81cdd4bcb5..0662b7156f2470 100644
--- a/docs/pages/api-docs/form-helper-text.js
+++ b/docs/pages/api-docs/form-helper-text.js
@@ -1,7 +1,16 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import markdown from './form-helper-text.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <MarkdownDocs markdown={markdown} />;
+const pageFilename = 'api/form-helper-text';
+const requireRaw = require.context('!raw-loader!./', false, /form-helper-text\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/api-docs/form-label.js b/docs/pages/api-docs/form-label.js
index 69150a980b9f42..e572ca2fb533ef 100644
--- a/docs/pages/api-docs/form-label.js
+++ b/docs/pages/api-docs/form-label.js
@@ -1,7 +1,16 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import markdown from './form-label.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <MarkdownDocs markdown={markdown} />;
+const pageFilename = 'api/form-label';
+const requireRaw = require.context('!raw-loader!./', false, /form-label\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/api-docs/grid-list-tile-bar.js b/docs/pages/api-docs/grid-list-tile-bar.js
index d146594cec79e3..62eb8df158675d 100644
--- a/docs/pages/api-docs/grid-list-tile-bar.js
+++ b/docs/pages/api-docs/grid-list-tile-bar.js
@@ -1,7 +1,16 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import markdown from './grid-list-tile-bar.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <MarkdownDocs markdown={markdown} />;
+const pageFilename = 'api/grid-list-tile-bar';
+const requireRaw = require.context('!raw-loader!./', false, /grid-list-tile-bar\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/api-docs/grid-list-tile.js b/docs/pages/api-docs/grid-list-tile.js
index 55afc856c00eca..01cc60a30660a4 100644
--- a/docs/pages/api-docs/grid-list-tile.js
+++ b/docs/pages/api-docs/grid-list-tile.js
@@ -1,7 +1,16 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import markdown from './grid-list-tile.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <MarkdownDocs markdown={markdown} />;
+const pageFilename = 'api/grid-list-tile';
+const requireRaw = require.context('!raw-loader!./', false, /grid-list-tile\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/api-docs/grid-list.js b/docs/pages/api-docs/grid-list.js
index 66bb0e7bc75dad..bf8142c46aefa7 100644
--- a/docs/pages/api-docs/grid-list.js
+++ b/docs/pages/api-docs/grid-list.js
@@ -1,7 +1,16 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import markdown from './grid-list.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <MarkdownDocs markdown={markdown} />;
+const pageFilename = 'api/grid-list';
+const requireRaw = require.context('!raw-loader!./', false, /grid-list\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/api-docs/grid.js b/docs/pages/api-docs/grid.js
index dd0497b412ee57..48392293bf6e2c 100644
--- a/docs/pages/api-docs/grid.js
+++ b/docs/pages/api-docs/grid.js
@@ -1,7 +1,16 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import markdown from './grid.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <MarkdownDocs markdown={markdown} />;
+const pageFilename = 'api/grid';
+const requireRaw = require.context('!raw-loader!./', false, /grid\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/api-docs/grow.js b/docs/pages/api-docs/grow.js
index 11c924d91e1354..3174477f840991 100644
--- a/docs/pages/api-docs/grow.js
+++ b/docs/pages/api-docs/grow.js
@@ -1,7 +1,16 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import markdown from './grow.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <MarkdownDocs markdown={markdown} />;
+const pageFilename = 'api/grow';
+const requireRaw = require.context('!raw-loader!./', false, /grow\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/api-docs/hidden.js b/docs/pages/api-docs/hidden.js
index a2ff16440bbcd1..c49627c8a6e992 100644
--- a/docs/pages/api-docs/hidden.js
+++ b/docs/pages/api-docs/hidden.js
@@ -1,7 +1,16 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import markdown from './hidden.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <MarkdownDocs markdown={markdown} />;
+const pageFilename = 'api/hidden';
+const requireRaw = require.context('!raw-loader!./', false, /hidden\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/api-docs/icon-button.js b/docs/pages/api-docs/icon-button.js
index f20e51aa8d9929..54d17610dfadb6 100644
--- a/docs/pages/api-docs/icon-button.js
+++ b/docs/pages/api-docs/icon-button.js
@@ -1,7 +1,16 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import markdown from './icon-button.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <MarkdownDocs markdown={markdown} />;
+const pageFilename = 'api/icon-button';
+const requireRaw = require.context('!raw-loader!./', false, /icon-button\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/api-docs/icon.js b/docs/pages/api-docs/icon.js
index c6a249687e4a43..d9778c32038006 100644
--- a/docs/pages/api-docs/icon.js
+++ b/docs/pages/api-docs/icon.js
@@ -1,7 +1,16 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import markdown from './icon.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <MarkdownDocs markdown={markdown} />;
+const pageFilename = 'api/icon';
+const requireRaw = require.context('!raw-loader!./', false, /icon\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/api-docs/input-adornment.js b/docs/pages/api-docs/input-adornment.js
index 6561b5f1b63894..ebda81876ab665 100644
--- a/docs/pages/api-docs/input-adornment.js
+++ b/docs/pages/api-docs/input-adornment.js
@@ -1,7 +1,16 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import markdown from './input-adornment.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <MarkdownDocs markdown={markdown} />;
+const pageFilename = 'api/input-adornment';
+const requireRaw = require.context('!raw-loader!./', false, /input-adornment\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/api-docs/input-base.js b/docs/pages/api-docs/input-base.js
index 7601d5e28cd86a..fa9417892723d9 100644
--- a/docs/pages/api-docs/input-base.js
+++ b/docs/pages/api-docs/input-base.js
@@ -1,7 +1,16 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import markdown from './input-base.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <MarkdownDocs markdown={markdown} />;
+const pageFilename = 'api/input-base';
+const requireRaw = require.context('!raw-loader!./', false, /input-base\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/api-docs/input-label.js b/docs/pages/api-docs/input-label.js
index bfa45154e7ce67..9d3e5324576e43 100644
--- a/docs/pages/api-docs/input-label.js
+++ b/docs/pages/api-docs/input-label.js
@@ -1,7 +1,16 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import markdown from './input-label.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <MarkdownDocs markdown={markdown} />;
+const pageFilename = 'api/input-label';
+const requireRaw = require.context('!raw-loader!./', false, /input-label\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/api-docs/input.js b/docs/pages/api-docs/input.js
index 3d8bea87f87607..0366f459ddec30 100644
--- a/docs/pages/api-docs/input.js
+++ b/docs/pages/api-docs/input.js
@@ -1,7 +1,16 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import markdown from './input.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <MarkdownDocs markdown={markdown} />;
+const pageFilename = 'api/input';
+const requireRaw = require.context('!raw-loader!./', false, /input\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/api-docs/linear-progress.js b/docs/pages/api-docs/linear-progress.js
index 3397396acc5c36..057c03a8e98d5d 100644
--- a/docs/pages/api-docs/linear-progress.js
+++ b/docs/pages/api-docs/linear-progress.js
@@ -1,7 +1,16 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import markdown from './linear-progress.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <MarkdownDocs markdown={markdown} />;
+const pageFilename = 'api/linear-progress';
+const requireRaw = require.context('!raw-loader!./', false, /linear-progress\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/api-docs/link.js b/docs/pages/api-docs/link.js
index fdb85811b65e82..56da21799941f3 100644
--- a/docs/pages/api-docs/link.js
+++ b/docs/pages/api-docs/link.js
@@ -1,7 +1,16 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import markdown from './link.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <MarkdownDocs markdown={markdown} />;
+const pageFilename = 'api/link';
+const requireRaw = require.context('!raw-loader!./', false, /link\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/api-docs/list-item-avatar.js b/docs/pages/api-docs/list-item-avatar.js
index a66da2f0ab9d26..272be9a1b427d2 100644
--- a/docs/pages/api-docs/list-item-avatar.js
+++ b/docs/pages/api-docs/list-item-avatar.js
@@ -1,7 +1,16 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import markdown from './list-item-avatar.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <MarkdownDocs markdown={markdown} />;
+const pageFilename = 'api/list-item-avatar';
+const requireRaw = require.context('!raw-loader!./', false, /list-item-avatar\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/api-docs/list-item-icon.js b/docs/pages/api-docs/list-item-icon.js
index 205fc4d1f4b83b..85c29b9150a0da 100644
--- a/docs/pages/api-docs/list-item-icon.js
+++ b/docs/pages/api-docs/list-item-icon.js
@@ -1,7 +1,16 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import markdown from './list-item-icon.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <MarkdownDocs markdown={markdown} />;
+const pageFilename = 'api/list-item-icon';
+const requireRaw = require.context('!raw-loader!./', false, /list-item-icon\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/api-docs/list-item-secondary-action.js b/docs/pages/api-docs/list-item-secondary-action.js
index 844b7e7aa383d0..f720560b5b00db 100644
--- a/docs/pages/api-docs/list-item-secondary-action.js
+++ b/docs/pages/api-docs/list-item-secondary-action.js
@@ -1,7 +1,16 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import markdown from './list-item-secondary-action.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <MarkdownDocs markdown={markdown} />;
+const pageFilename = 'api/list-item-secondary-action';
+const requireRaw = require.context('!raw-loader!./', false, /list-item-secondary-action\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/api-docs/list-item-text.js b/docs/pages/api-docs/list-item-text.js
index 30f41221393aec..d07f522cf0becc 100644
--- a/docs/pages/api-docs/list-item-text.js
+++ b/docs/pages/api-docs/list-item-text.js
@@ -1,7 +1,16 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import markdown from './list-item-text.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <MarkdownDocs markdown={markdown} />;
+const pageFilename = 'api/list-item-text';
+const requireRaw = require.context('!raw-loader!./', false, /list-item-text\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/api-docs/list-item.js b/docs/pages/api-docs/list-item.js
index c7a82c2d4c7b2a..7480dd8cfe05b6 100644
--- a/docs/pages/api-docs/list-item.js
+++ b/docs/pages/api-docs/list-item.js
@@ -1,7 +1,16 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import markdown from './list-item.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <MarkdownDocs markdown={markdown} />;
+const pageFilename = 'api/list-item';
+const requireRaw = require.context('!raw-loader!./', false, /list-item\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/api-docs/list-subheader.js b/docs/pages/api-docs/list-subheader.js
index 9fa045691cba43..cf84b6365aa396 100644
--- a/docs/pages/api-docs/list-subheader.js
+++ b/docs/pages/api-docs/list-subheader.js
@@ -1,7 +1,16 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import markdown from './list-subheader.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <MarkdownDocs markdown={markdown} />;
+const pageFilename = 'api/list-subheader';
+const requireRaw = require.context('!raw-loader!./', false, /list-subheader\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/api-docs/list.js b/docs/pages/api-docs/list.js
index 1b802f0e3197ab..c489691ee1e309 100644
--- a/docs/pages/api-docs/list.js
+++ b/docs/pages/api-docs/list.js
@@ -1,7 +1,16 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import markdown from './list.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <MarkdownDocs markdown={markdown} />;
+const pageFilename = 'api/list';
+const requireRaw = require.context('!raw-loader!./', false, /list\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/api-docs/menu-item.js b/docs/pages/api-docs/menu-item.js
index 3bd8a8aee0b868..a02af074038b50 100644
--- a/docs/pages/api-docs/menu-item.js
+++ b/docs/pages/api-docs/menu-item.js
@@ -1,7 +1,16 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import markdown from './menu-item.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <MarkdownDocs markdown={markdown} />;
+const pageFilename = 'api/menu-item';
+const requireRaw = require.context('!raw-loader!./', false, /menu-item\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/api-docs/menu-list.js b/docs/pages/api-docs/menu-list.js
index 33e8dbf90544df..8b667b670e3f88 100644
--- a/docs/pages/api-docs/menu-list.js
+++ b/docs/pages/api-docs/menu-list.js
@@ -1,7 +1,16 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import markdown from './menu-list.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <MarkdownDocs markdown={markdown} />;
+const pageFilename = 'api/menu-list';
+const requireRaw = require.context('!raw-loader!./', false, /menu-list\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/api-docs/menu.js b/docs/pages/api-docs/menu.js
index 1a268a5794ca95..f2c37fedefcadd 100644
--- a/docs/pages/api-docs/menu.js
+++ b/docs/pages/api-docs/menu.js
@@ -1,7 +1,16 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import markdown from './menu.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <MarkdownDocs markdown={markdown} />;
+const pageFilename = 'api/menu';
+const requireRaw = require.context('!raw-loader!./', false, /menu\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/api-docs/mobile-stepper.js b/docs/pages/api-docs/mobile-stepper.js
index e8972edd78d500..e4b638bafa10d7 100644
--- a/docs/pages/api-docs/mobile-stepper.js
+++ b/docs/pages/api-docs/mobile-stepper.js
@@ -1,7 +1,16 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import markdown from './mobile-stepper.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <MarkdownDocs markdown={markdown} />;
+const pageFilename = 'api/mobile-stepper';
+const requireRaw = require.context('!raw-loader!./', false, /mobile-stepper\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/api-docs/modal.js b/docs/pages/api-docs/modal.js
index f3ca2aed44f411..3513641c6cf2bc 100644
--- a/docs/pages/api-docs/modal.js
+++ b/docs/pages/api-docs/modal.js
@@ -1,7 +1,16 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import markdown from './modal.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <MarkdownDocs markdown={markdown} />;
+const pageFilename = 'api/modal';
+const requireRaw = require.context('!raw-loader!./', false, /modal\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/api-docs/native-select.js b/docs/pages/api-docs/native-select.js
index 8dac317652fcd4..e03961343afd78 100644
--- a/docs/pages/api-docs/native-select.js
+++ b/docs/pages/api-docs/native-select.js
@@ -1,7 +1,16 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import markdown from './native-select.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <MarkdownDocs markdown={markdown} />;
+const pageFilename = 'api/native-select';
+const requireRaw = require.context('!raw-loader!./', false, /native-select\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/api-docs/no-ssr.js b/docs/pages/api-docs/no-ssr.js
index 9986bb56876726..e2162d024e984b 100644
--- a/docs/pages/api-docs/no-ssr.js
+++ b/docs/pages/api-docs/no-ssr.js
@@ -1,7 +1,16 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import markdown from './no-ssr.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <MarkdownDocs markdown={markdown} />;
+const pageFilename = 'api/no-ssr';
+const requireRaw = require.context('!raw-loader!./', false, /no-ssr\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/api-docs/outlined-input.js b/docs/pages/api-docs/outlined-input.js
index 9ed4c0bac8d76d..2252a1863c020c 100644
--- a/docs/pages/api-docs/outlined-input.js
+++ b/docs/pages/api-docs/outlined-input.js
@@ -1,7 +1,16 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import markdown from './outlined-input.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <MarkdownDocs markdown={markdown} />;
+const pageFilename = 'api/outlined-input';
+const requireRaw = require.context('!raw-loader!./', false, /outlined-input\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/api-docs/pagination-item.js b/docs/pages/api-docs/pagination-item.js
index 0f86547725f748..2ca3b7b819e217 100644
--- a/docs/pages/api-docs/pagination-item.js
+++ b/docs/pages/api-docs/pagination-item.js
@@ -1,7 +1,16 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import markdown from './pagination-item.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <MarkdownDocs markdown={markdown} />;
+const pageFilename = 'api/pagination-item';
+const requireRaw = require.context('!raw-loader!./', false, /pagination-item\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/api-docs/pagination.js b/docs/pages/api-docs/pagination.js
index f777cfe71f1e6b..db6e1828231531 100644
--- a/docs/pages/api-docs/pagination.js
+++ b/docs/pages/api-docs/pagination.js
@@ -1,7 +1,16 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import markdown from './pagination.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <MarkdownDocs markdown={markdown} />;
+const pageFilename = 'api/pagination';
+const requireRaw = require.context('!raw-loader!./', false, /pagination\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/api-docs/paper.js b/docs/pages/api-docs/paper.js
index dd7d7520844637..940b52203850cc 100644
--- a/docs/pages/api-docs/paper.js
+++ b/docs/pages/api-docs/paper.js
@@ -1,7 +1,16 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import markdown from './paper.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <MarkdownDocs markdown={markdown} />;
+const pageFilename = 'api/paper';
+const requireRaw = require.context('!raw-loader!./', false, /paper\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/api-docs/popover.js b/docs/pages/api-docs/popover.js
index 16c8eb2e877978..4ad5672a6122d7 100644
--- a/docs/pages/api-docs/popover.js
+++ b/docs/pages/api-docs/popover.js
@@ -1,7 +1,16 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import markdown from './popover.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <MarkdownDocs markdown={markdown} />;
+const pageFilename = 'api/popover';
+const requireRaw = require.context('!raw-loader!./', false, /popover\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/api-docs/popper.js b/docs/pages/api-docs/popper.js
index c91b14648f6e94..f742113221d1b7 100644
--- a/docs/pages/api-docs/popper.js
+++ b/docs/pages/api-docs/popper.js
@@ -1,7 +1,16 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import markdown from './popper.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <MarkdownDocs markdown={markdown} />;
+const pageFilename = 'api/popper';
+const requireRaw = require.context('!raw-loader!./', false, /popper\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/api-docs/portal.js b/docs/pages/api-docs/portal.js
index 064b5ba243b4f6..7cd12e2aa9e4bd 100644
--- a/docs/pages/api-docs/portal.js
+++ b/docs/pages/api-docs/portal.js
@@ -1,7 +1,16 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import markdown from './portal.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <MarkdownDocs markdown={markdown} />;
+const pageFilename = 'api/portal';
+const requireRaw = require.context('!raw-loader!./', false, /portal\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/api-docs/radio-group.js b/docs/pages/api-docs/radio-group.js
index 433ba10c3f3d4d..ad4027edddfa55 100644
--- a/docs/pages/api-docs/radio-group.js
+++ b/docs/pages/api-docs/radio-group.js
@@ -1,7 +1,16 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import markdown from './radio-group.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <MarkdownDocs markdown={markdown} />;
+const pageFilename = 'api/radio-group';
+const requireRaw = require.context('!raw-loader!./', false, /radio-group\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/api-docs/radio.js b/docs/pages/api-docs/radio.js
index f8a8e5610ea0c7..e94d57300824fb 100644
--- a/docs/pages/api-docs/radio.js
+++ b/docs/pages/api-docs/radio.js
@@ -1,7 +1,16 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import markdown from './radio.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <MarkdownDocs markdown={markdown} />;
+const pageFilename = 'api/radio';
+const requireRaw = require.context('!raw-loader!./', false, /radio\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/api-docs/rating.js b/docs/pages/api-docs/rating.js
index b0b68290735203..41cd363e35055a 100644
--- a/docs/pages/api-docs/rating.js
+++ b/docs/pages/api-docs/rating.js
@@ -1,7 +1,16 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import markdown from './rating.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <MarkdownDocs markdown={markdown} />;
+const pageFilename = 'api/rating';
+const requireRaw = require.context('!raw-loader!./', false, /rating\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/api-docs/root-ref.js b/docs/pages/api-docs/root-ref.js
index 64dcd98fe11c96..0db44858bf3617 100644
--- a/docs/pages/api-docs/root-ref.js
+++ b/docs/pages/api-docs/root-ref.js
@@ -1,7 +1,16 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import markdown from './root-ref.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <MarkdownDocs markdown={markdown} />;
+const pageFilename = 'api/root-ref';
+const requireRaw = require.context('!raw-loader!./', false, /root-ref\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/api-docs/scoped-css-baseline.js b/docs/pages/api-docs/scoped-css-baseline.js
index b78849b6a088a5..d55876a90fa6ab 100644
--- a/docs/pages/api-docs/scoped-css-baseline.js
+++ b/docs/pages/api-docs/scoped-css-baseline.js
@@ -1,7 +1,16 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import markdown from './scoped-css-baseline.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <MarkdownDocs markdown={markdown} />;
+const pageFilename = 'api/scoped-css-baseline';
+const requireRaw = require.context('!raw-loader!./', false, /scoped-css-baseline\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/api-docs/select.js b/docs/pages/api-docs/select.js
index c328a57e7c7395..86c631b03c1f35 100644
--- a/docs/pages/api-docs/select.js
+++ b/docs/pages/api-docs/select.js
@@ -1,7 +1,16 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import markdown from './select.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <MarkdownDocs markdown={markdown} />;
+const pageFilename = 'api/select';
+const requireRaw = require.context('!raw-loader!./', false, /select\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/api-docs/skeleton.js b/docs/pages/api-docs/skeleton.js
index d1e3b240957316..9fd7ba3b5ba144 100644
--- a/docs/pages/api-docs/skeleton.js
+++ b/docs/pages/api-docs/skeleton.js
@@ -1,7 +1,16 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import markdown from './skeleton.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <MarkdownDocs markdown={markdown} />;
+const pageFilename = 'api/skeleton';
+const requireRaw = require.context('!raw-loader!./', false, /skeleton\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/api-docs/slide.js b/docs/pages/api-docs/slide.js
index 0b388521fb0bc9..c195b07b901fbe 100644
--- a/docs/pages/api-docs/slide.js
+++ b/docs/pages/api-docs/slide.js
@@ -1,7 +1,16 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import markdown from './slide.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <MarkdownDocs markdown={markdown} />;
+const pageFilename = 'api/slide';
+const requireRaw = require.context('!raw-loader!./', false, /slide\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/api-docs/slider.js b/docs/pages/api-docs/slider.js
index 41b222817f8187..c4608e9420f290 100644
--- a/docs/pages/api-docs/slider.js
+++ b/docs/pages/api-docs/slider.js
@@ -1,7 +1,16 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import markdown from './slider.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <MarkdownDocs markdown={markdown} />;
+const pageFilename = 'api/slider';
+const requireRaw = require.context('!raw-loader!./', false, /slider\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/api-docs/snackbar-content.js b/docs/pages/api-docs/snackbar-content.js
index 30f5df4375a9ec..4a3eb987a445a7 100644
--- a/docs/pages/api-docs/snackbar-content.js
+++ b/docs/pages/api-docs/snackbar-content.js
@@ -1,7 +1,16 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import markdown from './snackbar-content.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <MarkdownDocs markdown={markdown} />;
+const pageFilename = 'api/snackbar-content';
+const requireRaw = require.context('!raw-loader!./', false, /snackbar-content\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/api-docs/snackbar.js b/docs/pages/api-docs/snackbar.js
index 06e4031ecbead9..06e2c983fe0be9 100644
--- a/docs/pages/api-docs/snackbar.js
+++ b/docs/pages/api-docs/snackbar.js
@@ -1,7 +1,16 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import markdown from './snackbar.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <MarkdownDocs markdown={markdown} />;
+const pageFilename = 'api/snackbar';
+const requireRaw = require.context('!raw-loader!./', false, /snackbar\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/api-docs/speed-dial-action.js b/docs/pages/api-docs/speed-dial-action.js
index 05b900c6915a2d..4a9a6fe875b743 100644
--- a/docs/pages/api-docs/speed-dial-action.js
+++ b/docs/pages/api-docs/speed-dial-action.js
@@ -1,7 +1,16 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import markdown from './speed-dial-action.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <MarkdownDocs markdown={markdown} />;
+const pageFilename = 'api/speed-dial-action';
+const requireRaw = require.context('!raw-loader!./', false, /speed-dial-action\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/api-docs/speed-dial-icon.js b/docs/pages/api-docs/speed-dial-icon.js
index 9f62823471dff3..238f9353608ab1 100644
--- a/docs/pages/api-docs/speed-dial-icon.js
+++ b/docs/pages/api-docs/speed-dial-icon.js
@@ -1,7 +1,16 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import markdown from './speed-dial-icon.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <MarkdownDocs markdown={markdown} />;
+const pageFilename = 'api/speed-dial-icon';
+const requireRaw = require.context('!raw-loader!./', false, /speed-dial-icon\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/api-docs/speed-dial.js b/docs/pages/api-docs/speed-dial.js
index 12c9874888abec..60cb95e107729d 100644
--- a/docs/pages/api-docs/speed-dial.js
+++ b/docs/pages/api-docs/speed-dial.js
@@ -1,7 +1,16 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import markdown from './speed-dial.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <MarkdownDocs markdown={markdown} />;
+const pageFilename = 'api/speed-dial';
+const requireRaw = require.context('!raw-loader!./', false, /speed-dial\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/api-docs/step-button.js b/docs/pages/api-docs/step-button.js
index 4d62a537644af6..482b82ca0ceee8 100644
--- a/docs/pages/api-docs/step-button.js
+++ b/docs/pages/api-docs/step-button.js
@@ -1,7 +1,16 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import markdown from './step-button.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <MarkdownDocs markdown={markdown} />;
+const pageFilename = 'api/step-button';
+const requireRaw = require.context('!raw-loader!./', false, /step-button\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/api-docs/step-connector.js b/docs/pages/api-docs/step-connector.js
index 3d37aa6c03c76b..f9cffcb88dcbf0 100644
--- a/docs/pages/api-docs/step-connector.js
+++ b/docs/pages/api-docs/step-connector.js
@@ -1,7 +1,16 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import markdown from './step-connector.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <MarkdownDocs markdown={markdown} />;
+const pageFilename = 'api/step-connector';
+const requireRaw = require.context('!raw-loader!./', false, /step-connector\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/api-docs/step-content.js b/docs/pages/api-docs/step-content.js
index c433a9a0576445..b64794b45361a7 100644
--- a/docs/pages/api-docs/step-content.js
+++ b/docs/pages/api-docs/step-content.js
@@ -1,7 +1,16 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import markdown from './step-content.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <MarkdownDocs markdown={markdown} />;
+const pageFilename = 'api/step-content';
+const requireRaw = require.context('!raw-loader!./', false, /step-content\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/api-docs/step-icon.js b/docs/pages/api-docs/step-icon.js
index 50ae2d10564ccd..4afd214b654aca 100644
--- a/docs/pages/api-docs/step-icon.js
+++ b/docs/pages/api-docs/step-icon.js
@@ -1,7 +1,16 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import markdown from './step-icon.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <MarkdownDocs markdown={markdown} />;
+const pageFilename = 'api/step-icon';
+const requireRaw = require.context('!raw-loader!./', false, /step-icon\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/api-docs/step-label.js b/docs/pages/api-docs/step-label.js
index 8370284cc7ae32..a3276314dd5705 100644
--- a/docs/pages/api-docs/step-label.js
+++ b/docs/pages/api-docs/step-label.js
@@ -1,7 +1,16 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import markdown from './step-label.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <MarkdownDocs markdown={markdown} />;
+const pageFilename = 'api/step-label';
+const requireRaw = require.context('!raw-loader!./', false, /step-label\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/api-docs/step.js b/docs/pages/api-docs/step.js
index 5bf8480f9e7f00..7b5c0a33986963 100644
--- a/docs/pages/api-docs/step.js
+++ b/docs/pages/api-docs/step.js
@@ -1,7 +1,16 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import markdown from './step.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <MarkdownDocs markdown={markdown} />;
+const pageFilename = 'api/step';
+const requireRaw = require.context('!raw-loader!./', false, /step\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/api-docs/stepper.js b/docs/pages/api-docs/stepper.js
index b99e894e85b8cc..88692c43da0f63 100644
--- a/docs/pages/api-docs/stepper.js
+++ b/docs/pages/api-docs/stepper.js
@@ -1,7 +1,16 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import markdown from './stepper.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <MarkdownDocs markdown={markdown} />;
+const pageFilename = 'api/stepper';
+const requireRaw = require.context('!raw-loader!./', false, /stepper\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/api-docs/svg-icon.js b/docs/pages/api-docs/svg-icon.js
index 5119ac883a3ca2..21355e4df1fdc7 100644
--- a/docs/pages/api-docs/svg-icon.js
+++ b/docs/pages/api-docs/svg-icon.js
@@ -1,7 +1,16 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import markdown from './svg-icon.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <MarkdownDocs markdown={markdown} />;
+const pageFilename = 'api/svg-icon';
+const requireRaw = require.context('!raw-loader!./', false, /svg-icon\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/api-docs/swipeable-drawer.js b/docs/pages/api-docs/swipeable-drawer.js
index af23edf875894a..2cbca4d6c31c67 100644
--- a/docs/pages/api-docs/swipeable-drawer.js
+++ b/docs/pages/api-docs/swipeable-drawer.js
@@ -1,7 +1,16 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import markdown from './swipeable-drawer.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <MarkdownDocs markdown={markdown} />;
+const pageFilename = 'api/swipeable-drawer';
+const requireRaw = require.context('!raw-loader!./', false, /swipeable-drawer\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/api-docs/switch.js b/docs/pages/api-docs/switch.js
index d8aa75a326b2b8..919558392e9631 100644
--- a/docs/pages/api-docs/switch.js
+++ b/docs/pages/api-docs/switch.js
@@ -1,7 +1,16 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import markdown from './switch.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <MarkdownDocs markdown={markdown} />;
+const pageFilename = 'api/switch';
+const requireRaw = require.context('!raw-loader!./', false, /switch\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/api-docs/tab.js b/docs/pages/api-docs/tab.js
index 1ac8a4ede24a84..691c268aac6a44 100644
--- a/docs/pages/api-docs/tab.js
+++ b/docs/pages/api-docs/tab.js
@@ -1,7 +1,16 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import markdown from './tab.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <MarkdownDocs markdown={markdown} />;
+const pageFilename = 'api/tab';
+const requireRaw = require.context('!raw-loader!./', false, /tab\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/api-docs/table-body.js b/docs/pages/api-docs/table-body.js
index 35b8f8dee5bfba..77f886b4ba16af 100644
--- a/docs/pages/api-docs/table-body.js
+++ b/docs/pages/api-docs/table-body.js
@@ -1,7 +1,16 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import markdown from './table-body.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <MarkdownDocs markdown={markdown} />;
+const pageFilename = 'api/table-body';
+const requireRaw = require.context('!raw-loader!./', false, /table-body\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/api-docs/table-cell.js b/docs/pages/api-docs/table-cell.js
index 8f33b3f0819fe1..d1ea5c2202af79 100644
--- a/docs/pages/api-docs/table-cell.js
+++ b/docs/pages/api-docs/table-cell.js
@@ -1,7 +1,16 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import markdown from './table-cell.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <MarkdownDocs markdown={markdown} />;
+const pageFilename = 'api/table-cell';
+const requireRaw = require.context('!raw-loader!./', false, /table-cell\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/api-docs/table-container.js b/docs/pages/api-docs/table-container.js
index b7a5fe925a6699..000ab0fef07f36 100644
--- a/docs/pages/api-docs/table-container.js
+++ b/docs/pages/api-docs/table-container.js
@@ -1,7 +1,16 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import markdown from './table-container.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <MarkdownDocs markdown={markdown} />;
+const pageFilename = 'api/table-container';
+const requireRaw = require.context('!raw-loader!./', false, /table-container\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/api-docs/table-footer.js b/docs/pages/api-docs/table-footer.js
index 766ce04c69b80c..6a01ec82496c40 100644
--- a/docs/pages/api-docs/table-footer.js
+++ b/docs/pages/api-docs/table-footer.js
@@ -1,7 +1,16 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import markdown from './table-footer.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <MarkdownDocs markdown={markdown} />;
+const pageFilename = 'api/table-footer';
+const requireRaw = require.context('!raw-loader!./', false, /table-footer\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/api-docs/table-head.js b/docs/pages/api-docs/table-head.js
index 47133653a31e8a..45a0d9d336d163 100644
--- a/docs/pages/api-docs/table-head.js
+++ b/docs/pages/api-docs/table-head.js
@@ -1,7 +1,16 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import markdown from './table-head.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <MarkdownDocs markdown={markdown} />;
+const pageFilename = 'api/table-head';
+const requireRaw = require.context('!raw-loader!./', false, /table-head\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/api-docs/table-pagination.js b/docs/pages/api-docs/table-pagination.js
index cc839cb53c49f3..49633b44de965b 100644
--- a/docs/pages/api-docs/table-pagination.js
+++ b/docs/pages/api-docs/table-pagination.js
@@ -1,7 +1,16 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import markdown from './table-pagination.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <MarkdownDocs markdown={markdown} />;
+const pageFilename = 'api/table-pagination';
+const requireRaw = require.context('!raw-loader!./', false, /table-pagination\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/api-docs/table-row.js b/docs/pages/api-docs/table-row.js
index aac03dd8ad58a4..94beb28ad23436 100644
--- a/docs/pages/api-docs/table-row.js
+++ b/docs/pages/api-docs/table-row.js
@@ -1,7 +1,16 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import markdown from './table-row.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <MarkdownDocs markdown={markdown} />;
+const pageFilename = 'api/table-row';
+const requireRaw = require.context('!raw-loader!./', false, /table-row\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/api-docs/table-sort-label.js b/docs/pages/api-docs/table-sort-label.js
index b08967b1ae59b8..0e4823e9aa5e74 100644
--- a/docs/pages/api-docs/table-sort-label.js
+++ b/docs/pages/api-docs/table-sort-label.js
@@ -1,7 +1,16 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import markdown from './table-sort-label.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <MarkdownDocs markdown={markdown} />;
+const pageFilename = 'api/table-sort-label';
+const requireRaw = require.context('!raw-loader!./', false, /table-sort-label\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/api-docs/table.js b/docs/pages/api-docs/table.js
index e9fd902472cdc0..6548c908d03275 100644
--- a/docs/pages/api-docs/table.js
+++ b/docs/pages/api-docs/table.js
@@ -1,7 +1,16 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import markdown from './table.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <MarkdownDocs markdown={markdown} />;
+const pageFilename = 'api/table';
+const requireRaw = require.context('!raw-loader!./', false, /table\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/api-docs/tabs.js b/docs/pages/api-docs/tabs.js
index 6554d4e7934fbc..70e7c5455c6115 100644
--- a/docs/pages/api-docs/tabs.js
+++ b/docs/pages/api-docs/tabs.js
@@ -1,7 +1,16 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import markdown from './tabs.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <MarkdownDocs markdown={markdown} />;
+const pageFilename = 'api/tabs';
+const requireRaw = require.context('!raw-loader!./', false, /tabs\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/api-docs/text-field.js b/docs/pages/api-docs/text-field.js
index 5d9ed8ce3545d4..0d1f2ba96c6c82 100644
--- a/docs/pages/api-docs/text-field.js
+++ b/docs/pages/api-docs/text-field.js
@@ -1,7 +1,16 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import markdown from './text-field.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <MarkdownDocs markdown={markdown} />;
+const pageFilename = 'api/text-field';
+const requireRaw = require.context('!raw-loader!./', false, /text-field\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/api-docs/textarea-autosize.js b/docs/pages/api-docs/textarea-autosize.js
index 109577ef2b4137..b4d32f6af87f04 100644
--- a/docs/pages/api-docs/textarea-autosize.js
+++ b/docs/pages/api-docs/textarea-autosize.js
@@ -1,7 +1,16 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import markdown from './textarea-autosize.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <MarkdownDocs markdown={markdown} />;
+const pageFilename = 'api/textarea-autosize';
+const requireRaw = require.context('!raw-loader!./', false, /textarea-autosize\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/api-docs/toggle-button-group.js b/docs/pages/api-docs/toggle-button-group.js
index b0173f0cca71f6..b8300a6d323e73 100644
--- a/docs/pages/api-docs/toggle-button-group.js
+++ b/docs/pages/api-docs/toggle-button-group.js
@@ -1,7 +1,16 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import markdown from './toggle-button-group.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <MarkdownDocs markdown={markdown} />;
+const pageFilename = 'api/toggle-button-group';
+const requireRaw = require.context('!raw-loader!./', false, /toggle-button-group\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/api-docs/toggle-button.js b/docs/pages/api-docs/toggle-button.js
index 504ca9ac50f57c..fea2684523e9a5 100644
--- a/docs/pages/api-docs/toggle-button.js
+++ b/docs/pages/api-docs/toggle-button.js
@@ -1,7 +1,16 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import markdown from './toggle-button.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <MarkdownDocs markdown={markdown} />;
+const pageFilename = 'api/toggle-button';
+const requireRaw = require.context('!raw-loader!./', false, /toggle-button\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/api-docs/toolbar.js b/docs/pages/api-docs/toolbar.js
index 430f5283ae2a56..811b2f91e4fda5 100644
--- a/docs/pages/api-docs/toolbar.js
+++ b/docs/pages/api-docs/toolbar.js
@@ -1,7 +1,16 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import markdown from './toolbar.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <MarkdownDocs markdown={markdown} />;
+const pageFilename = 'api/toolbar';
+const requireRaw = require.context('!raw-loader!./', false, /toolbar\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/api-docs/tooltip.js b/docs/pages/api-docs/tooltip.js
index 30da423b2b1963..ee8f2c8473fa9a 100644
--- a/docs/pages/api-docs/tooltip.js
+++ b/docs/pages/api-docs/tooltip.js
@@ -1,7 +1,16 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import markdown from './tooltip.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <MarkdownDocs markdown={markdown} />;
+const pageFilename = 'api/tooltip';
+const requireRaw = require.context('!raw-loader!./', false, /tooltip\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/api-docs/tree-item.js b/docs/pages/api-docs/tree-item.js
index 3f8fb722c6812c..b0ac1d1d20828d 100644
--- a/docs/pages/api-docs/tree-item.js
+++ b/docs/pages/api-docs/tree-item.js
@@ -1,7 +1,16 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import markdown from './tree-item.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <MarkdownDocs markdown={markdown} />;
+const pageFilename = 'api/tree-item';
+const requireRaw = require.context('!raw-loader!./', false, /tree-item\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/api-docs/tree-view.js b/docs/pages/api-docs/tree-view.js
index 8c5da6d0eff9c5..853829a2f78965 100644
--- a/docs/pages/api-docs/tree-view.js
+++ b/docs/pages/api-docs/tree-view.js
@@ -1,7 +1,16 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import markdown from './tree-view.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <MarkdownDocs markdown={markdown} />;
+const pageFilename = 'api/tree-view';
+const requireRaw = require.context('!raw-loader!./', false, /tree-view\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/api-docs/typography.js b/docs/pages/api-docs/typography.js
index 6f039be87e797a..0d18372b83a39f 100644
--- a/docs/pages/api-docs/typography.js
+++ b/docs/pages/api-docs/typography.js
@@ -1,7 +1,16 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import markdown from './typography.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <MarkdownDocs markdown={markdown} />;
+const pageFilename = 'api/typography';
+const requireRaw = require.context('!raw-loader!./', false, /typography\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/api-docs/zoom.js b/docs/pages/api-docs/zoom.js
index 3c85e81e51cd5a..a03261e9283dbf 100644
--- a/docs/pages/api-docs/zoom.js
+++ b/docs/pages/api-docs/zoom.js
@@ -1,7 +1,16 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import markdown from './zoom.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <MarkdownDocs markdown={markdown} />;
+const pageFilename = 'api/zoom';
+const requireRaw = require.context('!raw-loader!./', false, /zoom\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/blog/2019-developer-survey-results.js b/docs/pages/blog/2019-developer-survey-results.js
index 1efae03a9c899b..c303de4908af8b 100644
--- a/docs/pages/blog/2019-developer-survey-results.js
+++ b/docs/pages/blog/2019-developer-survey-results.js
@@ -1,7 +1,16 @@
 import React from 'react';
 import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
-import markdown from './2019-developer-survey-results.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <TopLayoutBlog markdown={markdown} />;
+const pageFilename = 'blog/2019-developer-survey-results';
+const requireRaw = require.context('!raw-loader!./', false, /2019-developer-survey-results\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <TopLayoutBlog docs={docs} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/blog/2019.js b/docs/pages/blog/2019.js
index 2400f3a6f80c62..135e1b1a1ebe41 100644
--- a/docs/pages/blog/2019.js
+++ b/docs/pages/blog/2019.js
@@ -1,7 +1,16 @@
 import React from 'react';
 import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
-import markdown from './2019.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <TopLayoutBlog markdown={markdown} />;
+const pageFilename = 'blog/2019';
+const requireRaw = require.context('!raw-loader!./', false, /2019\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <TopLayoutBlog docs={docs} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/blog/2020-introducing-sketch.js b/docs/pages/blog/2020-introducing-sketch.js
index 5b81582a60fe18..89302ebbb61658 100644
--- a/docs/pages/blog/2020-introducing-sketch.js
+++ b/docs/pages/blog/2020-introducing-sketch.js
@@ -1,7 +1,16 @@
 import React from 'react';
 import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
-import markdown from './2020-introducing-sketch.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <TopLayoutBlog markdown={markdown} />;
+const pageFilename = 'blog/2020-introducing-sketch';
+const requireRaw = require.context('!raw-loader!./', false, /2020-introducing-sketch\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <TopLayoutBlog docs={docs} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/blog/2020-q1-update.js b/docs/pages/blog/2020-q1-update.js
index 40ca7f4573bed3..d481e2903bbd46 100644
--- a/docs/pages/blog/2020-q1-update.js
+++ b/docs/pages/blog/2020-q1-update.js
@@ -1,7 +1,16 @@
 import React from 'react';
 import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
-import markdown from './2020-q1-update.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <TopLayoutBlog markdown={markdown} />;
+const pageFilename = 'blog/2020-q1-update';
+const requireRaw = require.context('!raw-loader!./', false, /2020-q1-update\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <TopLayoutBlog docs={docs} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/blog/april-2019-update.js b/docs/pages/blog/april-2019-update.js
index b9643f2038e2c0..37a24ba3cbaf85 100644
--- a/docs/pages/blog/april-2019-update.js
+++ b/docs/pages/blog/april-2019-update.js
@@ -1,7 +1,16 @@
 import React from 'react';
 import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
-import markdown from './april-2019-update.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <TopLayoutBlog markdown={markdown} />;
+const pageFilename = 'blog/april-2019-update';
+const requireRaw = require.context('!raw-loader!./', false, /april-2019-update\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <TopLayoutBlog docs={docs} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/blog/august-2019-update.js b/docs/pages/blog/august-2019-update.js
index ee89b462907018..1e51e72c697eb4 100644
--- a/docs/pages/blog/august-2019-update.js
+++ b/docs/pages/blog/august-2019-update.js
@@ -1,7 +1,16 @@
 import React from 'react';
 import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
-import markdown from './august-2019-update.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <TopLayoutBlog markdown={markdown} />;
+const pageFilename = 'blog/august-2019-update';
+const requireRaw = require.context('!raw-loader!./', false, /august-2019-update\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <TopLayoutBlog docs={docs} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/blog/december-2019-update.js b/docs/pages/blog/december-2019-update.js
index 577e6e8d3a7b93..524be6be299929 100644
--- a/docs/pages/blog/december-2019-update.js
+++ b/docs/pages/blog/december-2019-update.js
@@ -1,7 +1,16 @@
 import React from 'react';
 import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
-import markdown from './december-2019-update.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <TopLayoutBlog markdown={markdown} />;
+const pageFilename = 'blog/december-2019-update';
+const requireRaw = require.context('!raw-loader!./', false, /december-2019-update\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <TopLayoutBlog docs={docs} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/blog/july-2019-update.js b/docs/pages/blog/july-2019-update.js
index 228462f919c5a8..4b696bc684f58f 100644
--- a/docs/pages/blog/july-2019-update.js
+++ b/docs/pages/blog/july-2019-update.js
@@ -1,7 +1,16 @@
 import React from 'react';
 import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
-import markdown from './july-2019-update.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <TopLayoutBlog markdown={markdown} />;
+const pageFilename = 'blog/july-2019-update';
+const requireRaw = require.context('!raw-loader!./', false, /july-2019-update\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <TopLayoutBlog docs={docs} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/blog/june-2019-update.js b/docs/pages/blog/june-2019-update.js
index 5087c3f427b986..f9e8ce82b191e8 100644
--- a/docs/pages/blog/june-2019-update.js
+++ b/docs/pages/blog/june-2019-update.js
@@ -1,7 +1,16 @@
 import React from 'react';
 import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
-import markdown from './june-2019-update.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <TopLayoutBlog markdown={markdown} />;
+const pageFilename = 'blog/june-2019-update';
+const requireRaw = require.context('!raw-loader!./', false, /june-2019-update\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <TopLayoutBlog docs={docs} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/blog/march-2019-update.js b/docs/pages/blog/march-2019-update.js
index 09c3ae74833013..30450be81392c8 100644
--- a/docs/pages/blog/march-2019-update.js
+++ b/docs/pages/blog/march-2019-update.js
@@ -1,7 +1,16 @@
 import React from 'react';
 import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
-import markdown from './march-2019-update.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <TopLayoutBlog markdown={markdown} />;
+const pageFilename = 'blog/march-2019-update';
+const requireRaw = require.context('!raw-loader!./', false, /march-2019-update\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <TopLayoutBlog docs={docs} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/blog/material-ui-v1-is-out.js b/docs/pages/blog/material-ui-v1-is-out.js
index b3b374eddb82e5..72a5321c457706 100644
--- a/docs/pages/blog/material-ui-v1-is-out.js
+++ b/docs/pages/blog/material-ui-v1-is-out.js
@@ -1,7 +1,16 @@
 import React from 'react';
 import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
-import markdown from './material-ui-v1-is-out.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <TopLayoutBlog markdown={markdown} />;
+const pageFilename = 'blog/material-ui-v1-is-out';
+const requireRaw = require.context('!raw-loader!./', false, /material-ui-v1-is-out\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <TopLayoutBlog docs={docs} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/blog/material-ui-v4-is-out.js b/docs/pages/blog/material-ui-v4-is-out.js
index 0a3f8d7739926c..917d18afdd1d2e 100644
--- a/docs/pages/blog/material-ui-v4-is-out.js
+++ b/docs/pages/blog/material-ui-v4-is-out.js
@@ -1,7 +1,16 @@
 import React from 'react';
 import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
-import markdown from './material-ui-v4-is-out.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <TopLayoutBlog markdown={markdown} />;
+const pageFilename = 'blog/material-ui-v4-is-out';
+const requireRaw = require.context('!raw-loader!./', false, /material-ui-v4-is-out\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <TopLayoutBlog docs={docs} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/blog/may-2019-update.js b/docs/pages/blog/may-2019-update.js
index 5b9c635f878d76..09bed82fb46192 100644
--- a/docs/pages/blog/may-2019-update.js
+++ b/docs/pages/blog/may-2019-update.js
@@ -1,7 +1,16 @@
 import React from 'react';
 import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
-import markdown from './may-2019-update.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <TopLayoutBlog markdown={markdown} />;
+const pageFilename = 'blog/may-2019-update';
+const requireRaw = require.context('!raw-loader!./', false, /may-2019-update\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <TopLayoutBlog docs={docs} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/blog/november-2019-update.js b/docs/pages/blog/november-2019-update.js
index 14b2e77ad02adf..103ff17b81c800 100644
--- a/docs/pages/blog/november-2019-update.js
+++ b/docs/pages/blog/november-2019-update.js
@@ -1,7 +1,16 @@
 import React from 'react';
 import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
-import markdown from './november-2019-update.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <TopLayoutBlog markdown={markdown} />;
+const pageFilename = 'blog/november-2019-update';
+const requireRaw = require.context('!raw-loader!./', false, /november-2019-update\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <TopLayoutBlog docs={docs} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/blog/october-2019-update.js b/docs/pages/blog/october-2019-update.js
index 1129bb9657112e..b386abed59f652 100644
--- a/docs/pages/blog/october-2019-update.js
+++ b/docs/pages/blog/october-2019-update.js
@@ -1,7 +1,16 @@
 import React from 'react';
 import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
-import markdown from './october-2019-update.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <TopLayoutBlog markdown={markdown} />;
+const pageFilename = 'blog/october-2019-update';
+const requireRaw = require.context('!raw-loader!./', false, /october-2019-update\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <TopLayoutBlog docs={docs} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/blog/september-2019-update.js b/docs/pages/blog/september-2019-update.js
index 8e835fd8566c53..a513eacd2416ff 100644
--- a/docs/pages/blog/september-2019-update.js
+++ b/docs/pages/blog/september-2019-update.js
@@ -1,7 +1,16 @@
 import React from 'react';
 import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
-import markdown from './september-2019-update.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <TopLayoutBlog markdown={markdown} />;
+const pageFilename = 'blog/september-2019-update';
+const requireRaw = require.context('!raw-loader!./', false, /september-2019-update\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <TopLayoutBlog docs={docs} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/company/about.js b/docs/pages/company/about.js
index 6bd0db5ba86275..1d47abd63270c6 100644
--- a/docs/pages/company/about.js
+++ b/docs/pages/company/about.js
@@ -1,14 +1,21 @@
 import React from 'react';
 import TopLayoutCompany from 'docs/src/modules/components/TopLayoutCompany';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-const req = require.context('docs/src/pages/company/about', false, /\.(md|js|tsx)$/);
-const reqSource = require.context(
+const pageFilename = 'company/about';
+const requireDemo = require.context('docs/src/pages/company/about', false, /\.(js|tsx)$/);
+const requireRaw = require.context(
   '!raw-loader!../../src/pages/company/about',
   false,
-  /\.(js|tsx)$/,
+  /\.(js|md|tsx)$/,
 );
-const reqPrefix = 'pages/company/about';
 
-export default function Page() {
-  return <TopLayoutCompany req={req} reqSource={reqSource} reqPrefix={reqPrefix} />;
+// eslint-disable-next-line react/prop-types
+export default function Page({ demos, docs }) {
+  return <TopLayoutCompany demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/company/contact.js b/docs/pages/company/contact.js
index a29f44bb35a3fc..d4fa73d8744437 100644
--- a/docs/pages/company/contact.js
+++ b/docs/pages/company/contact.js
@@ -1,14 +1,21 @@
 import React from 'react';
 import TopLayoutCompany from 'docs/src/modules/components/TopLayoutCompany';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-const req = require.context('docs/src/pages/company/contact', false, /\.(md|js|tsx)$/);
-const reqSource = require.context(
+const pageFilename = 'company/contact';
+const requireDemo = require.context('docs/src/pages/company/contact', false, /\.(js|tsx)$/);
+const requireRaw = require.context(
   '!raw-loader!../../src/pages/company/contact',
   false,
-  /\.(js|tsx)$/,
+  /\.(js|md|tsx)$/,
 );
-const reqPrefix = 'pages/company/contact';
 
-export default function Page() {
-  return <TopLayoutCompany req={req} reqSource={reqSource} reqPrefix={reqPrefix} />;
+// eslint-disable-next-line react/prop-types
+export default function Page({ demos, docs }) {
+  return <TopLayoutCompany demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/company/jobs.js b/docs/pages/company/jobs.js
index 5c0ba8c946a517..6292b8c485b448 100644
--- a/docs/pages/company/jobs.js
+++ b/docs/pages/company/jobs.js
@@ -1,10 +1,21 @@
 import React from 'react';
 import TopLayoutCompany from 'docs/src/modules/components/TopLayoutCompany';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-const req = require.context('docs/src/pages/company/jobs', false, /\.(md|js|tsx)$/);
-const reqSource = require.context('!raw-loader!../../src/pages/company/jobs', false, /\.(js|tsx)$/);
-const reqPrefix = 'pages/company/jobs';
+const pageFilename = 'company/jobs';
+const requireDemo = require.context('docs/src/pages/company/jobs', false, /\.(js|tsx)$/);
+const requireRaw = require.context(
+  '!raw-loader!../../src/pages/company/jobs',
+  false,
+  /\.(js|md|tsx)$/,
+);
 
-export default function Page() {
-  return <TopLayoutCompany req={req} reqSource={reqSource} reqPrefix={reqPrefix} />;
+// eslint-disable-next-line react/prop-types
+export default function Page({ demos, docs }) {
+  return <TopLayoutCompany demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/components/about-the-lab.js b/docs/pages/components/about-the-lab.js
index 94bc200bdc0d31..4d924a8ee462ec 100644
--- a/docs/pages/components/about-the-lab.js
+++ b/docs/pages/components/about-the-lab.js
@@ -1,14 +1,25 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-const req = require.context('docs/src/pages/components/about-the-lab', false, /\.(md|js|tsx)$/);
-const reqSource = require.context(
-  '!raw-loader!../../src/pages/components/about-the-lab',
+const pageFilename = 'components/about-the-lab';
+const requireDemo = require.context(
+  'docs/src/pages/components/about-the-lab',
   false,
   /\.(js|tsx)$/,
 );
-const reqPrefix = 'pages/components/about-the-lab';
+const requireRaw = require.context(
+  '!raw-loader!../../src/pages/components/about-the-lab',
+  false,
+  /\.(js|md|tsx)$/,
+);
 
-export default function Page() {
-  return <MarkdownDocs req={req} reqSource={reqSource} reqPrefix={reqPrefix} />;
+// eslint-disable-next-line react/prop-types
+export default function Page({ demos, docs }) {
+  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/components/alert.js b/docs/pages/components/alert.js
index 1c1d3edeb687cf..051f67db5754f9 100644
--- a/docs/pages/components/alert.js
+++ b/docs/pages/components/alert.js
@@ -1,14 +1,21 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-const req = require.context('docs/src/pages/components/alert', false, /\.(md|js|tsx)$/);
-const reqSource = require.context(
+const pageFilename = 'components/alert';
+const requireDemo = require.context('docs/src/pages/components/alert', false, /\.(js|tsx)$/);
+const requireRaw = require.context(
   '!raw-loader!../../src/pages/components/alert',
   false,
-  /\.(js|tsx)$/,
+  /\.(js|md|tsx)$/,
 );
-const reqPrefix = 'pages/components/alert';
 
-export default function Page() {
-  return <MarkdownDocs req={req} reqSource={reqSource} reqPrefix={reqPrefix} />;
+// eslint-disable-next-line react/prop-types
+export default function Page({ demos, docs }) {
+  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/components/app-bar.js b/docs/pages/components/app-bar.js
index cd65765d4f0158..c167b262ac8f9b 100644
--- a/docs/pages/components/app-bar.js
+++ b/docs/pages/components/app-bar.js
@@ -1,14 +1,21 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-const req = require.context('docs/src/pages/components/app-bar', false, /\.(md|js|tsx)$/);
-const reqSource = require.context(
+const pageFilename = 'components/app-bar';
+const requireDemo = require.context('docs/src/pages/components/app-bar', false, /\.(js|tsx)$/);
+const requireRaw = require.context(
   '!raw-loader!../../src/pages/components/app-bar',
   false,
-  /\.(js|tsx)$/,
+  /\.(js|md|tsx)$/,
 );
-const reqPrefix = 'pages/components/app-bar';
 
-export default function Page() {
-  return <MarkdownDocs req={req} reqSource={reqSource} reqPrefix={reqPrefix} />;
+// eslint-disable-next-line react/prop-types
+export default function Page({ demos, docs }) {
+  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/components/autocomplete.js b/docs/pages/components/autocomplete.js
index ba02db597565bc..f623129a999fb8 100644
--- a/docs/pages/components/autocomplete.js
+++ b/docs/pages/components/autocomplete.js
@@ -1,14 +1,21 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-const req = require.context('docs/src/pages/components/autocomplete', false, /\.(md|js|tsx)$/);
-const reqSource = require.context(
+const pageFilename = 'components/autocomplete';
+const requireDemo = require.context('docs/src/pages/components/autocomplete', false, /\.(js|tsx)$/);
+const requireRaw = require.context(
   '!raw-loader!../../src/pages/components/autocomplete',
   false,
-  /\.(js|tsx)$/,
+  /\.(js|md|tsx)$/,
 );
-const reqPrefix = 'pages/components/autocomplete';
 
-export default function Page() {
-  return <MarkdownDocs req={req} reqSource={reqSource} reqPrefix={reqPrefix} />;
+// eslint-disable-next-line react/prop-types
+export default function Page({ demos, docs }) {
+  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/components/avatars.js b/docs/pages/components/avatars.js
index a212f3ae486a43..29c18cc9ea1d41 100644
--- a/docs/pages/components/avatars.js
+++ b/docs/pages/components/avatars.js
@@ -1,14 +1,21 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-const req = require.context('docs/src/pages/components/avatars', false, /\.(md|js|tsx)$/);
-const reqSource = require.context(
+const pageFilename = 'components/avatars';
+const requireDemo = require.context('docs/src/pages/components/avatars', false, /\.(js|tsx)$/);
+const requireRaw = require.context(
   '!raw-loader!../../src/pages/components/avatars',
   false,
-  /\.(js|tsx)$/,
+  /\.(js|md|tsx)$/,
 );
-const reqPrefix = 'pages/components/avatars';
 
-export default function Page() {
-  return <MarkdownDocs req={req} reqSource={reqSource} reqPrefix={reqPrefix} />;
+// eslint-disable-next-line react/prop-types
+export default function Page({ demos, docs }) {
+  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/components/backdrop.js b/docs/pages/components/backdrop.js
index a15add6825458a..b72bbe4cc5c662 100644
--- a/docs/pages/components/backdrop.js
+++ b/docs/pages/components/backdrop.js
@@ -1,14 +1,21 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-const req = require.context('docs/src/pages/components/backdrop', false, /\.(md|js|tsx)$/);
-const reqSource = require.context(
+const pageFilename = 'components/backdrop';
+const requireDemo = require.context('docs/src/pages/components/backdrop', false, /\.(js|tsx)$/);
+const requireRaw = require.context(
   '!raw-loader!../../src/pages/components/backdrop',
   false,
-  /\.(js|tsx)$/,
+  /\.(js|md|tsx)$/,
 );
-const reqPrefix = 'pages/components/backdrop';
 
-export default function Page() {
-  return <MarkdownDocs req={req} reqSource={reqSource} reqPrefix={reqPrefix} />;
+// eslint-disable-next-line react/prop-types
+export default function Page({ demos, docs }) {
+  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/components/badges.js b/docs/pages/components/badges.js
index 20db0df35ec8d5..5519037b008ac1 100644
--- a/docs/pages/components/badges.js
+++ b/docs/pages/components/badges.js
@@ -1,14 +1,21 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-const req = require.context('docs/src/pages/components/badges', false, /\.(md|js|tsx)$/);
-const reqSource = require.context(
+const pageFilename = 'components/badges';
+const requireDemo = require.context('docs/src/pages/components/badges', false, /\.(js|tsx)$/);
+const requireRaw = require.context(
   '!raw-loader!../../src/pages/components/badges',
   false,
-  /\.(js|tsx)$/,
+  /\.(js|md|tsx)$/,
 );
-const reqPrefix = 'pages/components/badges';
 
-export default function Page() {
-  return <MarkdownDocs req={req} reqSource={reqSource} reqPrefix={reqPrefix} />;
+// eslint-disable-next-line react/prop-types
+export default function Page({ demos, docs }) {
+  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/components/bottom-navigation.js b/docs/pages/components/bottom-navigation.js
index ec3dd456eb7591..78648ed2733e7b 100644
--- a/docs/pages/components/bottom-navigation.js
+++ b/docs/pages/components/bottom-navigation.js
@@ -1,14 +1,25 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-const req = require.context('docs/src/pages/components/bottom-navigation', false, /\.(md|js|tsx)$/);
-const reqSource = require.context(
-  '!raw-loader!../../src/pages/components/bottom-navigation',
+const pageFilename = 'components/bottom-navigation';
+const requireDemo = require.context(
+  'docs/src/pages/components/bottom-navigation',
   false,
   /\.(js|tsx)$/,
 );
-const reqPrefix = 'pages/components/bottom-navigation';
+const requireRaw = require.context(
+  '!raw-loader!../../src/pages/components/bottom-navigation',
+  false,
+  /\.(js|md|tsx)$/,
+);
 
-export default function Page() {
-  return <MarkdownDocs req={req} reqSource={reqSource} reqPrefix={reqPrefix} />;
+// eslint-disable-next-line react/prop-types
+export default function Page({ demos, docs }) {
+  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/components/box.js b/docs/pages/components/box.js
index dc18b8699ea123..e39705900bda1d 100644
--- a/docs/pages/components/box.js
+++ b/docs/pages/components/box.js
@@ -1,14 +1,21 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-const req = require.context('docs/src/pages/components/box', false, /\.(md|js|tsx)$/);
-const reqSource = require.context(
+const pageFilename = 'components/box';
+const requireDemo = require.context('docs/src/pages/components/box', false, /\.(js|tsx)$/);
+const requireRaw = require.context(
   '!raw-loader!../../src/pages/components/box',
   false,
-  /\.(js|tsx)$/,
+  /\.(js|md|tsx)$/,
 );
-const reqPrefix = 'pages/components/box';
 
-export default function Page() {
-  return <MarkdownDocs req={req} reqSource={reqSource} reqPrefix={reqPrefix} />;
+// eslint-disable-next-line react/prop-types
+export default function Page({ demos, docs }) {
+  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/components/breadcrumbs.js b/docs/pages/components/breadcrumbs.js
index e65b5ac3f2c9fd..ef084dd598f49c 100644
--- a/docs/pages/components/breadcrumbs.js
+++ b/docs/pages/components/breadcrumbs.js
@@ -1,14 +1,21 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-const req = require.context('docs/src/pages/components/breadcrumbs', false, /\.(md|js|tsx)$/);
-const reqSource = require.context(
+const pageFilename = 'components/breadcrumbs';
+const requireDemo = require.context('docs/src/pages/components/breadcrumbs', false, /\.(js|tsx)$/);
+const requireRaw = require.context(
   '!raw-loader!../../src/pages/components/breadcrumbs',
   false,
-  /\.(js|tsx)$/,
+  /\.(js|md|tsx)$/,
 );
-const reqPrefix = 'pages/components/breadcrumbs';
 
-export default function Page() {
-  return <MarkdownDocs req={req} reqSource={reqSource} reqPrefix={reqPrefix} />;
+// eslint-disable-next-line react/prop-types
+export default function Page({ demos, docs }) {
+  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/components/button-group.js b/docs/pages/components/button-group.js
index 0e3151df11e729..591d86abc0a734 100644
--- a/docs/pages/components/button-group.js
+++ b/docs/pages/components/button-group.js
@@ -1,14 +1,21 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-const req = require.context('docs/src/pages/components/button-group', false, /\.(md|js|tsx)$/);
-const reqSource = require.context(
+const pageFilename = 'components/button-group';
+const requireDemo = require.context('docs/src/pages/components/button-group', false, /\.(js|tsx)$/);
+const requireRaw = require.context(
   '!raw-loader!../../src/pages/components/button-group',
   false,
-  /\.(js|tsx)$/,
+  /\.(js|md|tsx)$/,
 );
-const reqPrefix = 'pages/components/button-group';
 
-export default function Page() {
-  return <MarkdownDocs req={req} reqSource={reqSource} reqPrefix={reqPrefix} />;
+// eslint-disable-next-line react/prop-types
+export default function Page({ demos, docs }) {
+  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/components/buttons.js b/docs/pages/components/buttons.js
index 32449f5b416525..511e3f474b970f 100644
--- a/docs/pages/components/buttons.js
+++ b/docs/pages/components/buttons.js
@@ -1,14 +1,21 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-const req = require.context('docs/src/pages/components/buttons', false, /\.(md|js|tsx)$/);
-const reqSource = require.context(
+const pageFilename = 'components/buttons';
+const requireDemo = require.context('docs/src/pages/components/buttons', false, /\.(js|tsx)$/);
+const requireRaw = require.context(
   '!raw-loader!../../src/pages/components/buttons',
   false,
-  /\.(js|tsx)$/,
+  /\.(js|md|tsx)$/,
 );
-const reqPrefix = 'pages/components/buttons';
 
-export default function Page() {
-  return <MarkdownDocs req={req} reqSource={reqSource} reqPrefix={reqPrefix} />;
+// eslint-disable-next-line react/prop-types
+export default function Page({ demos, docs }) {
+  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/components/cards.js b/docs/pages/components/cards.js
index 25fb7f546e6086..667553d346170f 100644
--- a/docs/pages/components/cards.js
+++ b/docs/pages/components/cards.js
@@ -1,14 +1,21 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-const req = require.context('docs/src/pages/components/cards', false, /\.(md|js|tsx)$/);
-const reqSource = require.context(
+const pageFilename = 'components/cards';
+const requireDemo = require.context('docs/src/pages/components/cards', false, /\.(js|tsx)$/);
+const requireRaw = require.context(
   '!raw-loader!../../src/pages/components/cards',
   false,
-  /\.(js|tsx)$/,
+  /\.(js|md|tsx)$/,
 );
-const reqPrefix = 'pages/components/cards';
 
-export default function Page() {
-  return <MarkdownDocs req={req} reqSource={reqSource} reqPrefix={reqPrefix} />;
+// eslint-disable-next-line react/prop-types
+export default function Page({ demos, docs }) {
+  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/components/checkboxes.js b/docs/pages/components/checkboxes.js
index 06451964d1e021..8b187d12931c58 100644
--- a/docs/pages/components/checkboxes.js
+++ b/docs/pages/components/checkboxes.js
@@ -1,14 +1,21 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-const req = require.context('docs/src/pages/components/checkboxes', false, /\.(md|js|tsx)$/);
-const reqSource = require.context(
+const pageFilename = 'components/checkboxes';
+const requireDemo = require.context('docs/src/pages/components/checkboxes', false, /\.(js|tsx)$/);
+const requireRaw = require.context(
   '!raw-loader!../../src/pages/components/checkboxes',
   false,
-  /\.(js|tsx)$/,
+  /\.(js|md|tsx)$/,
 );
-const reqPrefix = 'pages/components/checkboxes';
 
-export default function Page() {
-  return <MarkdownDocs req={req} reqSource={reqSource} reqPrefix={reqPrefix} />;
+// eslint-disable-next-line react/prop-types
+export default function Page({ demos, docs }) {
+  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/components/chips.js b/docs/pages/components/chips.js
index 2a2632a9bb2b68..7d33cad58397ec 100644
--- a/docs/pages/components/chips.js
+++ b/docs/pages/components/chips.js
@@ -1,14 +1,21 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-const req = require.context('docs/src/pages/components/chips', false, /\.(md|js|tsx)$/);
-const reqSource = require.context(
+const pageFilename = 'components/chips';
+const requireDemo = require.context('docs/src/pages/components/chips', false, /\.(js|tsx)$/);
+const requireRaw = require.context(
   '!raw-loader!../../src/pages/components/chips',
   false,
-  /\.(js|tsx)$/,
+  /\.(js|md|tsx)$/,
 );
-const reqPrefix = 'pages/components/chips';
 
-export default function Page() {
-  return <MarkdownDocs req={req} reqSource={reqSource} reqPrefix={reqPrefix} />;
+// eslint-disable-next-line react/prop-types
+export default function Page({ demos, docs }) {
+  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/components/click-away-listener.js b/docs/pages/components/click-away-listener.js
index b68f6e698251d8..71ce74838d5507 100644
--- a/docs/pages/components/click-away-listener.js
+++ b/docs/pages/components/click-away-listener.js
@@ -1,18 +1,25 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-const req = require.context(
+const pageFilename = 'components/click-away-listener';
+const requireDemo = require.context(
   'docs/src/pages/components/click-away-listener',
   false,
-  /\.(md|js|tsx)$/,
+  /\.(js|tsx)$/,
 );
-const reqSource = require.context(
+const requireRaw = require.context(
   '!raw-loader!../../src/pages/components/click-away-listener',
   false,
-  /\.(js|tsx)$/,
+  /\.(js|md|tsx)$/,
 );
-const reqPrefix = 'pages/components/click-away-listener';
 
-export default function Page() {
-  return <MarkdownDocs req={req} reqSource={reqSource} reqPrefix={reqPrefix} />;
+// eslint-disable-next-line react/prop-types
+export default function Page({ demos, docs }) {
+  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/components/container.js b/docs/pages/components/container.js
index 01655a007ba62f..2871c9e6bc32f7 100644
--- a/docs/pages/components/container.js
+++ b/docs/pages/components/container.js
@@ -1,14 +1,21 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-const req = require.context('docs/src/pages/components/container', false, /\.(md|js|tsx)$/);
-const reqSource = require.context(
+const pageFilename = 'components/container';
+const requireDemo = require.context('docs/src/pages/components/container', false, /\.(js|tsx)$/);
+const requireRaw = require.context(
   '!raw-loader!../../src/pages/components/container',
   false,
-  /\.(js|tsx)$/,
+  /\.(js|md|tsx)$/,
 );
-const reqPrefix = 'pages/components/container';
 
-export default function Page() {
-  return <MarkdownDocs req={req} reqSource={reqSource} reqPrefix={reqPrefix} />;
+// eslint-disable-next-line react/prop-types
+export default function Page({ demos, docs }) {
+  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/components/css-baseline.js b/docs/pages/components/css-baseline.js
index e25b4abe6ce04c..d7aead0c2e497a 100644
--- a/docs/pages/components/css-baseline.js
+++ b/docs/pages/components/css-baseline.js
@@ -1,14 +1,21 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-const req = require.context('docs/src/pages/components/css-baseline', false, /\.(md|js|tsx)$/);
-const reqSource = require.context(
+const pageFilename = 'components/css-baseline';
+const requireDemo = require.context('docs/src/pages/components/css-baseline', false, /\.(js|tsx)$/);
+const requireRaw = require.context(
   '!raw-loader!../../src/pages/components/css-baseline',
   false,
-  /\.(js|tsx)$/,
+  /\.(js|md|tsx)$/,
 );
-const reqPrefix = 'pages/components/css-baseline';
 
-export default function Page() {
-  return <MarkdownDocs req={req} reqSource={reqSource} reqPrefix={reqPrefix} />;
+// eslint-disable-next-line react/prop-types
+export default function Page({ demos, docs }) {
+  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/components/dialogs.js b/docs/pages/components/dialogs.js
index 73ae16421e0f91..ed59d2f99b5233 100644
--- a/docs/pages/components/dialogs.js
+++ b/docs/pages/components/dialogs.js
@@ -1,14 +1,21 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-const req = require.context('docs/src/pages/components/dialogs', false, /\.(md|js|tsx)$/);
-const reqSource = require.context(
+const pageFilename = 'components/dialogs';
+const requireDemo = require.context('docs/src/pages/components/dialogs', false, /\.(js|tsx)$/);
+const requireRaw = require.context(
   '!raw-loader!../../src/pages/components/dialogs',
   false,
-  /\.(js|tsx)$/,
+  /\.(js|md|tsx)$/,
 );
-const reqPrefix = 'pages/components/dialogs';
 
-export default function Page() {
-  return <MarkdownDocs req={req} reqSource={reqSource} reqPrefix={reqPrefix} />;
+// eslint-disable-next-line react/prop-types
+export default function Page({ demos, docs }) {
+  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/components/dividers.js b/docs/pages/components/dividers.js
index d36681d839aab6..b81854bc289636 100644
--- a/docs/pages/components/dividers.js
+++ b/docs/pages/components/dividers.js
@@ -1,14 +1,21 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-const req = require.context('docs/src/pages/components/dividers', false, /\.(md|js|tsx)$/);
-const reqSource = require.context(
+const pageFilename = 'components/dividers';
+const requireDemo = require.context('docs/src/pages/components/dividers', false, /\.(js|tsx)$/);
+const requireRaw = require.context(
   '!raw-loader!../../src/pages/components/dividers',
   false,
-  /\.(js|tsx)$/,
+  /\.(js|md|tsx)$/,
 );
-const reqPrefix = 'pages/components/dividers';
 
-export default function Page() {
-  return <MarkdownDocs req={req} reqSource={reqSource} reqPrefix={reqPrefix} />;
+// eslint-disable-next-line react/prop-types
+export default function Page({ demos, docs }) {
+  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/components/drawers.js b/docs/pages/components/drawers.js
index ceb201765272bc..ff1213e4731837 100644
--- a/docs/pages/components/drawers.js
+++ b/docs/pages/components/drawers.js
@@ -1,14 +1,21 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-const req = require.context('docs/src/pages/components/drawers', false, /\.(md|js|tsx)$/);
-const reqSource = require.context(
+const pageFilename = 'components/drawers';
+const requireDemo = require.context('docs/src/pages/components/drawers', false, /\.(js|tsx)$/);
+const requireRaw = require.context(
   '!raw-loader!../../src/pages/components/drawers',
   false,
-  /\.(js|tsx)$/,
+  /\.(js|md|tsx)$/,
 );
-const reqPrefix = 'pages/components/drawers';
 
-export default function Page() {
-  return <MarkdownDocs req={req} reqSource={reqSource} reqPrefix={reqPrefix} />;
+// eslint-disable-next-line react/prop-types
+export default function Page({ demos, docs }) {
+  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/components/expansion-panels.js b/docs/pages/components/expansion-panels.js
index 83bc8f29c44858..ed81aa80392bf4 100644
--- a/docs/pages/components/expansion-panels.js
+++ b/docs/pages/components/expansion-panels.js
@@ -1,14 +1,25 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-const req = require.context('docs/src/pages/components/expansion-panels', false, /\.(md|js|tsx)$/);
-const reqSource = require.context(
-  '!raw-loader!../../src/pages/components/expansion-panels',
+const pageFilename = 'components/expansion-panels';
+const requireDemo = require.context(
+  'docs/src/pages/components/expansion-panels',
   false,
   /\.(js|tsx)$/,
 );
-const reqPrefix = 'pages/components/expansion-panels';
+const requireRaw = require.context(
+  '!raw-loader!../../src/pages/components/expansion-panels',
+  false,
+  /\.(js|md|tsx)$/,
+);
 
-export default function Page() {
-  return <MarkdownDocs req={req} reqSource={reqSource} reqPrefix={reqPrefix} />;
+// eslint-disable-next-line react/prop-types
+export default function Page({ demos, docs }) {
+  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/components/floating-action-button.js b/docs/pages/components/floating-action-button.js
index aa3238a39ea958..c76306ec260700 100644
--- a/docs/pages/components/floating-action-button.js
+++ b/docs/pages/components/floating-action-button.js
@@ -1,18 +1,25 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-const req = require.context(
+const pageFilename = 'components/floating-action-button';
+const requireDemo = require.context(
   'docs/src/pages/components/floating-action-button',
   false,
-  /\.(md|js|tsx)$/,
+  /\.(js|tsx)$/,
 );
-const reqSource = require.context(
+const requireRaw = require.context(
   '!raw-loader!../../src/pages/components/floating-action-button',
   false,
-  /\.(js|tsx)$/,
+  /\.(js|md|tsx)$/,
 );
-const reqPrefix = 'pages/components/floating-action-button';
 
-export default function Page() {
-  return <MarkdownDocs req={req} reqSource={reqSource} reqPrefix={reqPrefix} />;
+// eslint-disable-next-line react/prop-types
+export default function Page({ demos, docs }) {
+  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/components/grid-list.js b/docs/pages/components/grid-list.js
index 230858b4d81e09..ff3d3f66236dd0 100644
--- a/docs/pages/components/grid-list.js
+++ b/docs/pages/components/grid-list.js
@@ -1,14 +1,21 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-const req = require.context('docs/src/pages/components/grid-list', false, /\.(md|js|tsx)$/);
-const reqSource = require.context(
+const pageFilename = 'components/grid-list';
+const requireDemo = require.context('docs/src/pages/components/grid-list', false, /\.(js|tsx)$/);
+const requireRaw = require.context(
   '!raw-loader!../../src/pages/components/grid-list',
   false,
-  /\.(js|tsx)$/,
+  /\.(js|md|tsx)$/,
 );
-const reqPrefix = 'pages/components/grid-list';
 
-export default function Page() {
-  return <MarkdownDocs req={req} reqSource={reqSource} reqPrefix={reqPrefix} />;
+// eslint-disable-next-line react/prop-types
+export default function Page({ demos, docs }) {
+  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/components/grid.js b/docs/pages/components/grid.js
index 2d27e2160c9f89..542c20f434060f 100644
--- a/docs/pages/components/grid.js
+++ b/docs/pages/components/grid.js
@@ -1,14 +1,21 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-const req = require.context('docs/src/pages/components/grid', false, /\.(md|js|tsx)$/);
-const reqSource = require.context(
+const pageFilename = 'components/grid';
+const requireDemo = require.context('docs/src/pages/components/grid', false, /\.(js|tsx)$/);
+const requireRaw = require.context(
   '!raw-loader!../../src/pages/components/grid',
   false,
-  /\.(js|tsx)$/,
+  /\.(js|md|tsx)$/,
 );
-const reqPrefix = 'pages/components/grid';
 
-export default function Page() {
-  return <MarkdownDocs req={req} reqSource={reqSource} reqPrefix={reqPrefix} />;
+// eslint-disable-next-line react/prop-types
+export default function Page({ demos, docs }) {
+  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/components/hidden.js b/docs/pages/components/hidden.js
index 87c0e57402fdc3..658e5c0326c743 100644
--- a/docs/pages/components/hidden.js
+++ b/docs/pages/components/hidden.js
@@ -1,14 +1,21 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-const req = require.context('docs/src/pages/components/hidden', false, /\.(md|js|tsx)$/);
-const reqSource = require.context(
+const pageFilename = 'components/hidden';
+const requireDemo = require.context('docs/src/pages/components/hidden', false, /\.(js|tsx)$/);
+const requireRaw = require.context(
   '!raw-loader!../../src/pages/components/hidden',
   false,
-  /\.(js|tsx)$/,
+  /\.(js|md|tsx)$/,
 );
-const reqPrefix = 'pages/components/hidden';
 
-export default function Page() {
-  return <MarkdownDocs req={req} reqSource={reqSource} reqPrefix={reqPrefix} />;
+// eslint-disable-next-line react/prop-types
+export default function Page({ demos, docs }) {
+  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/components/icons.js b/docs/pages/components/icons.js
index eff22dca77b272..6606bf6b7ab407 100644
--- a/docs/pages/components/icons.js
+++ b/docs/pages/components/icons.js
@@ -1,14 +1,21 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-const req = require.context('docs/src/pages/components/icons', false, /\.(md|js|tsx)$/);
-const reqSource = require.context(
+const pageFilename = 'components/icons';
+const requireDemo = require.context('docs/src/pages/components/icons', false, /\.(js|tsx)$/);
+const requireRaw = require.context(
   '!raw-loader!../../src/pages/components/icons',
   false,
-  /\.(js|tsx)$/,
+  /\.(js|md|tsx)$/,
 );
-const reqPrefix = 'pages/components/icons';
 
-export default function Page() {
-  return <MarkdownDocs req={req} reqSource={reqSource} reqPrefix={reqPrefix} />;
+// eslint-disable-next-line react/prop-types
+export default function Page({ demos, docs }) {
+  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/components/links.js b/docs/pages/components/links.js
index 0dba44d0be510a..a19e4f95928be3 100644
--- a/docs/pages/components/links.js
+++ b/docs/pages/components/links.js
@@ -1,14 +1,21 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-const req = require.context('docs/src/pages/components/links', false, /\.(md|js|tsx)$/);
-const reqSource = require.context(
+const pageFilename = 'components/links';
+const requireDemo = require.context('docs/src/pages/components/links', false, /\.(js|tsx)$/);
+const requireRaw = require.context(
   '!raw-loader!../../src/pages/components/links',
   false,
-  /\.(js|tsx)$/,
+  /\.(js|md|tsx)$/,
 );
-const reqPrefix = 'pages/components/links';
 
-export default function Page() {
-  return <MarkdownDocs req={req} reqSource={reqSource} reqPrefix={reqPrefix} />;
+// eslint-disable-next-line react/prop-types
+export default function Page({ demos, docs }) {
+  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/components/lists.js b/docs/pages/components/lists.js
index 138f5564dbe283..a7c53cd8250595 100644
--- a/docs/pages/components/lists.js
+++ b/docs/pages/components/lists.js
@@ -1,14 +1,21 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-const req = require.context('docs/src/pages/components/lists', false, /\.(md|js|tsx)$/);
-const reqSource = require.context(
+const pageFilename = 'components/lists';
+const requireDemo = require.context('docs/src/pages/components/lists', false, /\.(js|tsx)$/);
+const requireRaw = require.context(
   '!raw-loader!../../src/pages/components/lists',
   false,
-  /\.(js|tsx)$/,
+  /\.(js|md|tsx)$/,
 );
-const reqPrefix = 'pages/components/lists';
 
-export default function Page() {
-  return <MarkdownDocs req={req} reqSource={reqSource} reqPrefix={reqPrefix} />;
+// eslint-disable-next-line react/prop-types
+export default function Page({ demos, docs }) {
+  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/components/material-icons.js b/docs/pages/components/material-icons.js
index a8c7f2798aff7e..bc52b4425d3ba3 100644
--- a/docs/pages/components/material-icons.js
+++ b/docs/pages/components/material-icons.js
@@ -1,14 +1,25 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-const req = require.context('docs/src/pages/components/material-icons', false, /\.(md|js|tsx)$/);
-const reqSource = require.context(
-  '!raw-loader!../../src/pages/components/material-icons',
+const pageFilename = 'components/material-icons';
+const requireDemo = require.context(
+  'docs/src/pages/components/material-icons',
   false,
   /\.(js|tsx)$/,
 );
-const reqPrefix = 'pages/components/material-icons';
+const requireRaw = require.context(
+  '!raw-loader!../../src/pages/components/material-icons',
+  false,
+  /\.(js|md|tsx)$/,
+);
 
-export default function Page() {
-  return <MarkdownDocs req={req} reqSource={reqSource} reqPrefix={reqPrefix} />;
+// eslint-disable-next-line react/prop-types
+export default function Page({ demos, docs }) {
+  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/components/menus.js b/docs/pages/components/menus.js
index aba7e35695383b..43a2109158a3c3 100644
--- a/docs/pages/components/menus.js
+++ b/docs/pages/components/menus.js
@@ -1,14 +1,21 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-const req = require.context('docs/src/pages/components/menus', false, /\.(md|js|tsx)$/);
-const reqSource = require.context(
+const pageFilename = 'components/menus';
+const requireDemo = require.context('docs/src/pages/components/menus', false, /\.(js|tsx)$/);
+const requireRaw = require.context(
   '!raw-loader!../../src/pages/components/menus',
   false,
-  /\.(js|tsx)$/,
+  /\.(js|md|tsx)$/,
 );
-const reqPrefix = 'pages/components/menus';
 
-export default function Page() {
-  return <MarkdownDocs req={req} reqSource={reqSource} reqPrefix={reqPrefix} />;
+// eslint-disable-next-line react/prop-types
+export default function Page({ demos, docs }) {
+  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/components/modal.js b/docs/pages/components/modal.js
index e2a30bafb8fa28..ec37024fdf2a04 100644
--- a/docs/pages/components/modal.js
+++ b/docs/pages/components/modal.js
@@ -1,14 +1,21 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-const req = require.context('docs/src/pages/components/modal', false, /\.(md|js|tsx)$/);
-const reqSource = require.context(
+const pageFilename = 'components/modal';
+const requireDemo = require.context('docs/src/pages/components/modal', false, /\.(js|tsx)$/);
+const requireRaw = require.context(
   '!raw-loader!../../src/pages/components/modal',
   false,
-  /\.(js|tsx)$/,
+  /\.(js|md|tsx)$/,
 );
-const reqPrefix = 'pages/components/modal';
 
-export default function Page() {
-  return <MarkdownDocs req={req} reqSource={reqSource} reqPrefix={reqPrefix} />;
+// eslint-disable-next-line react/prop-types
+export default function Page({ demos, docs }) {
+  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/components/no-ssr.js b/docs/pages/components/no-ssr.js
index 0d8ba0e3ec0c68..6015406749fa85 100644
--- a/docs/pages/components/no-ssr.js
+++ b/docs/pages/components/no-ssr.js
@@ -1,14 +1,21 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-const req = require.context('docs/src/pages/components/no-ssr', false, /\.(md|js|tsx)$/);
-const reqSource = require.context(
+const pageFilename = 'components/no-ssr';
+const requireDemo = require.context('docs/src/pages/components/no-ssr', false, /\.(js|tsx)$/);
+const requireRaw = require.context(
   '!raw-loader!../../src/pages/components/no-ssr',
   false,
-  /\.(js|tsx)$/,
+  /\.(js|md|tsx)$/,
 );
-const reqPrefix = 'pages/components/no-ssr';
 
-export default function Page() {
-  return <MarkdownDocs req={req} reqSource={reqSource} reqPrefix={reqPrefix} />;
+// eslint-disable-next-line react/prop-types
+export default function Page({ demos, docs }) {
+  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/components/pagination.js b/docs/pages/components/pagination.js
index 3610b08f6fa568..f5cc965c6a4e51 100644
--- a/docs/pages/components/pagination.js
+++ b/docs/pages/components/pagination.js
@@ -1,14 +1,21 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-const req = require.context('docs/src/pages/components/pagination', false, /\.(md|js|tsx)$/);
-const reqSource = require.context(
+const pageFilename = 'components/pagination';
+const requireDemo = require.context('docs/src/pages/components/pagination', false, /\.(js|tsx)$/);
+const requireRaw = require.context(
   '!raw-loader!../../src/pages/components/pagination',
   false,
-  /\.(js|tsx)$/,
+  /\.(js|md|tsx)$/,
 );
-const reqPrefix = 'pages/components/pagination';
 
-export default function Page() {
-  return <MarkdownDocs req={req} reqSource={reqSource} reqPrefix={reqPrefix} />;
+// eslint-disable-next-line react/prop-types
+export default function Page({ demos, docs }) {
+  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/components/paper.js b/docs/pages/components/paper.js
index afacfef340af5e..1ee6998150c80c 100644
--- a/docs/pages/components/paper.js
+++ b/docs/pages/components/paper.js
@@ -1,14 +1,21 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-const req = require.context('docs/src/pages/components/paper', false, /\.(md|js|tsx)$/);
-const reqSource = require.context(
+const pageFilename = 'components/paper';
+const requireDemo = require.context('docs/src/pages/components/paper', false, /\.(js|tsx)$/);
+const requireRaw = require.context(
   '!raw-loader!../../src/pages/components/paper',
   false,
-  /\.(js|tsx)$/,
+  /\.(js|md|tsx)$/,
 );
-const reqPrefix = 'pages/components/paper';
 
-export default function Page() {
-  return <MarkdownDocs req={req} reqSource={reqSource} reqPrefix={reqPrefix} />;
+// eslint-disable-next-line react/prop-types
+export default function Page({ demos, docs }) {
+  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/components/pickers.js b/docs/pages/components/pickers.js
index 18f1752834bf9c..c6ceb26452fd9b 100644
--- a/docs/pages/components/pickers.js
+++ b/docs/pages/components/pickers.js
@@ -1,14 +1,21 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-const req = require.context('docs/src/pages/components/pickers', false, /\.(md|js|tsx)$/);
-const reqSource = require.context(
+const pageFilename = 'components/pickers';
+const requireDemo = require.context('docs/src/pages/components/pickers', false, /\.(js|tsx)$/);
+const requireRaw = require.context(
   '!raw-loader!../../src/pages/components/pickers',
   false,
-  /\.(js|tsx)$/,
+  /\.(js|md|tsx)$/,
 );
-const reqPrefix = 'pages/components/pickers';
 
-export default function Page() {
-  return <MarkdownDocs req={req} reqSource={reqSource} reqPrefix={reqPrefix} />;
+// eslint-disable-next-line react/prop-types
+export default function Page({ demos, docs }) {
+  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/components/popover.js b/docs/pages/components/popover.js
index 9e4b972083e0a4..b715e9dd7ea634 100644
--- a/docs/pages/components/popover.js
+++ b/docs/pages/components/popover.js
@@ -1,14 +1,21 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-const req = require.context('docs/src/pages/components/popover', false, /\.(md|js|tsx)$/);
-const reqSource = require.context(
+const pageFilename = 'components/popover';
+const requireDemo = require.context('docs/src/pages/components/popover', false, /\.(js|tsx)$/);
+const requireRaw = require.context(
   '!raw-loader!../../src/pages/components/popover',
   false,
-  /\.(js|tsx)$/,
+  /\.(js|md|tsx)$/,
 );
-const reqPrefix = 'pages/components/popover';
 
-export default function Page() {
-  return <MarkdownDocs req={req} reqSource={reqSource} reqPrefix={reqPrefix} />;
+// eslint-disable-next-line react/prop-types
+export default function Page({ demos, docs }) {
+  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/components/popper.js b/docs/pages/components/popper.js
index 438a17204b1812..82e7b48604eb30 100644
--- a/docs/pages/components/popper.js
+++ b/docs/pages/components/popper.js
@@ -1,14 +1,21 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-const req = require.context('docs/src/pages/components/popper', false, /\.(md|js|tsx)$/);
-const reqSource = require.context(
+const pageFilename = 'components/popper';
+const requireDemo = require.context('docs/src/pages/components/popper', false, /\.(js|tsx)$/);
+const requireRaw = require.context(
   '!raw-loader!../../src/pages/components/popper',
   false,
-  /\.(js|tsx)$/,
+  /\.(js|md|tsx)$/,
 );
-const reqPrefix = 'pages/components/popper';
 
-export default function Page() {
-  return <MarkdownDocs req={req} reqSource={reqSource} reqPrefix={reqPrefix} />;
+// eslint-disable-next-line react/prop-types
+export default function Page({ demos, docs }) {
+  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/components/portal.js b/docs/pages/components/portal.js
index a13be37efef673..65b1ee358e0f22 100644
--- a/docs/pages/components/portal.js
+++ b/docs/pages/components/portal.js
@@ -1,14 +1,21 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-const req = require.context('docs/src/pages/components/portal', false, /\.(md|js|tsx)$/);
-const reqSource = require.context(
+const pageFilename = 'components/portal';
+const requireDemo = require.context('docs/src/pages/components/portal', false, /\.(js|tsx)$/);
+const requireRaw = require.context(
   '!raw-loader!../../src/pages/components/portal',
   false,
-  /\.(js|tsx)$/,
+  /\.(js|md|tsx)$/,
 );
-const reqPrefix = 'pages/components/portal';
 
-export default function Page() {
-  return <MarkdownDocs req={req} reqSource={reqSource} reqPrefix={reqPrefix} />;
+// eslint-disable-next-line react/prop-types
+export default function Page({ demos, docs }) {
+  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/components/progress.js b/docs/pages/components/progress.js
index 2f97c45530bf7e..64949319fd9cec 100644
--- a/docs/pages/components/progress.js
+++ b/docs/pages/components/progress.js
@@ -1,14 +1,21 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-const req = require.context('docs/src/pages/components/progress', false, /\.(md|js|tsx)$/);
-const reqSource = require.context(
+const pageFilename = 'components/progress';
+const requireDemo = require.context('docs/src/pages/components/progress', false, /\.(js|tsx)$/);
+const requireRaw = require.context(
   '!raw-loader!../../src/pages/components/progress',
   false,
-  /\.(js|tsx)$/,
+  /\.(js|md|tsx)$/,
 );
-const reqPrefix = 'pages/components/progress';
 
-export default function Page() {
-  return <MarkdownDocs req={req} reqSource={reqSource} reqPrefix={reqPrefix} />;
+// eslint-disable-next-line react/prop-types
+export default function Page({ demos, docs }) {
+  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/components/radio-buttons.js b/docs/pages/components/radio-buttons.js
index ae2980b5164c58..90e0de6b40f007 100644
--- a/docs/pages/components/radio-buttons.js
+++ b/docs/pages/components/radio-buttons.js
@@ -1,14 +1,25 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-const req = require.context('docs/src/pages/components/radio-buttons', false, /\.(md|js|tsx)$/);
-const reqSource = require.context(
-  '!raw-loader!../../src/pages/components/radio-buttons',
+const pageFilename = 'components/radio-buttons';
+const requireDemo = require.context(
+  'docs/src/pages/components/radio-buttons',
   false,
   /\.(js|tsx)$/,
 );
-const reqPrefix = 'pages/components/radio-buttons';
+const requireRaw = require.context(
+  '!raw-loader!../../src/pages/components/radio-buttons',
+  false,
+  /\.(js|md|tsx)$/,
+);
 
-export default function Page() {
-  return <MarkdownDocs req={req} reqSource={reqSource} reqPrefix={reqPrefix} />;
+// eslint-disable-next-line react/prop-types
+export default function Page({ demos, docs }) {
+  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/components/rating.js b/docs/pages/components/rating.js
index 9266761ad68796..dd4b649f08c070 100644
--- a/docs/pages/components/rating.js
+++ b/docs/pages/components/rating.js
@@ -1,14 +1,21 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-const req = require.context('docs/src/pages/components/rating', false, /\.(md|js|tsx)$/);
-const reqSource = require.context(
+const pageFilename = 'components/rating';
+const requireDemo = require.context('docs/src/pages/components/rating', false, /\.(js|tsx)$/);
+const requireRaw = require.context(
   '!raw-loader!../../src/pages/components/rating',
   false,
-  /\.(js|tsx)$/,
+  /\.(js|md|tsx)$/,
 );
-const reqPrefix = 'pages/components/rating';
 
-export default function Page() {
-  return <MarkdownDocs req={req} reqSource={reqSource} reqPrefix={reqPrefix} />;
+// eslint-disable-next-line react/prop-types
+export default function Page({ demos, docs }) {
+  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/components/selects.js b/docs/pages/components/selects.js
index b4f416682ed5c9..c7fda168091a48 100644
--- a/docs/pages/components/selects.js
+++ b/docs/pages/components/selects.js
@@ -1,14 +1,21 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-const req = require.context('docs/src/pages/components/selects', false, /\.(md|js|tsx)$/);
-const reqSource = require.context(
+const pageFilename = 'components/selects';
+const requireDemo = require.context('docs/src/pages/components/selects', false, /\.(js|tsx)$/);
+const requireRaw = require.context(
   '!raw-loader!../../src/pages/components/selects',
   false,
-  /\.(js|tsx)$/,
+  /\.(js|md|tsx)$/,
 );
-const reqPrefix = 'pages/components/selects';
 
-export default function Page() {
-  return <MarkdownDocs req={req} reqSource={reqSource} reqPrefix={reqPrefix} />;
+// eslint-disable-next-line react/prop-types
+export default function Page({ demos, docs }) {
+  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/components/skeleton.js b/docs/pages/components/skeleton.js
index 57c79c91c3954d..813377cfec3a60 100644
--- a/docs/pages/components/skeleton.js
+++ b/docs/pages/components/skeleton.js
@@ -1,14 +1,21 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-const req = require.context('docs/src/pages/components/skeleton', false, /\.(md|js|tsx)$/);
-const reqSource = require.context(
+const pageFilename = 'components/skeleton';
+const requireDemo = require.context('docs/src/pages/components/skeleton', false, /\.(js|tsx)$/);
+const requireRaw = require.context(
   '!raw-loader!../../src/pages/components/skeleton',
   false,
-  /\.(js|tsx)$/,
+  /\.(js|md|tsx)$/,
 );
-const reqPrefix = 'pages/components/skeleton';
 
-export default function Page() {
-  return <MarkdownDocs req={req} reqSource={reqSource} reqPrefix={reqPrefix} />;
+// eslint-disable-next-line react/prop-types
+export default function Page({ demos, docs }) {
+  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/components/slider.js b/docs/pages/components/slider.js
index 22a01c0d6a2ac3..6aa626b50f481f 100644
--- a/docs/pages/components/slider.js
+++ b/docs/pages/components/slider.js
@@ -1,14 +1,21 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-const req = require.context('docs/src/pages/components/slider', false, /\.(md|js|tsx)$/);
-const reqSource = require.context(
+const pageFilename = 'components/slider';
+const requireDemo = require.context('docs/src/pages/components/slider', false, /\.(js|tsx)$/);
+const requireRaw = require.context(
   '!raw-loader!../../src/pages/components/slider',
   false,
-  /\.(js|tsx)$/,
+  /\.(js|md|tsx)$/,
 );
-const reqPrefix = 'pages/components/slider';
 
-export default function Page() {
-  return <MarkdownDocs req={req} reqSource={reqSource} reqPrefix={reqPrefix} />;
+// eslint-disable-next-line react/prop-types
+export default function Page({ demos, docs }) {
+  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/components/snackbars.js b/docs/pages/components/snackbars.js
index d9ab0048f91a88..2f2f6eeed97a45 100644
--- a/docs/pages/components/snackbars.js
+++ b/docs/pages/components/snackbars.js
@@ -1,14 +1,21 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-const req = require.context('docs/src/pages/components/snackbars', false, /\.(md|js|tsx)$/);
-const reqSource = require.context(
+const pageFilename = 'components/snackbars';
+const requireDemo = require.context('docs/src/pages/components/snackbars', false, /\.(js|tsx)$/);
+const requireRaw = require.context(
   '!raw-loader!../../src/pages/components/snackbars',
   false,
-  /\.(js|tsx)$/,
+  /\.(js|md|tsx)$/,
 );
-const reqPrefix = 'pages/components/snackbars';
 
-export default function Page() {
-  return <MarkdownDocs req={req} reqSource={reqSource} reqPrefix={reqPrefix} />;
+// eslint-disable-next-line react/prop-types
+export default function Page({ demos, docs }) {
+  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/components/speed-dial.js b/docs/pages/components/speed-dial.js
index 30bad762587acd..d72e1f7990b7bd 100644
--- a/docs/pages/components/speed-dial.js
+++ b/docs/pages/components/speed-dial.js
@@ -1,14 +1,21 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-const req = require.context('docs/src/pages/components/speed-dial', false, /\.(md|js|tsx)$/);
-const reqSource = require.context(
+const pageFilename = 'components/speed-dial';
+const requireDemo = require.context('docs/src/pages/components/speed-dial', false, /\.(js|tsx)$/);
+const requireRaw = require.context(
   '!raw-loader!../../src/pages/components/speed-dial',
   false,
-  /\.(js|tsx)$/,
+  /\.(js|md|tsx)$/,
 );
-const reqPrefix = 'pages/components/speed-dial';
 
-export default function Page() {
-  return <MarkdownDocs req={req} reqSource={reqSource} reqPrefix={reqPrefix} />;
+// eslint-disable-next-line react/prop-types
+export default function Page({ demos, docs }) {
+  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/components/steppers.js b/docs/pages/components/steppers.js
index 0ca25c799babf0..460af7ca190344 100644
--- a/docs/pages/components/steppers.js
+++ b/docs/pages/components/steppers.js
@@ -1,14 +1,21 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-const req = require.context('docs/src/pages/components/steppers', false, /\.(md|js|tsx)$/);
-const reqSource = require.context(
+const pageFilename = 'components/steppers';
+const requireDemo = require.context('docs/src/pages/components/steppers', false, /\.(js|tsx)$/);
+const requireRaw = require.context(
   '!raw-loader!../../src/pages/components/steppers',
   false,
-  /\.(js|tsx)$/,
+  /\.(js|md|tsx)$/,
 );
-const reqPrefix = 'pages/components/steppers';
 
-export default function Page() {
-  return <MarkdownDocs req={req} reqSource={reqSource} reqPrefix={reqPrefix} />;
+// eslint-disable-next-line react/prop-types
+export default function Page({ demos, docs }) {
+  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/components/switches.js b/docs/pages/components/switches.js
index 41c5fd911bdb39..694c946b606e3b 100644
--- a/docs/pages/components/switches.js
+++ b/docs/pages/components/switches.js
@@ -1,14 +1,21 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-const req = require.context('docs/src/pages/components/switches', false, /\.(md|js|tsx)$/);
-const reqSource = require.context(
+const pageFilename = 'components/switches';
+const requireDemo = require.context('docs/src/pages/components/switches', false, /\.(js|tsx)$/);
+const requireRaw = require.context(
   '!raw-loader!../../src/pages/components/switches',
   false,
-  /\.(js|tsx)$/,
+  /\.(js|md|tsx)$/,
 );
-const reqPrefix = 'pages/components/switches';
 
-export default function Page() {
-  return <MarkdownDocs req={req} reqSource={reqSource} reqPrefix={reqPrefix} />;
+// eslint-disable-next-line react/prop-types
+export default function Page({ demos, docs }) {
+  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/components/tables.js b/docs/pages/components/tables.js
index a5b40a79b90c59..a5c7da3829cfe0 100644
--- a/docs/pages/components/tables.js
+++ b/docs/pages/components/tables.js
@@ -1,14 +1,21 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-const req = require.context('docs/src/pages/components/tables', false, /\.(md|js|tsx)$/);
-const reqSource = require.context(
+const pageFilename = 'components/tables';
+const requireDemo = require.context('docs/src/pages/components/tables', false, /\.(js|tsx)$/);
+const requireRaw = require.context(
   '!raw-loader!../../src/pages/components/tables',
   false,
-  /\.(js|tsx)$/,
+  /\.(js|md|tsx)$/,
 );
-const reqPrefix = 'pages/components/tables';
 
-export default function Page() {
-  return <MarkdownDocs req={req} reqSource={reqSource} reqPrefix={reqPrefix} />;
+// eslint-disable-next-line react/prop-types
+export default function Page({ demos, docs }) {
+  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/components/tabs.js b/docs/pages/components/tabs.js
index 4bf68a667941d5..4591a12607e76a 100644
--- a/docs/pages/components/tabs.js
+++ b/docs/pages/components/tabs.js
@@ -1,14 +1,21 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-const req = require.context('docs/src/pages/components/tabs', false, /\.(md|js|tsx)$/);
-const reqSource = require.context(
+const pageFilename = 'components/tabs';
+const requireDemo = require.context('docs/src/pages/components/tabs', false, /\.(js|tsx)$/);
+const requireRaw = require.context(
   '!raw-loader!../../src/pages/components/tabs',
   false,
-  /\.(js|tsx)$/,
+  /\.(js|md|tsx)$/,
 );
-const reqPrefix = 'pages/components/tabs';
 
-export default function Page() {
-  return <MarkdownDocs req={req} reqSource={reqSource} reqPrefix={reqPrefix} />;
+// eslint-disable-next-line react/prop-types
+export default function Page({ demos, docs }) {
+  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/components/text-fields.js b/docs/pages/components/text-fields.js
index b469c854d32796..0b0005c18d26c8 100644
--- a/docs/pages/components/text-fields.js
+++ b/docs/pages/components/text-fields.js
@@ -1,14 +1,21 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-const req = require.context('docs/src/pages/components/text-fields', false, /\.(md|js|tsx)$/);
-const reqSource = require.context(
+const pageFilename = 'components/text-fields';
+const requireDemo = require.context('docs/src/pages/components/text-fields', false, /\.(js|tsx)$/);
+const requireRaw = require.context(
   '!raw-loader!../../src/pages/components/text-fields',
   false,
-  /\.(js|tsx)$/,
+  /\.(js|md|tsx)$/,
 );
-const reqPrefix = 'pages/components/text-fields';
 
-export default function Page() {
-  return <MarkdownDocs req={req} reqSource={reqSource} reqPrefix={reqPrefix} />;
+// eslint-disable-next-line react/prop-types
+export default function Page({ demos, docs }) {
+  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/components/textarea-autosize.js b/docs/pages/components/textarea-autosize.js
index 7bc7fe7c92a364..8b22d81b25acd6 100644
--- a/docs/pages/components/textarea-autosize.js
+++ b/docs/pages/components/textarea-autosize.js
@@ -1,14 +1,25 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-const req = require.context('docs/src/pages/components/textarea-autosize', false, /\.(md|js|tsx)$/);
-const reqSource = require.context(
-  '!raw-loader!../../src/pages/components/textarea-autosize',
+const pageFilename = 'components/textarea-autosize';
+const requireDemo = require.context(
+  'docs/src/pages/components/textarea-autosize',
   false,
   /\.(js|tsx)$/,
 );
-const reqPrefix = 'pages/components/textarea-autosize';
+const requireRaw = require.context(
+  '!raw-loader!../../src/pages/components/textarea-autosize',
+  false,
+  /\.(js|md|tsx)$/,
+);
 
-export default function Page() {
-  return <MarkdownDocs req={req} reqSource={reqSource} reqPrefix={reqPrefix} />;
+// eslint-disable-next-line react/prop-types
+export default function Page({ demos, docs }) {
+  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/components/toggle-button.js b/docs/pages/components/toggle-button.js
index 14d6049cf462a4..f65da9e23b534a 100644
--- a/docs/pages/components/toggle-button.js
+++ b/docs/pages/components/toggle-button.js
@@ -1,14 +1,25 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-const req = require.context('docs/src/pages/components/toggle-button', false, /\.(md|js|tsx)$/);
-const reqSource = require.context(
-  '!raw-loader!../../src/pages/components/toggle-button',
+const pageFilename = 'components/toggle-button';
+const requireDemo = require.context(
+  'docs/src/pages/components/toggle-button',
   false,
   /\.(js|tsx)$/,
 );
-const reqPrefix = 'pages/components/toggle-button';
+const requireRaw = require.context(
+  '!raw-loader!../../src/pages/components/toggle-button',
+  false,
+  /\.(js|md|tsx)$/,
+);
 
-export default function Page() {
-  return <MarkdownDocs req={req} reqSource={reqSource} reqPrefix={reqPrefix} />;
+// eslint-disable-next-line react/prop-types
+export default function Page({ demos, docs }) {
+  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/components/tooltips.js b/docs/pages/components/tooltips.js
index afee2667374cd7..fabe2ded5148a2 100644
--- a/docs/pages/components/tooltips.js
+++ b/docs/pages/components/tooltips.js
@@ -1,14 +1,21 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-const req = require.context('docs/src/pages/components/tooltips', false, /\.(md|js|tsx)$/);
-const reqSource = require.context(
+const pageFilename = 'components/tooltips';
+const requireDemo = require.context('docs/src/pages/components/tooltips', false, /\.(js|tsx)$/);
+const requireRaw = require.context(
   '!raw-loader!../../src/pages/components/tooltips',
   false,
-  /\.(js|tsx)$/,
+  /\.(js|md|tsx)$/,
 );
-const reqPrefix = 'pages/components/tooltips';
 
-export default function Page() {
-  return <MarkdownDocs req={req} reqSource={reqSource} reqPrefix={reqPrefix} />;
+// eslint-disable-next-line react/prop-types
+export default function Page({ demos, docs }) {
+  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/components/transfer-list.js b/docs/pages/components/transfer-list.js
index 403a6cc6a78065..620312a68c17b8 100644
--- a/docs/pages/components/transfer-list.js
+++ b/docs/pages/components/transfer-list.js
@@ -1,14 +1,25 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-const req = require.context('docs/src/pages/components/transfer-list', false, /\.(md|js|tsx)$/);
-const reqSource = require.context(
-  '!raw-loader!../../src/pages/components/transfer-list',
+const pageFilename = 'components/transfer-list';
+const requireDemo = require.context(
+  'docs/src/pages/components/transfer-list',
   false,
   /\.(js|tsx)$/,
 );
-const reqPrefix = 'pages/components/transfer-list';
+const requireRaw = require.context(
+  '!raw-loader!../../src/pages/components/transfer-list',
+  false,
+  /\.(js|md|tsx)$/,
+);
 
-export default function Page() {
-  return <MarkdownDocs req={req} reqSource={reqSource} reqPrefix={reqPrefix} />;
+// eslint-disable-next-line react/prop-types
+export default function Page({ demos, docs }) {
+  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/components/transitions.js b/docs/pages/components/transitions.js
index 018f1b3cd3f7f1..98a7a8d5892803 100644
--- a/docs/pages/components/transitions.js
+++ b/docs/pages/components/transitions.js
@@ -1,14 +1,21 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-const req = require.context('docs/src/pages/components/transitions', false, /\.(md|js|tsx)$/);
-const reqSource = require.context(
+const pageFilename = 'components/transitions';
+const requireDemo = require.context('docs/src/pages/components/transitions', false, /\.(js|tsx)$/);
+const requireRaw = require.context(
   '!raw-loader!../../src/pages/components/transitions',
   false,
-  /\.(js|tsx)$/,
+  /\.(js|md|tsx)$/,
 );
-const reqPrefix = 'pages/components/transitions';
 
-export default function Page() {
-  return <MarkdownDocs req={req} reqSource={reqSource} reqPrefix={reqPrefix} />;
+// eslint-disable-next-line react/prop-types
+export default function Page({ demos, docs }) {
+  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/components/tree-view.js b/docs/pages/components/tree-view.js
index d813b8a40959fa..b88925f7298801 100644
--- a/docs/pages/components/tree-view.js
+++ b/docs/pages/components/tree-view.js
@@ -1,16 +1,21 @@
-import 'docs/src/modules/components/bootstrap';
-// --- Post bootstrap -----
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-const req = require.context('docs/src/pages/components/tree-view', false, /\.(md|js|tsx)$/);
-const reqSource = require.context(
+const pageFilename = 'components/tree-view';
+const requireDemo = require.context('docs/src/pages/components/tree-view', false, /\.(js|tsx)$/);
+const requireRaw = require.context(
   '!raw-loader!../../src/pages/components/tree-view',
   false,
-  /\.(js|tsx)$/,
+  /\.(js|md|tsx)$/,
 );
-const reqPrefix = 'pages/components/tree-view';
 
-export default function Page() {
-  return <MarkdownDocs req={req} reqSource={reqSource} reqPrefix={reqPrefix} />;
+// eslint-disable-next-line react/prop-types
+export default function Page({ demos, docs }) {
+  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/components/typography.js b/docs/pages/components/typography.js
index af4fd81d18b8e3..67cb531135517d 100644
--- a/docs/pages/components/typography.js
+++ b/docs/pages/components/typography.js
@@ -1,14 +1,21 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-const req = require.context('docs/src/pages/components/typography', false, /\.(md|js|tsx)$/);
-const reqSource = require.context(
+const pageFilename = 'components/typography';
+const requireDemo = require.context('docs/src/pages/components/typography', false, /\.(js|tsx)$/);
+const requireRaw = require.context(
   '!raw-loader!../../src/pages/components/typography',
   false,
-  /\.(js|tsx)$/,
+  /\.(js|md|tsx)$/,
 );
-const reqPrefix = 'pages/components/typography';
 
-export default function Page() {
-  return <MarkdownDocs req={req} reqSource={reqSource} reqPrefix={reqPrefix} />;
+// eslint-disable-next-line react/prop-types
+export default function Page({ demos, docs }) {
+  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/components/use-media-query.js b/docs/pages/components/use-media-query.js
index 41f1a45d06ba56..ab81701ba92c23 100644
--- a/docs/pages/components/use-media-query.js
+++ b/docs/pages/components/use-media-query.js
@@ -1,14 +1,25 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-const req = require.context('docs/src/pages/components/use-media-query', false, /\.(md|js|tsx)$/);
-const reqSource = require.context(
-  '!raw-loader!../../src/pages/components/use-media-query',
+const pageFilename = 'components/use-media-query';
+const requireDemo = require.context(
+  'docs/src/pages/components/use-media-query',
   false,
   /\.(js|tsx)$/,
 );
-const reqPrefix = 'pages/components/use-media-query';
+const requireRaw = require.context(
+  '!raw-loader!../../src/pages/components/use-media-query',
+  false,
+  /\.(js|md|tsx)$/,
+);
 
-export default function Page() {
-  return <MarkdownDocs req={req} reqSource={reqSource} reqPrefix={reqPrefix} />;
+// eslint-disable-next-line react/prop-types
+export default function Page({ demos, docs }) {
+  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/customization/breakpoints.js b/docs/pages/customization/breakpoints.js
index 17a716e4382852..67700fbac5f063 100644
--- a/docs/pages/customization/breakpoints.js
+++ b/docs/pages/customization/breakpoints.js
@@ -1,14 +1,25 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-const req = require.context('docs/src/pages/customization/breakpoints', false, /\.(md|js|tsx)$/);
-const reqSource = require.context(
-  '!raw-loader!../../src/pages/customization/breakpoints',
+const pageFilename = 'customization/breakpoints';
+const requireDemo = require.context(
+  'docs/src/pages/customization/breakpoints',
   false,
   /\.(js|tsx)$/,
 );
-const reqPrefix = 'pages/customization/breakpoints';
+const requireRaw = require.context(
+  '!raw-loader!../../src/pages/customization/breakpoints',
+  false,
+  /\.(js|md|tsx)$/,
+);
 
-export default function Page() {
-  return <MarkdownDocs req={req} reqSource={reqSource} reqPrefix={reqPrefix} />;
+// eslint-disable-next-line react/prop-types
+export default function Page({ demos, docs }) {
+  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/customization/color.js b/docs/pages/customization/color.js
index 8e3a0e68ef630b..75a47d7833d138 100644
--- a/docs/pages/customization/color.js
+++ b/docs/pages/customization/color.js
@@ -1,14 +1,21 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-const req = require.context('docs/src/pages/customization/color', false, /\.(md|js|tsx)$/);
-const reqSource = require.context(
+const pageFilename = 'customization/color';
+const requireDemo = require.context('docs/src/pages/customization/color', false, /\.(js|tsx)$/);
+const requireRaw = require.context(
   '!raw-loader!../../src/pages/customization/color',
   false,
-  /\.(js|tsx)$/,
+  /\.(js|md|tsx)$/,
 );
-const reqPrefix = 'pages/customization/color';
 
-export default function Page() {
-  return <MarkdownDocs req={req} reqSource={reqSource} reqPrefix={reqPrefix} />;
+// eslint-disable-next-line react/prop-types
+export default function Page({ demos, docs }) {
+  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/customization/components.js b/docs/pages/customization/components.js
index 8e1eabe5db82f5..e1540703b9429f 100644
--- a/docs/pages/customization/components.js
+++ b/docs/pages/customization/components.js
@@ -1,14 +1,25 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-const req = require.context('docs/src/pages/customization/components', false, /\.(md|js|tsx)$/);
-const reqSource = require.context(
-  '!raw-loader!../../src/pages/customization/components',
+const pageFilename = 'customization/components';
+const requireDemo = require.context(
+  'docs/src/pages/customization/components',
   false,
   /\.(js|tsx)$/,
 );
-const reqPrefix = 'pages/customization/components';
+const requireRaw = require.context(
+  '!raw-loader!../../src/pages/customization/components',
+  false,
+  /\.(js|md|tsx)$/,
+);
 
-export default function Page() {
-  return <MarkdownDocs req={req} reqSource={reqSource} reqPrefix={reqPrefix} />;
+// eslint-disable-next-line react/prop-types
+export default function Page({ demos, docs }) {
+  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/customization/default-theme.js b/docs/pages/customization/default-theme.js
index 0e7d3429845267..b3df3b2671f4f7 100644
--- a/docs/pages/customization/default-theme.js
+++ b/docs/pages/customization/default-theme.js
@@ -1,14 +1,25 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-const req = require.context('docs/src/pages/customization/default-theme', false, /\.(md|js|tsx)$/);
-const reqSource = require.context(
-  '!raw-loader!../../src/pages/customization/default-theme',
+const pageFilename = 'customization/default-theme';
+const requireDemo = require.context(
+  'docs/src/pages/customization/default-theme',
   false,
   /\.(js|tsx)$/,
 );
-const reqPrefix = 'pages/customization/default-theme';
+const requireRaw = require.context(
+  '!raw-loader!../../src/pages/customization/default-theme',
+  false,
+  /\.(js|md|tsx)$/,
+);
 
-export default function Page() {
-  return <MarkdownDocs req={req} reqSource={reqSource} reqPrefix={reqPrefix} />;
+// eslint-disable-next-line react/prop-types
+export default function Page({ demos, docs }) {
+  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/customization/density.js b/docs/pages/customization/density.js
index 45641c0f496615..dc46511776fde4 100644
--- a/docs/pages/customization/density.js
+++ b/docs/pages/customization/density.js
@@ -1,14 +1,21 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-const req = require.context('docs/src/pages/customization/density', false, /\.(md|js|tsx)$/);
-const reqSource = require.context(
+const pageFilename = 'customization/density';
+const requireDemo = require.context('docs/src/pages/customization/density', false, /\.(js|tsx)$/);
+const requireRaw = require.context(
   '!raw-loader!../../src/pages/customization/density',
   false,
-  /\.(js|tsx)$/,
+  /\.(js|md|tsx)$/,
 );
-const reqPrefix = 'pages/customization/density';
 
-export default function Page() {
-  return <MarkdownDocs req={req} reqSource={reqSource} reqPrefix={reqPrefix} />;
+// eslint-disable-next-line react/prop-types
+export default function Page({ demos, docs }) {
+  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/customization/globals.js b/docs/pages/customization/globals.js
index 3bdb723dca5302..ea28b517c4d354 100644
--- a/docs/pages/customization/globals.js
+++ b/docs/pages/customization/globals.js
@@ -1,14 +1,21 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-const req = require.context('docs/src/pages/customization/globals', false, /\.(md|js|tsx)$/);
-const reqSource = require.context(
+const pageFilename = 'customization/globals';
+const requireDemo = require.context('docs/src/pages/customization/globals', false, /\.(js|tsx)$/);
+const requireRaw = require.context(
   '!raw-loader!../../src/pages/customization/globals',
   false,
-  /\.(js|tsx)$/,
+  /\.(js|md|tsx)$/,
 );
-const reqPrefix = 'pages/customization/globals';
 
-export default function Page() {
-  return <MarkdownDocs req={req} reqSource={reqSource} reqPrefix={reqPrefix} />;
+// eslint-disable-next-line react/prop-types
+export default function Page({ demos, docs }) {
+  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/customization/palette.js b/docs/pages/customization/palette.js
index 7dc1295c689143..83951f2c334aff 100644
--- a/docs/pages/customization/palette.js
+++ b/docs/pages/customization/palette.js
@@ -1,14 +1,21 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-const req = require.context('docs/src/pages/customization/palette', false, /\.(md|js|tsx)$/);
-const reqSource = require.context(
+const pageFilename = 'customization/palette';
+const requireDemo = require.context('docs/src/pages/customization/palette', false, /\.(js|tsx)$/);
+const requireRaw = require.context(
   '!raw-loader!../../src/pages/customization/palette',
   false,
-  /\.(js|tsx)$/,
+  /\.(js|md|tsx)$/,
 );
-const reqPrefix = 'pages/customization/palette';
 
-export default function Page() {
-  return <MarkdownDocs req={req} reqSource={reqSource} reqPrefix={reqPrefix} />;
+// eslint-disable-next-line react/prop-types
+export default function Page({ demos, docs }) {
+  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/customization/spacing.js b/docs/pages/customization/spacing.js
index d00ed68eaa1f39..0176ea0e5a90f4 100644
--- a/docs/pages/customization/spacing.js
+++ b/docs/pages/customization/spacing.js
@@ -1,14 +1,21 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-const req = require.context('docs/src/pages/customization/spacing', false, /\.(md|js|tsx)$/);
-const reqSource = require.context(
+const pageFilename = 'customization/spacing';
+const requireDemo = require.context('docs/src/pages/customization/spacing', false, /\.(js|tsx)$/);
+const requireRaw = require.context(
   '!raw-loader!../../src/pages/customization/spacing',
   false,
-  /\.(js|tsx)$/,
+  /\.(js|md|tsx)$/,
 );
-const reqPrefix = 'pages/customization/spacing';
 
-export default function Page() {
-  return <MarkdownDocs req={req} reqSource={reqSource} reqPrefix={reqPrefix} />;
+// eslint-disable-next-line react/prop-types
+export default function Page({ demos, docs }) {
+  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/customization/theming.js b/docs/pages/customization/theming.js
index 47353b81e8d905..76e923ccbfa2c6 100644
--- a/docs/pages/customization/theming.js
+++ b/docs/pages/customization/theming.js
@@ -1,14 +1,21 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-const req = require.context('docs/src/pages/customization/theming', false, /\.(md|js|tsx)$/);
-const reqSource = require.context(
+const pageFilename = 'customization/theming';
+const requireDemo = require.context('docs/src/pages/customization/theming', false, /\.(js|tsx)$/);
+const requireRaw = require.context(
   '!raw-loader!../../src/pages/customization/theming',
   false,
-  /\.(js|tsx)$/,
+  /\.(js|md|tsx)$/,
 );
-const reqPrefix = 'pages/customization/theming';
 
-export default function Page() {
-  return <MarkdownDocs req={req} reqSource={reqSource} reqPrefix={reqPrefix} />;
+// eslint-disable-next-line react/prop-types
+export default function Page({ demos, docs }) {
+  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/customization/typography.js b/docs/pages/customization/typography.js
index 4b8e8a13463b52..bc5340ed74f7e9 100644
--- a/docs/pages/customization/typography.js
+++ b/docs/pages/customization/typography.js
@@ -1,14 +1,25 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-const req = require.context('docs/src/pages/customization/typography', false, /\.(md|js|tsx)$/);
-const reqSource = require.context(
-  '!raw-loader!../../src/pages/customization/typography',
+const pageFilename = 'customization/typography';
+const requireDemo = require.context(
+  'docs/src/pages/customization/typography',
   false,
   /\.(js|tsx)$/,
 );
-const reqPrefix = 'pages/customization/typography';
+const requireRaw = require.context(
+  '!raw-loader!../../src/pages/customization/typography',
+  false,
+  /\.(js|md|tsx)$/,
+);
 
-export default function Page() {
-  return <MarkdownDocs req={req} reqSource={reqSource} reqPrefix={reqPrefix} />;
+// eslint-disable-next-line react/prop-types
+export default function Page({ demos, docs }) {
+  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/customization/z-index.js b/docs/pages/customization/z-index.js
index 46a5af1dfa4611..1f9d2d9d3551e4 100644
--- a/docs/pages/customization/z-index.js
+++ b/docs/pages/customization/z-index.js
@@ -1,14 +1,21 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-const req = require.context('docs/src/pages/customization/z-index', false, /\.(md|js|tsx)$/);
-const reqSource = require.context(
+const pageFilename = 'customization/z-index';
+const requireDemo = require.context('docs/src/pages/customization/z-index', false, /\.(js|tsx)$/);
+const requireRaw = require.context(
   '!raw-loader!../../src/pages/customization/z-index',
   false,
-  /\.(js|tsx)$/,
+  /\.(js|md|tsx)$/,
 );
-const reqPrefix = 'pages/customization/z-index';
 
-export default function Page() {
-  return <MarkdownDocs req={req} reqSource={reqSource} reqPrefix={reqPrefix} />;
+// eslint-disable-next-line react/prop-types
+export default function Page({ demos, docs }) {
+  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/discover-more/backers.js b/docs/pages/discover-more/backers.js
index 09319595a6b9df..b471b2c628f4e5 100644
--- a/docs/pages/discover-more/backers.js
+++ b/docs/pages/discover-more/backers.js
@@ -1,14 +1,21 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-const req = require.context('docs/src/pages/discover-more/backers', false, /\.(md|js|tsx)$/);
-const reqSource = require.context(
+const pageFilename = 'discover-more/backers';
+const requireDemo = require.context('docs/src/pages/discover-more/backers', false, /\.(js|tsx)$/);
+const requireRaw = require.context(
   '!raw-loader!../../src/pages/discover-more/backers',
   false,
-  /\.(js|tsx)$/,
+  /\.(js|md|tsx)$/,
 );
-const reqPrefix = 'pages/discover-more/backers';
 
-export default function Page() {
-  return <MarkdownDocs req={req} reqSource={reqSource} disableAd reqPrefix={reqPrefix} />;
+// eslint-disable-next-line react/prop-types
+export default function Page({ demos, docs }) {
+  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/discover-more/changelog.js b/docs/pages/discover-more/changelog.js
index 39f6b6df007c90..1395aff72c3728 100644
--- a/docs/pages/discover-more/changelog.js
+++ b/docs/pages/discover-more/changelog.js
@@ -1,14 +1,21 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-const req = require.context('docs/src/pages/discover-more/changelog', false, /\.(md|js|tsx)$/);
-const reqSource = require.context(
+const pageFilename = 'discover-more/changelog';
+const requireDemo = require.context('docs/src/pages/discover-more/changelog', false, /\.(js|tsx)$/);
+const requireRaw = require.context(
   '!raw-loader!../../src/pages/discover-more/changelog',
   false,
-  /\.(js|tsx)$/,
+  /\.(js|md|tsx)$/,
 );
-const reqPrefix = 'pages/discover-more/changelog';
 
-export default function Page() {
-  return <MarkdownDocs req={req} reqSource={reqSource} reqPrefix={reqPrefix} />;
+// eslint-disable-next-line react/prop-types
+export default function Page({ demos, docs }) {
+  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/discover-more/languages.js b/docs/pages/discover-more/languages.js
index 3db0215b19011e..34be0e05a1b603 100644
--- a/docs/pages/discover-more/languages.js
+++ b/docs/pages/discover-more/languages.js
@@ -1,14 +1,21 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-const req = require.context('docs/src/pages/discover-more/languages', false, /\.(md|js|tsx)$/);
-const reqSource = require.context(
+const pageFilename = 'discover-more/languages';
+const requireDemo = require.context('docs/src/pages/discover-more/languages', false, /\.(js|tsx)$/);
+const requireRaw = require.context(
   '!raw-loader!../../src/pages/discover-more/languages',
   false,
-  /\.(js|tsx)$/,
+  /\.(js|md|tsx)$/,
 );
-const reqPrefix = 'pages/discover-more/languages';
 
-export default function Page() {
-  return <MarkdownDocs req={req} reqSource={reqSource} reqPrefix={reqPrefix} />;
+// eslint-disable-next-line react/prop-types
+export default function Page({ demos, docs }) {
+  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/discover-more/related-projects.js b/docs/pages/discover-more/related-projects.js
index 5e0bed52285168..fc4e7efc2de3a2 100644
--- a/docs/pages/discover-more/related-projects.js
+++ b/docs/pages/discover-more/related-projects.js
@@ -1,18 +1,25 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-const req = require.context(
+const pageFilename = 'discover-more/related-projects';
+const requireDemo = require.context(
   'docs/src/pages/discover-more/related-projects',
   false,
-  /\.(md|js|tsx)$/,
+  /\.(js|tsx)$/,
 );
-const reqSource = require.context(
+const requireRaw = require.context(
   '!raw-loader!../../src/pages/discover-more/related-projects',
   false,
-  /\.(js|tsx)$/,
+  /\.(js|md|tsx)$/,
 );
-const reqPrefix = 'pages/discover-more/related-projects';
 
-export default function Page() {
-  return <MarkdownDocs req={req} reqSource={reqSource} reqPrefix={reqPrefix} />;
+// eslint-disable-next-line react/prop-types
+export default function Page({ demos, docs }) {
+  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/discover-more/roadmap.js b/docs/pages/discover-more/roadmap.js
index 8f25ce86a9710c..2821ccb5924fe6 100644
--- a/docs/pages/discover-more/roadmap.js
+++ b/docs/pages/discover-more/roadmap.js
@@ -1,14 +1,21 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-const req = require.context('docs/src/pages/discover-more/roadmap', false, /\.(md|js|tsx)$/);
-const reqSource = require.context(
+const pageFilename = 'discover-more/roadmap';
+const requireDemo = require.context('docs/src/pages/discover-more/roadmap', false, /\.(js|tsx)$/);
+const requireRaw = require.context(
   '!raw-loader!../../src/pages/discover-more/roadmap',
   false,
-  /\.(js|tsx)$/,
+  /\.(js|md|tsx)$/,
 );
-const reqPrefix = 'pages/discover-more/roadmap';
 
-export default function Page() {
-  return <MarkdownDocs req={req} reqSource={reqSource} reqPrefix={reqPrefix} />;
+// eslint-disable-next-line react/prop-types
+export default function Page({ demos, docs }) {
+  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/discover-more/showcase.js b/docs/pages/discover-more/showcase.js
index 5441f6c7917e2e..78010ffca8e26c 100644
--- a/docs/pages/discover-more/showcase.js
+++ b/docs/pages/discover-more/showcase.js
@@ -1,16 +1,21 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-const req = require.context('docs/src/pages/discover-more/showcase', false, /\.(md|js|tsx)$/);
-const reqSource = require.context(
+const pageFilename = 'discover-more/showcase';
+const requireDemo = require.context('docs/src/pages/discover-more/showcase', false, /\.(js|tsx)$/);
+const requireRaw = require.context(
   '!raw-loader!../../src/pages/discover-more/showcase',
   false,
-  /\.(js|tsx)$/,
+  /\.(js|md|tsx)$/,
 );
-const reqPrefix = 'pages/discover-more/showcase';
 
-function Page() {
-  return <MarkdownDocs disableToc req={req} reqSource={reqSource} reqPrefix={reqPrefix} />;
+// eslint-disable-next-line react/prop-types
+export default function Page({ demos, docs }) {
+  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
 
-export default Page;
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/discover-more/team.js b/docs/pages/discover-more/team.js
index 059d199c78268e..fcffd51223aeec 100644
--- a/docs/pages/discover-more/team.js
+++ b/docs/pages/discover-more/team.js
@@ -1,14 +1,21 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-const req = require.context('docs/src/pages/discover-more/team', false, /\.(md|js|tsx)$/);
-const reqSource = require.context(
+const pageFilename = 'discover-more/team';
+const requireDemo = require.context('docs/src/pages/discover-more/team', false, /\.(js|tsx)$/);
+const requireRaw = require.context(
   '!raw-loader!../../src/pages/discover-more/team',
   false,
-  /\.(js|tsx)$/,
+  /\.(js|md|tsx)$/,
 );
-const reqPrefix = 'pages/discover-more/team';
 
-export default function Page() {
-  return <MarkdownDocs req={req} reqSource={reqSource} reqPrefix={reqPrefix} />;
+// eslint-disable-next-line react/prop-types
+export default function Page({ demos, docs }) {
+  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/discover-more/vision.js b/docs/pages/discover-more/vision.js
index 7829786c97e49a..e52218349ab5e9 100644
--- a/docs/pages/discover-more/vision.js
+++ b/docs/pages/discover-more/vision.js
@@ -1,14 +1,21 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-const req = require.context('docs/src/pages/discover-more/vision', false, /\.(md|js|tsx)$/);
-const reqSource = require.context(
+const pageFilename = 'discover-more/vision';
+const requireDemo = require.context('docs/src/pages/discover-more/vision', false, /\.(js|tsx)$/);
+const requireRaw = require.context(
   '!raw-loader!../../src/pages/discover-more/vision',
   false,
-  /\.(js|tsx)$/,
+  /\.(js|md|tsx)$/,
 );
-const reqPrefix = 'pages/discover-more/vision';
 
-export default function Page() {
-  return <MarkdownDocs req={req} reqSource={reqSource} reqPrefix={reqPrefix} />;
+// eslint-disable-next-line react/prop-types
+export default function Page({ demos, docs }) {
+  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/getting-started/example-projects.js b/docs/pages/getting-started/example-projects.js
index de5b32e59e114b..00b6e44b7f2363 100644
--- a/docs/pages/getting-started/example-projects.js
+++ b/docs/pages/getting-started/example-projects.js
@@ -1,18 +1,25 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-const req = require.context(
+const pageFilename = 'getting-started/example-projects';
+const requireDemo = require.context(
   'docs/src/pages/getting-started/example-projects',
   false,
-  /\.(md|js|tsx)$/,
+  /\.(js|tsx)$/,
 );
-const reqSource = require.context(
+const requireRaw = require.context(
   '!raw-loader!../../src/pages/getting-started/example-projects',
   false,
-  /\.(js|tsx)$/,
+  /\.(js|md|tsx)$/,
 );
-const reqPrefix = 'pages/getting-started/example-projects';
 
-export default function Page() {
-  return <MarkdownDocs req={req} reqSource={reqSource} reqPrefix={reqPrefix} />;
+// eslint-disable-next-line react/prop-types
+export default function Page({ demos, docs }) {
+  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/getting-started/faq.js b/docs/pages/getting-started/faq.js
index 3e564bf8fe92fa..864ffb3b9a509f 100644
--- a/docs/pages/getting-started/faq.js
+++ b/docs/pages/getting-started/faq.js
@@ -1,14 +1,21 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-const req = require.context('docs/src/pages/getting-started/faq', false, /\.(md|js|tsx)$/);
-const reqSource = require.context(
+const pageFilename = 'getting-started/faq';
+const requireDemo = require.context('docs/src/pages/getting-started/faq', false, /\.(js|tsx)$/);
+const requireRaw = require.context(
   '!raw-loader!../../src/pages/getting-started/faq',
   false,
-  /\.(js|tsx)$/,
+  /\.(js|md|tsx)$/,
 );
-const reqPrefix = 'pages/getting-started/faq';
 
-export default function Page() {
-  return <MarkdownDocs req={req} reqSource={reqSource} reqPrefix={reqPrefix} />;
+// eslint-disable-next-line react/prop-types
+export default function Page({ demos, docs }) {
+  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/getting-started/installation.js b/docs/pages/getting-started/installation.js
index 2282c860f8e3a6..e1792d2892b99d 100644
--- a/docs/pages/getting-started/installation.js
+++ b/docs/pages/getting-started/installation.js
@@ -1,16 +1,25 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-const req = require.context('docs/src/pages/getting-started/installation', false, /\.(md|js|tsx)$/);
-const reqSource = require.context(
-  '!raw-loader!../../src/pages/getting-started/installation',
+const pageFilename = 'getting-started/installation';
+const requireDemo = require.context(
+  'docs/src/pages/getting-started/installation',
   false,
   /\.(js|tsx)$/,
 );
-const reqPrefix = 'pages/getting-started/installation';
+const requireRaw = require.context(
+  '!raw-loader!../../src/pages/getting-started/installation',
+  false,
+  /\.(js|md|tsx)$/,
+);
 
-function Page() {
-  return <MarkdownDocs disableAd req={req} reqSource={reqSource} reqPrefix={reqPrefix} />;
+// eslint-disable-next-line react/prop-types
+export default function Page({ demos, docs }) {
+  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
 
-export default Page;
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/getting-started/learn.js b/docs/pages/getting-started/learn.js
index b1f006de25db67..40b96c683d5ab9 100644
--- a/docs/pages/getting-started/learn.js
+++ b/docs/pages/getting-started/learn.js
@@ -1,14 +1,21 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-const req = require.context('docs/src/pages/getting-started/learn', false, /\.(md|js|tsx)$/);
-const reqSource = require.context(
+const pageFilename = 'getting-started/learn';
+const requireDemo = require.context('docs/src/pages/getting-started/learn', false, /\.(js|tsx)$/);
+const requireRaw = require.context(
   '!raw-loader!../../src/pages/getting-started/learn',
   false,
-  /\.(js|tsx)$/,
+  /\.(js|md|tsx)$/,
 );
-const reqPrefix = 'pages/getting-started/learn';
 
-export default function Page() {
-  return <MarkdownDocs req={req} reqSource={reqSource} reqPrefix={reqPrefix} />;
+// eslint-disable-next-line react/prop-types
+export default function Page({ demos, docs }) {
+  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/getting-started/support.js b/docs/pages/getting-started/support.js
index 55b53b7c30285f..fa18e32b72f4b4 100644
--- a/docs/pages/getting-started/support.js
+++ b/docs/pages/getting-started/support.js
@@ -1,14 +1,21 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-const req = require.context('docs/src/pages/getting-started/support', false, /\.(md|js|tsx)$/);
-const reqSource = require.context(
+const pageFilename = 'getting-started/support';
+const requireDemo = require.context('docs/src/pages/getting-started/support', false, /\.(js|tsx)$/);
+const requireRaw = require.context(
   '!raw-loader!../../src/pages/getting-started/support',
   false,
-  /\.(js|tsx)$/,
+  /\.(js|md|tsx)$/,
 );
-const reqPrefix = 'pages/support';
 
-export default function Page() {
-  return <MarkdownDocs req={req} reqSource={reqSource} reqPrefix={reqPrefix} />;
+// eslint-disable-next-line react/prop-types
+export default function Page({ demos, docs }) {
+  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/getting-started/supported-components.js b/docs/pages/getting-started/supported-components.js
index 373cf9a64caab9..314a2e2946346c 100644
--- a/docs/pages/getting-started/supported-components.js
+++ b/docs/pages/getting-started/supported-components.js
@@ -1,18 +1,25 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-const req = require.context(
+const pageFilename = 'getting-started/supported-components';
+const requireDemo = require.context(
   'docs/src/pages/getting-started/supported-components',
-  true,
-  /\.md|\.js$/,
+  false,
+  /\.(js|tsx)$/,
 );
-const reqSource = require.context(
+const requireRaw = require.context(
   '!raw-loader!../../src/pages/getting-started/supported-components',
   false,
-  /\.(js|tsx)$/,
+  /\.(js|md|tsx)$/,
 );
-const reqPrefix = 'pages/getting-started/supported-components';
 
-export default function Page() {
-  return <MarkdownDocs req={req} reqSource={reqSource} reqPrefix={reqPrefix} />;
+// eslint-disable-next-line react/prop-types
+export default function Page({ demos, docs }) {
+  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/getting-started/supported-platforms.js b/docs/pages/getting-started/supported-platforms.js
index 3955b9fc502d77..f1fb171c72e9be 100644
--- a/docs/pages/getting-started/supported-platforms.js
+++ b/docs/pages/getting-started/supported-platforms.js
@@ -1,18 +1,25 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-const req = require.context(
+const pageFilename = 'getting-started/supported-platforms';
+const requireDemo = require.context(
   'docs/src/pages/getting-started/supported-platforms',
-  true,
-  /\.md|\.js$/,
+  false,
+  /\.(js|tsx)$/,
 );
-const reqSource = require.context(
+const requireRaw = require.context(
   '!raw-loader!../../src/pages/getting-started/supported-platforms',
   false,
-  /\.(js|tsx)$/,
+  /\.(js|md|tsx)$/,
 );
-const reqPrefix = 'pages/getting-started/supported-platforms';
 
-export default function Page() {
-  return <MarkdownDocs req={req} reqSource={reqSource} reqPrefix={reqPrefix} />;
+// eslint-disable-next-line react/prop-types
+export default function Page({ demos, docs }) {
+  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/getting-started/templates.js b/docs/pages/getting-started/templates.js
index b5653e45a7bc63..129ea2b760c3fb 100644
--- a/docs/pages/getting-started/templates.js
+++ b/docs/pages/getting-started/templates.js
@@ -1,16 +1,25 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-const req = require.context('docs/src/pages/getting-started/templates', false, /\.md|\.js$/);
-const reqSource = require.context(
-  '!raw-loader!../../src/pages/getting-started/templates',
+const pageFilename = 'getting-started/templates';
+const requireDemo = require.context(
+  'docs/src/pages/getting-started/templates',
   false,
   /\.(js|tsx)$/,
 );
-const reqPrefix = 'pages/getting-started/templates';
+const requireRaw = require.context(
+  '!raw-loader!../../src/pages/getting-started/templates',
+  false,
+  /\.(js|md|tsx)$/,
+);
 
-function Page() {
-  return <MarkdownDocs disableToc req={req} reqSource={reqSource} reqPrefix={reqPrefix} />;
+// eslint-disable-next-line react/prop-types
+export default function Page({ demos, docs }) {
+  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
 
-export default Page;
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/getting-started/usage.js b/docs/pages/getting-started/usage.js
index c2133815655617..a49b4c6e7c2e18 100644
--- a/docs/pages/getting-started/usage.js
+++ b/docs/pages/getting-started/usage.js
@@ -1,14 +1,21 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-const req = require.context('docs/src/pages/getting-started/usage', false, /\.(md|js|tsx)$/);
-const reqSource = require.context(
+const pageFilename = 'getting-started/usage';
+const requireDemo = require.context('docs/src/pages/getting-started/usage', false, /\.(js|tsx)$/);
+const requireRaw = require.context(
   '!raw-loader!../../src/pages/getting-started/usage',
   false,
-  /\.(js|tsx)$/,
+  /\.(js|md|tsx)$/,
 );
-const reqPrefix = 'pages/getting-started/usage';
 
-export default function Page() {
-  return <MarkdownDocs req={req} reqSource={reqSource} reqPrefix={reqPrefix} />;
+// eslint-disable-next-line react/prop-types
+export default function Page({ demos, docs }) {
+  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/guides/api.js b/docs/pages/guides/api.js
index 4bd621e37e3768..66b61d6cb1ae8b 100644
--- a/docs/pages/guides/api.js
+++ b/docs/pages/guides/api.js
@@ -1,10 +1,21 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-const req = require.context('docs/src/pages/guides/api', false, /\.(md|js|tsx)$/);
-const reqSource = require.context('!raw-loader!../../src/pages/guides/api', false, /\.(js|tsx)$/);
-const reqPrefix = 'pages/guides/api';
+const pageFilename = 'guides/api';
+const requireDemo = require.context('docs/src/pages/guides/api', false, /\.(js|tsx)$/);
+const requireRaw = require.context(
+  '!raw-loader!../../src/pages/guides/api',
+  false,
+  /\.(js|md|tsx)$/,
+);
 
-export default function Page() {
-  return <MarkdownDocs req={req} reqSource={reqSource} reqPrefix={reqPrefix} />;
+// eslint-disable-next-line react/prop-types
+export default function Page({ demos, docs }) {
+  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/guides/composition.js b/docs/pages/guides/composition.js
index f59a5087358e01..edfba20f6b33ad 100644
--- a/docs/pages/guides/composition.js
+++ b/docs/pages/guides/composition.js
@@ -1,14 +1,21 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-const req = require.context('docs/src/pages/guides/composition', false, /\.(md|js|tsx)$/);
-const reqSource = require.context(
+const pageFilename = 'guides/composition';
+const requireDemo = require.context('docs/src/pages/guides/composition', false, /\.(js|tsx)$/);
+const requireRaw = require.context(
   '!raw-loader!../../src/pages/guides/composition',
   false,
-  /\.(js|tsx)$/,
+  /\.(js|md|tsx)$/,
 );
-const reqPrefix = 'pages/guides/composition';
 
-export default function Page() {
-  return <MarkdownDocs req={req} reqSource={reqSource} reqPrefix={reqPrefix} />;
+// eslint-disable-next-line react/prop-types
+export default function Page({ demos, docs }) {
+  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/guides/flow.js b/docs/pages/guides/flow.js
index f05f7aedb7b1d9..25c66b7e76b9ae 100644
--- a/docs/pages/guides/flow.js
+++ b/docs/pages/guides/flow.js
@@ -1,10 +1,21 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-const req = require.context('docs/src/pages/guides/flow', false, /\.(md|js|tsx)$/);
-const reqSource = require.context('!raw-loader!../../src/pages/guides/flow', false, /\.(js|tsx)$/);
-const reqPrefix = 'pages/guides/flow';
+const pageFilename = 'guides/flow';
+const requireDemo = require.context('docs/src/pages/guides/flow', false, /\.(js|tsx)$/);
+const requireRaw = require.context(
+  '!raw-loader!../../src/pages/guides/flow',
+  false,
+  /\.(js|md|tsx)$/,
+);
 
-export default function Page() {
-  return <MarkdownDocs req={req} reqSource={reqSource} reqPrefix={reqPrefix} />;
+// eslint-disable-next-line react/prop-types
+export default function Page({ demos, docs }) {
+  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/guides/interoperability.js b/docs/pages/guides/interoperability.js
index 7845496141a278..b855c36544b4ae 100644
--- a/docs/pages/guides/interoperability.js
+++ b/docs/pages/guides/interoperability.js
@@ -1,14 +1,21 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-const req = require.context('docs/src/pages/guides/interoperability', false, /\.(md|js|tsx)$/);
-const reqSource = require.context(
+const pageFilename = 'guides/interoperability';
+const requireDemo = require.context('docs/src/pages/guides/interoperability', false, /\.(js|tsx)$/);
+const requireRaw = require.context(
   '!raw-loader!../../src/pages/guides/interoperability',
   false,
-  /\.(js|tsx)$/,
+  /\.(js|md|tsx)$/,
 );
-const reqPrefix = 'pages/guides/interoperability';
 
-export default function Page() {
-  return <MarkdownDocs req={req} reqSource={reqSource} reqPrefix={reqPrefix} />;
+// eslint-disable-next-line react/prop-types
+export default function Page({ demos, docs }) {
+  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/guides/localization.js b/docs/pages/guides/localization.js
index 89861be719ea5b..0a5dbd7ded5a4c 100644
--- a/docs/pages/guides/localization.js
+++ b/docs/pages/guides/localization.js
@@ -1,14 +1,21 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-const req = require.context('docs/src/pages/guides/localization', false, /\.(md|js|tsx)$/);
-const reqSource = require.context(
+const pageFilename = 'guides/localization';
+const requireDemo = require.context('docs/src/pages/guides/localization', false, /\.(js|tsx)$/);
+const requireRaw = require.context(
   '!raw-loader!../../src/pages/guides/localization',
   false,
-  /\.(js|tsx)$/,
+  /\.(js|md|tsx)$/,
 );
-const reqPrefix = 'pages/guides/localization';
 
-export default function Page() {
-  return <MarkdownDocs req={req} reqSource={reqSource} reqPrefix={reqPrefix} />;
+// eslint-disable-next-line react/prop-types
+export default function Page({ demos, docs }) {
+  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/guides/migration-v0x.js b/docs/pages/guides/migration-v0x.js
index f0657368a557ef..2d9b0ab0dcd4a3 100644
--- a/docs/pages/guides/migration-v0x.js
+++ b/docs/pages/guides/migration-v0x.js
@@ -1,14 +1,21 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-const req = require.context('docs/src/pages/guides/migration-v0x', false, /\.(md|js|tsx)$/);
-const reqSource = require.context(
+const pageFilename = 'guides/migration-v0x';
+const requireDemo = require.context('docs/src/pages/guides/migration-v0x', false, /\.(js|tsx)$/);
+const requireRaw = require.context(
   '!raw-loader!../../src/pages/guides/migration-v0x',
   false,
-  /\.(js|tsx)$/,
+  /\.(js|md|tsx)$/,
 );
-const reqPrefix = 'pages/guides/migration-v0x';
 
-export default function Page() {
-  return <MarkdownDocs req={req} reqSource={reqSource} reqPrefix={reqPrefix} />;
+// eslint-disable-next-line react/prop-types
+export default function Page({ demos, docs }) {
+  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/guides/migration-v3.js b/docs/pages/guides/migration-v3.js
index bbdb9bdfbd6de7..a08e764eecf781 100644
--- a/docs/pages/guides/migration-v3.js
+++ b/docs/pages/guides/migration-v3.js
@@ -1,14 +1,21 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-const req = require.context('docs/src/pages/guides/migration-v3', false, /\.(md|js|tsx)$/);
-const reqSource = require.context(
+const pageFilename = 'guides/migration-v3';
+const requireDemo = require.context('docs/src/pages/guides/migration-v3', false, /\.(js|tsx)$/);
+const requireRaw = require.context(
   '!raw-loader!../../src/pages/guides/migration-v3',
   false,
-  /\.(js|tsx)$/,
+  /\.(js|md|tsx)$/,
 );
-const reqPrefix = 'pages/guides/migration-v3';
 
-export default function Page() {
-  return <MarkdownDocs req={req} reqSource={reqSource} reqPrefix={reqPrefix} />;
+// eslint-disable-next-line react/prop-types
+export default function Page({ demos, docs }) {
+  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/guides/minimizing-bundle-size.js b/docs/pages/guides/minimizing-bundle-size.js
index c4a0611edd74f5..84592d66fcf076 100644
--- a/docs/pages/guides/minimizing-bundle-size.js
+++ b/docs/pages/guides/minimizing-bundle-size.js
@@ -1,18 +1,25 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-const req = require.context(
+const pageFilename = 'guides/minimizing-bundle-size';
+const requireDemo = require.context(
   'docs/src/pages/guides/minimizing-bundle-size',
   false,
-  /\.(md|js|tsx)$/,
+  /\.(js|tsx)$/,
 );
-const reqSource = require.context(
+const requireRaw = require.context(
   '!raw-loader!../../src/pages/guides/minimizing-bundle-size',
   false,
-  /\.(js|tsx)$/,
+  /\.(js|md|tsx)$/,
 );
-const reqPrefix = 'pages/guides/minimizing-bundle-size';
 
-export default function Page() {
-  return <MarkdownDocs req={req} reqSource={reqSource} reqPrefix={reqPrefix} />;
+// eslint-disable-next-line react/prop-types
+export default function Page({ demos, docs }) {
+  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/guides/responsive-ui.js b/docs/pages/guides/responsive-ui.js
index 042ba686d615ed..bb43bb39ac0e39 100644
--- a/docs/pages/guides/responsive-ui.js
+++ b/docs/pages/guides/responsive-ui.js
@@ -1,14 +1,21 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-const req = require.context('docs/src/pages/guides/responsive-ui', false, /\.(md|js|tsx)$/);
-const reqSource = require.context(
+const pageFilename = 'guides/responsive-ui';
+const requireDemo = require.context('docs/src/pages/guides/responsive-ui', false, /\.(js|tsx)$/);
+const requireRaw = require.context(
   '!raw-loader!../../src/pages/guides/responsive-ui',
   false,
-  /\.(js|tsx)$/,
+  /\.(js|md|tsx)$/,
 );
-const reqPrefix = 'pages/guides/responsive-ui';
 
-export default function Page() {
-  return <MarkdownDocs req={req} reqSource={reqSource} reqPrefix={reqPrefix} />;
+// eslint-disable-next-line react/prop-types
+export default function Page({ demos, docs }) {
+  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/guides/right-to-left.js b/docs/pages/guides/right-to-left.js
index 63987b72a82186..47f04ef7878e3b 100644
--- a/docs/pages/guides/right-to-left.js
+++ b/docs/pages/guides/right-to-left.js
@@ -1,14 +1,21 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-const req = require.context('docs/src/pages/guides/right-to-left', false, /\.(md|js|tsx)$/);
-const reqSource = require.context(
+const pageFilename = 'guides/right-to-left';
+const requireDemo = require.context('docs/src/pages/guides/right-to-left', false, /\.(js|tsx)$/);
+const requireRaw = require.context(
   '!raw-loader!../../src/pages/guides/right-to-left',
   false,
-  /\.(js|tsx)$/,
+  /\.(js|md|tsx)$/,
 );
-const reqPrefix = 'pages/guides/right-to-left';
 
-export default function Page() {
-  return <MarkdownDocs req={req} reqSource={reqSource} reqPrefix={reqPrefix} />;
+// eslint-disable-next-line react/prop-types
+export default function Page({ demos, docs }) {
+  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/guides/server-rendering.js b/docs/pages/guides/server-rendering.js
index 1b3805025115b9..552f4063f184a3 100644
--- a/docs/pages/guides/server-rendering.js
+++ b/docs/pages/guides/server-rendering.js
@@ -1,14 +1,21 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-const req = require.context('docs/src/pages/guides/server-rendering', false, /\.(md|js|tsx)$/);
-const reqSource = require.context(
+const pageFilename = 'guides/server-rendering';
+const requireDemo = require.context('docs/src/pages/guides/server-rendering', false, /\.(js|tsx)$/);
+const requireRaw = require.context(
   '!raw-loader!../../src/pages/guides/server-rendering',
   false,
-  /\.(js|tsx)$/,
+  /\.(js|md|tsx)$/,
 );
-const reqPrefix = 'pages/guides/server-rendering';
 
-export default function Page() {
-  return <MarkdownDocs req={req} reqSource={reqSource} reqPrefix={reqPrefix} />;
+// eslint-disable-next-line react/prop-types
+export default function Page({ demos, docs }) {
+  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/guides/testing.js b/docs/pages/guides/testing.js
index 55349c40d645c8..b4da5c17385a29 100644
--- a/docs/pages/guides/testing.js
+++ b/docs/pages/guides/testing.js
@@ -1,14 +1,21 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-const req = require.context('docs/src/pages/guides/testing', false, /\.(md|js|tsx)$/);
-const reqSource = require.context(
+const pageFilename = 'guides/testing';
+const requireDemo = require.context('docs/src/pages/guides/testing', false, /\.(js|tsx)$/);
+const requireRaw = require.context(
   '!raw-loader!../../src/pages/guides/testing',
   false,
-  /\.(js|tsx)$/,
+  /\.(js|md|tsx)$/,
 );
-const reqPrefix = 'pages/guides/testing';
 
-export default function Page() {
-  return <MarkdownDocs req={req} reqSource={reqSource} reqPrefix={reqPrefix} />;
+// eslint-disable-next-line react/prop-types
+export default function Page({ demos, docs }) {
+  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/guides/typescript.js b/docs/pages/guides/typescript.js
index 425987ac364df0..170923b49868d1 100644
--- a/docs/pages/guides/typescript.js
+++ b/docs/pages/guides/typescript.js
@@ -1,14 +1,21 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-const req = require.context('docs/src/pages/guides/typescript', false, /\.(md|js|tsx)$/);
-const reqSource = require.context(
+const pageFilename = 'guides/typescript';
+const requireDemo = require.context('docs/src/pages/guides/typescript', false, /\.(js|tsx)$/);
+const requireRaw = require.context(
   '!raw-loader!../../src/pages/guides/typescript',
   false,
-  /\.(js|tsx)$/,
+  /\.(js|md|tsx)$/,
 );
-const reqPrefix = 'pages/guides/typescript';
 
-export default function Page() {
-  return <MarkdownDocs req={req} reqSource={reqSource} reqPrefix={reqPrefix} />;
+// eslint-disable-next-line react/prop-types
+export default function Page({ demos, docs }) {
+  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/index.js b/docs/pages/index.js
index 5d7a4d8908ddb1..596d517555d247 100644
--- a/docs/pages/index.js
+++ b/docs/pages/index.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import * as PropTypes from 'prop-types';
 import { useSelector } from 'react-redux';
 import { makeStyles } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
@@ -7,7 +8,9 @@ import Container from '@material-ui/core/Container';
 import Steps from 'docs/src/pages/landing/Steps';
 import Themes from 'docs/src/pages/landing/Themes';
 import QuickWord from 'docs/src/pages/landing/QuickWord';
-import Sponsors from 'docs/src/pages/landing/Sponsors';
+import Sponsors, {
+  getInitialProps as getInitialSponsorsProps,
+} from 'docs/src/pages/landing/Sponsors';
 import Users from 'docs/src/pages/landing/Users';
 import Quotes from 'docs/src/pages/landing/Quotes';
 import Pro from 'docs/src/pages/landing/Pro';
@@ -101,7 +104,9 @@ const GettingStartedLink = React.forwardRef((props, ref) => {
   return <Link href="/getting-started/installation" naked ref={ref} {...props} />;
 });
 
-export default function LandingPage() {
+export default function LandingPage(props) {
+  const { sponsorsProps } = props;
+
   React.useEffect(() => {
     if (window.location.hash !== '' && window.location.hash !== '#main=content') {
       window.location.replace(`https://v0.material-ui.com/${window.location.hash}`);
@@ -165,7 +170,7 @@ export default function LandingPage() {
           <QuickWord />
           <Steps />
           <Themes />
-          <Sponsors />
+          <Sponsors {...sponsorsProps} />
           <Quotes />
           <Users />
         </main>
@@ -194,3 +199,13 @@ export default function LandingPage() {
     </AppFrame>
   );
 }
+
+LandingPage.propTypes = {
+  sponsorsProps: PropTypes.object.isRequired,
+};
+
+LandingPage.getInitialProps = async () => {
+  return {
+    sponsorsProps: await getInitialSponsorsProps(),
+  };
+};
diff --git a/docs/pages/styles/advanced.js b/docs/pages/styles/advanced.js
index 4e32f28a01ca41..5b09ab3c335257 100644
--- a/docs/pages/styles/advanced.js
+++ b/docs/pages/styles/advanced.js
@@ -1,14 +1,21 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-const req = require.context('docs/src/pages/styles/advanced', false, /\.(md|js|tsx)$/);
-const reqSource = require.context(
+const pageFilename = 'styles/advanced';
+const requireDemo = require.context('docs/src/pages/styles/advanced', false, /\.(js|tsx)$/);
+const requireRaw = require.context(
   '!raw-loader!../../src/pages/styles/advanced',
   false,
-  /\.(js|tsx)$/,
+  /\.(js|md|tsx)$/,
 );
-const reqPrefix = 'pages/styles/advanced';
 
-export default function Page() {
-  return <MarkdownDocs req={req} reqSource={reqSource} reqPrefix={reqPrefix} />;
+// eslint-disable-next-line react/prop-types
+export default function Page({ demos, docs }) {
+  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/styles/api.js b/docs/pages/styles/api.js
index 62d412ee4b3aac..db207cab503801 100644
--- a/docs/pages/styles/api.js
+++ b/docs/pages/styles/api.js
@@ -1,10 +1,21 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-const req = require.context('docs/src/pages/styles/api', false, /\.(md|js|tsx)$/);
-const reqSource = require.context('!raw-loader!../../src/pages/styles/api', false, /\.(js|tsx)$/);
-const reqPrefix = 'pages/styles/api';
+const pageFilename = 'styles/api';
+const requireDemo = require.context('docs/src/pages/styles/api', false, /\.(js|tsx)$/);
+const requireRaw = require.context(
+  '!raw-loader!../../src/pages/styles/api',
+  false,
+  /\.(js|md|tsx)$/,
+);
 
-export default function Page() {
-  return <MarkdownDocs req={req} reqSource={reqSource} reqPrefix={reqPrefix} />;
+// eslint-disable-next-line react/prop-types
+export default function Page({ demos, docs }) {
+  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/styles/basics.js b/docs/pages/styles/basics.js
index a5d5bb700becfd..72cae0519afa29 100644
--- a/docs/pages/styles/basics.js
+++ b/docs/pages/styles/basics.js
@@ -1,14 +1,21 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-const req = require.context('docs/src/pages/styles/basics', false, /\.(md|js|tsx)$/);
-const reqSource = require.context(
+const pageFilename = 'styles/basics';
+const requireDemo = require.context('docs/src/pages/styles/basics', false, /\.(js|tsx)$/);
+const requireRaw = require.context(
   '!raw-loader!../../src/pages/styles/basics',
   false,
-  /\.(js|tsx)$/,
+  /\.(js|md|tsx)$/,
 );
-const reqPrefix = 'pages/styles/basics';
 
-export default function Page() {
-  return <MarkdownDocs req={req} reqSource={reqSource} reqPrefix={reqPrefix} />;
+// eslint-disable-next-line react/prop-types
+export default function Page({ demos, docs }) {
+  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/system/api.js b/docs/pages/system/api.js
index aec3b99aa49952..b2451ede44a7e5 100644
--- a/docs/pages/system/api.js
+++ b/docs/pages/system/api.js
@@ -1,10 +1,21 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-const req = require.context('docs/src/pages/system/api', false, /\.(md|js|tsx)$/);
-const reqSource = require.context('!raw-loader!../../src/pages/system/api', false, /\.(js|tsx)$/);
-const reqPrefix = 'pages/system/api';
+const pageFilename = 'system/api';
+const requireDemo = require.context('docs/src/pages/system/api', false, /\.(js|tsx)$/);
+const requireRaw = require.context(
+  '!raw-loader!../../src/pages/system/api',
+  false,
+  /\.(js|md|tsx)$/,
+);
 
-export default function Page() {
-  return <MarkdownDocs req={req} reqSource={reqSource} reqPrefix={reqPrefix} />;
+// eslint-disable-next-line react/prop-types
+export default function Page({ demos, docs }) {
+  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/system/basics.js b/docs/pages/system/basics.js
index 31dc83252128a7..cee5eb1f74e01b 100644
--- a/docs/pages/system/basics.js
+++ b/docs/pages/system/basics.js
@@ -1,14 +1,21 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-const req = require.context('docs/src/pages/system/basics', false, /\.(md|js|tsx)$/);
-const reqSource = require.context(
+const pageFilename = 'system/basics';
+const requireDemo = require.context('docs/src/pages/system/basics', false, /\.(js|tsx)$/);
+const requireRaw = require.context(
   '!raw-loader!../../src/pages/system/basics',
   false,
-  /\.(js|tsx)$/,
+  /\.(js|md|tsx)$/,
 );
-const reqPrefix = 'pages/system/basics';
 
-export default function Page() {
-  return <MarkdownDocs req={req} reqSource={reqSource} reqPrefix={reqPrefix} />;
+// eslint-disable-next-line react/prop-types
+export default function Page({ demos, docs }) {
+  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/system/borders.js b/docs/pages/system/borders.js
index c578b205682696..e57b8a389b6cba 100644
--- a/docs/pages/system/borders.js
+++ b/docs/pages/system/borders.js
@@ -1,14 +1,21 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-const req = require.context('docs/src/pages/system/borders', false, /\.(md|js|tsx)$/);
-const reqSource = require.context(
+const pageFilename = 'system/borders';
+const requireDemo = require.context('docs/src/pages/system/borders', false, /\.(js|tsx)$/);
+const requireRaw = require.context(
   '!raw-loader!../../src/pages/system/borders',
   false,
-  /\.(js|tsx)$/,
+  /\.(js|md|tsx)$/,
 );
-const reqPrefix = 'pages/system/borders';
 
-export default function Page() {
-  return <MarkdownDocs req={req} reqSource={reqSource} reqPrefix={reqPrefix} />;
+// eslint-disable-next-line react/prop-types
+export default function Page({ demos, docs }) {
+  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/system/display.js b/docs/pages/system/display.js
index 62f13841207ceb..5a0311839f2835 100644
--- a/docs/pages/system/display.js
+++ b/docs/pages/system/display.js
@@ -1,14 +1,21 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-const req = require.context('docs/src/pages/system/display', false, /\.(md|js|tsx)$/);
-const reqSource = require.context(
+const pageFilename = 'system/display';
+const requireDemo = require.context('docs/src/pages/system/display', false, /\.(js|tsx)$/);
+const requireRaw = require.context(
   '!raw-loader!../../src/pages/system/display',
   false,
-  /\.(js|tsx)$/,
+  /\.(js|md|tsx)$/,
 );
-const reqPrefix = 'pages/system/display';
 
-export default function Page() {
-  return <MarkdownDocs req={req} reqSource={reqSource} reqPrefix={reqPrefix} />;
+// eslint-disable-next-line react/prop-types
+export default function Page({ demos, docs }) {
+  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/system/flexbox.js b/docs/pages/system/flexbox.js
index 0f85e8e100ed43..9ce7ed1ce6b838 100644
--- a/docs/pages/system/flexbox.js
+++ b/docs/pages/system/flexbox.js
@@ -1,14 +1,21 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-const req = require.context('docs/src/pages/system/flexbox', false, /\.(md|js|tsx)$/);
-const reqSource = require.context(
+const pageFilename = 'system/flexbox';
+const requireDemo = require.context('docs/src/pages/system/flexbox', false, /\.(js|tsx)$/);
+const requireRaw = require.context(
   '!raw-loader!../../src/pages/system/flexbox',
   false,
-  /\.(js|tsx)$/,
+  /\.(js|md|tsx)$/,
 );
-const reqPrefix = 'pages/system/flexbox';
 
-export default function Page() {
-  return <MarkdownDocs req={req} reqSource={reqSource} reqPrefix={reqPrefix} />;
+// eslint-disable-next-line react/prop-types
+export default function Page({ demos, docs }) {
+  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/system/palette.js b/docs/pages/system/palette.js
index 558073af657776..c692f54ac18b5a 100644
--- a/docs/pages/system/palette.js
+++ b/docs/pages/system/palette.js
@@ -1,14 +1,21 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-const req = require.context('docs/src/pages/system/palette', false, /\.(md|js|tsx)$/);
-const reqSource = require.context(
+const pageFilename = 'system/palette';
+const requireDemo = require.context('docs/src/pages/system/palette', false, /\.(js|tsx)$/);
+const requireRaw = require.context(
   '!raw-loader!../../src/pages/system/palette',
   false,
-  /\.(js|tsx)$/,
+  /\.(js|md|tsx)$/,
 );
-const reqPrefix = 'pages/system/palette';
 
-export default function Page() {
-  return <MarkdownDocs req={req} reqSource={reqSource} reqPrefix={reqPrefix} />;
+// eslint-disable-next-line react/prop-types
+export default function Page({ demos, docs }) {
+  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/system/positions.js b/docs/pages/system/positions.js
index 18237d4bcf1ddd..7add17813fa161 100644
--- a/docs/pages/system/positions.js
+++ b/docs/pages/system/positions.js
@@ -1,14 +1,21 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-const req = require.context('docs/src/pages/system/positions', false, /\.(md|js|tsx)$/);
-const reqSource = require.context(
+const pageFilename = 'system/positions';
+const requireDemo = require.context('docs/src/pages/system/positions', false, /\.(js|tsx)$/);
+const requireRaw = require.context(
   '!raw-loader!../../src/pages/system/positions',
   false,
-  /\.(js|tsx)$/,
+  /\.(js|md|tsx)$/,
 );
-const reqPrefix = 'pages/system/positions';
 
-export default function Page() {
-  return <MarkdownDocs req={req} reqSource={reqSource} reqPrefix={reqPrefix} />;
+// eslint-disable-next-line react/prop-types
+export default function Page({ demos, docs }) {
+  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/system/shadows.js b/docs/pages/system/shadows.js
index 7bb5a20a8c0468..c6f97471330ce4 100644
--- a/docs/pages/system/shadows.js
+++ b/docs/pages/system/shadows.js
@@ -1,14 +1,21 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-const req = require.context('docs/src/pages/system/shadows', false, /\.(md|js|tsx)$/);
-const reqSource = require.context(
+const pageFilename = 'system/shadows';
+const requireDemo = require.context('docs/src/pages/system/shadows', false, /\.(js|tsx)$/);
+const requireRaw = require.context(
   '!raw-loader!../../src/pages/system/shadows',
   false,
-  /\.(js|tsx)$/,
+  /\.(js|md|tsx)$/,
 );
-const reqPrefix = 'pages/system/shadows';
 
-export default function Page() {
-  return <MarkdownDocs req={req} reqSource={reqSource} reqPrefix={reqPrefix} />;
+// eslint-disable-next-line react/prop-types
+export default function Page({ demos, docs }) {
+  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/system/sizing.js b/docs/pages/system/sizing.js
index 931a76b3a61f2d..7aba5291906334 100644
--- a/docs/pages/system/sizing.js
+++ b/docs/pages/system/sizing.js
@@ -1,14 +1,21 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-const req = require.context('docs/src/pages/system/sizing', false, /\.(md|js|tsx)$/);
-const reqSource = require.context(
+const pageFilename = 'system/sizing';
+const requireDemo = require.context('docs/src/pages/system/sizing', false, /\.(js|tsx)$/);
+const requireRaw = require.context(
   '!raw-loader!../../src/pages/system/sizing',
   false,
-  /\.(js|tsx)$/,
+  /\.(js|md|tsx)$/,
 );
-const reqPrefix = 'pages/system/sizing';
 
-export default function Page() {
-  return <MarkdownDocs req={req} reqSource={reqSource} reqPrefix={reqPrefix} />;
+// eslint-disable-next-line react/prop-types
+export default function Page({ demos, docs }) {
+  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/system/spacing.js b/docs/pages/system/spacing.js
index 2eaea333e48f2b..6b319c9db895f8 100644
--- a/docs/pages/system/spacing.js
+++ b/docs/pages/system/spacing.js
@@ -1,14 +1,21 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-const req = require.context('docs/src/pages/system/spacing', false, /\.(md|js|tsx)$/);
-const reqSource = require.context(
+const pageFilename = 'system/spacing';
+const requireDemo = require.context('docs/src/pages/system/spacing', false, /\.(js|tsx)$/);
+const requireRaw = require.context(
   '!raw-loader!../../src/pages/system/spacing',
   false,
-  /\.(js|tsx)$/,
+  /\.(js|md|tsx)$/,
 );
-const reqPrefix = 'pages/system/spacing';
 
-export default function Page() {
-  return <MarkdownDocs req={req} reqSource={reqSource} reqPrefix={reqPrefix} />;
+// eslint-disable-next-line react/prop-types
+export default function Page({ demos, docs }) {
+  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/system/typography.js b/docs/pages/system/typography.js
index a32c84da195f0f..3bd2683f47fec3 100644
--- a/docs/pages/system/typography.js
+++ b/docs/pages/system/typography.js
@@ -1,14 +1,21 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-const req = require.context('docs/src/pages/system/typography', false, /\.(md|js|tsx)$/);
-const reqSource = require.context(
+const pageFilename = 'system/typography';
+const requireDemo = require.context('docs/src/pages/system/typography', false, /\.(js|tsx)$/);
+const requireRaw = require.context(
   '!raw-loader!../../src/pages/system/typography',
   false,
-  /\.(js|tsx)$/,
+  /\.(js|md|tsx)$/,
 );
-const reqPrefix = 'pages/system/typography';
 
-export default function Page() {
-  return <MarkdownDocs req={req} reqSource={reqSource} reqPrefix={reqPrefix} />;
+// eslint-disable-next-line react/prop-types
+export default function Page({ demos, docs }) {
+  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/pages/versions.js b/docs/pages/versions.js
index 7215c291050835..b474f2b155242d 100644
--- a/docs/pages/versions.js
+++ b/docs/pages/versions.js
@@ -3,13 +3,15 @@ import orderBy from 'lodash/orderBy';
 import sortedUniqBy from 'lodash/sortedUniqBy';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import fetch from 'cross-fetch';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-const req = require.context('docs/src/pages/versions', false, /\.(md|js|tsx)$/);
-const reqSource = require.context('!raw-loader!../src/pages/versions', false, /\.(js|tsx)$/);
-const reqPrefix = 'pages/versions';
+const pageFilename = 'versions';
+const requireDemo = require.context('docs/src/pages/versions/', false, /\.(js|tsx)$/);
+const requireRaw = require.context('!raw-loader!../src/pages/versions', false, /\.(js|md|tsx)$/);
 
-export default function Page() {
-  return <MarkdownDocs req={req} reqSource={reqSource} reqPrefix={reqPrefix} />;
+// eslint-disable-next-line react/prop-types
+export default function Page({ demos, docs }) {
+  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
 
 async function getBranches() {
@@ -48,5 +50,7 @@ Page.getInitialProps = async () => {
   versions = orderBy(versions, 'version', 'desc');
   versions = sortedUniqBy(versions, 'version');
 
-  return { versions };
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+
+  return { demos, docs, versions };
 };
diff --git a/docs/scripts/buildApi.js b/docs/scripts/buildApi.js
index b5b63782d270b3..65f124e3666817 100644
--- a/docs/scripts/buildApi.js
+++ b/docs/scripts/buildApi.js
@@ -332,11 +332,20 @@ async function buildDocs(options) {
       path.resolve(docsApiDirectory, `${kebabCase(reactAPI.name)}.js`),
       `import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import markdown from './${kebabCase(reactAPI.name)}.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <MarkdownDocs markdown={markdown} />;
+const pageFilename = 'api/${kebabCase(reactAPI.name)}';
+const requireRaw = require.context('!raw-loader!./', false, /${kebabCase(reactAPI.name)}\\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
 }
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
 `.replace(/\r?\n/g, reactAPI.EOL),
     );
 
diff --git a/docs/src/modules/components/AppTableOfContents.js b/docs/src/modules/components/AppTableOfContents.js
index 217333658de183..d70169b1322c21 100644
--- a/docs/src/modules/components/AppTableOfContents.js
+++ b/docs/src/modules/components/AppTableOfContents.js
@@ -7,8 +7,6 @@ import Box from '@material-ui/core/Box';
 import { useSelector } from 'react-redux';
 import { makeStyles } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
-import { render as renderMarkdown } from 'docs/src/modules/utils/parseMarkdown';
-import textToHash from 'docs/src/modules/utils/textToHash';
 import DiamondSponsors from 'docs/src/modules/components/DiamondSponsors';
 import Link from 'docs/src/modules/components/Link';
 import PageContext from 'docs/src/modules/components/PageContext';
@@ -60,25 +58,26 @@ const useStyles = makeStyles((theme) => ({
   active: {},
 }));
 
-function getItemsClient(items) {
-  const itemsClient = [];
+// TODO: these nodes are mutable sources. Use createMutableSource once it's stable
+function getItemsClient(headings) {
+  const itemsWithNode = [];
 
-  items.forEach((item2) => {
-    itemsClient.push({
-      ...item2,
-      node: document.getElementById(item2.hash),
+  headings.forEach((item) => {
+    itemsWithNode.push({
+      ...item,
+      node: document.getElementById(item.hash),
     });
 
-    if (item2.children.length > 0) {
-      item2.children.forEach((item3) => {
-        itemsClient.push({
-          ...item3,
-          node: document.getElementById(item3.hash),
+    if (item.children.length > 0) {
+      item.children.forEach((subitem) => {
+        itemsWithNode.push({
+          ...subitem,
+          node: document.getElementById(subitem.hash),
         });
       });
     }
   });
-  return itemsClient;
+  return itemsWithNode;
 }
 
 const noop = () => {};
@@ -103,51 +102,14 @@ function useThrottledOnScroll(callback, delay) {
 }
 
 export default function AppTableOfContents(props) {
-  const { contents } = props;
+  const { items } = props;
   const classes = useStyles();
   const t = useSelector((state) => state.options.t);
 
-  const itemsServer = React.useMemo(() => {
-    const items = [];
-    const unique = {};
-
-    renderMarkdown(contents.join(''), {
-      heading: (text2, level) => {
-        const text = text2
-          .replace(
-            /([\uE000-\uF8FF]|\uD83C[\uDC00-\uDFFF]|\uD83D[\uDC00-\uDFFF]|[\u2011-\u26FF]|\uD83E[\uDD10-\uDDFF])/g,
-            '',
-          ) // remove emojis
-          .replace(/<\/?[^>]+(>|$)/g, ''); // remove HTML
-
-        if (level === 2) {
-          items.push({
-            text,
-            level,
-            hash: textToHash(text, unique),
-            children: [],
-          });
-        } else if (level === 3) {
-          if (!items[items.length - 1]) {
-            throw new Error(`Missing parent level for: ${text}`);
-          }
-
-          items[items.length - 1].children.push({
-            text,
-            level,
-            hash: textToHash(text, unique),
-          });
-        }
-      },
-    });
-
-    return items;
-  }, [contents]);
-
-  const itemsClientRef = React.useRef([]);
+  const itemsWithNodeRef = React.useRef([]);
   React.useEffect(() => {
-    itemsClientRef.current = getItemsClient(itemsServer);
-  }, [itemsServer]);
+    itemsWithNodeRef.current = getItemsClient(items);
+  }, [items]);
 
   const { activePage } = React.useContext(PageContext);
   const [activeState, setActiveState] = React.useState(null);
@@ -160,14 +122,14 @@ export default function AppTableOfContents(props) {
     }
 
     let active;
-    for (let i = itemsClientRef.current.length - 1; i >= 0; i -= 1) {
+    for (let i = itemsWithNodeRef.current.length - 1; i >= 0; i -= 1) {
       // No hash if we're near the top of the page
       if (document.documentElement.scrollTop < 200) {
         active = { hash: null };
         break;
       }
 
-      const item = itemsClientRef.current[i];
+      const item = itemsWithNodeRef.current[i];
 
       if (process.env.NODE_ENV !== 'production') {
         if (!item.node) {
@@ -191,7 +153,7 @@ export default function AppTableOfContents(props) {
   }, [activeState]);
 
   // Corresponds to 10 frames at 60 Hz
-  useThrottledOnScroll(itemsServer.length > 0 ? findActiveIndex : null, 166);
+  useThrottledOnScroll(items.length > 0 ? findActiveIndex : null, 166);
 
   const handleClick = (hash) => (event) => {
     // Ignore click for new tab/new window behavior
@@ -243,19 +205,19 @@ export default function AppTableOfContents(props) {
 
   return (
     <nav className={classes.root} aria-label={t('pageTOC')}>
-      {itemsServer.length > 0 ? (
+      {items.length > 0 ? (
         <React.Fragment>
           <Typography gutterBottom className={classes.contents}>
             {t('tableOfContents')}
           </Typography>
           <Typography component="ul" className={classes.ul}>
-            {itemsServer.map((item2) => (
-              <li key={item2.text}>
-                {itemLink(item2)}
-                {item2.children.length > 0 ? (
+            {items.map((item) => (
+              <li key={item.text}>
+                {itemLink(item)}
+                {item.children.length > 0 ? (
                   <ul className={classes.ul}>
-                    {item2.children.map((item3) => (
-                      <li key={item3.text}>{itemLink(item3, true)}</li>
+                    {item.children.map((subitem) => (
+                      <li key={subitem.text}>{itemLink(subitem, true)}</li>
                     ))}
                   </ul>
                 ) : null}
@@ -272,5 +234,5 @@ export default function AppTableOfContents(props) {
 }
 
 AppTableOfContents.propTypes = {
-  contents: PropTypes.array.isRequired,
+  items: PropTypes.array.isRequired,
 };
diff --git a/docs/src/modules/components/Demo.js b/docs/src/modules/components/Demo.js
index 183486891e42b5..88abdd577be00d 100644
--- a/docs/src/modules/components/Demo.js
+++ b/docs/src/modules/components/Demo.js
@@ -18,7 +18,7 @@ import MenuItem from '@material-ui/core/MenuItem';
 import MoreVertIcon from '@material-ui/icons/MoreVert';
 import Tooltip from '@material-ui/core/Tooltip';
 import RefreshIcon from '@material-ui/icons/Refresh';
-import MarkdownElement from 'docs/src/modules/components/MarkdownElement';
+import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
 import DemoSandboxed from 'docs/src/modules/components/DemoSandboxed';
 import DemoLanguages from 'docs/src/modules/components/DemoLanguages';
 import getDemoConfig from 'docs/src/modules/utils/getDemoConfig';
@@ -504,10 +504,11 @@ function Demo(props) {
         </div>
       )}
       <Collapse in={openDemoSource} unmountOnExit>
-        <MarkdownElement
+        <HighlightedCode
           className={classes.code}
           id={demoSourceId}
-          text={`\`\`\`${demoData.sourceLanguage}\n${codeOpen ? demoData.raw : jsx}\n\`\`\``}
+          code={codeOpen ? demoData.raw : jsx}
+          language={demoData.sourceLanguage}
         />
       </Collapse>
       <Snackbar
diff --git a/docs/src/modules/components/HighlightedCode.js b/docs/src/modules/components/HighlightedCode.js
new file mode 100644
index 00000000000000..a64efc6a1fe340
--- /dev/null
+++ b/docs/src/modules/components/HighlightedCode.js
@@ -0,0 +1,28 @@
+import * as React from 'react';
+import * as PropTypes from 'prop-types';
+import MarkdownElement from './MarkdownElement';
+import prism from 'docs/src/modules/utils/prism';
+
+export default function HighlightedCode(props) {
+  const { code, language } = props;
+  const renderedCode = React.useMemo(() => {
+    return prism(code.trim(), language);
+  }, [code, language]);
+
+  return (
+    <MarkdownElement>
+      <pre>
+        <code
+          className={`language-${language}`}
+          // eslint-disable-next-line react/no-danger
+          dangerouslySetInnerHTML={{ __html: renderedCode }}
+        />
+      </pre>
+    </MarkdownElement>
+  );
+}
+
+HighlightedCode.propTypes = {
+  code: PropTypes.string.isRequired,
+  language: PropTypes.string.isRequired,
+};
diff --git a/docs/src/modules/components/MarkdownDocs.js b/docs/src/modules/components/MarkdownDocs.js
index bfc6bfd52a81bd..d02c56977a965f 100644
--- a/docs/src/modules/components/MarkdownDocs.js
+++ b/docs/src/modules/components/MarkdownDocs.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import PropTypes from 'prop-types';
+import * as PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { useSelector } from 'react-redux';
 import { withStyles } from '@material-ui/core/styles';
@@ -9,17 +9,40 @@ import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
 import Button from '@material-ui/core/Button';
 import Divider from '@material-ui/core/Divider';
 import Head from 'docs/src/modules/components/Head';
-import useMarkdownDocs from 'docs/src/modules/components/useMarkdownDocs';
 import AppFrame from 'docs/src/modules/components/AppFrame';
-import AppTableOfContents from 'docs/src/modules/components/AppTableOfContents';
 import Ad from 'docs/src/modules/components/Ad';
 import EditPage from 'docs/src/modules/components/EditPage';
 import AppContainer from 'docs/src/modules/components/AppContainer';
 import PageContext from 'docs/src/modules/components/PageContext';
-import { getHeaders, getTitle, getDescription } from 'docs/src/modules/utils/parseMarkdown';
 import { pageToTitleI18n } from 'docs/src/modules/utils/helpers';
 import Link from 'docs/src/modules/components/Link';
 import { exactProp } from '@material-ui/utils';
+import { SOURCE_CODE_ROOT_URL } from 'docs/src/modules/constants';
+import Demo from 'docs/src/modules/components/Demo';
+import AppTableOfContents from './AppTableOfContents';
+import MarkdownElement from './MarkdownElement';
+
+function flattenPages(pages, current = []) {
+  return pages.reduce((items, item) => {
+    if (item.children && item.children.length > 1) {
+      items = flattenPages(item.children, items);
+    } else {
+      items.push(item.children && item.children.length === 1 ? item.children[0] : item);
+    }
+    return items;
+  }, current);
+}
+
+// To replace with .findIndex() once we stop IE 11 support.
+function findIndex(array, comp) {
+  for (let i = 0; i < array.length; i += 1) {
+    if (comp(array[i])) {
+      return i;
+    }
+  }
+
+  return -1;
+}
 
 const styles = (theme) => ({
   root: {
@@ -65,49 +88,16 @@ const styles = (theme) => ({
   },
 });
 
-function flattenPages(pages, current = []) {
-  return pages.reduce((items, item) => {
-    if (item.children && item.children.length > 1) {
-      items = flattenPages(item.children, items);
-    } else {
-      items.push(item.children && item.children.length === 1 ? item.children[0] : item);
-    }
-    return items;
-  }, current);
-}
-
-// To replace with .findIndex() once we stop IE 11 support.
-function findIndex(array, comp) {
-  for (let i = 0; i < array.length; i += 1) {
-    if (comp(array[i])) {
-      return i;
-    }
-  }
-
-  return -1;
-}
-
 function MarkdownDocs(props) {
-  const {
-    classes,
-    disableAd = false,
-    disableToc = false,
-    markdown: markdownProp,
-    req,
-    reqPrefix,
-    reqSource,
-  } = props;
+  const { classes, disableAd = false, disableToc = false, demos, docs, requireDemo } = props;
 
   const t = useSelector((state) => state.options.t);
 
-  const markdownDocs = useMarkdownDocs({
-    markdown: markdownProp,
-    req,
-    reqPrefix,
-    reqSource,
-  });
-
-  const headers = getHeaders(markdownDocs.markdown);
+  const userLanguage = useSelector((state) => state.options.userLanguage);
+  const { description, location, rendered, title, toc } = docs[userLanguage] || docs.en;
+  if (description === undefined) {
+    throw new Error('Missing description in the page');
+  }
 
   const { activePage, pages } = React.useContext(PageContext);
   const pageList = flattenPages(pages);
@@ -118,10 +108,7 @@ function MarkdownDocs(props) {
 
   return (
     <AppFrame>
-      <Head
-        title={`${headers.title || getTitle(markdownDocs.markdown)} - Material-UI`}
-        description={headers.description || getDescription(markdownDocs.markdown)}
-      />
+      <Head title={`${title} - Material-UI`} description={description} />
       {disableAd ? null : (
         <Portal
           container={() => {
@@ -141,9 +128,58 @@ function MarkdownDocs(props) {
       >
         <AppContainer className={classes.container}>
           <div className={classes.actions}>
-            <EditPage markdownLocation={markdownDocs.location} />
+            <EditPage markdownLocation={location} />
           </div>
-          {markdownDocs.element}
+          {rendered.map((renderedMarkdownOrDemo, index) => {
+            if (typeof renderedMarkdownOrDemo === 'string') {
+              const renderedMarkdown = renderedMarkdownOrDemo;
+              return <MarkdownElement key={index} renderedMarkdown={renderedMarkdown} />;
+            }
+
+            const demoOptions = renderedMarkdownOrDemo;
+            const name = demoOptions.demo;
+            const demo = demos?.[name];
+            if (demo === undefined) {
+              const errorMessage = [
+                `Missing demo: ${name}. You can use one of the following:`,
+                Object.keys(demos),
+              ].join('\n');
+
+              if (userLanguage === 'en') {
+                throw new Error(errorMessage);
+              }
+
+              if (process.env.NODE_ENV !== 'production') {
+                console.error(errorMessage);
+              }
+
+              const warnIcon = (
+                <span role="img" aria-label={t('emojiWarning')}>
+                  ⚠️
+                </span>
+              );
+              return (
+                <div key={index}>
+                  {/* eslint-disable-next-line material-ui/no-hardcoded-labels */}
+                  {warnIcon} Missing demo `{name}` {warnIcon}
+                </div>
+              );
+            }
+
+            return (
+              <Demo
+                key={index}
+                demo={{
+                  raw: demo.raw,
+                  js: requireDemo(demo.module).default,
+                  rawTS: demo.rawTS,
+                  tsx: demo.moduleTS ? requireDemo(demo.moduleTS).default : null,
+                }}
+                demoOptions={demoOptions}
+                githubLocation={`${SOURCE_CODE_ROOT_URL}/docs/src/${name}`}
+              />
+            );
+          })}
           <footer className={classes.footer}>
             {!currentPage ||
             currentPage.displayNav === false ||
@@ -183,19 +219,18 @@ function MarkdownDocs(props) {
           </footer>
         </AppContainer>
       </div>
-      {disableToc ? null : <AppTableOfContents contents={markdownDocs.contents} />}
+      {disableToc ? null : <AppTableOfContents items={toc} />}
     </AppFrame>
   );
 }
 
 MarkdownDocs.propTypes = {
   classes: PropTypes.object.isRequired,
+  demos: PropTypes.object.isRequired,
   disableAd: PropTypes.bool,
   disableToc: PropTypes.bool,
-  markdown: PropTypes.string,
-  req: PropTypes.func,
-  reqPrefix: PropTypes.string,
-  reqSource: PropTypes.func,
+  docs: PropTypes.object.isRequired,
+  requireDemo: PropTypes.func,
 };
 
 if (process.env.NODE_ENV !== 'production') {
diff --git a/docs/src/modules/components/MarkdownElement.js b/docs/src/modules/components/MarkdownElement.js
index c6df252d97220a..08234a31f43cce 100644
--- a/docs/src/modules/components/MarkdownElement.js
+++ b/docs/src/modules/components/MarkdownElement.js
@@ -1,21 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { useSelector } from 'react-redux';
-import { withStyles } from '@material-ui/core/styles';
-import textToHash from 'docs/src/modules/utils/textToHash';
-import { render as renderMarkdown } from 'docs/src/modules/utils/parseMarkdown';
-import prism from 'docs/src/modules/components/prism';
-
-const externs = [
-  'https://material.io/',
-  'https://getbootstrap.com/',
-  'https://www.amazon.com/',
-  'https://materialdesignicons.com/',
-  'https://www.w3.org/',
-  'https://devexpress.github.io/',
-  'https://ui-kit.co/',
-];
+import { makeStyles } from '@material-ui/core/styles';
 
 const styles = (theme) => ({
   root: {
@@ -210,106 +196,23 @@ const styles = (theme) => ({
     },
   },
 });
+const useStyles = makeStyles(styles, { name: 'MarkdownElement', flip: false });
 
-function MarkdownElement(props) {
-  const { classes, className, text, ...other } = props;
-
-  const userLanguage = useSelector((state) => state.options.userLanguage);
-
-  const renderedMarkdown = React.useMemo(() => {
-    return renderMarkdown(text, {
-      highlight(code, language) {
-        let prismLanguage;
-        switch (language) {
-          case 'ts':
-            prismLanguage = prism.languages.tsx;
-            break;
-
-          case 'js':
-          case 'sh':
-            prismLanguage = prism.languages.jsx;
-            break;
-
-          case 'diff':
-            prismLanguage = { ...prism.languages.diff };
-            // original `/^[-<].*$/m` matches lines starting with `<` which matches
-            // <SomeComponent />
-            // we will only use `-` as the deleted marker
-            prismLanguage.deleted = /^[-].*$/m;
-            break;
-
-          default:
-            prismLanguage = prism.languages[language];
-            break;
-        }
-
-        if (!prismLanguage) {
-          if (language) {
-            throw new Error(`unsupported language: "${language}", "${code}"`);
-          } else {
-            prismLanguage = prism.languages.jsx;
-          }
-        }
-
-        return prism.highlight(code, prismLanguage);
-      },
-      heading: (headingText, level) => {
-        // Small title. No need for an anchor.
-        // It's reducing the risk of duplicated id and it's fewer elements in the DOM.
-        if (level >= 4) {
-          return `<h${level}>${headingText}</h${level}>`;
-        }
+export default function MarkdownElement(props) {
+  const { className, renderedMarkdown, ...other } = props;
+  const classes = useStyles();
+  const more = {};
 
-        // eslint-disable-next-line no-underscore-dangle
-        const hash = textToHash(headingText, global.__MARKED_UNIQUE__);
+  if (typeof renderedMarkdown === 'string') {
+    // workaround for https://github.com/facebook/react/issues/17170
+    // otherwise we could just set `dangerouslySetInnerHTML={undefined}`
+    more.dangerouslySetInnerHTML = { __html: renderedMarkdown };
+  }
 
-        return [
-          `<h${level}>`,
-          `<a class="anchor-link" id="${hash}"></a>`,
-          headingText,
-          `<a class="anchor-link-style" aria-hidden="true" aria-label="anchor" href="#${hash}">`,
-          '<svg><use xlink:href="#anchor-link-icon" /></svg>',
-          '</a>',
-          `</h${level}>`,
-        ].join('');
-      },
-      link: (href, title, linkText) => {
-        let more = '';
-
-        if (externs.some((domain) => href.indexOf(domain) !== -1)) {
-          more = ' target="_blank" rel="noopener nofollow"';
-        }
-
-        let finalHref = href;
-
-        if (
-          userLanguage !== 'en' &&
-          finalHref.indexOf('/') === 0 &&
-          finalHref !== '/size-snapshot'
-        ) {
-          finalHref = `/${userLanguage}${finalHref}`;
-        }
-
-        return `<a href="${finalHref}"${more}>${linkText}</a>`;
-      },
-    });
-  }, [text, userLanguage]);
-
-  /* eslint-disable react/no-danger */
-  return (
-    <div
-      className={clsx(classes.root, 'markdown-body', className)}
-      dangerouslySetInnerHTML={{ __html: renderedMarkdown }}
-      {...other}
-    />
-  );
-  /* eslint-enable */
+  return <div className={clsx(classes.root, 'markdown-body', className)} {...more} {...other} />;
 }
 
 MarkdownElement.propTypes = {
-  classes: PropTypes.object.isRequired,
   className: PropTypes.string,
-  text: PropTypes.string,
+  renderedMarkdown: PropTypes.string,
 };
-
-export default withStyles(styles, { flip: false })(MarkdownElement);
diff --git a/docs/src/modules/components/TopLayoutBlog.js b/docs/src/modules/components/TopLayoutBlog.js
index 3aed8b2181861a..a4e67003bf29e6 100644
--- a/docs/src/modules/components/TopLayoutBlog.js
+++ b/docs/src/modules/components/TopLayoutBlog.js
@@ -5,10 +5,9 @@ import Head from 'docs/src/modules/components/Head';
 import AppFrame from 'docs/src/modules/components/AppFrame';
 import AppContainer from 'docs/src/modules/components/AppContainer';
 import Link from '@material-ui/core/Link';
-import useMarkdownDocs from 'docs/src/modules/components/useMarkdownDocs';
-import { getHeaders, getTitle, getDescription } from 'docs/src/modules/utils/parseMarkdown';
 import AppFooter from 'docs/src/modules/components/AppFooter';
 import { exactProp } from '@material-ui/utils';
+import MarkdownElement from './MarkdownElement';
 
 const styles = (theme) => ({
   root: {
@@ -45,23 +44,13 @@ const styles = (theme) => ({
 });
 
 function TopLayoutBlog(props) {
-  const { classes, markdown: markdownProp, req, reqPrefix, reqSource } = props;
+  const { classes, docs } = props;
 
-  const markdownDocs = useMarkdownDocs({
-    markdown: markdownProp,
-    req,
-    reqPrefix,
-    reqSource,
-  });
-
-  const headers = getHeaders(markdownDocs.markdown);
+  const { description, rendered, title } = docs.en;
 
   return (
     <AppFrame>
-      <Head
-        title={`${headers.title || getTitle(markdownDocs.markdown)} - Material-UI`}
-        description={headers.description || getDescription(markdownDocs.markdown)}
-      />
+      <Head title={`${title} - Material-UI`} description={description} />
       <div className={classes.root}>
         <AppContainer className={classes.container}>
           <Link
@@ -72,7 +61,9 @@ function TopLayoutBlog(props) {
           >
             {'< Back to blog'}
           </Link>
-          {markdownDocs.element}
+          {rendered.map((chunk, index) => {
+            return <MarkdownElement key={index} renderedMarkdown={chunk} />;
+          })}
         </AppContainer>
         <AppFooter />
       </div>
@@ -82,10 +73,7 @@ function TopLayoutBlog(props) {
 
 TopLayoutBlog.propTypes = {
   classes: PropTypes.object.isRequired,
-  markdown: PropTypes.string,
-  req: PropTypes.func,
-  reqPrefix: PropTypes.string,
-  reqSource: PropTypes.func,
+  docs: PropTypes.object.isRequired,
 };
 
 if (process.env.NODE_ENV !== 'production') {
diff --git a/docs/src/modules/components/TopLayoutCompany.js b/docs/src/modules/components/TopLayoutCompany.js
index 785a21f08b08b1..c3268014c7543d 100644
--- a/docs/src/modules/components/TopLayoutCompany.js
+++ b/docs/src/modules/components/TopLayoutCompany.js
@@ -4,9 +4,8 @@ import { withStyles } from '@material-ui/core/styles';
 import Head from 'docs/src/modules/components/Head';
 import AppFrame from 'docs/src/modules/components/AppFrame';
 import AppContainer from 'docs/src/modules/components/AppContainer';
-import useMarkdownDocs from 'docs/src/modules/components/useMarkdownDocs';
-import { getHeaders, getTitle, getDescription } from 'docs/src/modules/utils/parseMarkdown';
 import AppFooter from 'docs/src/modules/components/AppFooter';
+import MarkdownElement from './MarkdownElement';
 
 const styles = (theme) => ({
   root: {
@@ -24,33 +23,19 @@ const styles = (theme) => ({
 });
 
 function TopLayoutCompany(props) {
-  const {
-    classes,
-    markdown: markdownProp,
-    markdownLocation: markdownLocationProp,
-    req,
-    reqPrefix,
-    reqSource,
-  } = props;
+  const { classes, docs } = props;
 
-  const markdownDocs = useMarkdownDocs({
-    markdown: markdownProp,
-    markdownLocation: markdownLocationProp,
-    req,
-    reqPrefix,
-    reqSource,
-  });
-
-  const headers = getHeaders(markdownDocs.markdown);
+  const { description, rendered, title } = docs.en;
 
   return (
     <AppFrame>
-      <Head
-        title={`${headers.title || getTitle(markdownDocs.markdown)} - Material-UI`}
-        description={headers.description || getDescription(markdownDocs.markdown)}
-      />
+      <Head title={`${title} - Material-UI`} description={description} />
       <div className={classes.root}>
-        <AppContainer className={classes.container}>{markdownDocs.element}</AppContainer>
+        <AppContainer className={classes.container}>
+          {rendered.map((chunk, index) => {
+            return <MarkdownElement key={index} renderedMarkdown={chunk} />;
+          })}
+        </AppContainer>
         <AppFooter />
       </div>
     </AppFrame>
@@ -59,13 +44,7 @@ function TopLayoutCompany(props) {
 
 TopLayoutCompany.propTypes = {
   classes: PropTypes.object.isRequired,
-  markdown: PropTypes.string,
-  // You can define the direction location of the markdown file.
-  // Otherwise, we try to determine it with an heuristic.
-  markdownLocation: PropTypes.string,
-  req: PropTypes.func,
-  reqPrefix: PropTypes.string,
-  reqSource: PropTypes.func,
+  docs: PropTypes.object.isRequired,
 };
 
 export default withStyles(styles)(TopLayoutCompany);
diff --git a/docs/src/modules/components/prism.js b/docs/src/modules/components/prism.js
deleted file mode 100644
index bc246f81b8f9fe..00000000000000
--- a/docs/src/modules/components/prism.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import prism from 'prismjs';
-import 'prismjs/components/prism-css';
-import 'prismjs/components/prism-diff';
-import 'prismjs/components/prism-javascript';
-import 'prismjs/components/prism-json';
-import 'prismjs/components/prism-jsx';
-import 'prismjs/components/prism-markup';
-import 'prismjs/components/prism-tsx';
-
-export default prism;
diff --git a/docs/src/modules/components/useMarkdownDocs.js b/docs/src/modules/components/useMarkdownDocs.js
deleted file mode 100644
index d9adb0f21a7b9d..00000000000000
--- a/docs/src/modules/components/useMarkdownDocs.js
+++ /dev/null
@@ -1,148 +0,0 @@
-import React from 'react';
-import kebabCase from 'lodash/kebabCase';
-import { rewriteUrlForNextExport } from 'next/dist/next-server/lib/router/rewrite-url-for-export';
-import { useSelector } from 'react-redux';
-import Demo from 'docs/src/modules/components/Demo';
-import { getHeaders, getContents, demoRegexp } from 'docs/src/modules/utils/parseMarkdown';
-import PageContext from 'docs/src/modules/components/PageContext';
-import MarkdownElement from 'docs/src/modules/components/MarkdownElement';
-import { LANGUAGES_IN_PROGRESS, SOURCE_CODE_ROOT_URL } from 'docs/src/modules/constants';
-
-export default function useMarkdownDocs(options) {
-  const { markdown: markdownProp, req, reqPrefix, reqSource } = options;
-
-  const userLanguage = useSelector((state) => state.options.userLanguage);
-  let demos;
-  let markdown = markdownProp;
-
-  if (!markdown) {
-    demos = {};
-    const markdowns = {};
-    req.keys().forEach((filename) => {
-      if (filename.indexOf('.md') !== -1) {
-        const match = filename.match(/-([a-z]{2})\.md$/);
-
-        if (match && LANGUAGES_IN_PROGRESS.indexOf(match[1]) !== -1) {
-          markdowns[match[1]] = req(filename);
-        } else {
-          markdowns.en = req(filename);
-        }
-      } else if (filename.indexOf('.tsx') !== -1) {
-        const demoName = `${reqPrefix}/${filename.replace(/\.\//g, '').replace(/\.tsx/g, '.js')}`;
-
-        demos[demoName] = {
-          ...demos[demoName],
-          tsx: req(filename).default,
-          rawTS: reqSource(filename),
-        };
-      } else {
-        const demoName = `${reqPrefix}/${filename.replace(/\.\//g, '')}`;
-
-        demos[demoName] = {
-          ...demos[demoName],
-          js: req(filename).default,
-          raw: reqSource(filename),
-        };
-      }
-    });
-    markdown = markdowns[userLanguage] || markdowns.en;
-  }
-
-  const contents = getContents(markdown);
-  const headers = getHeaders(markdown);
-
-  const { activePage } = React.useContext(PageContext);
-  let location = activePage && activePage.pathname;
-  const t = useSelector((state) => state.options.t);
-
-  if (location) {
-    const token = location.split('/');
-    token.push(token[token.length - 1]);
-    location = token.join('/');
-
-    if (headers.filename) {
-      location = headers.filename;
-    } else {
-      location = `/docs/src/pages${location}.md`;
-    }
-  }
-
-  if (headers.components.length > 0) {
-    contents.push(`
-## API
-
-${headers.components
-  .map(
-    (component) =>
-      `- [&lt;${component} /&gt;](${rewriteUrlForNextExport(`/api/${kebabCase(component)}`)})`,
-  )
-  .join('\n')}
-  `);
-  }
-
-  // eslint-disable-next-line no-underscore-dangle
-  global.__MARKED_UNIQUE__ = {};
-
-  const element = (
-    <React.Fragment>
-      <svg style={{ display: 'none' }} xmlns="http://www.w3.org/2000/svg">
-        <symbol id="anchor-link-icon" viewBox="0 0 16 16">
-          <path d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z" />
-        </symbol>
-      </svg>
-      {contents.map((content, index) => {
-        if (demos && demoRegexp.test(content)) {
-          let demoOptions;
-          try {
-            demoOptions = JSON.parse(`{${content}}`);
-          } catch (err) {
-            console.error('JSON.parse fails with: ', `{${content}}`);
-            console.error(err);
-            return null;
-          }
-
-          const name = demoOptions.demo;
-          if (!demos || !demos[name]) {
-            const errorMessage = [
-              `Missing demo: ${name}. You can use one of the following:`,
-              Object.keys(demos),
-            ].join('\n');
-
-            if (userLanguage === 'en') {
-              throw new Error(errorMessage);
-            }
-
-            if (process.env.NODE_ENV !== 'production') {
-              console.error(errorMessage);
-            }
-
-            const warnIcon = (
-              <span role="img" aria-label={t('emojiWarning')}>
-                ⚠️
-              </span>
-            );
-            return (
-              <div key={content}>
-                {/* eslint-disable-next-line material-ui/no-hardcoded-labels */}
-                {warnIcon} Missing demo `{name}` {warnIcon}
-              </div>
-            );
-          }
-
-          return (
-            <Demo
-              key={`${content}${index}`}
-              demo={demos[name]}
-              demoOptions={demoOptions}
-              githubLocation={`${SOURCE_CODE_ROOT_URL}/docs/src/${name}`}
-            />
-          );
-        }
-
-        return <MarkdownElement className="markdownElement" key={index} text={content} />;
-      })}
-    </React.Fragment>
-  );
-
-  return { contents, location, element, markdown };
-}
diff --git a/docs/src/modules/utils/parseMarkdown.js b/docs/src/modules/utils/parseMarkdown.js
index d1c0a8c9b279d2..e81262b8d9925e 100644
--- a/docs/src/modules/utils/parseMarkdown.js
+++ b/docs/src/modules/utils/parseMarkdown.js
@@ -1,4 +1,9 @@
 import marked from 'marked/lib/marked';
+import { LANGUAGES_IN_PROGRESS } from 'docs/src/modules/constants';
+import kebabCase from 'lodash/kebabCase';
+import { rewriteUrlForNextExport } from 'next/dist/next-server/lib/router/rewrite-url-for-export';
+import textToHash from 'docs/src/modules/utils/textToHash';
+import prism from 'docs/src/modules/utils/prism';
 
 const headerRegExp = /---[\r\n]([\s\S]*)[\r\n]---/;
 const titleRegExp = /# (.*)[\r\n]/;
@@ -59,11 +64,7 @@ export function getTitle(markdown) {
 export function getDescription(markdown) {
   const matches = markdown.match(descriptionRegExp);
 
-  if (!matches || !matches[1]) {
-    throw new Error('Missing description in the page');
-  }
-
-  return matches[1];
+  return matches?.[1];
 }
 
 /**
@@ -93,3 +94,159 @@ export function render(markdown, options = {}) {
 
   return marked(markdown, markedOptions);
 }
+
+const externs = [
+  'https://material.io/',
+  'https://getbootstrap.com/',
+  'https://www.amazon.com/',
+  'https://materialdesignicons.com/',
+  'https://www.w3.org/',
+  'https://devexpress.github.io/',
+  'https://ui-kit.co/',
+];
+
+export function prepareMarkdown(config) {
+  const { pageFilename, requireRaw } = config;
+
+  const demos = {};
+  const docs = {};
+  requireRaw.keys().forEach((filename) => {
+    if (filename.indexOf('.md') !== -1) {
+      const match = filename.match(/-([a-z]{2})\.md$/);
+
+      const userLanguage =
+        match && LANGUAGES_IN_PROGRESS.indexOf(match[1]) !== -1 ? match[1] : 'en';
+
+      const markdown = requireRaw(filename);
+      const contents = getContents(markdown);
+      const headers = getHeaders(markdown);
+
+      const title = headers.title || getTitle(markdown);
+      const description = headers.description || getDescription(markdown);
+
+      if (headers.components.length > 0) {
+        contents.push(`
+## API
+
+${headers.components
+  .map(
+    (component) =>
+      `- [&lt;${component} /&gt;](${rewriteUrlForNextExport(`/api/${kebabCase(component)}`)})`,
+  )
+  .join('\n')}
+  `);
+      }
+
+      const headingHashes = {};
+      const toc = [];
+      const rendered = contents.map((content) => {
+        if (demos && demoRegexp.test(content)) {
+          try {
+            return JSON.parse(`{${content}}`);
+          } catch (err) {
+            console.error('JSON.parse fails with: ', `{${content}}`);
+            console.error(err);
+            return null;
+          }
+        }
+
+        return render(content, {
+          highlight: prism,
+          heading: (headingText, level) => {
+            // Small title. No need for an anchor.
+            // It's reducing the risk of duplicated id and it's fewer elements in the DOM.
+            if (level >= 4) {
+              return `<h${level}>${headingText}</h${level}>`;
+            }
+
+            const hash = textToHash(headingText, headingHashes);
+
+            /**
+             * create a nested structure with 2 levels starting with level 2 e.g.
+             * [{...level2, children: [level3, level3, level3]}, level2]
+             */
+            if (level === 2) {
+              toc.push({
+                text: headingText,
+                level,
+                hash,
+                children: [],
+              });
+            } else if (level === 3) {
+              if (!toc[toc.length - 1]) {
+                throw new Error(`Missing parent level for: ${headingText}`);
+              }
+
+              toc[toc.length - 1].children.push({
+                text: headingText,
+                level,
+                hash,
+              });
+            }
+
+            return [
+              `<h${level}>`,
+              `<a class="anchor-link" id="${hash}"></a>`,
+              headingText,
+              `<a class="anchor-link-style" aria-hidden="true" aria-label="anchor" href="#${hash}">`,
+              '<svg><use xlink:href="#anchor-link-icon" /></svg>',
+              '</a>',
+              `</h${level}>`,
+            ].join('');
+          },
+          link: (href, linkTitle, linkText) => {
+            let more = '';
+
+            if (externs.some((domain) => href.indexOf(domain) !== -1)) {
+              more = ' target="_blank" rel="noopener nofollow"';
+            }
+
+            let finalHref = href;
+
+            if (
+              userLanguage !== 'en' &&
+              finalHref.indexOf('/') === 0 &&
+              finalHref !== '/size-snapshot'
+            ) {
+              finalHref = `/${userLanguage}${finalHref}`;
+            }
+
+            return `<a href="${finalHref}"${more}>${linkText}</a>`;
+          },
+        });
+      });
+      // fragment link symbol
+      rendered.unshift(`<svg style="display: none;" xmlns="http://www.w3.org/2000/svg">
+  <symbol id="anchor-link-icon" viewBox="0 0 16 16">
+    <path d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z" />
+  </symbol>
+</svg>`);
+
+      const location = headers.filename || `/docs/src/pages/${pageFilename}/${filename}`;
+
+      const localized = { description, location, rendered, toc, title };
+
+      docs[userLanguage] = localized;
+    } else if (filename.indexOf('.tsx') !== -1) {
+      const demoName = `pages/${pageFilename}/${filename
+        .replace(/\.\//g, '')
+        .replace(/\.tsx/g, '.js')}`;
+
+      demos[demoName] = {
+        ...demos[demoName],
+        moduleTS: filename,
+        rawTS: requireRaw(filename),
+      };
+    } else {
+      const demoName = `pages/${pageFilename}/${filename.replace(/\.\//g, '')}`;
+
+      demos[demoName] = {
+        ...demos[demoName],
+        module: filename,
+        raw: requireRaw(filename),
+      };
+    }
+  });
+
+  return { demos, docs };
+}
diff --git a/docs/src/modules/utils/prism.js b/docs/src/modules/utils/prism.js
new file mode 100644
index 00000000000000..0822977563874f
--- /dev/null
+++ b/docs/src/modules/utils/prism.js
@@ -0,0 +1,44 @@
+import prism from 'prismjs';
+import 'prismjs/components/prism-css';
+import 'prismjs/components/prism-diff';
+import 'prismjs/components/prism-javascript';
+import 'prismjs/components/prism-json';
+import 'prismjs/components/prism-jsx';
+import 'prismjs/components/prism-markup';
+import 'prismjs/components/prism-tsx';
+
+export default function highlight(code, language) {
+  let prismLanguage;
+  switch (language) {
+    case 'ts':
+      prismLanguage = prism.languages.tsx;
+      break;
+
+    case 'js':
+    case 'sh':
+      prismLanguage = prism.languages.jsx;
+      break;
+
+    case 'diff':
+      prismLanguage = { ...prism.languages.diff };
+      // original `/^[-<].*$/m` matches lines starting with `<` which matches
+      // <SomeComponent />
+      // we will only use `-` as the deleted marker
+      prismLanguage.deleted = /^[-].*$/m;
+      break;
+
+    default:
+      prismLanguage = prism.languages[language];
+      break;
+  }
+
+  if (!prismLanguage) {
+    if (language) {
+      throw new Error(`unsupported language: "${language}", "${code}"`);
+    } else {
+      prismLanguage = prism.languages.jsx;
+    }
+  }
+
+  return prism.highlight(code, prismLanguage);
+}
diff --git a/docs/src/pages/components/badges/BadgeAlignment.js b/docs/src/pages/components/badges/BadgeAlignment.js
index f0b7c467322dbf..847d6b8a8e3ebc 100644
--- a/docs/src/pages/components/badges/BadgeAlignment.js
+++ b/docs/src/pages/components/badges/BadgeAlignment.js
@@ -7,7 +7,7 @@ import Radio from '@material-ui/core/Radio';
 import RadioGroup from '@material-ui/core/RadioGroup';
 import { makeStyles } from '@material-ui/core/styles';
 import MailIcon from '@material-ui/icons/Mail';
-import MarkdownElement from 'docs/src/modules/components/MarkdownElement';
+import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
 
 const useStyles = makeStyles((theme) => ({
   root: {
@@ -38,15 +38,13 @@ export default function BadgeAlignment() {
     setVertical(event.target.value);
   };
 
-  const code = `
-\`\`\`jsx
+  const jsx = `
 <Badge
   anchorOrigin={{
     vertical: '${vertical}',
     horizontal: '${horizontal}',
   }}
 >
-\`\`\`
 `;
 
   return (
@@ -126,7 +124,7 @@ export default function BadgeAlignment() {
           <MailIcon />
         </Badge>
       </div>
-      <MarkdownElement text={code} />
+      <HighlightedCode code={jsx} language="jsx" />
     </div>
   );
 }
diff --git a/docs/src/pages/components/chips/ChipsPlayground.js b/docs/src/pages/components/chips/ChipsPlayground.js
index 97c890ffedeb64..41b68a821491b3 100644
--- a/docs/src/pages/components/chips/ChipsPlayground.js
+++ b/docs/src/pages/components/chips/ChipsPlayground.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { withStyles } from '@material-ui/core/styles';
-import MarkdownElement from 'docs/src/modules/components/MarkdownElement';
+import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
 import Grid from '@material-ui/core/Grid';
 import FormControl from '@material-ui/core/FormControl';
 import FormLabel from '@material-ui/core/FormLabel';
@@ -97,10 +97,8 @@ function ChipsPlayground(props) {
     iconToPlayground = null;
   }
 
-  const code = `
-\`\`\`jsx
+  const jsx = `
 <Chip ${variantToCode}${colorToCode}${sizeToCode}${onDeleteToCode}${avatarToCode}${iconToCode}/>
-\`\`\`
 `;
 
   return (
@@ -201,7 +199,7 @@ function ChipsPlayground(props) {
         </Grid>
       </Grid>
       <Grid item xs={12}>
-        <MarkdownElement text={code} />
+        <HighlightedCode code={jsx} language="jsx" />
       </Grid>
     </Grid>
   );
diff --git a/docs/src/pages/components/grid/InteractiveGrid.js b/docs/src/pages/components/grid/InteractiveGrid.js
index 3514ca31072270..54872088b17a2f 100644
--- a/docs/src/pages/components/grid/InteractiveGrid.js
+++ b/docs/src/pages/components/grid/InteractiveGrid.js
@@ -7,7 +7,7 @@ import RadioGroup from '@material-ui/core/RadioGroup';
 import Radio from '@material-ui/core/Radio';
 import Paper from '@material-ui/core/Paper';
 import { makeStyles } from '@material-ui/core/styles';
-import MarkdownElement from 'docs/src/modules/components/MarkdownElement';
+import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
 
 const useStyles = makeStyles((theme) => ({
   root: {
@@ -32,15 +32,13 @@ export default function InteractiveGrid() {
   const [justify, setJustify] = React.useState('center');
   const [alignItems, setAlignItems] = React.useState('center');
 
-  const code = `
-\`\`\`jsx
+  const jsx = `
 <Grid
   container
   direction="${direction}"
   justify="${justify}"
   alignItems="${alignItems}"
 >
-\`\`\`
 `;
 
   return (
@@ -141,7 +139,7 @@ export default function InteractiveGrid() {
         </Paper>
       </Grid>
       <Grid item xs={12}>
-        <MarkdownElement text={code} />
+        <HighlightedCode code={jsx} language="jsx" />
       </Grid>
     </Grid>
   );
diff --git a/docs/src/pages/components/grid/InteractiveGrid.tsx b/docs/src/pages/components/grid/InteractiveGrid.tsx
index 7837827d8492b0..581450ae276e9c 100644
--- a/docs/src/pages/components/grid/InteractiveGrid.tsx
+++ b/docs/src/pages/components/grid/InteractiveGrid.tsx
@@ -7,7 +7,7 @@ import RadioGroup from '@material-ui/core/RadioGroup';
 import Radio from '@material-ui/core/Radio';
 import Paper from '@material-ui/core/Paper';
 import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
-import MarkdownElement from 'docs/src/modules/components/MarkdownElement';
+import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
@@ -34,15 +34,13 @@ export default function InteractiveGrid() {
   const [justify, setJustify] = React.useState<GridJustification>('center');
   const [alignItems, setAlignItems] = React.useState<GridItemsAlignment>('center');
 
-  const code = `
-\`\`\`jsx
+  const jsx = `
 <Grid
   container
   direction="${direction}"
   justify="${justify}"
   alignItems="${alignItems}"
 >
-\`\`\`
 `;
 
   return (
@@ -143,7 +141,7 @@ export default function InteractiveGrid() {
         </Paper>
       </Grid>
       <Grid item xs={12}>
-        <MarkdownElement text={code} />
+        <HighlightedCode code={jsx} language="jsx" />
       </Grid>
     </Grid>
   );
diff --git a/docs/src/pages/components/material-icons/SearchIcons.js b/docs/src/pages/components/material-icons/SearchIcons.js
index 933647ff5bc8f6..7b1deddab22c07 100644
--- a/docs/src/pages/components/material-icons/SearchIcons.js
+++ b/docs/src/pages/components/material-icons/SearchIcons.js
@@ -8,7 +8,7 @@ import PropTypes from 'prop-types';
 import debounce from 'lodash/debounce';
 import Grid from '@material-ui/core/Grid';
 import Dialog from '@material-ui/core/Dialog';
-import MarkdownElement from 'docs/src/modules/components/MarkdownElement';
+import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
 import DialogActions from '@material-ui/core/DialogActions';
 import DialogContent from '@material-ui/core/DialogContent';
 import DialogTitle from '@material-ui/core/DialogTitle';
@@ -201,10 +201,11 @@ let DialogDetails = (props) => {
           <DialogTitle id="icon-dialog-title" onClick={handleClick}>
             {selectedIcon.key}
           </DialogTitle>
-          <MarkdownElement
+          <HighlightedCode
             className={classes.markdown}
             onClick={handleClick}
-            text={`\`\`\`js\nimport ${selectedIcon.key}Icon from '@material-ui/icons/${selectedIcon.key}';\n\`\`\``}
+            code={`import ${selectedIcon.key}Icon from '@material-ui/icons/${selectedIcon.key}';`}
+            language="js"
           />
           <Link
             className={classes.import}
diff --git a/docs/src/pages/components/popover/AnchorPlayground.js b/docs/src/pages/components/popover/AnchorPlayground.js
index 51f87d68ec7e49..7c7ccacd45f168 100644
--- a/docs/src/pages/components/popover/AnchorPlayground.js
+++ b/docs/src/pages/components/popover/AnchorPlayground.js
@@ -6,7 +6,7 @@ import FormLabel from '@material-ui/core/FormLabel';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
 import RadioGroup from '@material-ui/core/RadioGroup';
 import Radio from '@material-ui/core/Radio';
-import MarkdownElement from 'docs/src/modules/components/MarkdownElement';
+import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
 import Grid from '@material-ui/core/Grid';
 import { green } from '@material-ui/core/colors';
 import Typography from '@material-ui/core/Typography';
@@ -126,8 +126,7 @@ function AnchorPlayground(props) {
   anchorPosition={{ top: ${positionTop}, left: ${positionLeft} }}`;
   }
 
-  const code = `
-\`\`\`jsx
+  const jsx = `
 <Popover ${mode}
   anchorOrigin={{
     vertical: '${anchorOriginVertical}',
@@ -140,7 +139,6 @@ function AnchorPlayground(props) {
 >
   The content of the Popover.
 </Popover>
-\`\`\`
 `;
 
   const radioAnchorClasses = { root: classes.radioAnchor, checked: classes.checked };
@@ -304,7 +302,7 @@ function AnchorPlayground(props) {
           </FormControl>
         </Grid>
       </Grid>
-      <MarkdownElement text={code} />
+      <HighlightedCode code={jsx} language="jsx" />
     </div>
   );
 }
diff --git a/docs/src/pages/components/popper/ScrollPlayground.js b/docs/src/pages/components/popper/ScrollPlayground.js
index 06a0774b308aac..2270f9588c73ec 100644
--- a/docs/src/pages/components/popper/ScrollPlayground.js
+++ b/docs/src/pages/components/popper/ScrollPlayground.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { makeStyles } from '@material-ui/core/styles';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
-import MarkdownElement from 'docs/src/modules/components/MarkdownElement';
+import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
 import Grid from '@material-ui/core/Grid';
 import Typography from '@material-ui/core/Typography';
 import Button from '@material-ui/core/Button';
@@ -128,8 +128,7 @@ export default function ScrollPlayground() {
 
   const classes = useStyles();
 
-  const code = `
-  \`\`\`jsx
+  const jsx = `
   <Popper
     placement="${placement}"
     disablePortal={${disablePortal}}
@@ -147,7 +146,6 @@ export default function ScrollPlayground() {
       },
     }}
   >
-  \`\`\`
   `;
   const id = open ? 'scroll-playground' : null;
 
@@ -317,7 +315,7 @@ export default function ScrollPlayground() {
           />
         </Grid>
       </Grid>
-      <MarkdownElement text={code} />
+      <HighlightedCode code={jsx} language="jsx" />
     </div>
   );
 }
diff --git a/docs/src/pages/landing/Sponsors.js b/docs/src/pages/landing/Sponsors.js
index 13378faffb010b..175a29dbaad0df 100644
--- a/docs/src/pages/landing/Sponsors.js
+++ b/docs/src/pages/landing/Sponsors.js
@@ -1,14 +1,12 @@
 import React from 'react';
+import * as PropTypes from 'prop-types';
 import { useSelector } from 'react-redux';
 import { makeStyles } from '@material-ui/core/styles';
 import NoSsr from '@material-ui/core/NoSsr';
 import MarkdownElement from 'docs/src/modules/components/MarkdownElement';
 import Container from '@material-ui/core/Container';
 import Divider from '@material-ui/core/Divider';
-import mapTranslations from 'docs/src/modules/utils/mapTranslations';
-
-const req = require.context('./', false, /\.md$/);
-const backers = mapTranslations(req, 'md');
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
 const useStyles = makeStyles(
   (theme) => ({
@@ -30,18 +28,38 @@ const useStyles = makeStyles(
   { name: 'Sponsors' },
 );
 
-export default function Sponsors() {
+export default function Sponsors({ docs }) {
   const classes = useStyles();
   const userLanguage = useSelector((state) => state.options.userLanguage);
+  const { rendered } = docs[userLanguage];
 
   return (
     <div className={classes.root}>
       <NoSsr defer>
         <Container maxWidth="md">
           <Divider />
-          <MarkdownElement className={classes.markdownElement} text={backers[userLanguage]} />
+          {rendered.map((renderedMarkdown, index) => {
+            return (
+              <MarkdownElement
+                key={index}
+                className={classes.markdownElement}
+                renderedMarkdown={renderedMarkdown}
+              />
+            );
+          })}
         </Container>
       </NoSsr>
     </div>
   );
 }
+
+Sponsors.propTypes = {
+  docs: PropTypes.object.isRequired,
+};
+
+const requireRaw = require.context('./', false, /\.md$/);
+
+export async function getInitialProps() {
+  const { docs } = prepareMarkdown({ pageFilename: '/', requireRaw });
+  return { docs };
+}
diff --git a/docs/src/pages/landing/Steps.js b/docs/src/pages/landing/Steps.js
index 09e90dd1d54c33..261747ed726c28 100644
--- a/docs/src/pages/landing/Steps.js
+++ b/docs/src/pages/landing/Steps.js
@@ -9,7 +9,7 @@ import Button from '@material-ui/core/Button';
 import Divider from '@material-ui/core/Divider';
 import { FileDownload as FileDownloadIcon } from '@material-ui/docs';
 import BuildIcon from '@material-ui/icons/Build';
-import MarkdownElement from 'docs/src/modules/components/MarkdownElement';
+import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
 import Link from 'docs/src/modules/components/Link';
 
 const InstallationLink = React.forwardRef((buttonProps, ref) => (
@@ -100,13 +100,7 @@ function HomeSteps() {
             <Typography variant="subtitle1" component="div" gutterBottom>
               {t('installDescr')}
             </Typography>
-            <MarkdownElement
-              text={`
-\`\`\`sh
-$ npm install @material-ui/core
-\`\`\`
-                `}
-            />
+            <HighlightedCode code="$ npm install @material-ui/core" language="sh" />
             <Link
               variant="subtitle1"
               color="inherit"
@@ -118,12 +112,9 @@ $ npm install @material-ui/core
             <Typography variant="subtitle1" component="div" gutterBottom>
               {t('loadFont')}
             </Typography>
-            <MarkdownElement
-              text={`
-\`\`\`html
-<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
-\`\`\`
-                `}
+            <HighlightedCode
+              code={`<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />`}
+              language="html"
             />
           </div>
           <Divider className={classes.divider} />
@@ -140,17 +131,15 @@ $ npm install @material-ui/core
             <Typography variant="subtitle1" component="div" gutterBottom>
               {t('usageDescr')}
             </Typography>
-            <MarkdownElement
-              text={`
-\`\`\`jsx
+            <HighlightedCode
+              code={`
 import React from 'react';
 import { Button } from '@material-ui/core';
 
 function App() {
   return <Button color="primary">Hello World</Button>;
-}
-\`\`\`
-                `}
+}`}
+              language="jsx"
             />
           </div>
           <Divider className={classes.divider} />
diff --git a/docs/src/pages/landing/backers-aa.md b/docs/src/pages/landing/backers-aa.md
index 71a9219dbd298e..7579902a29b4fc 100644
--- a/docs/src/pages/landing/backers-aa.md
+++ b/docs/src/pages/landing/backers-aa.md
@@ -1,4 +1,4 @@
-<h2 align="center">crwdns130990:0crwdne130990:0</h2>
+## crwdns130990:0crwdne130990:0
 
 crwdns130992:0crwdne130992:0
 
diff --git a/docs/src/pages/landing/backers-de.md b/docs/src/pages/landing/backers-de.md
index f37c28327d08d3..8ef577f579325e 100644
--- a/docs/src/pages/landing/backers-de.md
+++ b/docs/src/pages/landing/backers-de.md
@@ -1,4 +1,4 @@
-<h2 align="center">Sponsoren von Material-UI</h2>
+## Sponsoren von Material-UI
 
 Die kontinuierliche Weiterentwicklung und Wartung von Material-UI wird durch diese großzügigen Sponsoren ermöglicht:
 
diff --git a/docs/src/pages/landing/backers-es.md b/docs/src/pages/landing/backers-es.md
index 1b70fc430780f3..147ef6440cf63b 100644
--- a/docs/src/pages/landing/backers-es.md
+++ b/docs/src/pages/landing/backers-es.md
@@ -1,4 +1,4 @@
-<h2 align="center">Patrocinadores de Material-UI</h2>
+## Patrocinadores de Material-UI
 
 El continuo desarrollo y mantenimiento de Material-UI es posible gracias a estos generosos patrocinadores:
 
diff --git a/docs/src/pages/landing/backers-fr.md b/docs/src/pages/landing/backers-fr.md
index 33cba1da8a5b49..333ea3cb8e20e0 100644
--- a/docs/src/pages/landing/backers-fr.md
+++ b/docs/src/pages/landing/backers-fr.md
@@ -1,4 +1,4 @@
-<h2 align="center">Sponsors de Material-UI</h2>
+## Sponsors de Material-UI
 
 Le développement et la maintenance continus de Material-UI sont rendus possibles par ces généreux sponsors :
 
diff --git a/docs/src/pages/landing/backers-ja.md b/docs/src/pages/landing/backers-ja.md
index 59e51d30c2dc8a..bc1c8d9981e931 100644
--- a/docs/src/pages/landing/backers-ja.md
+++ b/docs/src/pages/landing/backers-ja.md
@@ -1,4 +1,4 @@
-<h2 align="center">Material-UIのスポンサー</h2>
+## Material-UIのスポンサー
 
 Material-UI の継続的な開発や保守は、以下の寛大なスポンサーにより可能になりました:
 
diff --git a/docs/src/pages/landing/backers-pt.md b/docs/src/pages/landing/backers-pt.md
index 3444c654f9750a..cc02713264ba7f 100644
--- a/docs/src/pages/landing/backers-pt.md
+++ b/docs/src/pages/landing/backers-pt.md
@@ -1,4 +1,4 @@
-<h2 align="center">Patrocinadores do Material-UI</h2>
+## Patrocinadores do Material-UI
 
 O desenvolvimento contínuo e a manutenção do Material-UI só é possível por causa destes generosos patrocinadores:
 
diff --git a/docs/src/pages/landing/backers-ru.md b/docs/src/pages/landing/backers-ru.md
index 1706eafca8e4ea..c6eca6d800eb1b 100644
--- a/docs/src/pages/landing/backers-ru.md
+++ b/docs/src/pages/landing/backers-ru.md
@@ -1,4 +1,4 @@
-<h2 align="center">Спонсоры Material-UI</h2>
+## Спонсоры Material-UI
 
 Дальнейшее развитие и поддержание Material-UI возможно благодаря этим щедрым спонсорам:
 
diff --git a/docs/src/pages/landing/backers-zh.md b/docs/src/pages/landing/backers-zh.md
index 1539696b4a6bb5..a46c4b3fec959b 100644
--- a/docs/src/pages/landing/backers-zh.md
+++ b/docs/src/pages/landing/backers-zh.md
@@ -1,4 +1,4 @@
-<h2 align="center">Material UI 的赞助人</h2>
+## Material UI 的赞助人
 
 这些赞助人的慷慨相助使 Material-UI 的持续开发和维护成为可能：
 
diff --git a/docs/src/pages/landing/backers.md b/docs/src/pages/landing/backers.md
index 1e51e492080d9b..d854a22cada63c 100644
--- a/docs/src/pages/landing/backers.md
+++ b/docs/src/pages/landing/backers.md
@@ -1,4 +1,4 @@
-<h2 align="center">Material-UI's sponsors</h2>
+## Material-UI's sponsors
 
 The continued development and maintenance of Material-UI is made possible by these generous sponsors:
 
diff --git a/docs/types/docs.d.ts b/docs/types/docs.d.ts
index e48972f2d434ed..72b1ca6c25564d 100644
--- a/docs/types/docs.d.ts
+++ b/docs/types/docs.d.ts
@@ -1,4 +1,4 @@
-declare module 'docs/src/modules/components/MarkdownElement' {
+declare module 'docs/src/modules/components/HighlightedCode' {
   import React from 'react';
   import { StyledComponentProps } from '@material-ui/core/styles';
 
@@ -6,9 +6,14 @@ declare module 'docs/src/modules/components/MarkdownElement' {
   export interface Props extends StyledComponentProps<ClassKey> {
     className?: string;
     /**
-     * text in markdown
+     * plain string
      */
-    text: string;
+    code: string;
+    /**
+     * short identifier of the code language
+     * see utils/prism.js for possible languages
+     */
+    language: string;
   }
-  export default function MarkdownElement(props: Props): React.ReactElement;
+  export default function HighlightedCode(props: Props): React.ReactElement;
 }