diff --git a/app/web/src/nova/ed/panel/side/prop-master.tsx b/app/web/src/nova/ed/panel/side/prop-master.tsx
index 7dd9617b..ff6b9e9d 100644
--- a/app/web/src/nova/ed/panel/side/prop-master.tsx
+++ b/app/web/src/nova/ed/panel/side/prop-master.tsx
@@ -224,11 +224,13 @@ export const EdSidePropComp: FC<{ meta: IMeta }> = ({ meta }) => {
                   className={cx(
                     "font-mono",
                     css`
-                      font-size: 12px;
+                      font-size: 11px;
                       width: 500px;
                       height: 500px;
+                      margin: 5px 0px;
                     `
                   )}
+                  spellCheck={false}
                   onChange={(e) => {
                     local.json = e.currentTarget.value;
                     local.render();
diff --git a/app/web/src/nova/ed/panel/side/side-style.tsx b/app/web/src/nova/ed/panel/side/side-style.tsx
index 70d5f991..19ce21e4 100644
--- a/app/web/src/nova/ed/panel/side/side-style.tsx
+++ b/app/web/src/nova/ed/panel/side/side-style.tsx
@@ -4,6 +4,7 @@ import { useGlobal } from "web-utils";
 import { IItem } from "../../../../utils/types/item";
 import { EdSidePropComp } from "./prop-master";
 import { EdStyleAll } from "./style/side-all";
+import { Popover } from "../../../../utils/ui/popover";
 
 export const EdSideStyle: FC<{ meta: IMeta }> = ({ meta }) => {
   const p = useGlobal(EDGlobal, "EDITOR");
@@ -21,6 +22,46 @@ export const EdSideStyle: FC<{ meta: IMeta }> = ({ meta }) => {
         <div className="flex-1 overflow-hidden mr-2 text-ellipsis whitespace-nowrap">
           {meta.jsx_prop?.name || item.name}
         </div>
+
+        <Popover
+          content={
+            <textarea
+              className={cx(
+                "font-mono",
+                css`
+                  font-size: 11px;
+                  width: 500px;
+                  height: 500px;
+                  margin: 5px 0px;
+                `
+              )}
+              spellCheck={false}
+              value={JSON.stringify(meta.item, null, 2)}
+            ></textarea>
+          }
+        >
+          <div
+            className="border px-1 py-[2px] cursor-pointer bg-white hover:bg-blue-100"
+            onClick={() => {}}
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="12"
+              height="12"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            >
+              <path d="M4 22h14a2 2 0 0 0 2-2V7l-5-5H6a2 2 0 0 0-2 2v4" />
+              <path d="M14 2v4a2 2 0 0 0 2 2h4" />
+              <path d="M4 12a1 1 0 0 0-1 1v1a1 1 0 0 1-1 1 1 1 0 0 1 1 1v1a1 1 0 0 0 1 1" />
+              <path d="M8 18a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1 1 1 0 0 1-1-1v-1a1 1 0 0 0-1-1" />
+            </svg>
+          </div>
+        </Popover>
         {item.component?.id === active.comp_id && (
           <div
             className="border px-1 cursor-pointer bg-white hover:bg-blue-100"