diff --git a/packages/devextreme/playground/jquery.html b/packages/devextreme/playground/jquery.html
index 2bdd3b81325..fde766f1721 100644
--- a/packages/devextreme/playground/jquery.html
+++ b/packages/devextreme/playground/jquery.html
@@ -1,27 +1,26 @@
 <!DOCTYPE html>
 <html lang="en">
-
 <head>
-  <title>DevExtreme jQuery Example</title>
+    <title>DevExtreme jQuery Example</title>
 
-  <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
 
-  <script type="text/javascript">
-    const currentThemeId = localStorage.getItem("currentThemeId") || "light";
+    <script type="text/javascript">
+        const currentThemeId = localStorage.getItem("currentThemeId") || "light";
 
-    const link = document.createElement("link");
-    link.href = `../artifacts/css/dx.${currentThemeId}.css`;
-    link.type = "text/css";
-    link.rel = "stylesheet";
+        const link = document.createElement("link");
+        link.href = `../artifacts/css/dx.${currentThemeId}.css`;
+        link.type = "text/css";
+        link.rel = "stylesheet";
 
-    document.getElementsByTagName("head")[0].appendChild(link);
-  </script>
+        document.getElementsByTagName("head")[0].appendChild(link);
+    </script>
 
-  <script type="text/javascript" src="../artifacts/js/jquery.js"></script>
-  <!-- HtmlEditor -->
-  <!-- <script type="text/javascript" src="../artifacts/js/dx-quill.min.js"></script> -->
+    <script type="text/javascript" src="../artifacts/js/jquery.js"></script>
+    <!-- HtmlEditor -->
+    <!-- <script type="text/javascript" src="../artifacts/js/dx-quill.min.js"></script> -->
 
-  <!--<script type="text/javascript" src="../artifacts/js/cldr.js"></script>
+    <!--<script type="text/javascript" src="../artifacts/js/cldr.js"></script>
     <script type="text/javascript" src="../artifacts/js/cldr/event.js"></script>
     <script type="text/javascript" src="../artifacts/js/cldr/supplemental.js"></script>
     <script type="text/javascript" src="../artifacts/js/cldr/unresolved.js"></script>
@@ -31,7 +30,7 @@
     <script type="text/javascript" src="../artifacts/js/globalize/currency.js"></script>
     <script type="text/javascript" src="../artifacts/js/globalize/date.js"></script>-->
 
-  <!--
+    <!--
     <script type="text/javascript" src="../artifacts/js/exceljs.min.js"></script>
     <script type="text/javascript" src="../artifacts/js/FileSaver.min.js"></script>
     <script type="text/javascript" src="../artifacts/js/jszip.min.js"></script>
@@ -39,61 +38,26 @@
     <script type="text/javascript" src="../artifacts/js/jspdf.plugin.autotable.min.js"></script>
     -->
 
-  <script type="text/javascript" src="../artifacts/js/dx.all.debug.js" charset="utf-8"></script>
-  <script type="text/javascript" src="./themeSelector.js"></script>
-  <script type="text/javascript" src="../../../node_modules/axe-core/axe.min.js"></script>
+    <script type="text/javascript" src="../artifacts/js/dx.all.debug.js" charset="utf-8"></script>
+    <script type="text/javascript" src="./themeSelector.js"></script>
+    <script type="text/javascript" src="../../../node_modules/axe-core/axe.min.js"></script>
 </head>
-
 <body class="dx-surface">
-  <div role="main">
-    <h1 style="position: fixed; left: 0; top: 0; clip: rect(1px, 1px, 1px, 1px);">Test header</h1>
-
-    <select id="theme-selector" style="display: block;">
-    </select>
-    <br />
-
-    <div class="dx-viewport demo-container">
-      <div class="list-container">
-        <div id="simpleList"></div>
-      </div>
+    <div role="main">
+        <h1 style="position: fixed; left: 0; top: 0; clip: rect(1px, 1px, 1px, 1px);">Test header</h1>
+
+        <select id="theme-selector" style="display: block;">
+        </select>
+        <br />
+        <div id="button"></div>
+        <script>
+            $(function() {
+                $("#button").dxButton({
+                    text: 'Click me!',
+                    onClick: function() { alert("clicked"); }
+                });
+            });
+        </script>
     </div>
-
-    <script>
-      $(() => {
-        const instance = $('#simpleList').dxList({
-          width: 300,
-          height: 800,
-          dataSource: [{
-            key: 'group_1',
-            items: ['item_1_1', 'item_1_2', 'item_1_3'],
-            expanded: false,
-          }, {
-            key: 'group_2',
-            items: [
-              { text: 'item_2_1', disabled: true },
-              { text: 'item_2_2', icon: 'home' },
-              { text: 'item_2_3', showChevron: true, badge: 'item_2_3' },
-              { text: 'item_2_4', badge: 'item_2_4' },
-              'item_2_5'],
-          }, {
-            key: 'group_3',
-            items: ['item_3_1', 'item_3_2', 'item_3_3'],
-            expanded: false,
-          }],
-          collapsibleGroups: true,
-          grouped: true,
-          // onItemClick: () => {
-          //   debugger
-          // },
-        }).dxList('instance');
-
-        instance.focus();
-
-        instance.option({ collapsibleGroups: false });
-
-        instance.focus();
-      });
-    </script>
-  </div>
 </body>
 </html>
