diff --git a/.eslintignore b/.eslintignore
index 1eab89a2b053b..20da6ade87ae3 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -1,9 +1,10 @@
 /.git
 /docs/.next
 /docs/export
+/docs/pages/playground/
 /lerna.json
 /packages/grid/x-data-grid/src/lib
+build
 CHANGELOG.md
 dist
 node_modules
-build
diff --git a/.gitignore b/.gitignore
index a4f553926bb49..f041afe1dc79f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -11,7 +11,7 @@ __diff_output__
 /.nyc_output
 /coverage
 /docs/.next
-/docs/pages/playground*
+/docs/pages/playground/
 /docs/export
 /test/regressions/screenshots
 build
diff --git a/docs/package.json b/docs/package.json
index c3957616c369a..2dbbaddd15799 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -8,10 +8,12 @@
     "build": "cross-env NODE_ENV=production next build --profile",
     "build:clean": "rimraf .next && yarn build",
     "build-sw": "node ./scripts/buildServiceWorker.js",
-    "dev": "rimraf ./node_modules/.cache/babel-loader && next dev --port 3001",
+    "dev": "next dev --port 3001",
     "deploy": "git push upstream master:docs-v5",
     "export": "rimraf docs/export && next export --threads=3 -o export && yarn build-sw",
     "icons": "rimraf public/static/icons/* && node ./scripts/buildIcons.js",
+    "start": "next start",
+    "create-playground": "cpy --cwd=./scripts/ playground.template.tsx ../pages/playground --rename=index.tsx",
     "typescript": "tsc -p tsconfig.json",
     "typescript:transpile": "cross-env BABEL_ENV=development babel-node --extensions \".tsx,.ts,.js\" scripts/formattedTSDemos",
     "typescript:transpile:dev": "cross-env BABEL_ENV=development babel-node --extensions \".tsx,.ts,.js\" scripts/formattedTSDemos --watch"
diff --git a/docs/pages/playground/.gitkeep b/docs/pages/playground/.gitkeep
new file mode 100644
index 0000000000000..e69de29bb2d1d
diff --git a/docs/pages/playground/example.tsx b/docs/pages/playground/example.tsx
deleted file mode 100644
index 8a3310b3dbbbb..0000000000000
--- a/docs/pages/playground/example.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import * as React from 'react';
-
-export default function PlaygroundExample() {
-  return (
-    <div>
-      <p>A playground for a fast iteration development cycle.</p>
-      <p>
-        This page is accessible via{' '}
-        <a href="http://localhost:3001/playground/example/">playground/example</a>
-      </p>
-      <p>
-        You can create as many components here as you like and access them by changing{' '}
-        <strong>example</strong> to whatever your other component is named.
-      </p>
-    </div>
-  );
-}
diff --git a/docs/scripts/playground.template.tsx b/docs/scripts/playground.template.tsx
new file mode 100644
index 0000000000000..8892bf1b46a8d
--- /dev/null
+++ b/docs/scripts/playground.template.tsx
@@ -0,0 +1,7 @@
+import * as React from 'react';
+
+export default function Playground() {
+  return (
+    <div>A playground for a fast iteration development cycle in isolation outside of git.</div>
+  );
+}
diff --git a/package.json b/package.json
index 17ecf3121afe0..40c813a2a5813 100644
--- a/package.json
+++ b/package.json
@@ -2,9 +2,11 @@
   "version": "6.0.0-alpha.3",
   "private": true,
   "scripts": {
-    "start": "yarn docs:dev",
+    "start": "yarn && yarn docs:dev",
     "benchmark:browser": "yarn workspace benchmark browser",
     "docs:dev": "yarn workspace docs dev",
+    "docs:start": "yarn workspace docs start",
+    "docs:create-playground": "yarn workspace docs create-playground",
     "docs:api": "yarn docs:api:build",
     "docs:api:build": "cross-env BABEL_ENV=development babel-node -i \"/node_modules/(?!@mui)/\" -x .ts,.tsx,.js ./docs/scripts/api/buildApi.ts",
     "docs:build": "yarn workspace docs build",