diff --git a/docs/docusaurus.config.js b/docs/docusaurus.config.js
index f1da3e4..02b78a4 100644
--- a/docs/docusaurus.config.js
+++ b/docs/docusaurus.config.js
@@ -85,6 +85,11 @@ const config = {
             label: "API",
             position: "left",
           },
+          {
+            to: "/playground/",
+            label: "Try It",
+            position: "left",
+          },
           {
             href: "https://github.com/jg-rp/json-p3",
             label: "GitHub",
diff --git a/docs/package-lock.json b/docs/package-lock.json
index cf6bec0..6e5b6d8 100644
--- a/docs/package-lock.json
+++ b/docs/package-lock.json
@@ -10,10 +10,18 @@
       "dependencies": {
         "@docusaurus/core": "^2.4.3",
         "@docusaurus/preset-classic": "^2.4.3",
+        "@emotion/react": "^11.11.1",
+        "@emotion/styled": "^11.11.0",
+        "@fontsource/roboto": "^5.0.8",
         "@mdx-js/react": "^1.6.22",
+        "@monaco-editor/react": "^4.5.2",
+        "@mui/material": "^5.14.10",
         "@tsconfig/docusaurus": "^2.0.0",
         "clsx": "^1.2.1",
         "docusaurus-plugin-typedoc": "^0.20.1",
+        "json-p3": "^0.2.0",
+        "monaco-editor": "^0.43.0",
+        "monaco-themes": "^0.4.4",
         "prism-react-renderer": "^1.3.5",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
@@ -28,6 +36,49 @@
         "node": ">=16.14"
       }
     },
+    "..": {
+      "version": "0.2.0",
+      "extraneous": true,
+      "license": "MIT",
+      "devDependencies": {
+        "@babel/cli": "^7.22.10",
+        "@babel/core": "^7.22.10",
+        "@babel/preset-env": "^7.22.10",
+        "@babel/preset-typescript": "^7.22.5",
+        "@jest/globals": "^29.6.3",
+        "@rollup/plugin-babel": "^6.0.3",
+        "@rollup/plugin-commonjs": "^25.0.4",
+        "@rollup/plugin-node-resolve": "^15.2.1",
+        "@rollup/plugin-replace": "^5.0.2",
+        "@rollup/plugin-terser": "^0.4.3",
+        "@rollup/plugin-typescript": "^11.1.3",
+        "@types/jest": "^29.5.3",
+        "@typescript-eslint/eslint-plugin": "^6.4.1",
+        "@typescript-eslint/parser": "^6.4.1",
+        "eslint": "^8.47.0",
+        "eslint-config-prettier": "^9.0.0",
+        "eslint-plugin-escompat": "^3.4.0",
+        "eslint-plugin-eslint-comments": "^3.2.0",
+        "eslint-plugin-filenames": "^1.3.2",
+        "eslint-plugin-github": "^4.9.2",
+        "eslint-plugin-i18n-text": "^1.0.1",
+        "eslint-plugin-import": "^2.28.1",
+        "eslint-plugin-jsdoc": "^46.5.0",
+        "eslint-plugin-n": "^16.0.2",
+        "eslint-plugin-no-only-tests": "^3.1.0",
+        "eslint-plugin-node": "^11.1.0",
+        "eslint-plugin-prettier": "^5.0.0",
+        "eslint-plugin-promise": "^6.1.1",
+        "eslint-plugin-sonarjs": "^0.20.0",
+        "eslint-plugin-tsdoc": "^0.2.17",
+        "jest": "^29.6.3",
+        "prettier": "^3.0.2",
+        "rollup": "^3.29.0",
+        "ts-jest": "^29.1.1",
+        "tslib": "^2.6.2",
+        "typescript": "^5.1.6"
+      }
+    },
     "node_modules/@algolia/autocomplete-core": {
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/@algolia/autocomplete-core/-/autocomplete-core-1.9.3.tgz",
@@ -2744,6 +2795,186 @@
         "node": ">=16.14"
       }
     },
