diff --git a/CHANGELOG.md b/CHANGELOG.md
index a7e0fc4..8f9cbd7 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,7 +5,21 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
-## [2.0.0] - 2025-02-06
+## [2.0.1]
+
+### Changed
+
+- **Redesigned Interactive Playground** with improved UI/UX:
+  - New top/bottom layout replacing the previous section-based design
+  - Tab-based navigation for all 7 API functions (`get_at`, `set_at`, `exists_at`, `delete_at`, `get_depth`, `count_leaves`, `get_all_paths`)
+  - Live stats bar showing data metrics (Depth, Leaves, Paths) in real-time
+  - Live Python code preview with copy-to-clipboard functionality
+  - Improved example selector with quick-switch buttons
+  - Dark-themed JSON editor with syntax validation
+  - Better responsive design for mobile devices
+
+
+## [2.0.0]
 
 ### Breaking Changes
 
@@ -163,6 +177,7 @@ For detailed migration instructions, see the [Migration Guide](https://ysskrishn
 - Immutable container protection (tuples cannot be modified)
 - Safe list deletion (requires explicit `allow_list_mutation=True` flag)
 
+[2.0.1]: https://github.com/ysskrishna/nestedutils/compare/v2.0.0...v2.0.1
 [2.0.0]: https://github.com/ysskrishna/nestedutils/compare/v1.1.7...v2.0.0
 [1.1.7]: https://github.com/ysskrishna/nestedutils/compare/v1.1.6...v1.1.7
 [1.1.6]: https://github.com/ysskrishna/nestedutils/compare/v1.1.5...v1.1.6
diff --git a/README.md b/README.md
index 56f0bae..1c7fdb8 100644
--- a/README.md
+++ b/README.md
@@ -6,11 +6,11 @@
 [![PyPI](https://img.shields.io/pypi/v/nestedutils)](https://pypi.org/project/nestedutils/)
 [![PyPI Downloads](https://static.pepy.tech/personalized-badge/nestedutils?period=total&units=INTERNATIONAL_SYSTEM&left_color=GREY&right_color=BLUE&left_text=downloads)](https://pepy.tech/projects/nestedutils)
 [![Documentation](https://img.shields.io/badge/docs-ysskrishna.github.io%2Fnestedutils-blue.svg)](https://ysskrishna.github.io/nestedutils/)
-[![Interactive Demo](https://img.shields.io/badge/demo-Try%20it%20now!-green.svg)](https://ysskrishna.github.io/nestedutils/demo/)
+[![Interactive Playground](https://img.shields.io/badge/demo-Try%20it%20now!-green.svg)](https://ysskrishna.github.io/nestedutils/playground/)
 
 The lightweight Python library for safe, simple, dot-notation access to nested dicts and lists. Effortlessly get, set, and delete values deep in your complex JSON, API responses, and config files without verbose error-checking or handling KeyError exceptions.
 
-> 🚀 **Try it interactively in your browser!** Test the library with our [Interactive Demo](https://ysskrishna.github.io/nestedutils/demo/) - no installation required.
+> 🚀 **Try it interactively in your browser!** Test the library with our [Interactive Playground](https://ysskrishna.github.io/nestedutils/playground/) - no installation required.
 
 ![OG Image](https://raw.githubusercontent.com/ysskrishna/nestedutils/main/media/og.png)
 
@@ -405,5 +405,5 @@ MIT © [Y. Siva Sai Krishna](https://github.com/ysskrishna) - see [LICENSE](http
   <a href="https://github.com/ysskrishna/nestedutils/issues">Report Issues</a> •
   <a href="https://pypi.org/project/nestedutils/">Package on PyPI</a> •
   <a href="https://ysskrishna.github.io/nestedutils/">Package Documentation</a> •
-  <a href="https://ysskrishna.github.io/nestedutils/demo/">Package Demo</a>
+  <a href="https://ysskrishna.github.io/nestedutils/playground/">Package Playground</a>
 </p>
diff --git a/docs/demo.md b/docs/demo.md
deleted file mode 100644
index 2180681..0000000
--- a/docs/demo.md
+++ /dev/null
@@ -1,853 +0,0 @@
----
-title: Interactive Demo
-description: "Try nestedutils Python library in your browser. No installation required. Test dot-notation access to nested dictionaries and lists. Safely get, set, delete, and check existence of values in complex nested data structures."
-keywords:
-  - interactive demo
-  - test nested data access
-  - online nested utils
-  - try nestedutils
-  - browser demo
-  - test dot notation
-  - validate nested paths
-  - test get_at set_at
-  - nested dictionary demo
-  - nested list demo
----
-
-# Interactive Demo
-
-Try the `nestedutils` library directly in your browser! This page uses [Pyodide](https://pyodide.org/) to run Python in the browser.
-
-<div id="package-info" style="display: none; margin: 20px 0; padding: 15px; background: #e3f2fd; border-left: 4px solid #1976d2; border-radius: 4px;">
-  <p style="margin: 0;"><strong>Installed package:</strong> <code>nestedutils</code> <span id="package-version"></span></p>
-</div>
-
-<div id="pyodide-loading" style="text-align: center; padding: 20px;">
-  <p>Loading Pyodide...</p>
-  <div class="spinner"></div>
-</div>
-
-<div id="test-interface" style="display: none;">
-  <div class="test-section">
-    <h3>Data Source</h3>
-    <p style="color: #666; font-size: 0.9em; margin-bottom: 15px;">Select an example or edit the JSON directly. Valid JSON is automatically applied when you stop typing.</p>
-    
-    <!-- Horizontal Radio Buttons -->
-    <div style="display: flex; gap: 20px; margin-bottom: 20px; flex-wrap: wrap; align-items: center;">
-      <label style="display: flex; align-items: center; gap: 6px; cursor: pointer; padding: 6px 0;" onmouseover="this.style.opacity='0.7'" onmouseout="this.style.opacity='1'">
-        <input type="radio" name="data-source" value="example1" id="radio-example1" style="cursor: pointer;" />
-        <span>Example 1: User Profile</span>
-      </label>
-      <label style="display: flex; align-items: center; gap: 6px; cursor: pointer; padding: 6px 0;" onmouseover="this.style.opacity='0.7'" onmouseout="this.style.opacity='1'">
-        <input type="radio" name="data-source" value="example2" id="radio-example2" style="cursor: pointer;" />
-        <span>Example 2: E-commerce Data</span>
-      </label>
-      <label style="display: flex; align-items: center; gap: 6px; cursor: pointer; padding: 6px 0;" onmouseover="this.style.opacity='0.7'" onmouseout="this.style.opacity='1'">
-        <input type="radio" name="data-source" value="example3" id="radio-example3" style="cursor: pointer;" />
-        <span>Example 3: API Response</span>
-      </label>
-      <label style="display: flex; align-items: center; gap: 6px; cursor: pointer; padding: 6px 0;" onmouseover="this.style.opacity='0.7'" onmouseout="this.style.opacity='1'">
-        <input type="radio" name="data-source" value="custom" id="radio-custom" style="cursor: pointer;" />
-        <span>Custom JSON</span>
-      </label>
-    </div>
-    
-    <!-- JSON Textarea -->
-    <div style="position: relative;">
-      <div id="json-status" style="position: absolute; top: 10px; right: 10px; font-size: 0.85em; font-weight: 500; z-index: 1;"></div>
-      <textarea 
-        id="custom-json-input" 
-        placeholder='Enter valid JSON here, e.g., {"key": "value"}'
-        style="width: 100%; min-height: 300px; padding: 12px; border: 1px solid #ccc; border-radius: 4px; font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace; font-size: 0.9em; resize: vertical; line-height: 1.5; tab-size: 2;"
-      ></textarea>
-      <div id="json-error" style="margin-top: 8px; font-size: 0.85em; min-height: 20px; font-family: monospace;"></div>
-    </div>
-  </div>
-
-  <div class="test-section" style="margin-top: 30px;">
-    <h3>1. Get Value (get_at)</h3>
-    <p>Retrieve a value from the nested data structure using dot notation:</p>
-    <div style="display: flex; gap: 10px; margin-bottom: 10px; flex-wrap: wrap;">
-      <input 
-        type="text" 
-        id="get-path" 
-        placeholder="e.g., user.profile.name or items.0.title"
-        style="flex: 1; min-width: 250px; padding: 8px; border: 1px solid #ccc; border-radius: 4px;"
-      />
-      <input 
-        type="text" 
-        id="get-default" 
-        placeholder="Default value (optional)"
-        style="flex: 0 0 150px; padding: 8px; border: 1px solid #ccc; border-radius: 4px;"
-      />
-      <button 
-        id="get-btn" 
-        style="padding: 8px 16px; background: #1976d2; color: white; border: none; border-radius: 4px; cursor: pointer;"
-      >
-        Get Value
-      </button>
-    </div>
-    <div id="get-result" style="margin-top: 10px; padding: 10px; background: #f5f5f5; border-radius: 4px; min-height: 30px;"></div>
-  </div>
-
-  <div class="test-section" style="margin-top: 30px;">
-    <h3>2. Set Value (set_at)</h3>
-    <p>Set a value in the nested data structure. Missing containers will be created automatically:</p>
-    <div style="display: flex; gap: 10px; margin-bottom: 10px; flex-wrap: wrap;">
-      <input 
-        type="text" 
-        id="set-path" 
-        placeholder="e.g., user.profile.email or items.2.name"
-        style="flex: 1; min-width: 200px; padding: 8px; border: 1px solid #ccc; border-radius: 4px;"
-      />
-      <input 
-        type="text" 
-        id="set-value" 
-        placeholder="Value to set"
-        style="flex: 1; min-width: 150px; padding: 8px; border: 1px solid #ccc; border-radius: 4px;"
-      />
-      <label style="display: flex; align-items: center; gap: 5px; padding: 8px; cursor: pointer;">
-        <input type="checkbox" id="set-create" checked />
-        <span style="font-size: 0.9em;">Create missing containers</span>
-      </label>
-      <button 
-        id="set-btn" 
-        style="padding: 8px 16px; background: #1976d2; color: white; border: none; border-radius: 4px; cursor: pointer;"
-      >
-        Set Value
-      </button>
-    </div>
-    <p style="color: #666; font-size: 0.85em; margin-top: 5px;">
-      <strong>Create missing containers:</strong> When checked, automatically creates missing intermediate containers (dicts for string keys, lists for numeric keys).
-    </p>
-    <div id="set-result" style="margin-top: 10px; padding: 10px; background: #f5f5f5; border-radius: 4px; min-height: 30px;"></div>
-  </div>
-
-  <div class="test-section" style="margin-top: 30px;">
-    <h3>3. Check Existence (exists_at)</h3>
-    <p>Check if a path exists in the nested data structure:</p>
-    <div style="display: flex; gap: 10px; margin-bottom: 10px;">
-      <input 
-        type="text" 
-        id="exists-path" 
-        placeholder="e.g., user.profile.name or items.0.title"
-        style="flex: 1; padding: 8px; border: 1px solid #ccc; border-radius: 4px;"
-      />
-      <button 
-        id="exists-btn" 
-        style="padding: 8px 16px; background: #1976d2; color: white; border: none; border-radius: 4px; cursor: pointer;"
-      >
-        Check
-      </button>
-    </div>
-    <div id="exists-result" style="margin-top: 10px; padding: 10px; background: #f5f5f5; border-radius: 4px; min-height: 30px;"></div>
-  </div>
-
-  <div class="test-section" style="margin-top: 30px;">
-    <h3>4. Delete Value (delete_at)</h3>
-    <p>Delete a value from the nested data structure:</p>
-    <div style="display: flex; gap: 10px; margin-bottom: 10px; flex-wrap: wrap;">
-      <input 
-        type="text" 
-        id="delete-path" 
-        placeholder="e.g., user.profile.email or items.1"
-        style="flex: 1; min-width: 200px; padding: 8px; border: 1px solid #ccc; border-radius: 4px;"
-      />
-      <label style="display: flex; align-items: center; gap: 5px; padding: 8px;">
-        <input type="checkbox" id="delete-allow-list" />
-        <span style="font-size: 0.9em;">Allow list mutation</span>
-      </label>
-      <button 
-        id="delete-btn" 
-        style="padding: 8px 16px; background: #1976d2; color: white; border: none; border-radius: 4px; cursor: pointer;"
-      >
-        Delete
-      </button>
-    </div>
-    <div id="delete-result" style="margin-top: 10px; padding: 10px; background: #f5f5f5; border-radius: 4px; min-height: 30px;"></div>
-  </div>
-
-</div>
-
-<style>
-  .test-section {
-    border: 1px solid #e0e0e0;
-    padding: 20px;
-    border-radius: 8px;
-    background: white;
-  }
-  
-  .spinner {
-    border: 4px solid #f3f3f3;
-    border-top: 4px solid #1976d2;
-    border-radius: 50%;
-    width: 40px;
-    height: 40px;
-    animation: spin 1s linear infinite;
-    margin: 20px auto;
-  }
-  
-  @keyframes spin {
-    0% { transform: rotate(0deg); }
-    100% { transform: rotate(360deg); }
-  }
-  
-  .result-success {
-    color: #2e7d32;
-    font-weight: bold;
-  }
-  
-  .result-error {
-    color: #c62828;
-    font-weight: bold;
-  }
-  
-  .result-info {
-    color: #1976d2;
-  }
-  
-  button:hover {
-    background: #1565c0 !important;
-  }
-  
-  button:active {
-    background: #0d47a1 !important;
-  }
-  
-  #reset-btn:hover {
-    background: #616161 !important;
-  }
-  
-  #reset-btn:active {
-    background: #424242 !important;
-  }
-  
-  select {
-    cursor: pointer;
-  }
-  
-  select:focus, input:focus, textarea:focus {
-    outline: 2px solid #1976d2;
-    outline-offset: 2px;
-  }
-  
-  #json-error {
-    font-family: monospace;
-    font-size: 0.85em;
-  }
-  
-  #json-status {
-    font-weight: 500;
-  }
-  
-  textarea {
-    line-height: 1.5;
-  }
-  
-  @media (max-width: 768px) {
-    .test-section > div[style*="display: flex"] {
-      flex-direction: column !important;
-    }
-  }
-</style>
-
-<script src="https://cdn.jsdelivr.net/pyodide/v0.24.1/full/pyodide.js"></script>
-
-<script type="text/javascript">
-  let pyodide;
-  let appliedJsonString = ""; // Track the currently applied JSON
-  let autoApplyTimer = null; // Debounce timer for auto-apply
-
-  async function main() {
-    // Load Pyodide
-    pyodide = await loadPyodide({
-      indexURL: "https://cdn.jsdelivr.net/pyodide/v0.24.1/full/"
-    });
-    
-    // Update loading message
-    document.getElementById("pyodide-loading").innerHTML = "<p>Installing nestedutils package...</p>";
-    
-    // Install nestedutils package
-    await pyodide.loadPackage("micropip");
-    const micropip = pyodide.pyimport("micropip");
-    await micropip.install("nestedutils");
-    
-    // Import functions and initialize data
-    pyodide.runPython(`
-      from nestedutils import get_at, set_at, delete_at, exists_at
-      import json
-      
-      # Initialize data structure
-      data = {}
-      
-      # Try to get package version
-      try:
-          import importlib.metadata
-          package_version = importlib.metadata.version('nestedutils')
-      except:
-          try:
-              import importlib_metadata
-              package_version = importlib_metadata.version('nestedutils')
-          except:
-              package_version = "unknown"
-    `);
-    
-    const packageVersion = pyodide.globals.get("package_version");
-    
-    // Display package version
-    if (packageVersion && packageVersion !== "unknown") {
-      document.getElementById("package-version").textContent = `v${packageVersion}`;
-      document.getElementById("package-info").style.display = "block";
-    }
-    
-    // Initialize data structure display
-    updateDataDisplay(true); // Sync textarea on initial load
-    
-    // Set initial radio button state
-    document.getElementById("radio-custom").checked = true;
-    
-    // Initialize applied state
-    const initialJson = document.getElementById("custom-json-input").value.trim();
-    if (initialJson) {
-      try {
-        appliedJsonString = JSON.stringify(JSON.parse(initialJson));
-      } catch (e) {
-        appliedJsonString = "";
-      }
-    } else {
-      appliedJsonString = "{}";
-    }
-    
-    // Hide loading, show interface
-    document.getElementById("pyodide-loading").style.display = "none";
-    document.getElementById("test-interface").style.display = "block";
-    
-    // Setup event listeners
-    setupEventListeners();
-  }
-
-  function updateDataDisplay(syncTextarea = false) {
-    // Sync JSON editor with current data structure when loading examples
-    if (syncTextarea) {
-      try {
-        const json = pyodide.runPython(`json.dumps(data, indent=2)`);
-        const jsonStr = json || "{}";
-        const customInput = document.getElementById("custom-json-input");
-        customInput.value = jsonStr;
-        // Update applied state to match current data
-        appliedJsonString = JSON.stringify(JSON.parse(jsonStr));
-        // Clear any error messages and update status
-        document.getElementById("json-error").textContent = "";
-        updateJsonStatus(true);
-      } catch (error) {
-        console.error("Error updating display:", error);
-      }
-    }
-  }
-  
-  // Check if there are unsaved changes (for auto-apply)
-  function hasUnsavedChanges() {
-    const jsonInput = document.getElementById("custom-json-input").value.trim();
-    
-    // Handle empty input
-    if (!jsonInput) {
-      // Empty input matches empty applied state or {}
-      return appliedJsonString !== "" && appliedJsonString !== "{}";
-    }
-    
-    // Handle empty object/array strings
-    if (jsonInput === "{}" || jsonInput === "[]") {
-      const normalized = jsonInput;
-      return normalized !== appliedJsonString;
-    }
-    
-    try {
-      // Normalize both for comparison (handles formatting differences)
-      const normalized = JSON.stringify(JSON.parse(jsonInput));
-      // Compare normalized strings
-      return normalized !== appliedJsonString;
-    } catch {
-      // If invalid JSON, consider it as having changes
-      return true;
-    }
-  }
-  
-  // Apply JSON function (auto-apply only)
-  function applyJsonData() {
-    const jsonInput = document.getElementById("custom-json-input").value.trim();
-    const errorDiv = document.getElementById("json-error");
-    
-    if (!jsonInput) {
-      updateJsonStatus(false, "Please enter JSON data");
-      errorDiv.textContent = "Please enter JSON data";
-      errorDiv.style.color = "#c62828";
-      return;
-    }
-    
-    // Validate JSON
-    let parsedData;
-    try {
-      parsedData = JSON.parse(jsonInput);
-    } catch (error) {
-      updateJsonStatus(false, "Invalid JSON");
-      errorDiv.textContent = `Invalid JSON: ${error.message}`;
-      errorDiv.style.color = "#c62828";
-      return;
-    }
-    
-    // Validate that it's an object or array (not primitive)
-    if (typeof parsedData !== "object" || parsedData === null) {
-      updateJsonStatus(false, "Must be object or array");
-      errorDiv.textContent = "JSON must be an object {} or array []";
-      errorDiv.style.color = "#c62828";
-      return;
-    }
-    
-    // Set the data in Python
-    try {
-      const jsonStr = JSON.stringify(parsedData);
-      pyodide.runPython(`data = json.loads(${JSON.stringify(jsonStr)})`);
-      appliedJsonString = jsonStr; // Update applied state
-      clearResults();
-      updateJsonStatus(true, "✓ Applied");
-      errorDiv.textContent = "";
-      document.getElementById("radio-custom").checked = true;
-    } catch (error) {
-      updateJsonStatus(false, "Error applying");
-      errorDiv.textContent = `Error setting data: ${error.message}`;
-      errorDiv.style.color = "#c62828";
-    }
-  }
-
-  function setupEventListeners() {
-    // Note: Removed "Reset to Empty" button - users can just clear the JSON editor or set it to {}
-    
-    // Radio button change handlers
-    const radioButtons = document.querySelectorAll('input[name="data-source"]');
-    radioButtons.forEach(radio => {
-      radio.addEventListener("change", (e) => {
-        const value = e.target.value;
-        if (value === "custom") {
-          // Don't auto-load, just switch to custom mode
-          return;
-        }
-        loadExampleData(value);
-      });
-    });
-    
-    // Load example data function
-    function loadExampleData(exampleType) {
-      let exampleCode = "";
-      
-      switch(exampleType) {
-        case "example1":
-          // Example 1: User Profile
-          exampleCode = `
-        data = {
-          "user": {
-            "name": "John Doe",
-            "age": 30,
-            "profile": {
-              "email": "john@example.com",
-                  "bio": "Software developer",
-                  "address": {
-                    "street": "123 Main St",
-                    "city": "San Francisco",
-                    "zip": "94102"
-                  }
-                },
-                "preferences": {
-                  "theme": "dark",
-                  "notifications": True,
-                  "language": "en"
-            }
-          },
-          "items": [
-            {"id": 1, "title": "First Item", "tags": ["python", "demo"]},
-            {"id": 2, "title": "Second Item", "tags": ["javascript"]}
-              ]
-            }
-          `;
-          break;
-        case "example2":
-          // Example 2: E-commerce Data
-          exampleCode = `
-            data = {
-              "store": {
-                "name": "TechShop",
-                "location": "New York"
-              },
-              "products": [
-                {
-                  "id": 101,
-                  "name": "Laptop",
-                  "price": 999.99,
-                  "inventory": {
-                    "stock": 45,
-                    "warehouse": "A1"
-                  },
-                  "reviews": [
-                    {"rating": 5, "comment": "Great product!"},
-                    {"rating": 4, "comment": "Good value"}
-                  ]
-                },
-                {
-                  "id": 102,
-                  "name": "Mouse",
-                  "price": 29.99,
-                  "inventory": {
-                    "stock": 120,
-                    "warehouse": "B2"
-                  },
-                  "reviews": []
-                }
-              ],
-              "orders": [
-                {
-                  "order_id": "ORD-001",
-                  "customer": "Alice",
-                  "items": ["101", "102"],
-                  "total": 1029.98
-                }
-              ]
-            }
-          `;
-          break;
-        case "example3":
-          // Example 3: API Response
-          exampleCode = `
-            data = {
-              "status": "success",
-              "data": {
-                "users": [
-                  {
-                    "id": 1,
-                    "username": "alice",
-                    "metadata": {
-                      "created_at": "2024-01-15",
-                      "last_login": "2024-12-01"
-                    },
-                    "roles": ["admin", "user"]
-                  },
-                  {
-                    "id": 2,
-                    "username": "bob",
-                    "metadata": {
-                      "created_at": "2024-02-20",
-                      "last_login": None
-                    },
-                    "roles": ["user"]
-                  }
-                ],
-                "pagination": {
-                  "page": 1,
-                  "per_page": 10,
-                  "total": 2
-                }
-              },
-              "errors": []
-            }
-          `;
-          break;
-      }
-      
-      if (exampleCode) {
-        pyodide.runPython(exampleCode);
-        updateDataDisplay(true); // Sync textarea when loading examples
-        clearResults();
-        updateJsonStatus(true, "✓ Example loaded");
-        // Check the corresponding radio button
-        document.getElementById(`radio-${exampleType}`).checked = true;
-        // Update applied state to match loaded example
-        const jsonInput = document.getElementById("custom-json-input").value.trim();
-        if (jsonInput) {
-          try {
-            appliedJsonString = JSON.stringify(JSON.parse(jsonInput));
-          } catch (e) {
-            appliedJsonString = "";
-          }
-        }
-      }
-    }
-    
-    // Update JSON status indicator
-    function updateJsonStatus(isValid, message = null) {
-      const statusDiv = document.getElementById("json-status");
-      const errorDiv = document.getElementById("json-error");
-      
-      if (message !== null) {
-        statusDiv.textContent = message;
-        statusDiv.style.color = isValid ? "#2e7d32" : "#c62828";
-      } else if (isValid === true) {
-        statusDiv.textContent = "✓ Valid JSON";
-        statusDiv.style.color = "#2e7d32";
-        errorDiv.textContent = "";
-      } else if (isValid === false) {
-        statusDiv.textContent = "✗ Invalid JSON";
-        statusDiv.style.color = "#c62828";
-      } else {
-        // Clear status
-        statusDiv.textContent = "";
-        errorDiv.textContent = "";
-      }
-    }
-    
-    // Real-time JSON validation and auto-apply on input
-    document.getElementById("custom-json-input").addEventListener("input", () => {
-      const jsonInput = document.getElementById("custom-json-input").value.trim();
-      const errorDiv = document.getElementById("json-error");
-      
-      // Switch to custom mode when user starts editing
-      if (jsonInput) {
-        document.getElementById("radio-custom").checked = true;
-      }
-      
-      // Clear any existing auto-apply timer
-      if (autoApplyTimer) {
-        clearTimeout(autoApplyTimer);
-        autoApplyTimer = null;
-      }
-      
-      if (!jsonInput) {
-        updateJsonStatus(null);
-        errorDiv.textContent = "";
-        return;
-      }
-      
-      // Validate JSON
-      let isValid = false;
-      try {
-        const parsed = JSON.parse(jsonInput);
-        if (typeof parsed !== "object" || parsed === null) {
-          updateJsonStatus(false);
-          errorDiv.textContent = "JSON must be an object {} or array []";
-          errorDiv.style.color = "#c62828";
-          isValid = false;
-        } else {
-          updateJsonStatus(true);
-          errorDiv.textContent = "";
-          isValid = true;
-        }
-      } catch (error) {
-        updateJsonStatus(false);
-        errorDiv.textContent = `Invalid JSON: ${error.message}`;
-        errorDiv.style.color = "#c62828";
-        isValid = false;
-      }
-      
-      // Auto-apply valid JSON after user stops typing (1 second delay)
-      if (isValid) {
-        autoApplyTimer = setTimeout(() => {
-          // Only auto-apply if JSON is still valid and different from applied
-          if (hasUnsavedChanges()) {
-            applyJsonData();
-          }
-        }, 1000); // 1 second debounce
-      }
-    });
-    
-    // Get value
-    document.getElementById("get-btn").addEventListener("click", async () => {
-      const path = document.getElementById("get-path").value.trim();
-      const defaultValue = document.getElementById("get-default").value.trim();
-      const resultDiv = document.getElementById("get-result");
-      
-      if (!path) {
-        resultDiv.innerHTML = '<span class="result-error">Please enter a path</span>';
-        return;
-      }
-      
-      try {
-        resultDiv.innerHTML = '<span class="result-info">Processing...</span>';
-        
-        let code = `get_at(data, ${JSON.stringify(path)}`;
-        if (defaultValue) {
-          // Try to parse as appropriate type
-          let defaultVal = defaultValue;
-          if (defaultValue === "null" || defaultValue === "None") {
-            defaultVal = null;
-          } else if (!isNaN(defaultValue) && defaultValue !== "") {
-            defaultVal = Number(defaultValue);
-          } else if (defaultValue === "true" || defaultValue === "True") {
-            defaultVal = true;
-          } else if (defaultValue === "false" || defaultValue === "False") {
-            defaultVal = false;
-          }
-          code += `, default=${JSON.stringify(defaultVal)}`;
-        }
-        code += `)`;
-        
-        const result = pyodide.runPython(code);
-        
-        // Format the result for display
-        let resultStr;
-        try {
-          resultStr = pyodide.runPython(`json.dumps(${JSON.stringify(result)})`);
-        } catch (e) {
-          resultStr = String(result);
-        }
-        
-        if (result === null || result === undefined) {
-          resultDiv.innerHTML = `<span class="result-info">Result: <code>null</code></span>`;
-        } else {
-          resultDiv.innerHTML = `<span class="result-success">Value found:</span><br><code style="background: white; padding: 5px; border-radius: 3px; display: inline-block; margin-top: 5px; font-family: monospace;">${escapeHtml(resultStr)}</code>`;
-        }
-      } catch (error) {
-        resultDiv.innerHTML = `<span class="result-error">Error: ${escapeHtml(error.message)}</span>`;
-      }
-    });
-    
-    // Set value
-    document.getElementById("set-btn").addEventListener("click", async () => {
-      const path = document.getElementById("set-path").value.trim();
-      const value = document.getElementById("set-value").value.trim();
-      const create = document.getElementById("set-create").checked;
-      const resultDiv = document.getElementById("set-result");
-      
-      if (!path || value === "") {
-        resultDiv.innerHTML = '<span class="result-error">Please enter a path and value</span>';
-        return;
-      }
-      
-      try {
-        resultDiv.innerHTML = '<span class="result-info">Processing...</span>';
-        
-        // Try to parse value as appropriate type
-        let parsedValue = value;
-        if (value === "null" || value === "None") {
-          parsedValue = null;
-        } else if (!isNaN(value) && value !== "") {
-          parsedValue = Number(value);
-        } else if (value === "true" || value === "True") {
-          parsedValue = true;
-        } else if (value === "false" || value === "False") {
-          parsedValue = false;
-        } else {
-          // Try to parse as JSON array or object
-          try {
-            parsedValue = JSON.parse(value);
-          } catch (e) {
-            // Keep as string
-            parsedValue = value;
-          }
-        }
-        
-        pyodide.runPython(`set_at(data, ${JSON.stringify(path)}, ${JSON.stringify(parsedValue)}, create=${create ? 'True' : 'False'})`);
-        updateDataDisplay(true);
-        resultDiv.innerHTML = `<span class="result-success">✓ Value set successfully</span>`;
-      } catch (error) {
-        resultDiv.innerHTML = `<span class="result-error">Error: ${escapeHtml(error.message)}</span>`;
-      }
-    });
-    
-    // Check existence
-    document.getElementById("exists-btn").addEventListener("click", async () => {
-      const path = document.getElementById("exists-path").value.trim();
-      const resultDiv = document.getElementById("exists-result");
-      
-      if (!path) {
-        resultDiv.innerHTML = '<span class="result-error">Please enter a path</span>';
-        return;
-      }
-      
-      try {
-        resultDiv.innerHTML = '<span class="result-info">Processing...</span>';
-        const exists = pyodide.runPython(`exists_at(data, ${JSON.stringify(path)})`);
-        
-        if (exists) {
-          resultDiv.innerHTML = `<span class="result-success">✓ Path exists</span>`;
-        } else {
-          resultDiv.innerHTML = `<span class="result-info">Path does not exist</span>`;
-        }
-      } catch (error) {
-        resultDiv.innerHTML = `<span class="result-error">Error: ${escapeHtml(error.message)}</span>`;
-      }
-    });
-    
-    // Delete value
-    document.getElementById("delete-btn").addEventListener("click", async () => {
-      const path = document.getElementById("delete-path").value.trim();
-      const allowListMutation = document.getElementById("delete-allow-list").checked;
-      const resultDiv = document.getElementById("delete-result");
-      
-      if (!path) {
-        resultDiv.innerHTML = '<span class="result-error">Please enter a path</span>';
-        return;
-      }
-      
-      try {
-        resultDiv.innerHTML = '<span class="result-info">Processing...</span>';
-        const deleted = pyodide.runPython(`delete_at(data, ${JSON.stringify(path)}, allow_list_mutation=${allowListMutation ? 'True' : 'False'})`);
-        updateDataDisplay(true);
-        
-        // Format the deleted value for display
-        let deletedStr;
-        try {
-          deletedStr = pyodide.runPython(`json.dumps(${JSON.stringify(deleted)})`);
-        } catch (e) {
-          // If JSON serialization fails, convert to string
-          deletedStr = String(deleted);
-        }
-        
-        resultDiv.innerHTML = `<span class="result-success">✓ Value deleted:</span><br><code style="background: white; padding: 5px; border-radius: 3px; display: inline-block; margin-top: 5px; font-family: monospace;">${escapeHtml(deletedStr)}</code>`;
-      } catch (error) {
-        resultDiv.innerHTML = `<span class="result-error">Error: ${escapeHtml(error.message)}</span>`;
-      }
-    });
-    
-    // Allow Enter key to trigger actions
-    document.getElementById("get-path").addEventListener("keypress", (e) => {
-      if (e.key === "Enter") {
-        document.getElementById("get-btn").click();
-      }
-    });
-    
-    document.getElementById("set-path").addEventListener("keypress", (e) => {
-      if (e.key === "Enter") {
-        document.getElementById("set-btn").click();
-      }
-    });
-    
-    document.getElementById("exists-path").addEventListener("keypress", (e) => {
-      if (e.key === "Enter") {
-        document.getElementById("exists-btn").click();
-      }
-    });
-    
-    document.getElementById("delete-path").addEventListener("keypress", (e) => {
-      if (e.key === "Enter") {
-        document.getElementById("delete-btn").click();
-      }
-    });
-  }
-
-  function clearResults() {
-    document.getElementById("get-result").innerHTML = "";
-    document.getElementById("set-result").innerHTML = "";
-    document.getElementById("exists-result").innerHTML = "";
-    document.getElementById("delete-result").innerHTML = "";
-  }
-
-  function escapeHtml(text) {
-    const div = document.createElement("div");
-    div.textContent = text;
-    return div.innerHTML;
-  }
-
-  // Start loading Pyodide when page is ready
-  if (document.readyState === 'loading') {
-    document.addEventListener('DOMContentLoaded', () => {
-      main().catch(err => {
-        document.getElementById("pyodide-loading").innerHTML = 
-          `<p style="color: #c62828;">Error loading Pyodide: ${err.message}</p>`;
-        console.error(err);
-      });
-    });
-  } else {
-    main().catch(err => {
-      document.getElementById("pyodide-loading").innerHTML = 
-        `<p style="color: #c62828;">Error loading Pyodide: ${err.message}</p>`;
-      console.error(err);
-    });
-  }
-</script>
diff --git a/docs/playground.md b/docs/playground.md
new file mode 100644
index 0000000..bf9c079
--- /dev/null
+++ b/docs/playground.md
@@ -0,0 +1,1537 @@
+---
+title: Interactive Demo
+description: "Try nestedutils Python library in your browser. No installation required. Test dot-notation access to nested dictionaries and lists. Safely get, set, delete, and check existence of values in complex nested data structures."
+keywords:
+  - interactive demo
+  - test nested data access
+  - online nested utils
+  - try nestedutils
+  - browser demo
+  - test dot notation
+  - validate nested paths
+  - test get_at set_at
+  - nested dictionary demo
+  - nested list demo
+---
+
+# Interactive Playground
+
+Try the `nestedutils` library directly in your browser! This page uses [Pyodide](https://pyodide.org/) to run Python in the browser.
+
+<div id="pyodide-loading" style="text-align: center; padding: 40px 20px;">
+  <div class="spinner"></div>
+  <p style="margin-top: 15px; color: #666;">Loading Pyodide...</p>
+</div>
+
+<div id="playground-container" style="display: none;">
+  <!-- Package Info Banner -->
+  <div id="package-info" style="display: none; margin-bottom: 20px; padding: 12px 16px; background: #e3f2fd; border-left: 4px solid #1976d2; border-radius: 4px;">
+    <span style="font-weight: 500;">Installed:</span> <code>nestedutils</code> <span id="package-version" style="font-weight: 600; color: #1976d2;"></span>
+  </div>
+
+  <!-- Main Layout -->
+  <div class="playground-layout">
+    <!-- Left Panel - Data Viewer -->
+    <div class="data-panel">
+      <div class="panel-header">
+        <span class="panel-title">Data</span>
+        <div class="example-buttons">
+          <button class="example-btn active" data-example="example1">Config File</button>
+          <button class="example-btn" data-example="example2">API Response</button>
+          <button class="example-btn" data-example="example3">Event Log</button>
+          <button class="example-btn" data-example="custom">Custom</button>
+        </div>
+      </div>
+
+      <div class="json-editor-container">
+        <div id="json-status" class="json-status"></div>
+        <textarea
+          id="custom-json-input"
+          class="json-editor"
+          placeholder='Enter valid JSON here, e.g., {"key": "value"}'
+          spellcheck="false"
+        ></textarea>
+        <div id="json-error" class="json-error"></div>
+      </div>
+
+      <!-- Stats Bar -->
+      <div class="stats-bar">
+        <div class="stat-item">
+          <span class="stat-label">Depth</span>
+          <span class="stat-value" id="stat-depth">-</span>
+        </div>
+        <div class="stat-item">
+          <span class="stat-label">Leaves</span>
+          <span class="stat-value" id="stat-leaves">-</span>
+        </div>
+      </div>
+    </div>
+
+    <!-- Right Panel - Operations -->
+    <div class="ops-panel">
+      <div class="ops-tabs">
+        <button class="ops-tab active" data-op="get_at">get_at</button>
+        <button class="ops-tab" data-op="set_at">set_at</button>
+        <button class="ops-tab" data-op="exists_at">exists_at</button>
+        <button class="ops-tab" data-op="delete_at">delete_at</button>
+        <button class="ops-tab" data-op="get_depth">get_depth</button>
+        <button class="ops-tab" data-op="count_leaves">count_leaves</button>
+        <button class="ops-tab" data-op="get_all_paths">get_all_paths</button>
+      </div>
+
+      <div class="ops-content">
+        <!-- get_at Section -->
+        <div class="op-section active" data-op="get_at">
+          <h3 class="op-title">Get Value</h3>
+          <p class="op-description">Retrieve a value from the nested data structure using dot notation.</p>
+
+          <div class="form-group">
+            <label class="form-label">Path</label>
+            <input type="text" id="get-path" class="form-input" placeholder="e.g., user.profile.email" />
+            <p class="form-hint">Use dot notation. For arrays: items.0.title</p>
+          </div>
+
+          <div class="form-group">
+            <label class="form-label">Default Value (optional)</label>
+            <input type="text" id="get-default" class="form-input" placeholder="Value if path not found" />
+            <p class="form-hint">If omitted and path doesn't exist, raises PathError</p>
+          </div>
+
+          <button id="get-btn" class="execute-btn">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="5 3 19 12 5 21 5 3"></polygon></svg>
+            Execute
+          </button>
+
+          <div class="code-preview">
+            <div class="code-preview-header">
+              <span>Python Code</span>
+              <button class="copy-btn" onclick="copyCode('get_at')">Copy</button>
+            </div>
+            <div class="code-preview-body" id="get-code-preview">
+              <span class="code-fn">get_at</span>(data, <span class="code-str">"path"</span>)
+            </div>
+          </div>
+
+          <div id="get-result" class="result-panel"></div>
+        </div>
+
+        <!-- set_at Section -->
+        <div class="op-section" data-op="set_at">
+          <h3 class="op-title">Set Value</h3>
+          <p class="op-description">Set a value in the nested data structure at the specified path.</p>
+
+          <div class="form-group">
+            <label class="form-label">Path</label>
+            <input type="text" id="set-path" class="form-input" placeholder="e.g., user.profile.bio" />
+          </div>
+
+          <div class="form-group">
+            <label class="form-label">Value</label>
+            <input type="text" id="set-value" class="form-input" placeholder="Value to set" />
+          </div>
+
+          <div class="form-group">
+            <label class="checkbox-group">
+              <input type="checkbox" id="set-create" checked />
+              <span>Create missing containers (create=True)</span>
+            </label>
+          </div>
+
+          <button id="set-btn" class="execute-btn">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="5 3 19 12 5 21 5 3"></polygon></svg>
+            Execute
+          </button>
+
+          <div class="code-preview">
+            <div class="code-preview-header">
+              <span>Python Code</span>
+              <button class="copy-btn" onclick="copyCode('set_at')">Copy</button>
+            </div>
+            <div class="code-preview-body" id="set-code-preview">
+              <span class="code-fn">set_at</span>(data, <span class="code-str">"path"</span>, value, <span class="code-param">create</span>=<span class="code-bool">True</span>)
+            </div>
+          </div>
+
+          <div id="set-result" class="result-panel"></div>
+        </div>
+
+        <!-- exists_at Section -->
+        <div class="op-section" data-op="exists_at">
+          <h3 class="op-title">Check Existence</h3>
+          <p class="op-description">Check if a path exists in the nested data structure.</p>
+
+          <div class="form-group">
+            <label class="form-label">Path</label>
+            <input type="text" id="exists-path" class="form-input" placeholder="e.g., user.profile.email" />
+          </div>
+
+          <button id="exists-btn" class="execute-btn">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="5 3 19 12 5 21 5 3"></polygon></svg>
+            Execute
+          </button>
+
+          <div class="code-preview">
+            <div class="code-preview-header">
+              <span>Python Code</span>
+              <button class="copy-btn" onclick="copyCode('exists_at')">Copy</button>
+            </div>
+            <div class="code-preview-body" id="exists-code-preview">
+              <span class="code-fn">exists_at</span>(data, <span class="code-str">"path"</span>)
+            </div>
+          </div>
+
+          <div id="exists-result" class="result-panel"></div>
+        </div>
+
+        <!-- delete_at Section -->
+        <div class="op-section" data-op="delete_at">
+          <h3 class="op-title">Delete Value</h3>
+          <p class="op-description">Delete a value from the nested data structure.</p>
+
+          <div class="form-group">
+            <label class="form-label">Path</label>
+            <input type="text" id="delete-path" class="form-input" placeholder="e.g., user.profile.email" />
+          </div>
+
+          <div class="form-group">
+            <label class="checkbox-group">
+              <input type="checkbox" id="delete-allow-list" />
+              <span>Allow list mutation (allow_list_mutation=True)</span>
+            </label>
+          </div>
+
+          <button id="delete-btn" class="execute-btn">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="5 3 19 12 5 21 5 3"></polygon></svg>
+            Execute
+          </button>
+
+          <div class="code-preview">
+            <div class="code-preview-header">
+              <span>Python Code</span>
+              <button class="copy-btn" onclick="copyCode('delete_at')">Copy</button>
+            </div>
+            <div class="code-preview-body" id="delete-code-preview">
+              <span class="code-fn">delete_at</span>(data, <span class="code-str">"path"</span>)
+            </div>
+          </div>
+
+          <div id="delete-result" class="result-panel"></div>
+        </div>
+
+        <!-- get_depth Section -->
+        <div class="op-section" data-op="get_depth">
+          <h3 class="op-title">Get Depth</h3>
+          <p class="op-description">Get the maximum nesting depth of your data structure.</p>
+
+          <button id="depth-btn" class="execute-btn">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="5 3 19 12 5 21 5 3"></polygon></svg>
+            Execute
+          </button>
+
+          <div class="code-preview">
+            <div class="code-preview-header">
+              <span>Python Code</span>
+              <button class="copy-btn" onclick="copyCode('get_depth')">Copy</button>
+            </div>
+            <div class="code-preview-body" id="depth-code-preview">
+              <span class="code-fn">get_depth</span>(data)
+            </div>
+          </div>
+
+          <div id="depth-result" class="result-panel"></div>
+        </div>
+
+        <!-- count_leaves Section -->
+        <div class="op-section" data-op="count_leaves">
+          <h3 class="op-title">Count Leaves</h3>
+          <p class="op-description">Count the total number of leaf values (non-container values) in your data.</p>
+
+          <button id="leaves-btn" class="execute-btn">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="5 3 19 12 5 21 5 3"></polygon></svg>
+            Execute
+          </button>
+
+          <div class="code-preview">
+            <div class="code-preview-header">
+              <span>Python Code</span>
+              <button class="copy-btn" onclick="copyCode('count_leaves')">Copy</button>
+            </div>
+            <div class="code-preview-body" id="leaves-code-preview">
+              <span class="code-fn">count_leaves</span>(data)
+            </div>
+          </div>
+
+          <div id="leaves-result" class="result-panel"></div>
+        </div>
+
+        <!-- get_all_paths Section -->
+        <div class="op-section" data-op="get_all_paths">
+          <h3 class="op-title">Get All Paths</h3>
+          <p class="op-description">Get all paths to leaf values in your data structure.</p>
+
+          <button id="paths-btn" class="execute-btn">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="5 3 19 12 5 21 5 3"></polygon></svg>
+            Execute
+          </button>
+
+          <div class="code-preview">
+            <div class="code-preview-header">
+              <span>Python Code</span>
+              <button class="copy-btn" onclick="copyCode('get_all_paths')">Copy</button>
+            </div>
+            <div class="code-preview-body" id="paths-code-preview">
+              <span class="code-fn">get_all_paths</span>(data)
+            </div>
+          </div>
+
+          <div id="paths-result" class="result-panel"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<style>
+  /* Spinner */
+  .spinner {
+    border: 4px solid #e0e0e0;
+    border-top: 4px solid #1976d2;
+    border-radius: 50%;
+    width: 40px;
+    height: 40px;
+    animation: spin 1s linear infinite;
+    margin: 0 auto;
+  }
+
+  @keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+  }
+
+  /* Main Layout - Top/Bottom */
+  .playground-layout {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+  }
+
+  /* Data Panel */
+  .data-panel {
+    background: #263238;
+    border-radius: 8px;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+
+  .panel-header {
+    padding: 12px 16px;
+    background: #1e272c;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 10px;
+  }
+
+  .panel-title {
+    font-weight: 600;
+    font-size: 0.85rem;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    color: #90a4ae;
+  }
+
+  .example-buttons {
+    display: flex;
+    gap: 6px;
+    flex-wrap: wrap;
+  }
+
+  .example-btn {
+    padding: 5px 10px;
+    background: transparent;
+    border: 1px solid #455a64;
+    color: #b0bec5;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 0.75rem;
+    transition: all 0.2s;
+  }
+
+  .example-btn:hover {
+    background: #37474f;
+    border-color: #607d8b;
+  }
+
+  .example-btn.active {
+    background: #1976d2;
+    color: white;
+    border-color: #1976d2;
+  }
+
+  /* JSON Editor */
+  .json-editor-container {
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    height: 280px;
+  }
+
+  .json-status {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    font-size: 0.75rem;
+    font-weight: 500;
+    z-index: 1;
+    padding: 3px 8px;
+    border-radius: 4px;
+  }
+
+  .json-status.valid {
+    background: rgba(76, 175, 80, 0.2);
+    color: #81c784;
+  }
+
+  .json-status.invalid {
+    background: rgba(244, 67, 54, 0.2);
+    color: #e57373;
+  }
+
+  .json-editor {
+    flex: 1;
+    width: 100%;
+    padding: 16px;
+    padding-top: 40px;
+    background: #263238;
+    border: none;
+    color: #eceff1;
+    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+    font-size: 0.85rem;
+    line-height: 1.6;
+    resize: none;
+    outline: none;
+    overflow: auto;
+  }
+
+  .json-editor::placeholder {
+    color: #546e7a;
+  }
+
+  .json-error {
+    padding: 8px 16px;
+    font-size: 0.75rem;
+    color: #e57373;
+    background: #1e272c;
+    font-family: monospace;
+    min-height: 32px;
+  }
+
+  /* Stats Bar */
+  .stats-bar {
+    padding: 10px 16px;
+    background: #1e272c;
+    display: flex;
+    gap: 20px;
+    border-top: 1px solid #37474f;
+  }
+
+  .stat-item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .stat-label {
+    font-size: 0.7rem;
+    color: #78909c;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+  }
+
+  .stat-value {
+    background: #37474f;
+    padding: 2px 10px;
+    border-radius: 4px;
+    color: #80cbc4;
+    font-weight: 600;
+    font-size: 0.8rem;
+    font-family: monospace;
+  }
+
+  /* Operations Panel */
+  .ops-panel {
+    background: white;
+    border-radius: 8px;
+    border: 1px solid #e0e0e0;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+
+  .ops-tabs {
+    display: flex;
+    background: #fafafa;
+    border-bottom: 1px solid #e0e0e0;
+    overflow-x: auto;
+    flex-shrink: 0;
+  }
+
+  .ops-tab {
+    padding: 12px 16px;
+    background: transparent;
+    border: none;
+    color: #757575;
+    cursor: pointer;
+    font-size: 0.8rem;
+    font-weight: 500;
+    font-family: 'Monaco', 'Menlo', monospace;
+    border-bottom: 2px solid transparent;
+    white-space: nowrap;
+    transition: all 0.2s;
+  }
+
+  .ops-tab:hover {
+    color: #424242;
+    background: #f5f5f5;
+  }
+
+  .ops-tab.active {
+    color: #1976d2;
+    border-bottom-color: #1976d2;
+    background: white;
+  }
+
+  .ops-content {
+    flex: 1;
+    overflow: auto;
+    padding: 20px;
+  }
+
+  .op-section {
+    display: none;
+  }
+
+  .op-section.active {
+    display: block;
+  }
+
+  .op-title {
+    font-size: 1.1rem;
+    font-weight: 600;
+    margin: 0 0 6px 0;
+    color: #212121;
+  }
+
+  .op-description {
+    color: #757575;
+    font-size: 0.9rem;
+    margin: 0 0 20px 0;
+  }
+
+  /* Form Elements */
+  .form-group {
+    margin-bottom: 16px;
+  }
+
+  .form-label {
+    display: block;
+    font-size: 0.75rem;
+    font-weight: 600;
+    color: #616161;
+    margin-bottom: 6px;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+  }
+
+  .form-input {
+    width: 100%;
+    padding: 10px 12px;
+    border: 1px solid #e0e0e0;
+    border-radius: 6px;
+    font-size: 0.9rem;
+    font-family: 'Monaco', 'Menlo', monospace;
+    transition: border-color 0.2s, box-shadow 0.2s;
+    background: white;
+  }
+
+  .form-input:focus {
+    outline: none;
+    border-color: #1976d2;
+    box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.1);
+  }
+
+  .form-input::placeholder {
+    color: #bdbdbd;
+  }
+
+  .form-hint {
+    font-size: 0.75rem;
+    color: #9e9e9e;
+    margin: 6px 0 0 0;
+  }
+
+  .checkbox-group {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 10px 12px;
+    background: #fafafa;
+    border-radius: 6px;
+    cursor: pointer;
+    font-size: 0.85rem;
+    color: #616161;
+  }
+
+  .checkbox-group input {
+    width: 16px;
+    height: 16px;
+    cursor: pointer;
+  }
+
+  /* Execute Button */
+  .execute-btn {
+    width: 100%;
+    padding: 12px 16px;
+    background: #1976d2;
+    color: white;
+    border: none;
+    border-radius: 6px;
+    font-size: 0.9rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: background 0.2s, transform 0.1s;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+  }
+
+  .execute-btn:hover {
+    background: #1565c0;
+  }
+
+  .execute-btn:active {
+    transform: scale(0.98);
+  }
+
+  /* Code Preview */
+  .code-preview {
+    margin-top: 16px;
+    background: #263238;
+    border-radius: 6px;
+    overflow: hidden;
+  }
+
+  .code-preview-header {
+    padding: 8px 12px;
+    background: #1e272c;
+    color: #90a4ae;
+    font-size: 0.7rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .copy-btn {
+    padding: 3px 8px;
+    background: #37474f;
+    border: none;
+    color: #b0bec5;
+    border-radius: 3px;
+    cursor: pointer;
+    font-size: 0.65rem;
+    text-transform: uppercase;
+  }
+
+  .copy-btn:hover {
+    background: #455a64;
+  }
+
+  .code-preview-body {
+    padding: 12px;
+    font-family: 'Monaco', 'Menlo', monospace;
+    font-size: 0.85rem;
+    color: #eceff1;
+    overflow-x: auto;
+  }
+
+  .code-fn {
+    color: #82aaff;
+  }
+
+  .code-str {
+    color: #c3e88d;
+  }
+
+  .code-param {
+    color: #ffcb6b;
+  }
+
+  .code-bool {
+    color: #c792ea;
+  }
+
+  .code-num {
+    color: #f78c6c;
+  }
+
+  /* Result Panel */
+  .result-panel {
+    margin-top: 16px;
+    border-radius: 6px;
+    overflow: hidden;
+    border: 1px solid #e0e0e0;
+    min-height: 50px;
+  }
+
+  .result-panel:empty {
+    display: none;
+  }
+
+  .result-panel .result-header {
+    padding: 8px 12px;
+    background: #fafafa;
+    font-size: 0.7rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    color: #757575;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .result-panel .result-body {
+    padding: 12px;
+    font-family: 'Monaco', 'Menlo', monospace;
+    font-size: 0.85rem;
+    background: white;
+  }
+
+  .result-success {
+    color: #2e7d32;
+  }
+
+  .result-error {
+    color: #c62828;
+  }
+
+  .result-info {
+    color: #1976d2;
+  }
+
+  .result-value {
+    background: #f5f5f5;
+    padding: 8px 12px;
+    border-radius: 4px;
+    margin-top: 8px;
+    display: block;
+    word-break: break-all;
+  }
+
+  .result-status {
+    padding: 3px 8px;
+    border-radius: 12px;
+    font-size: 0.65rem;
+    font-weight: 600;
+  }
+
+  .result-status.success {
+    background: #e8f5e9;
+    color: #2e7d32;
+  }
+
+  .result-status.error {
+    background: #ffebee;
+    color: #c62828;
+  }
+
+  .paths-list {
+    margin: 8px 0 0 0;
+    padding: 0 0 0 20px;
+    max-height: 200px;
+    overflow-y: auto;
+  }
+
+  .paths-list li {
+    padding: 4px 0;
+    font-family: monospace;
+    font-size: 0.8rem;
+    color: #424242;
+  }
+
+  /* Responsive */
+  @media (max-width: 768px) {
+    .json-editor-container {
+      height: 220px;
+    }
+
+    .ops-tab {
+      padding: 10px 12px;
+      font-size: 0.75rem;
+    }
+
+    .panel-header {
+      flex-direction: column;
+      align-items: flex-start;
+    }
+
+    .example-buttons {
+      width: 100%;
+    }
+  }
+</style>
+
+<script src="https://cdn.jsdelivr.net/pyodide/v0.24.1/full/pyodide.js"></script>
+
+<script type="text/javascript">
+  let pyodide;
+  let appliedJsonString = "";
+  let autoApplyTimer = null;
+  let currentCodeStrings = {};
+
+  async function main() {
+    // Load Pyodide
+    pyodide = await loadPyodide({
+      indexURL: "https://cdn.jsdelivr.net/pyodide/v0.24.1/full/"
+    });
+
+    // Update loading message
+    document.getElementById("pyodide-loading").innerHTML = '<div class="spinner"></div><p style="margin-top: 15px; color: #666;">Installing nestedutils package...</p>';
+
+    // Install nestedutils package
+    await pyodide.loadPackage("micropip");
+    const micropip = pyodide.pyimport("micropip");
+    await micropip.install("nestedutils");
+
+    // Import functions and initialize data
+    pyodide.runPython(`
+      from nestedutils import get_at, set_at, delete_at, exists_at, get_depth, count_leaves, get_all_paths
+      import json
+
+      # Initialize data structure
+      data = {}
+
+      # Try to get package version
+      try:
+          import importlib.metadata
+          package_version = importlib.metadata.version('nestedutils')
+      except:
+          try:
+              import importlib_metadata
+              package_version = importlib_metadata.version('nestedutils')
+          except:
+              package_version = "unknown"
+    `);
+
+    const packageVersion = pyodide.globals.get("package_version");
+
+    // Display package version
+    if (packageVersion && packageVersion !== "unknown") {
+      document.getElementById("package-version").textContent = `v${packageVersion}`;
+      document.getElementById("package-info").style.display = "block";
+    }
+
+    // Hide loading, show interface
+    document.getElementById("pyodide-loading").style.display = "none";
+    document.getElementById("playground-container").style.display = "block";
+
+    // Load default example
+    loadExampleData("example1");
+
+    // Setup event listeners
+    setupEventListeners();
+  }
+
+  function updateDataDisplay(syncTextarea = false) {
+    if (syncTextarea) {
+      try {
+        const json = pyodide.runPython(`json.dumps(data, indent=2)`);
+        const jsonStr = json || "{}";
+        document.getElementById("custom-json-input").value = jsonStr;
+        appliedJsonString = JSON.stringify(JSON.parse(jsonStr));
+        document.getElementById("json-error").textContent = "";
+        updateJsonStatus(true);
+        updateStats();
+      } catch (error) {
+        console.error("Error updating display:", error);
+      }
+    }
+  }
+
+  function updateStats() {
+    try {
+      const depth = pyodide.runPython(`get_depth(data)`);
+      const leaves = pyodide.runPython(`count_leaves(data)`);
+
+      document.getElementById("stat-depth").textContent = depth;
+      document.getElementById("stat-leaves").textContent = leaves;
+    } catch (e) {
+      document.getElementById("stat-depth").textContent = "-";
+      document.getElementById("stat-leaves").textContent = "-";
+    }
+  }
+
+  function hasUnsavedChanges() {
+    const jsonInput = document.getElementById("custom-json-input").value.trim();
+
+    if (!jsonInput) {
+      return appliedJsonString !== "" && appliedJsonString !== "{}";
+    }
+
+    if (jsonInput === "{}" || jsonInput === "[]") {
+      return jsonInput !== appliedJsonString;
+    }
+
+    try {
+      const normalized = JSON.stringify(JSON.parse(jsonInput));
+      return normalized !== appliedJsonString;
+    } catch {
+      return true;
+    }
+  }
+
+  function applyJsonData() {
+    const jsonInput = document.getElementById("custom-json-input").value.trim();
+    const errorDiv = document.getElementById("json-error");
+
+    if (!jsonInput) {
+      updateJsonStatus(false, "Empty");
+      errorDiv.textContent = "Please enter JSON data";
+      return;
+    }
+
+    let parsedData;
+    try {
+      parsedData = JSON.parse(jsonInput);
+    } catch (error) {
+      updateJsonStatus(false, "Invalid");
+      errorDiv.textContent = `Invalid JSON: ${error.message}`;
+      return;
+    }
+
+    if (typeof parsedData !== "object" || parsedData === null) {
+      updateJsonStatus(false, "Invalid");
+      errorDiv.textContent = "JSON must be an object {} or array []";
+      return;
+    }
+
+    try {
+      const jsonStr = JSON.stringify(parsedData);
+      pyodide.runPython(`data = json.loads(${JSON.stringify(jsonStr)})`);
+      appliedJsonString = jsonStr;
+      clearResults();
+      updateJsonStatus(true, "Applied");
+      errorDiv.textContent = "";
+      updateStats();
+
+      // Update example buttons
+      document.querySelectorAll('.example-btn').forEach(btn => btn.classList.remove('active'));
+      document.querySelector('.example-btn[data-example="custom"]').classList.add('active');
+    } catch (error) {
+      updateJsonStatus(false, "Error");
+      errorDiv.textContent = `Error: ${error.message}`;
+    }
+  }
+
+  function updateJsonStatus(isValid, message = null) {
+    const statusDiv = document.getElementById("json-status");
+
+    if (message) {
+      statusDiv.textContent = message;
+      statusDiv.className = `json-status ${isValid ? 'valid' : 'invalid'}`;
+    } else if (isValid === true) {
+      statusDiv.textContent = "Valid";
+      statusDiv.className = "json-status valid";
+    } else if (isValid === false) {
+      statusDiv.textContent = "Invalid";
+      statusDiv.className = "json-status invalid";
+    } else {
+      statusDiv.textContent = "";
+      statusDiv.className = "json-status";
+    }
+  }
+
+  function loadExampleData(exampleType) {
+    let exampleCode = "";
+
+    switch(exampleType) {
+      case "example1":
+        // Config File - Deep nesting with various types
+        exampleCode = `
+data = {
+  "app": {
+    "name": "MyApp",
+    "version": "2.0.1",
+    "debug": False
+  },
+  "database": {
+    "primary": {
+      "host": "localhost",
+      "port": 5432,
+      "credentials": {
+        "username": "admin",
+        "password": None
+      }
+    },
+    "replica": {
+      "host": "replica.db.local",
+      "port": 5432,
+      "readonly": True
+    }
+  },
+  "features": {
+    "authentication": {
+      "enabled": True,
+      "providers": ["google", "github", "email"],
+      "session_timeout": 3600
+    },
+    "analytics": {
+      "enabled": False,
+      "tracking_id": None
+    }
+  },
+  "logging": {
+    "level": "info",
+    "outputs": ["console", "file"]
+  }
+}`;
+        break;
+      case "example2":
+        // API Response - Paginated data with metadata
+        exampleCode = `
+data = {
+  "status": "success",
+  "data": {
+    "users": [
+      {
+        "id": 1,
+        "username": "alice",
+        "email": "alice@example.com",
+        "profile": {
+          "avatar": "https://example.com/alice.jpg",
+          "bio": "Software Engineer"
+        },
+        "roles": ["admin", "user"],
+        "active": True
+      },
+      {
+        "id": 2,
+        "username": "bob",
+        "email": "bob@example.com",
+        "profile": {
+          "avatar": None,
+          "bio": "Product Manager"
+        },
+        "roles": ["user"],
+        "active": False
+      }
+    ],
+    "pagination": {
+      "page": 1,
+      "per_page": 10,
+      "total_pages": 5,
+      "total_items": 42
+    }
+  },
+  "meta": {
+    "request_id": "req_abc123",
+    "timestamp": "2025-02-14T10:30:00Z"
+  }
+}`;
+        break;
+      case "example3":
+        // Event Log - Timestamped events with varying structures
+        exampleCode = `
+data = {
+  "events": [
+    {
+      "id": "evt_001",
+      "type": "user.login",
+      "timestamp": "2025-02-14T09:00:00Z",
+      "data": {
+        "user_id": 42,
+        "ip_address": "192.168.1.100",
+        "device": {"type": "mobile", "os": "iOS"}
+      },
+      "success": True
+    },
+    {
+      "id": "evt_002",
+      "type": "payment.processed",
+      "timestamp": "2025-02-14T09:15:00Z",
+      "data": {
+        "order_id": "ORD-789",
+        "amount": 99.99,
+        "currency": "USD",
+        "method": {"type": "card", "last4": "4242"}
+      },
+      "success": True
+    },
+    {
+      "id": "evt_003",
+      "type": "email.sent",
+      "timestamp": "2025-02-14T09:20:00Z",
+      "data": {
+        "to": "user@example.com",
+        "subject": "Order Confirmation",
+        "template": "order_confirmation_v2"
+      },
+      "success": False,
+      "error": {"code": "SMTP_TIMEOUT", "message": "Connection timed out"}
+    }
+  ],
+  "summary": {
+    "total": 3,
+    "successful": 2,
+    "failed": 1
+  }
+}`;
+        break;
+      case "custom":
+        // Clear data for fresh start
+        pyodide.runPython(`data = {}`);
+        document.getElementById("custom-json-input").value = "{}";
+        appliedJsonString = "{}";
+        clearResults();
+        updateStats();
+        updateJsonStatus(true);
+        document.getElementById("json-error").textContent = "";
+        document.querySelectorAll('.example-btn').forEach(btn => btn.classList.remove('active'));
+        document.querySelector('.example-btn[data-example="custom"]').classList.add('active');
+        return;
+    }
+
+    if (exampleCode) {
+      pyodide.runPython(exampleCode);
+      updateDataDisplay(true);
+      clearResults();
+
+      // Update example buttons
+      document.querySelectorAll('.example-btn').forEach(btn => btn.classList.remove('active'));
+      document.querySelector(`.example-btn[data-example="${exampleType}"]`).classList.add('active');
+    }
+  }
+
+  function setupEventListeners() {
+    // Example buttons
+    document.querySelectorAll('.example-btn').forEach(btn => {
+      btn.addEventListener('click', () => {
+        loadExampleData(btn.dataset.example);
+      });
+    });
+
+    // Operation tabs
+    document.querySelectorAll('.ops-tab').forEach(tab => {
+      tab.addEventListener('click', () => {
+        document.querySelectorAll('.ops-tab').forEach(t => t.classList.remove('active'));
+        document.querySelectorAll('.op-section').forEach(s => s.classList.remove('active'));
+
+        tab.classList.add('active');
+        document.querySelector(`.op-section[data-op="${tab.dataset.op}"]`).classList.add('active');
+      });
+    });
+
+    // JSON editor
+    document.getElementById("custom-json-input").addEventListener("input", () => {
+      const jsonInput = document.getElementById("custom-json-input").value.trim();
+      const errorDiv = document.getElementById("json-error");
+
+      if (autoApplyTimer) {
+        clearTimeout(autoApplyTimer);
+        autoApplyTimer = null;
+      }
+
+      if (!jsonInput) {
+        updateJsonStatus(null);
+        errorDiv.textContent = "";
+        return;
+      }
+
+      let isValid = false;
+      try {
+        const parsed = JSON.parse(jsonInput);
+        if (typeof parsed !== "object" || parsed === null) {
+          updateJsonStatus(false);
+          errorDiv.textContent = "JSON must be an object {} or array []";
+        } else {
+          updateJsonStatus(true);
+          errorDiv.textContent = "";
+          isValid = true;
+        }
+      } catch (error) {
+        updateJsonStatus(false);
+        errorDiv.textContent = `Invalid JSON: ${error.message}`;
+      }
+
+      if (isValid) {
+        autoApplyTimer = setTimeout(() => {
+          if (hasUnsavedChanges()) {
+            applyJsonData();
+          }
+        }, 1000);
+      }
+    });
+
+    // Update code previews on input
+    document.getElementById("get-path").addEventListener("input", updateGetCodePreview);
+    document.getElementById("get-default").addEventListener("input", updateGetCodePreview);
+    document.getElementById("set-path").addEventListener("input", updateSetCodePreview);
+    document.getElementById("set-value").addEventListener("input", updateSetCodePreview);
+    document.getElementById("set-create").addEventListener("change", updateSetCodePreview);
+    document.getElementById("exists-path").addEventListener("input", updateExistsCodePreview);
+    document.getElementById("delete-path").addEventListener("input", updateDeleteCodePreview);
+    document.getElementById("delete-allow-list").addEventListener("change", updateDeleteCodePreview);
+
+    // Get value
+    document.getElementById("get-btn").addEventListener("click", async () => {
+      const path = document.getElementById("get-path").value.trim();
+      const defaultValue = document.getElementById("get-default").value.trim();
+      const resultDiv = document.getElementById("get-result");
+
+      if (!path) {
+        showResult(resultDiv, "error", "Please enter a path");
+        return;
+      }
+
+      try {
+        showResult(resultDiv, "info", "Processing...");
+
+        let code = `get_at(data, ${JSON.stringify(path)}`;
+        if (defaultValue) {
+          let defaultVal = parseValue(defaultValue);
+          code += `, default=${JSON.stringify(defaultVal)}`;
+        }
+        code += `)`;
+
+        currentCodeStrings['get_at'] = code;
+        const result = pyodide.runPython(code);
+
+        let resultStr;
+        try {
+          resultStr = pyodide.runPython(`json.dumps(${JSON.stringify(result)})`);
+        } catch (e) {
+          resultStr = String(result);
+        }
+
+        showResult(resultDiv, "success", "Value found", resultStr);
+      } catch (error) {
+        showResult(resultDiv, "error", error.message);
+      }
+    });
+
+    // Set value
+    document.getElementById("set-btn").addEventListener("click", async () => {
+      const path = document.getElementById("set-path").value.trim();
+      const value = document.getElementById("set-value").value.trim();
+      const create = document.getElementById("set-create").checked;
+      const resultDiv = document.getElementById("set-result");
+
+      if (!path || value === "") {
+        showResult(resultDiv, "error", "Please enter a path and value");
+        return;
+      }
+
+      try {
+        showResult(resultDiv, "info", "Processing...");
+
+        let parsedValue = parseValue(value);
+        const code = `set_at(data, ${JSON.stringify(path)}, ${JSON.stringify(parsedValue)}, create=${create ? 'True' : 'False'})`;
+        currentCodeStrings['set_at'] = code;
+
+        pyodide.runPython(code);
+        updateDataDisplay(true);
+        showResult(resultDiv, "success", "Value set successfully");
+      } catch (error) {
+        showResult(resultDiv, "error", error.message);
+      }
+    });
+
+    // Check existence
+    document.getElementById("exists-btn").addEventListener("click", async () => {
+      const path = document.getElementById("exists-path").value.trim();
+      const resultDiv = document.getElementById("exists-result");
+
+      if (!path) {
+        showResult(resultDiv, "error", "Please enter a path");
+        return;
+      }
+
+      try {
+        showResult(resultDiv, "info", "Processing...");
+        const code = `exists_at(data, ${JSON.stringify(path)})`;
+        currentCodeStrings['exists_at'] = code;
+        const exists = pyodide.runPython(code);
+
+        if (exists) {
+          showResult(resultDiv, "success", "Path exists", "True");
+        } else {
+          showResult(resultDiv, "info", "Path does not exist", "False");
+        }
+      } catch (error) {
+        showResult(resultDiv, "error", error.message);
+      }
+    });
+
+    // Delete value
+    document.getElementById("delete-btn").addEventListener("click", async () => {
+      const path = document.getElementById("delete-path").value.trim();
+      const allowListMutation = document.getElementById("delete-allow-list").checked;
+      const resultDiv = document.getElementById("delete-result");
+
+      if (!path) {
+        showResult(resultDiv, "error", "Please enter a path");
+        return;
+      }
+
+      try {
+        showResult(resultDiv, "info", "Processing...");
+        const code = `delete_at(data, ${JSON.stringify(path)}, allow_list_mutation=${allowListMutation ? 'True' : 'False'})`;
+        currentCodeStrings['delete_at'] = code;
+        const deleted = pyodide.runPython(code);
+        updateDataDisplay(true);
+
+        let deletedStr;
+        try {
+          deletedStr = pyodide.runPython(`json.dumps(${JSON.stringify(deleted)})`);
+        } catch (e) {
+          deletedStr = String(deleted);
+        }
+
+        showResult(resultDiv, "success", "Value deleted", deletedStr);
+      } catch (error) {
+        showResult(resultDiv, "error", error.message);
+      }
+    });
+
+    // Get depth
+    document.getElementById("depth-btn").addEventListener("click", async () => {
+      const resultDiv = document.getElementById("depth-result");
+
+      try {
+        showResult(resultDiv, "info", "Processing...");
+        const code = `get_depth(data)`;
+        currentCodeStrings['get_depth'] = code;
+        const depth = pyodide.runPython(code);
+        showResult(resultDiv, "success", "Maximum nesting depth", String(depth));
+      } catch (error) {
+        showResult(resultDiv, "error", error.message);
+      }
+    });
+
+    // Count leaves
+    document.getElementById("leaves-btn").addEventListener("click", async () => {
+      const resultDiv = document.getElementById("leaves-result");
+
+      try {
+        showResult(resultDiv, "info", "Processing...");
+        const code = `count_leaves(data)`;
+        currentCodeStrings['count_leaves'] = code;
+        const count = pyodide.runPython(code);
+        showResult(resultDiv, "success", "Total leaf values", String(count));
+      } catch (error) {
+        showResult(resultDiv, "error", error.message);
+      }
+    });
+
+    // Get all paths
+    document.getElementById("paths-btn").addEventListener("click", async () => {
+      const resultDiv = document.getElementById("paths-result");
+
+      try {
+        showResult(resultDiv, "info", "Processing...");
+        const code = `get_all_paths(data)`;
+        currentCodeStrings['get_all_paths'] = code;
+
+        const pathsJson = pyodide.runPython(`
+import json
+paths = get_all_paths(data)
+dot_paths = []
+for path in paths:
+    if not path:
+        dot_paths.append("(root)")
+    else:
+        dot_paths.append(".".join(str(p) for p in path))
+json.dumps(dot_paths)
+        `);
+
+        const paths = JSON.parse(pathsJson);
+
+        if (paths.length === 0) {
+          showResult(resultDiv, "info", "No leaf values found (empty data structure)");
+        } else {
+          showResultPaths(resultDiv, paths);
+        }
+      } catch (error) {
+        showResult(resultDiv, "error", error.message);
+      }
+    });
+
+    // Enter key handlers
+    ["get-path", "set-path", "exists-path", "delete-path"].forEach(id => {
+      document.getElementById(id).addEventListener("keypress", (e) => {
+        if (e.key === "Enter") {
+          document.getElementById(id.replace("-path", "-btn")).click();
+        }
+      });
+    });
+  }
+
+  function parseValue(value) {
+    if (value === "null" || value === "None") return null;
+    if (!isNaN(value) && value !== "") return Number(value);
+    if (value === "true" || value === "True") return true;
+    if (value === "false" || value === "False") return false;
+    try {
+      return JSON.parse(value);
+    } catch (e) {
+      return value;
+    }
+  }
+
+  function showResult(div, type, message, value = null) {
+    const statusClass = type === "success" ? "success" : type === "error" ? "error" : "";
+    const statusText = type === "success" ? "Success" : type === "error" ? "Error" : "Info";
+
+    let html = `
+      <div class="result-header">
+        <span>Result</span>
+        ${statusClass ? `<span class="result-status ${statusClass}">${statusText}</span>` : ''}
+      </div>
+      <div class="result-body">
+        <span class="result-${type}">${escapeHtml(message)}</span>
+        ${value ? `<code class="result-value">${escapeHtml(value)}</code>` : ''}
+      </div>
+    `;
+    div.innerHTML = html;
+  }
+
+  function showResultPaths(div, paths) {
+    const pathList = paths.map(p => `<li>${escapeHtml(p)}</li>`).join('');
+    div.innerHTML = `
+      <div class="result-header">
+        <span>Result</span>
+        <span class="result-status success">Success</span>
+      </div>
+      <div class="result-body">
+        <span class="result-success">Found ${paths.length} path${paths.length !== 1 ? 's' : ''}:</span>
+        <ul class="paths-list">${pathList}</ul>
+      </div>
+    `;
+  }
+
+  function updateGetCodePreview() {
+    const path = document.getElementById("get-path").value.trim() || "path";
+    const defaultValue = document.getElementById("get-default").value.trim();
+
+    let code = `<span class="code-fn">get_at</span>(data, <span class="code-str">"${escapeHtml(path)}"</span>`;
+    if (defaultValue) {
+      code += `, <span class="code-param">default</span>=<span class="code-str">${escapeHtml(JSON.stringify(parseValue(defaultValue)))}</span>`;
+    }
+    code += `)`;
+
+    document.getElementById("get-code-preview").innerHTML = code;
+  }
+
+  function updateSetCodePreview() {
+    const path = document.getElementById("set-path").value.trim() || "path";
+    const value = document.getElementById("set-value").value.trim() || "value";
+    const create = document.getElementById("set-create").checked;
+
+    let parsedValue = parseValue(value);
+    let valueDisplay = typeof parsedValue === "string" ? `"${escapeHtml(parsedValue)}"` : escapeHtml(String(parsedValue));
+    document.getElementById("set-code-preview").innerHTML = `<span class="code-fn">set_at</span>(data, <span class="code-str">"${escapeHtml(path)}"</span>, <span class="code-str">${valueDisplay}</span>, <span class="code-param">create</span>=<span class="code-bool">${create ? 'True' : 'False'}</span>)`;
+  }
+
+  function updateExistsCodePreview() {
+    const path = document.getElementById("exists-path").value.trim() || "path";
+    document.getElementById("exists-code-preview").innerHTML = `<span class="code-fn">exists_at</span>(data, <span class="code-str">"${escapeHtml(path)}"</span>)`;
+  }
+
+  function updateDeleteCodePreview() {
+    const path = document.getElementById("delete-path").value.trim() || "path";
+    const allowList = document.getElementById("delete-allow-list").checked;
+
+    let code = `<span class="code-fn">delete_at</span>(data, <span class="code-str">"${escapeHtml(path)}"</span>`;
+    if (allowList) {
+      code += `, <span class="code-param">allow_list_mutation</span>=<span class="code-bool">True</span>`;
+    }
+    code += `)`;
+
+    document.getElementById("delete-code-preview").innerHTML = code;
+  }
+
+  function copyCode(op) {
+    let code = '';
+    switch(op) {
+      case 'get_at':
+        const getPath = document.getElementById("get-path").value.trim() || "path";
+        const getDefault = document.getElementById("get-default").value.trim();
+        code = `get_at(data, "${getPath}"${getDefault ? `, default=${JSON.stringify(parseValue(getDefault))}` : ''})`;
+        break;
+      case 'set_at':
+        const setPath = document.getElementById("set-path").value.trim() || "path";
+        const setValue = document.getElementById("set-value").value.trim() || "value";
+        const setCreate = document.getElementById("set-create").checked;
+        code = `set_at(data, "${setPath}", ${JSON.stringify(parseValue(setValue))}, create=${setCreate ? 'True' : 'False'})`;
+        break;
+      case 'exists_at':
+        const existsPath = document.getElementById("exists-path").value.trim() || "path";
+        code = `exists_at(data, "${existsPath}")`;
+        break;
+      case 'delete_at':
+        const deletePath = document.getElementById("delete-path").value.trim() || "path";
+        const allowList = document.getElementById("delete-allow-list").checked;
+        code = `delete_at(data, "${deletePath}"${allowList ? ', allow_list_mutation=True' : ''})`;
+        break;
+      case 'get_depth':
+        code = 'get_depth(data)';
+        break;
+      case 'count_leaves':
+        code = 'count_leaves(data)';
+        break;
+      case 'get_all_paths':
+        code = 'get_all_paths(data)';
+        break;
+    }
+
+    navigator.clipboard.writeText(code).then(() => {
+      const btn = event.target;
+      const original = btn.textContent;
+      btn.textContent = 'Copied!';
+      setTimeout(() => btn.textContent = original, 1500);
+    });
+  }
+
+  function clearResults() {
+    document.querySelectorAll('.result-panel').forEach(el => el.innerHTML = '');
+  }
+
+  function escapeHtml(text) {
+    const div = document.createElement("div");
+    div.textContent = text;
+    return div.innerHTML;
+  }
+
+  // Start loading Pyodide
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', () => {
+      main().catch(err => {
+        document.getElementById("pyodide-loading").innerHTML =
+          `<p style="color: #c62828;">Error loading Pyodide: ${err.message}</p>`;
+        console.error(err);
+      });
+    });
+  } else {
+    main().catch(err => {
+      document.getElementById("pyodide-loading").innerHTML =
+        `<p style="color: #c62828;">Error loading Pyodide: ${err.message}</p>`;
+      console.error(err);
+    });
+  }
+</script>
diff --git a/mkdocs.yml b/mkdocs.yml
index 7de55d2..ef3a316 100644
--- a/mkdocs.yml
+++ b/mkdocs.yml
@@ -11,7 +11,7 @@ docs_dir: docs
 
 nav:
   - Home: index.md
-  - Interactive Demo: demo.md
+  - Interactive Playground: playground.md
   - API Reference: api-reference.md
   - Migration Guide (v1 → v2): migration-v1-to-v2.md
   - Contributing: CONTRIBUTING.md