diff --git a/static/src/js/jsonviewer_widget.esm.js b/static/src/js/jsonviewer_widget.esm.js
index 249065b6d796df23a10c48237dc1d4a1a5154db9..b38540ae9961eca2194e4f21287f76f328c8e10b 100644
--- a/static/src/js/jsonviewer_widget.esm.js
+++ b/static/src/js/jsonviewer_widget.esm.js
@@ -3,8 +3,11 @@
 import {registry} from "@web/core/registry";
 import {loadJS} from "@web/core/assets";
 import {Component, onWillStart, useEffect, useRef} from "@odoo/owl";
+import { standardFieldProps } from '@web/views/fields/standard_field_props';
 
 class JsonWidget extends Component {
+    static template = "api_connector.JsonWidgetField";
+    static props = { ...standardFieldProps };
     setup() {
         this.json_tree = null;
         this.divRef = useRef("json_response");
@@ -26,12 +29,14 @@ class JsonWidget extends Component {
         if (this.json_tree) {
             this.json_tree.destroy();
         }
-        const tree = jsonview.create(this.props.value);
+        const tree = jsonview.create(this.props.record.data[this.props.name]);
         this.json_tree = jsonview.render(tree, this.divRef.el);
         jsonview.expand(tree);
     }
 }
-JsonWidget.template = "api_connector.JsonWidgetField";
-registry.category("fields").add("json_viewer", JsonWidget);
 
-export default JsonWidget;
+export const jsonWidget = {
+    component: JsonWidget,
+};
+
+registry.category("fields").add("json_viewer", jsonWidget);