+    "node_modules/@emotion/babel-plugin": {
+      "version": "11.11.0",
+      "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.11.0.tgz",
+      "integrity": "sha512-m4HEDZleaaCH+XgDDsPF15Ht6wTLsgDTeR3WYj9Q/k76JtWhrJjcP4+/XlG8LGT/Rol9qUfOIztXeA84ATpqPQ==",
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.16.7",
+        "@babel/runtime": "^7.18.3",
+        "@emotion/hash": "^0.9.1",
+        "@emotion/memoize": "^0.8.1",
+        "@emotion/serialize": "^1.1.2",
+        "babel-plugin-macros": "^3.1.0",
+        "convert-source-map": "^1.5.0",
+        "escape-string-regexp": "^4.0.0",
+        "find-root": "^1.1.0",
+        "source-map": "^0.5.7",
+        "stylis": "4.2.0"
+      }
+    },
+    "node_modules/@emotion/babel-plugin/node_modules/source-map": {
+      "version": "0.5.7",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
+      "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/@emotion/cache": {
+      "version": "11.11.0",
+      "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.11.0.tgz",
+      "integrity": "sha512-P34z9ssTCBi3e9EI1ZsWpNHcfY1r09ZO0rZbRO2ob3ZQMnFI35jB536qoXbkdesr5EUhYi22anuEJuyxifaqAQ==",
+      "dependencies": {
+        "@emotion/memoize": "^0.8.1",
+        "@emotion/sheet": "^1.2.2",
+        "@emotion/utils": "^1.2.1",
+        "@emotion/weak-memoize": "^0.3.1",
+        "stylis": "4.2.0"
+      }
+    },
+    "node_modules/@emotion/hash": {
+      "version": "0.9.1",
+      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.1.tgz",
+      "integrity": "sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ=="
+    },
+    "node_modules/@emotion/is-prop-valid": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.1.tgz",
+      "integrity": "sha512-61Mf7Ufx4aDxx1xlDeOm8aFFigGHE4z+0sKCa+IHCeZKiyP9RLD0Mmx7m8b9/Cf37f7NAvQOOJAbQQGVr5uERw==",
+      "dependencies": {
+        "@emotion/memoize": "^0.8.1"
+      }
+    },
+    "node_modules/@emotion/memoize": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz",
+      "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA=="
+    },
+    "node_modules/@emotion/react": {
+      "version": "11.11.1",
+      "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.11.1.tgz",
+      "integrity": "sha512-5mlW1DquU5HaxjLkfkGN1GA/fvVGdyHURRiX/0FHl2cfIfRxSOfmxEH5YS43edp0OldZrZ+dkBKbngxcNCdZvA==",
+      "dependencies": {
+        "@babel/runtime": "^7.18.3",
+        "@emotion/babel-plugin": "^11.11.0",
+        "@emotion/cache": "^11.11.0",
+        "@emotion/serialize": "^1.1.2",
+        "@emotion/use-insertion-effect-with-fallbacks": "^1.0.1",
+        "@emotion/utils": "^1.2.1",
+        "@emotion/weak-memoize": "^0.3.1",
+        "hoist-non-react-statics": "^3.3.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@emotion/serialize": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.1.2.tgz",
+      "integrity": "sha512-zR6a/fkFP4EAcCMQtLOhIgpprZOwNmCldtpaISpvz348+DP4Mz8ZoKaGGCQpbzepNIUWbq4w6hNZkwDyKoS+HA==",
+      "dependencies": {
+        "@emotion/hash": "^0.9.1",
+        "@emotion/memoize": "^0.8.1",
+        "@emotion/unitless": "^0.8.1",
+        "@emotion/utils": "^1.2.1",
+        "csstype": "^3.0.2"
+      }
+    },
+    "node_modules/@emotion/sheet": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.2.2.tgz",
+      "integrity": "sha512-0QBtGvaqtWi+nx6doRwDdBIzhNdZrXUppvTM4dtZZWEGTXL/XE/yJxLMGlDT1Gt+UHH5IX1n+jkXyytE/av7OA=="
+    },
+    "node_modules/@emotion/styled": {
+      "version": "11.11.0",
+      "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.11.0.tgz",
+      "integrity": "sha512-hM5Nnvu9P3midq5aaXj4I+lnSfNi7Pmd4EWk1fOZ3pxookaQTNew6bp4JaCBYM4HVFZF9g7UjJmsUmC2JlxOng==",
+      "dependencies": {
+        "@babel/runtime": "^7.18.3",
+        "@emotion/babel-plugin": "^11.11.0",
+        "@emotion/is-prop-valid": "^1.2.1",
+        "@emotion/serialize": "^1.1.2",
+        "@emotion/use-insertion-effect-with-fallbacks": "^1.0.1",
+        "@emotion/utils": "^1.2.1"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.0.0-rc.0",
+        "react": ">=16.8.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@emotion/unitless": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.1.tgz",
+      "integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ=="
+    },
+    "node_modules/@emotion/use-insertion-effect-with-fallbacks": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.1.tgz",
+      "integrity": "sha512-jT/qyKZ9rzLErtrjGgdkMBn2OP8wl0G3sQlBb3YPryvKHsjvINUhVaPFfP+fpBcOkmrVOVEEHQFJ7nbj2TH2gw==",
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/@emotion/utils": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.2.1.tgz",
+      "integrity": "sha512-Y2tGf3I+XVnajdItskUCn6LX+VUDmP6lTL4fcqsXAv43dnlbZiuW4MWQW38rW/BVWSE7Q/7+XQocmpnRYILUmg=="
+    },
+    "node_modules/@emotion/weak-memoize": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.3.1.tgz",
+      "integrity": "sha512-EsBwpc7hBUJWAsNPBmJy4hxWx12v6bshQsldrVmjxJoc3isbxhOrF2IcCpaXxfvq03NwkI7sbsOLXbYuqF/8Ww=="
+    },
+    "node_modules/@floating-ui/core": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.5.0.tgz",
+      "integrity": "sha512-kK1h4m36DQ0UHGj5Ah4db7R0rHemTqqO0QLvUqi1/mUUp3LuAWbWxdxSIf/XsnH9VS6rRVPLJCncjRzUvyCLXg==",
+      "dependencies": {
+        "@floating-ui/utils": "^0.1.3"
+      }
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.5.3",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.5.3.tgz",
+      "integrity": "sha512-ClAbQnEqJAKCJOEbbLo5IUlZHkNszqhuxS4fHAVxRPXPya6Ysf2G8KypnYcOTpx6I8xcgF9bbHb6g/2KpbV8qA==",
+      "dependencies": {
+        "@floating-ui/core": "^1.4.2",
+        "@floating-ui/utils": "^0.1.3"
+      }
+    },
+    "node_modules/@floating-ui/react-dom": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.0.2.tgz",
+      "integrity": "sha512-5qhlDvjaLmAst/rKb3VdlCinwTF4EYMiVxuuc/HVUjs46W0zgtbMmAZ1UTsDrRTxRmUEzl92mOtWbeeXL26lSQ==",
+      "dependencies": {
+        "@floating-ui/dom": "^1.5.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@floating-ui/utils": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.1.4.tgz",
+      "integrity": "sha512-qprfWkn82Iw821mcKofJ5Pk9wgioHicxcQMxx+5zt5GSKoqdWvgG5AxVmpmUUjzTLPVSH5auBrhI93Deayn/DA=="
+    },
+    "node_modules/@fontsource/roboto": {
+      "version": "5.0.8",
+      "resolved": "https://registry.npmjs.org/@fontsource/roboto/-/roboto-5.0.8.tgz",
+      "integrity": "sha512-XxPltXs5R31D6UZeLIV1td3wTXU3jzd3f2DLsXI8tytMGBkIsGcc9sIyiupRtA8y73HAhuSCeweOoBqf6DbWCA=="
+    },
     "node_modules/@hapi/hoek": {
       "version": "9.3.0",
       "resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-9.3.0.tgz",
@@ -2966,6 +3197,284 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/@monaco-editor/loader": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/@monaco-editor/loader/-/loader-1.3.3.tgz",
+      "integrity": "sha512-6KKF4CTzcJiS8BJwtxtfyYt9shBiEv32ateQ9T4UVogwn4HM/uPo9iJd2Dmbkpz8CM6Y0PDUpjnZzCwC+eYo2Q==",
+      "dependencies": {
+        "state-local": "^1.0.6"
+      },
+      "peerDependencies": {
+        "monaco-editor": ">= 0.21.0 < 1"
+      }
+    },
+    "node_modules/@monaco-editor/react": {
+      "version": "4.5.2",
+      "resolved": "https://registry.npmjs.org/@monaco-editor/react/-/react-4.5.2.tgz",
+      "integrity": "sha512-emcWu6vg1OpXPiYll4aPOaXe8bwYB4UaaNTwtArFLgMoNGBzRZb2Xn0Bra2HMIFM7QLgs7fCGunHO5LkfT2LBA==",
+      "dependencies": {
+        "@monaco-editor/loader": "^1.3.3"
+      },
+      "peerDependencies": {
+        "monaco-editor": ">= 0.25.0 < 1",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@mui/base": {
+      "version": "5.0.0-beta.16",
+      "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-beta.16.tgz",
+      "integrity": "sha512-OYxhC81c9bO0wobGcM8rrY5bRwpCXAI21BL0P2wz/2vTv4ek7ALz9+U5M8wgdmtRNUhmCmAB4L2WRwFRf5Cd8Q==",
+      "dependencies": {
+        "@babel/runtime": "^7.22.15",
+        "@floating-ui/react-dom": "^2.0.2",
+        "@mui/types": "^7.2.4",
+        "@mui/utils": "^5.14.10",
+        "@popperjs/core": "^2.11.8",
+        "clsx": "^2.0.0",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui"
+      },
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18.0.0",
+        "react": "^17.0.0 || ^18.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/base/node_modules/clsx": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.0.0.tgz",
+      "integrity": "sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@mui/core-downloads-tracker": {
+      "version": "5.14.10",
+      "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.14.10.tgz",
+      "integrity": "sha512-kPHu/NhZq1k+vSZR5wq3AyUfD4bnfWAeuKpps0+8PS7ZHQ2Lyv1cXJh+PlFdCIOa0PK98rk3JPwMzS8BMhdHwQ==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui"
+      }
+    },
+    "node_modules/@mui/material": {
+      "version": "5.14.10",
+      "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.14.10.tgz",
+      "integrity": "sha512-ejFMppnO+lzBXpzju+N4SSz0Mhmi5sihXUGcr5FxpgB6bfUP0Lpe32O0Sw/3s8xlmLEvG1fqVT0rRyAVMlCA+A==",
+      "dependencies": {
+        "@babel/runtime": "^7.22.15",
+        "@mui/base": "5.0.0-beta.16",
+        "@mui/core-downloads-tracker": "^5.14.10",
+        "@mui/system": "^5.14.10",
+        "@mui/types": "^7.2.4",
+        "@mui/utils": "^5.14.10",
+        "@types/react-transition-group": "^4.4.6",
+        "clsx": "^2.0.0",
+        "csstype": "^3.1.2",
+        "prop-types": "^15.8.1",
+        "react-is": "^18.2.0",
+        "react-transition-group": "^4.4.5"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.5.0",
+        "@emotion/styled": "^11.3.0",
+        "@types/react": "^17.0.0 || ^18.0.0",
+        "react": "^17.0.0 || ^18.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/react": {
+          "optional": true
+        },
+        "@emotion/styled": {
+          "optional": true
+        },
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/material/node_modules/clsx": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.0.0.tgz",
+      "integrity": "sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@mui/material/node_modules/react-is": {
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
+      "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
+    },
+    "node_modules/@mui/private-theming": {
+      "version": "5.14.10",
+      "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.14.10.tgz",
+      "integrity": "sha512-f67xOj3H06wWDT9xBg7hVL/HSKNF+HG1Kx0Pm23skkbEqD2Ef2Lif64e5nPdmWVv+7cISCYtSuE2aeuzrZe78w==",
+      "dependencies": {
+        "@babel/runtime": "^7.22.15",
+        "@mui/utils": "^5.14.10",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui"
+      },
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18.0.0",
+        "react": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/styled-engine": {
+      "version": "5.14.10",
+      "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.14.10.tgz",
+      "integrity": "sha512-EJckxmQHrsBvDbFu1trJkvjNw/1R7jfNarnqPSnL+jEQawCkQIqVELWLrlOa611TFtxSJGkdUfCFXeJC203HVg==",
+      "dependencies": {
+        "@babel/runtime": "^7.22.15",
+        "@emotion/cache": "^11.11.0",
+        "csstype": "^3.1.2",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.4.1",
+        "@emotion/styled": "^11.3.0",
+        "react": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/react": {
+          "optional": true
+        },
+        "@emotion/styled": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/system": {
+      "version": "5.14.10",
+      "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.14.10.tgz",
+      "integrity": "sha512-QQmtTG/R4gjmLiL5ECQ7kRxLKDm8aKKD7seGZfbINtRVJDyFhKChA1a+K2bfqIAaBo1EMDv+6FWNT1Q5cRKjFA==",
+      "dependencies": {
+        "@babel/runtime": "^7.22.15",
+        "@mui/private-theming": "^5.14.10",
+        "@mui/styled-engine": "^5.14.10",
+        "@mui/types": "^7.2.4",
+        "@mui/utils": "^5.14.10",
+        "clsx": "^2.0.0",
+        "csstype": "^3.1.2",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.5.0",
+        "@emotion/styled": "^11.3.0",
+        "@types/react": "^17.0.0 || ^18.0.0",
+        "react": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/react": {
+          "optional": true
+        },
+        "@emotion/styled": {
+          "optional": true
+        },
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/system/node_modules/clsx": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.0.0.tgz",
+      "integrity": "sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@mui/types": {
+      "version": "7.2.4",
+      "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.4.tgz",
+      "integrity": "sha512-LBcwa8rN84bKF+f5sDyku42w1NTxaPgPyYKODsh01U1fVstTClbUoSA96oyRBnSNyEiAVjKm6Gwx9vjR+xyqHA==",
+      "peerDependencies": {
+        "@types/react": "*"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/utils": {
+      "version": "5.14.10",
+      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.14.10.tgz",
+      "integrity": "sha512-Rn+vYQX7FxkcW0riDX/clNUwKuOJFH45HiULxwmpgnzQoQr3A0lb+QYwaZ+FAkZrR7qLoHKmLQlcItu6LT0y/Q==",
+      "dependencies": {
+        "@babel/runtime": "^7.22.15",
+        "@types/prop-types": "^15.7.5",
+        "prop-types": "^15.8.1",
+        "react-is": "^18.2.0"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui"
+      },
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18.0.0",
+        "react": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/utils/node_modules/react-is": {
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
+      "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -3003,6 +3512,15 @@
       "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.23.tgz",
       "integrity": "sha512-C16M+IYz0rgRhWZdCmK+h58JMv8vijAA61gmz2rspCSwKwzBebpdcsiUmwrtJRdphuY30i6BSLEOP8ppbNLyLg=="
     },
+    "node_modules/@popperjs/core": {
+      "version": "2.11.8",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
     "node_modules/@sideway/address": {
       "version": "4.1.4",
       "resolved": "https://registry.npmjs.org/@sideway/address/-/address-4.1.4.tgz",
@@ -3532,6 +4050,14 @@
         "@types/react-router": "*"
       }
     },
+    "node_modules/@types/react-transition-group": {
+      "version": "4.4.6",
+      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.6.tgz",
+      "integrity": "sha512-VnCdSxfcm08KjsJVQcfBmhEQAPnLB8G08hAxn39azX1qYBQ/5RVQuoHuKIcfKOdncuaUvEpFKFzEvbtIMsfVew==",
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/retry": {
       "version": "0.12.0",
       "resolved": "https://registry.npmjs.org/@types/retry/-/retry-0.12.0.tgz",
@@ -4141,6 +4667,20 @@
       "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.10.4.tgz",
       "integrity": "sha512-O4KCvQA6lLiMU9l2eawBPMf1xPP8xPfB3iEQw150hOVTqj/rfXz0ThTb4HEzqQfs2Bmo5Ay8BzxfzVtBrr9dVg=="
     },
+    "node_modules/babel-plugin-macros": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz",
+      "integrity": "sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "cosmiconfig": "^7.0.0",
+        "resolve": "^1.19.0"
+      },
+      "engines": {
+        "node": ">=10",
+        "npm": ">=6"
+      }
+    },
     "node_modules/babel-plugin-polyfill-corejs2": {
       "version": "0.4.5",
       "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.4.5.tgz",
@@ -5634,6 +6174,15 @@
         "utila": "~0.4"
       }
     },
+    "node_modules/dom-helpers": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+      "dependencies": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
+      }
+    },
     "node_modules/dom-serializer": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
