diff --git a/docs/package-lock.json b/docs/package-lock.json
index 6e5b6d8..6bbe9ab 100644
--- a/docs/package-lock.json
+++ b/docs/package-lock.json
@@ -17,6 +17,7 @@
         "@monaco-editor/react": "^4.5.2",
         "@mui/material": "^5.14.10",
         "@tsconfig/docusaurus": "^2.0.0",
+        "allotment": "^1.19.3",
         "clsx": "^1.2.1",
         "docusaurus-plugin-typedoc": "^0.20.1",
         "json-p3": "^0.2.0",
@@ -3067,6 +3068,11 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@juggle/resize-observer": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@juggle/resize-observer/-/resize-observer-3.4.0.tgz",
+      "integrity": "sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA=="
+    },
     "node_modules/@leichtgewicht/ip-codec": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz",
@@ -4447,6 +4453,28 @@
         "algoliasearch": ">= 3.1 < 6"
       }
     },
+    "node_modules/allotment": {
+      "version": "1.19.3",
+      "resolved": "https://registry.npmjs.org/allotment/-/allotment-1.19.3.tgz",
+      "integrity": "sha512-StPCZLGPNG9KhXeNCrqTkIK09s7D6+8n0w754SRY8PUvDXFLLovrFFo4ubd82fytRWS5bFntsWA5SX4sODxuiw==",
+      "dependencies": {
+        "classnames": "^2.3.0",
+        "eventemitter3": "^5.0.0",
+        "lodash.clamp": "^4.0.0",
+        "lodash.debounce": "^4.0.0",
+        "lodash.isequal": "^4.5.0",
+        "use-resize-observer": "^9.0.0"
+      },
+      "peerDependencies": {
+        "react": "^17.0.0 || ^18.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/allotment/node_modules/eventemitter3": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-5.0.1.tgz",
+      "integrity": "sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA=="
+    },
     "node_modules/ansi-align": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/ansi-align/-/ansi-align-3.0.1.tgz",
@@ -5170,6 +5198,11 @@
         "node": ">=8"
       }
     },
+    "node_modules/classnames": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz",
+      "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw=="
+    },
     "node_modules/clean-css": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.2.tgz",
@@ -8416,6 +8449,11 @@
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
     },
+    "node_modules/lodash.clamp": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/lodash.clamp/-/lodash.clamp-4.0.3.tgz",
+      "integrity": "sha512-HvzRFWjtcguTW7yd8NJBshuNaCa8aqNFtnswdT7f/cMd/1YKy5Zzoq4W/Oxvnx9l7aeY258uSdDfM793+eLsVg=="
+    },
     "node_modules/lodash.curry": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/lodash.curry/-/lodash.curry-4.1.1.tgz",
@@ -8446,6 +8484,11 @@
       "resolved": "https://registry.npmjs.org/lodash.invokemap/-/lodash.invokemap-4.6.0.tgz",
       "integrity": "sha512-CfkycNtMqgUlfjfdh2BhKO/ZXrP8ePOX5lEU/g0R3ItJcnuxWDwokMGKx1hWcfOikmyOVx6X9IwWnDGlgKl61w=="
     },
+    "node_modules/lodash.isequal": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz",
+      "integrity": "sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ=="
+    },
     "node_modules/lodash.memoize": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
@@ -12749,6 +12792,18 @@
         }
       }
     },
+    "node_modules/use-resize-observer": {
+      "version": "9.1.0",
+      "resolved": "https://registry.npmjs.org/use-resize-observer/-/use-resize-observer-9.1.0.tgz",
+      "integrity": "sha512-R25VqO9Wb3asSD4eqtcxk8sJalvIOYBqS8MNZlpDSQ4l4xMQxC/J7Id9HoTqPq8FwULIn0PVW+OAqF2dyYbjow==",
+      "dependencies": {
+        "@juggle/resize-observer": "^3.3.1"
+      },
+      "peerDependencies": {
+        "react": "16.8.0 - 18",
+        "react-dom": "16.8.0 - 18"
+      }
+    },
     "node_modules/use-sync-external-store": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz",
diff --git a/docs/package.json b/docs/package.json
index b768d3a..ccd10ac 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -23,6 +23,7 @@
     "@monaco-editor/react": "^4.5.2",
     "@mui/material": "^5.14.10",
     "@tsconfig/docusaurus": "^2.0.0",
+    "allotment": "^1.19.3",
     "clsx": "^1.2.1",
     "docusaurus-plugin-typedoc": "^0.20.1",
     "json-p3": "^0.2.0",
diff --git a/docs/src/components/JSONPathPlayground/index.js b/docs/src/components/JSONPathPlayground/index.js
index 7fab4eb..92040ce 100644
--- a/docs/src/components/JSONPathPlayground/index.js
+++ b/docs/src/components/JSONPathPlayground/index.js
@@ -2,9 +2,13 @@ import React from "react";
 import { useState } from "react";
 
 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 { Allotment } from "allotment";
+import "allotment/dist/style.css";
+
 import styles from "./styles.module.css";
 
 import { jsonpath, version as p3version } from "json-p3/dist/json-p3.esm";
@@ -32,12 +36,12 @@ const theme = "vs-dark";
 function QueryEditor({ defaultQuery, onChange }) {
   return (
     <Editor
-      height="8vh"
+      height="100%"
       language="text"
       theme={theme}
       defaultValue={defaultQuery}
       onChange={onChange}
-      options={{ ...commonEditorOptions }}
+      options={{ ...commonEditorOptions, fontSize: 16 }}
     />
   );
 }
