diff --git a/packages/site/examples/item/defaultCombos/demo/circle.js b/packages/site/examples/item/defaultCombos/demo/circle.js
deleted file mode 100644
index 48a4fd744e..0000000000
--- a/packages/site/examples/item/defaultCombos/demo/circle.js
+++ /dev/null
@@ -1,124 +0,0 @@
-import { Graph as BaseGraph, extend, Extensions } from '@antv/g6';
-
-const Graph = extend(BaseGraph, {
-  behaviors: {
-    'hover-activate': Extensions.HoverActivate,
-  },
-});
-
-const container = document.getElementById('container');
-const width = container.scrollWidth;
-const height = container.scrollHeight || 500;
-
-const graph = new Graph({
-  container: 'container',
-  width,
-  height,
-  stackCfg: {
-    ignoreStateChange: true,
-  },
-  plugins: [
-    {
-      // lod-controller will be automatically assigned to graph with `disableLod: false` to graph if it is not configured as following
-      type: 'lod-controller',
-      disableLod: true,
-    },
-  ],
-  node: {
-    labelShape: {
-      position: 'center',
-      text: {
-        fields: ['id'],
-        formatter: (model) => model.id,
-      },
-    },
-    animates: {
-      update: [
-        {
-          fields: ['opacity'],
-          shapeId: 'haloShape',
-        },
-      ],
-    },
-  },
-  combo: (model) => {
-    return {
-      id: model.id,
-      data: {
-        type: 'circle-combo',
-        ...model.data,
-        keyShape: {
-          padding: [10, 20, 30, 40],
-          r: 50,
-        },
-        labelShape: {
-          text: model.id,
-        },
-
-        animates: {
-          buildIn: [
-            {
-              fields: ['opacity'],
-              duration: 500,
-              delay: 500 + Math.random() * 500,
-            },
-          ],
-          buildOut: [
-            {
-              fields: ['opacity'],
-              duration: 200,
-            },
-          ],
-          update: [
-            {
-              fields: ['lineWidth', 'r'],
-              shapeId: 'keyShape',
-            },
-            {
-              fields: ['opacity'],
-              shapeId: 'haloShape',
-            },
-          ],
-        },
-      },
-    };
-  },
-  data: {
-    nodes: [
-      { id: 'node1', data: { x: 250, y: 150, parentId: 'combo1' } },
-      { id: 'node2', data: { x: 350, y: 150, parentId: 'combo1' } },
-      { id: 'node3', data: { x: 250, y: 300, parentId: 'combo2' } },
-    ],
-    edges: [],
-    combos: [
-      { id: 'combo1', data: { parentId: 'combo2' } }, // collapsed: true
-      { id: 'combo2', data: {} },
-    ],
-  },
-  modes: {
-    default: [
-      'collapse-expand-combo',
-      {
-        type: 'drag-node',
-        enableTransient: false,
-        updateComboStructure: false,
-      },
-      'drag-canvas',
-      {
-        type: 'click-select',
-        itemTypes: ['node', 'edge', 'combo'],
-      },
-      {
-        type: 'hover-activate',
-        itemTypes: ['node', 'edge', 'combo'],
-      },
-      {
-        type: 'drag-combo',
-        enableTransient: true,
-        updateComboStructure: true,
-      },
-    ],
-  },
-});
-
-window.graph = graph;
\ No newline at end of file
diff --git a/packages/site/examples/item/defaultCombos/demo/circle.ts b/packages/site/examples/item/defaultCombos/demo/circle.ts
new file mode 100644
index 0000000000..19b3339d35
--- /dev/null
+++ b/packages/site/examples/item/defaultCombos/demo/circle.ts
@@ -0,0 +1,32 @@
+import { Graph } from '@antv/g6';
+
+const data = {
+  nodes: [
+    { id: 'node1', style: { x: 250, y: 150, parentId: 'combo1' } },
+    { id: 'node2', style: { x: 350, y: 150, parentId: 'combo1' } },
+    { id: 'node3', style: { x: 250, y: 300, parentId: 'combo2' } },
+  ],
+  edges: [],
+  combos: [
+    { id: 'combo1', style: { parentId: 'combo2' } }, // collapsed: true
+    { id: 'combo2', style: {} },
+  ],
+};
+
+const graph = new Graph({
+  container: 'container',
+  node: {
+    style: {
+      labelText: (d) => d.id,
+    },
+  },
+  combo: {
+    style: {
+      type: 'circle', // 👈🏻 Combo shape type.
+    },
+  },
+  data,
+  behaviors: ['drag-element', 'collapse-expand'],
+});
+
+graph.render();
diff --git a/packages/site/examples/item/defaultCombos/demo/meta.json b/packages/site/examples/item/defaultCombos/demo/meta.json
index cc1d9f53c7..a605e7da59 100644
--- a/packages/site/examples/item/defaultCombos/demo/meta.json
+++ b/packages/site/examples/item/defaultCombos/demo/meta.json
@@ -5,12 +5,12 @@
   },
   "demos": [
     {
-      "filename": "circle.js",
+      "filename": "circle.ts",
       "title": "圆形",
       "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*Kbk1S5pzSY0AAAAAAAAAAAAADmJ7AQ/original"
     },
     {
-      "filename": "rect.js",
+      "filename": "rect.ts",
       "title": "矩形",
       "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*PKtgSZzmb3YAAAAAAAAAAAAADmJ7AQ/original"
     }
diff --git a/packages/site/examples/item/defaultCombos/demo/rect.js b/packages/site/examples/item/defaultCombos/demo/rect.js
deleted file mode 100644
index 10fe7cf671..0000000000
--- a/packages/site/examples/item/defaultCombos/demo/rect.js
+++ /dev/null
@@ -1,124 +0,0 @@
-import { Graph as BaseGraph, extend, Extensions } from '@antv/g6';
-
-const Graph = extend(BaseGraph, {
-  behaviors: {
-    'hover-activate': Extensions.HoverActivate,
-  },
-});
-
-const container = document.getElementById('container');
-const width = container.scrollWidth;
-const height = container.scrollHeight || 500;
-
-const graph = new Graph({
-  container: 'container',
-  width,
-  height,
-  stackCfg: {
-    ignoreStateChange: true,
-  },
-  plugins: [
-    {
-      // lod-controller will be automatically assigned to graph with `disableLod: false` to graph if it is not configured as following
-      type: 'lod-controller',
-      disableLod: true,
-    },
-  ],
-  node: {
-    labelShape: {
-      position: 'center',
-      text: {
-        fields: ['id'],
-        formatter: (model) => model.id,
-      },
-    },
-    animates: {
-      update: [
-        {
-          fields: ['opacity'],
-          shapeId: 'haloShape',
-        },
-      ],
-    },
-  },
-  combo: (model) => {
-    return {
-      id: model.id,
-      data: {
-        type: 'rect-combo',
-        ...model.data,
-        keyShape: {
-          padding: [10, 20, 30, 40],
-          r: 50,
-        },
-        labelShape: {
-          text: model.id,
-        },
-
-        animates: {
-          buildIn: [
-            {
-              fields: ['opacity'],
-              duration: 500,
-              delay: 500 + Math.random() * 500,
-            },
-          ],
-          buildOut: [
-            {
-              fields: ['opacity'],
-              duration: 200,
-            },
-          ],
-          update: [
-            {
-              fields: ['lineWidth', 'r'],
-              shapeId: 'keyShape',
-            },
-            {
-              fields: ['opacity'],
-              shapeId: 'haloShape',
-            },
-          ],
-        },
-      },
-    };
-  },
-  data: {
-    nodes: [
-      { id: 'node1', data: { x: 250, y: 150, parentId: 'combo1' } },
-      { id: 'node2', data: { x: 350, y: 150, parentId: 'combo1' } },
-      { id: 'node3', data: { x: 250, y: 300, parentId: 'combo2' } },
-    ],
-    edges: [],
-    combos: [
-      { id: 'combo1', data: { parentId: 'combo2' } },
-      { id: 'combo2', data: {} },
-    ],
-  },
-  modes: {
-    default: [
-      'collapse-expand-combo',
-      {
-        type: 'drag-node',
-        enableTransient: false,
-        updateComboStructure: false,
-      },
-      'drag-canvas',
-      {
-        type: 'click-select',
-        itemTypes: ['node', 'edge', 'combo'],
-      },
-      {
-        type: 'hover-activate',
-        itemTypes: ['node', 'edge', 'combo'],
-      },
-      {
-        type: 'drag-combo',
-        enableTransient: true,
-        updateComboStructure: true,
-      },
-    ],
-  },
-});
-
-window.graph = graph;
\ No newline at end of file
diff --git a/packages/site/examples/item/defaultCombos/demo/rect.ts b/packages/site/examples/item/defaultCombos/demo/rect.ts
new file mode 100644
index 0000000000..2b8a484cb3
--- /dev/null
+++ b/packages/site/examples/item/defaultCombos/demo/rect.ts
@@ -0,0 +1,33 @@
+import { Graph } from '@antv/g6';
+
+const data = {
+  nodes: [
+    { id: 'node1', style: { x: 250, y: 150, parentId: 'combo1' } },
+    { id: 'node2', style: { x: 350, y: 150, parentId: 'combo1' } },
+    { id: 'node3', style: { x: 250, y: 300, parentId: 'combo2' } },
+  ],
+  edges: [],
+  combos: [
+    { id: 'combo1', style: { parentId: 'combo2' } }, // collapsed: true
+    { id: 'combo2', style: {} },
+  ],
+};
+
+const graph = new Graph({
+  container: 'container',
+  node: {
+    style: {
+      labelText: (d) => d.id,
+    },
+  },
+  combo: {
+    style: {
+      type: 'rect', // 👈🏻 Combo shape type.
+      padding: 20,
+    },
+  },
+  data,
+  behaviors: ['drag-element', 'collapse-expand'],
+});
+
+graph.render();