@@ -6104,6 +6653,11 @@
       "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
       "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw=="
     },
+    "node_modules/fast-plist": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/fast-plist/-/fast-plist-0.1.3.tgz",
+      "integrity": "sha512-d9cEfo/WcOezgPLAC/8t8wGb6YOD6JTCPMw2QcG2nAdFmyY+9rTUizCTaGjIZAloWENTEUMAPpkUAIJJJ0i96A=="
+    },
     "node_modules/fast-url-parser": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/fast-url-parser/-/fast-url-parser-1.1.3.tgz",
@@ -6270,6 +6824,11 @@
         "url": "https://github.com/avajs/find-cache-dir?sponsor=1"
       }
     },
+    "node_modules/find-root": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
+      "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng=="
+    },
     "node_modules/find-up": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
@@ -7713,6 +8272,11 @@
       "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.0.tgz",
       "integrity": "sha512-CuUqjv0FUZIdXkHPI8MezCnFCdaTAacej1TZYulLoAg1h/PhwkdXFN4V/gzY4g+fMBCOV2xF+rp7t2XD2ns/NQ=="
     },
+    "node_modules/json-p3": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/json-p3/-/json-p3-0.2.0.tgz",
+      "integrity": "sha512-oF2MCmnrZvO6Iq6ReWDzMRh5s84PuuX44J7TUvJrBiAmeyFO9eJYkQwu4QmuMR0nmRbu9/Mgx2FSz2OISuL7NQ=="
+    },
     "node_modules/json-parse-even-better-errors": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