@@ -59,7 +63,7 @@ function JSONEditor({ onChange }) {
 
   return (
     <Editor
-      height="70vh"
+      height="100%"
       language="json"
       theme={theme}
       defaultValue={defaultValue}
@@ -72,13 +76,15 @@ function JSONEditor({ onChange }) {
 function ResultsEditor({ result }) {
   return (
     <Editor
-      height="70vh"
+      height="100%"
       language="json"
       theme={theme}
       value={result}
       options={{
         ...commonEditorOptions,
         wordWrap: "on",
+        lineNumbers: "off",
+        readOnly: true,
       }}
     />
   );
@@ -88,6 +94,7 @@ export default function Playground() {
   let timer;
   const timerInterval = 1000;
   const defaultQuery = "$.users[?@.score > 85]";
+
   const defaultResult = JSON.stringify(
     [
       { name: "Sue", score: 100 },
@@ -96,6 +103,13 @@ export default function Playground() {
     undefined,
     "  ",
   );
+
+  const defaultResultNormalizedPaths = JSON.stringify(
+    ["$['users'][0]", "$['users'][1]"],
+    undefined,
+    "  ",
+  );
+
   const defaultData = {
     users: [
       { name: "Sue", score: 100 },
@@ -108,16 +122,19 @@ export default function Playground() {
 
   const [query, setQuery] = useState(jsonpath.compile(defaultQuery));
   const [result, setResult] = useState(defaultResult);
+  const [resultPaths, setResultPaths] = useState(defaultResultNormalizedPaths);
   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, "  "));
+      const rv = path.query(data);
+      setResult(JSON.stringify(rv.values(), undefined, "  "));
+      setResultPaths(JSON.stringify(rv.paths(), undefined, "  "));
     } catch (error) {
       setResult(JSON.stringify(String(error), undefined, "  "));
+      setResultPaths("[]");
     }
   }
 
@@ -130,10 +147,12 @@ export default function Playground() {
     try {
       const _data = JSON.parse(value);
       setData(_data);
-      const rv = query.query(_data).values();
-      setResult(JSON.stringify(rv, undefined, "  "));
+      const rv = query.query(_data);
+      setResult(JSON.stringify(rv.values(), undefined, "  "));
+      setResultPaths(JSON.stringify(rv.paths(), undefined, "  "));
     } catch (error) {
       setResult(JSON.stringify(String(error), undefined, "  "));
+      setResultPaths("[]");
     }
   }
 
@@ -146,25 +165,55 @@ export default function Playground() {
     <Container maxWidth="xl" className="playground">
       <Grid container spacing={1} sx={{ m: 1 }}>
         <Grid xs={12}>
-          <h2 className={styles.heading}>
-            JSONPath Query
-            <span className={styles.version}>P3 Version {p3version}</span>
-          </h2>
-          <Paper square>
-            <QueryEditor defaultQuery={defaultQuery} onChange={onQueryChange} />
-          </Paper>
+          <h1 className={styles.heading}>JSONPath Playground</h1>
+          <hr sx={{ m: 1 }} />
         </Grid>
-        <Grid xs={12} md={6}>
-          <h2 className={styles.heading}>JSON Data</h2>
-          <Paper square>
-            <JSONEditor onChange={onDataChange} />
-          </Paper>
+        <Grid xs={12} sx={{ height: "70vh" }}>
+          <Allotment minSize={100} vertical>
+            <Allotment.Pane preferredSize={60} maxSize={200} minSize={60}>
+              <QueryEditor
+                defaultQuery={defaultQuery}
+                onChange={onQueryChange}
+              />
+            </Allotment.Pane>
+            <Allotment.Pane>
+              <Allotment minSize={200} horizontal>
+                <Allotment.Pane preferredSize="50%">
+                  <JSONEditor onChange={onDataChange} />
+                </Allotment.Pane>
+                <Allotment.Pane preferredSize="50%">
+                  <ResultsEditor result={result} />
+                </Allotment.Pane>
+                <Allotment.Pane minSize={0} preferredSize="0%" priority="low">
+                  <ResultsEditor result={resultPaths} />
+                </Allotment.Pane>
+              </Allotment>
+            </Allotment.Pane>
+          </Allotment>
         </Grid>
-        <Grid xs={12} md={6}>
-          <h2 className={styles.heading}>Query Results</h2>
-          <Paper square>
-            <ResultsEditor result={result} />
-          </Paper>
+        <Grid xs={12}>
+          <div
+            style={{
+              display: "flex",
+              justifyContent: "center",
+              alignItems: "center",
+              fontSize: "14px",
+              textAlign: "center",
+            }}
+          >
+            <p>
+              JSON data is on the left and results are on the right.
+              <br />
+              Drag out the third pane on the right to see a normalized path for{" "}
+              each result.
+              <br />
+              Results are updated automatically after one second of inactivity.
+              <br />
+              <span className={styles.version}>
+                JSON P3 Version {p3version}
+              </span>
+            </p>
+          </div>
         </Grid>
       </Grid>
     </Container>
diff --git a/docs/src/components/JSONPathPlayground/styles.module.css b/docs/src/components/JSONPathPlayground/styles.module.css
index d1f68b9..9894540 100644
--- a/docs/src/components/JSONPathPlayground/styles.module.css
+++ b/docs/src/components/JSONPathPlayground/styles.module.css
@@ -1,13 +1,11 @@
 .heading {
   font-size: 18px;
-  /* font-family: "monospace"; */
   font-weight: lighter;
   margin-bottom: 5px;
   margin-left: 5px;
 }
 
 .version {
-  font-size: 12px;
-  float: right;
+  font-weight: bold;
   
 }