diff --git a/web/src/UserEditPage.js b/web/src/UserEditPage.js
index f320d66b..1f64d901 100644
--- a/web/src/UserEditPage.js
+++ b/web/src/UserEditPage.js
@@ -25,11 +25,11 @@ import PasswordModal from "./PasswordModal";
 import ResetModal from "./ResetModal";
 import AffiliationSelect from "./common/AffiliationSelect";
 import OAuthWidget from "./common/OAuthWidget";
+import SamlWidget from "./common/SamlWidget";
 import SelectRegionBox from "./SelectRegionBox";
 
 import {Controlled as CodeMirror} from 'react-codemirror2';
 import "codemirror/lib/codemirror.css";
-import SamlWidget from "./common/SamlWidget";
 require('codemirror/theme/material-darker.css');
 require("codemirror/mode/javascript/javascript");
 
diff --git a/web/src/WebhookEditPage.js b/web/src/WebhookEditPage.js
index e3990320..88e70cdb 100644
--- a/web/src/WebhookEditPage.js
+++ b/web/src/WebhookEditPage.js
@@ -21,8 +21,27 @@ import * as Setting from "./Setting";
 import i18next from "i18next";
 import WebhookHeaderTable from "./WebhookHeaderTable";
 
+import {Controlled as CodeMirror} from 'react-codemirror2';
+import "codemirror/lib/codemirror.css";
+require('codemirror/theme/material-darker.css');
+require("codemirror/mode/javascript/javascript");
+
 const { Option } = Select;
 
+const preview = {
+  "id": 9078,
+  "owner": "built-in",
+  "name": "68f55b28-7380-46b1-9bde-64fe1576e3b3",
+  "createdTime": "2022-01-01T01:03:42+08:00",
+  "organization": "built-in",
+  "clientIp": "159.89.126.192",
+  "user": "admin",
+  "method": "POST",
+  "requestUri": "/api/login",
+  "action": "login",
+  "isTriggered": false,
+};
+
 class WebhookEditPage extends React.Component {
   constructor(props) {
     super(props);
@@ -181,6 +200,20 @@ class WebhookEditPage extends React.Component {
             </Select>
           </Col>
         </Row>
+        <Row style={{marginTop: '20px'}} >
+          <Col style={{marginTop: '5px'}} span={(Setting.isMobile()) ? 22 : 2}>
+            {Setting.getLabel(i18next.t("general:Preview"), i18next.t("general:Preview - Tooltip"))} :
+          </Col>
+          <Col span={22} >
+            <div style={{width: "900px", height: "300px"}} >
+              <CodeMirror
+                value={JSON.stringify(preview, null, 2)}
+                options={{mode: 'javascript', theme: "material-darker"}}
+                onBeforeChange={(editor, data, value) => {}}
+              />
+            </div>
+          </Col>
+        </Row>
         <Row style={{marginTop: '20px'}} >
           <Col style={{marginTop: '5px'}} span={(Setting.isMobile()) ? 19 : 2}>
             {Setting.getLabel(i18next.t("general:Is enabled"), i18next.t("general:Is enabled - Tooltip"))} :