@@ -8240,6 +8804,19 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/monaco-editor": {
+      "version": "0.43.0",
+      "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.43.0.tgz",
+      "integrity": "sha512-cnoqwQi/9fml2Szamv1XbSJieGJ1Dc8tENVMD26Kcfl7xGQWp7OBKMjlwKVGYFJ3/AXJjSOGvcqK7Ry/j9BM1Q=="
+    },
+    "node_modules/monaco-themes": {
+      "version": "0.4.4",
+      "resolved": "https://registry.npmjs.org/monaco-themes/-/monaco-themes-0.4.4.tgz",
+      "integrity": "sha512-Hbb9pvRrpSi0rZezcB/IOdQnpx10o55Lx4zFdRAAVpFMa1HP7FgaqEZdKffb4ovd90fETCixeFO9JPYFMAq+TQ==",
+      "dependencies": {
+        "fast-plist": "^0.1.3"
+      }
+    },
     "node_modules/mrmime": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/mrmime/-/mrmime-1.0.1.tgz",
@@ -9935,6 +10512,21 @@
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
       }
     },
+    "node_modules/react-transition-group": {
+      "version": "4.4.5",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
+      "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
+      "dependencies": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.6.0",
+        "react-dom": ">=16.6.0"
+      }
+    },
     "node_modules/readable-stream": {
       "version": "3.6.2",
       "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
@@ -11069,6 +11661,11 @@
       "integrity": "sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w==",
       "deprecated": "Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility"
     },
