diff --git a/example-app/package-lock.json b/example-app/package-lock.json
index 8f4d879..567ab6f 100644
--- a/example-app/package-lock.json
+++ b/example-app/package-lock.json
@@ -8,6 +8,7 @@
       "name": "example-app",
       "version": "0.1.0",
       "dependencies": {
+        "emerald-json-editor-react": "^1.1.0",
         "next": "14.0.4",
         "react": "^18",
         "react-dom": "^18"
@@ -234,6 +235,17 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@json-editor/json-editor": {
+      "version": "2.13.1",
+      "resolved": "https://registry.npmjs.org/@json-editor/json-editor/-/json-editor-2.13.1.tgz",
+      "integrity": "sha512-x7pDmJGFNQrM+QXAIRtpK8bZzTNbmWMqpTfYQPLQQRobv/lQaRLMJtKEJJTRFMEZu/pl3btmQNpNT0SRPJJ3IA==",
+      "dependencies": {
+        "core-js": "^3.27.2"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
     "node_modules/@next/env": {
       "version": "14.0.4",
       "resolved": "https://registry.npmjs.org/@next/env/-/env-14.0.4.tgz",
@@ -1118,6 +1130,16 @@
       "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
       "dev": true
     },
+    "node_modules/core-js": {
+      "version": "3.35.0",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.35.0.tgz",
+      "integrity": "sha512-ntakECeqg81KqMueeGJ79Q5ZgQNR+6eaE8sxGCx62zMbAIj65q+uYvatToew3m6eAGdU4gNZwpZ34NMe4GYswg==",
+      "hasInstallScript": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/core-js"
+      }
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
@@ -1261,6 +1283,18 @@
       "integrity": "sha512-sYNE3QxcDS4ANW1k4S/wWYMXjCVcFSOX3Bg8jpuMFaXt/x8JCmp0R1Xe1ZXDX4WXnSRBf+GJ/3eGWicUuQq5cg==",
       "dev": true
     },
+    "node_modules/emerald-json-editor-react": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/emerald-json-editor-react/-/emerald-json-editor-react-1.1.0.tgz",
+      "integrity": "sha512-aVSUtxIsXqYvcRaJebD1OtioPVR09cjx9fPcpQdhKbNK6O/wmbuHMIAT9X28fYna7VpyJLKAewbcd0Jkunqu0g==",
+      "dependencies": {
+        "@json-editor/json-editor": "^2.13.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
     "node_modules/emoji-regex": {
       "version": "9.2.2",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
diff --git a/example-app/package.json b/example-app/package.json
index eca6362..f373644 100644
--- a/example-app/package.json
+++ b/example-app/package.json
@@ -9,6 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "emerald-json-editor-react": "^1.1.0",
     "next": "14.0.4",
     "react": "^18",
     "react-dom": "^18"
diff --git a/example-app/src/app/ui/JsonForm.js b/example-app/src/app/ui/JsonForm.js
index 1a3eaf0..f143c8f 100644
--- a/example-app/src/app/ui/JsonForm.js
+++ b/example-app/src/app/ui/JsonForm.js
@@ -1,8 +1,10 @@
 import React from "react";
+import { JsonEditorWrapper } from "emerald-json-editor-react";
 
 const JsonForm = () => {
   return (
     <div className="border border-gray-200 text-gray-700 p-5 rounded-lg">
+      <JsonEditorWrapper />
       Form here
     </div>
   );