+    "node_modules/state-local": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/state-local/-/state-local-1.0.7.tgz",
+      "integrity": "sha512-HTEHMNieakEnoe33shBYcZ7NX83ACUjCu8c40iOGEZsngj9zRnkqS9j1pqQPXwobB0ZcVTk27REb7COQ0UR59w=="
+    },
     "node_modules/state-toggle": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/state-toggle/-/state-toggle-1.0.3.tgz",
@@ -11214,6 +11811,11 @@
         "postcss": "^8.2.15"
       }
     },
+    "node_modules/stylis": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz",
+      "integrity": "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw=="
+    },
     "node_modules/supports-color": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
diff --git a/docs/package.json b/docs/package.json
index ab49f90..b768d3a 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -16,10 +16,18 @@
   "dependencies": {
     "@docusaurus/core": "^2.4.3",
     "@docusaurus/preset-classic": "^2.4.3",
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
+    "@fontsource/roboto": "^5.0.8",
     "@mdx-js/react": "^1.6.22",
+    "@monaco-editor/react": "^4.5.2",
+    "@mui/material": "^5.14.10",
     "@tsconfig/docusaurus": "^2.0.0",
     "clsx": "^1.2.1",
     "docusaurus-plugin-typedoc": "^0.20.1",
+    "json-p3": "^0.2.0",
+    "monaco-editor": "^0.43.0",
+    "monaco-themes": "^0.4.4",
     "prism-react-renderer": "^1.3.5",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
diff --git a/docs/src/pages/playground.js b/docs/src/pages/playground.js
new file mode 100644
index 0000000..c1086b4
--- /dev/null
+++ b/docs/src/pages/playground.js
@@ -0,0 +1,176 @@
+import React from "react";
+import { useState } from "react";
+import Layout from "@theme/Layout";
+
+import { Container } from "@mui/material";
+import Paper from "@mui/material/Paper";
+import Grid from "@mui/material/Unstable_Grid2";
+
+import Editor from "@monaco-editor/react";
+
+import { jsonpath, version as p3version } from "json-p3/dist/json-p3.esm";
+
+const commonEditorOptions = {
+  codeLens: false,
+  minimap: { enabled: false },
+  tabSize: 2,
+  renderLineHighlight: "none",
+  scrollBeyondLastLine: false,
+  scrollbar: { alwaysConsumeMouseWheel: false },
+  padding: { bottom: 10, top: 10 },
+};
+
+const theme = "vs-dark";
+
+// function handleEditorDidMount(editor, monaco) {
+//   import("monaco-themes/themes/Tomorrow-Night-Eighties.json")
+//     .then((themeData) => {
+//       monaco.editor.defineTheme("Tomorrow-Night-Eighties", themeData);
+//     })
+//     .then((_) => monaco.editor.setTheme("Tomorrow-Night-Eighties"));
+// }
+
+function QueryEditor({ defaultQuery, onChange }) {
+  return (
+    <Editor
+      height="8vh"
+      language="text"
+      theme={theme}
+      defaultValue={defaultQuery}
+      onChange={onChange}
+      options={{ ...commonEditorOptions }}
+    />
+  );
+}
+
+function JSONEditor({ onChange }) {
+  const defaultValue = JSON.stringify(
+    {
+      users: [
+        { name: "Sue", score: 100 },
+        { name: "John", score: 86, admin: true },
+        { name: "Sally", score: 84, admin: false },
+        { name: "Jane", score: 55 },
+      ],
+      moderator: "John",
+    },
+    undefined,
+    "  ",
+  );
+
+  return (
+    <Editor
+      height="70vh"
+      language="json"
+      theme={theme}
+      defaultValue={defaultValue}
+      onChange={onChange}
+      options={{ ...commonEditorOptions }}
+    />
+  );
+}
+
+function ResultsEditor({ result }) {
+  return (
+    <Editor
+      height="70vh"
+      language="json"
+      theme={theme}
+      value={result}
+      options={{
+        ...commonEditorOptions,
+        wordWrap: "on",
+      }}
+    />
+  );
+}
+
+export default function Playground() {
+  let timer;
+  const timerInterval = 1000;
+  const defaultQuery = "$.users[?@.score > 85]";
+  const defaultResult = JSON.stringify(
+    [
+      { name: "Sue", score: 100 },
+      { name: "John", score: 86, admin: true },
+    ],
+    undefined,
+    "  ",
+  );
+  const defaultData = {
+    users: [
+      { name: "Sue", score: 100 },
+      { name: "John", score: 86, admin: true },
+      { name: "Sally", score: 84, admin: false },
+      { name: "Jane", score: 55 },
+    ],
+    moderator: "John",
+  };
+
+  const [query, setQuery] = useState(jsonpath.compile(defaultQuery));
+  const [result, setResult] = useState(defaultResult);
+  const [data, setData] = useState(defaultData);
+
+  function _onQueryChange(value) {
+    try {
+      const path = jsonpath.compile(value.trim());
+      setQuery(path);
+      const rv = path.query(data).values();
+      setResult(JSON.stringify(rv, undefined, "  "));
+    } catch (error) {
+      setResult(JSON.stringify(String(error), undefined, "  "));
+    }
+  }
+
+  function onQueryChange(value) {
+    clearTimeout(timer);
+    timer = setTimeout(() => _onQueryChange(value), timerInterval);
+  }
+
+  function _onDataChange(value) {
+    try {
+      const _data = JSON.parse(value);
+      setData(_data);
+      const rv = query.query(_data).values();
+      setResult(JSON.stringify(rv, undefined, "  "));
+    } catch (error) {
+      setResult(JSON.stringify(String(error), undefined, "  "));
+    }
+  }
+
+  function onDataChange(value) {
+    clearTimeout(timer);
+    timer = setTimeout(() => _onDataChange(value), timerInterval);
+  }
+
+  return (
+    <Layout title="Playground" description="JSONPath playground">
+      <Container maxWidth="xl">
+        <Grid container spacing={1} sx={{ m: 1 }}>
+          <Grid xs={12}>
+            <h2>JSONPath Query</h2>
+            <Paper square>
+              <QueryEditor
+                defaultQuery={defaultQuery}
+                onChange={onQueryChange}
+              />
+            </Paper>
+          </Grid>
+          <Grid xs={12} md={6}>
+            <h2>JSON Data</h2>
+            <Paper square>
+              <JSONEditor onChange={onDataChange} />
+            </Paper>
+          </Grid>
+          <Grid xs={12} md={6}>
+            <h2>Query Results</h2>
+            <Paper square>
+              <ResultsEditor result={result} />
+            </Paper>
+          </Grid>
+        </Grid>
+        <p>Version {p3version}</p>
+      </Container>
+    </Layout>
+  );
+}