diff --git a/examples/x6-example-features/src/pages/graph/attribute-card.tsx b/examples/x6-example-features/src/pages/graph/attribute-card.tsx
index 29dab9eeb98..f1fd6e8ddeb 100644
--- a/examples/x6-example-features/src/pages/graph/attribute-card.tsx
+++ b/examples/x6-example-features/src/pages/graph/attribute-card.tsx
@@ -16,37 +16,38 @@ export class AttributeCard extends React.Component<
 
   onWidthChanged = (width: number) => {
     this.setState({ width }, () => {
-      this.props.onSizeChange(this.state.width, this.state.height)
+      console.log(width)
+      this.props.onSizeChange(width, this.state.height)
     })
   }
 
   onHeightChanged = (height: number) => {
     this.setState({ height }, () => {
-      this.props.onSizeChange(this.state.width, this.state.height)
+      this.props.onSizeChange(this.state.width, height)
     })
   }
 
   onOriginXChanged = (originX: number) => {
     this.setState({ originX }, () => {
-      this.props.onOriginChange(this.state.originX, this.state.originY)
+      this.props.onOriginChange(originX, this.state.originY)
     })
   }
 
   onOriginYChanged = (originY: number) => {
     this.setState({ originY }, () => {
-      this.props.onOriginChange(this.state.originX, this.state.originY)
+      this.props.onOriginChange(this.state.originX, originY)
     })
   }
 
   onScaleXChanged = (scaleX: number) => {
     this.setState({ scaleX }, () => {
-      this.props.onScaleChange(this.state.scaleX, this.state.scaleY)
+      this.props.onScaleChange(scaleX, this.state.scaleY)
     })
   }
 
   onScaleYChanged = (scaleY: number) => {
     this.setState({ scaleY }, () => {
-      this.props.onScaleChange(this.state.scaleX, this.state.scaleY)
+      this.props.onScaleChange(this.state.scaleX, scaleY)
     })
   }
 
diff --git a/examples/x6-example-features/src/pages/graph/effect.ts b/examples/x6-example-features/src/pages/graph/effect.ts
index 2346d69b5e8..04a9a5ba10d 100644
--- a/examples/x6-example-features/src/pages/graph/effect.ts
+++ b/examples/x6-example-features/src/pages/graph/effect.ts
@@ -3,7 +3,7 @@ import { FitToContentCard } from './fit-card'
 import { ScaleContentToFitCard } from './scale-card'
 
 export function createEffect(graph: Graph) {
-  const vSvg = Dom.createVector(graph.svgElem)
+  const vSvg = Dom.createVector(graph.view.svg)
   const vVertical = Dom.createVector('path').attr('d', 'M -10000 -1 L 10000 -1')
   const vHorizontal = Dom.createVector('path').attr(
     'd',
diff --git a/examples/x6-example-features/src/pages/graph/index.tsx b/examples/x6-example-features/src/pages/graph/index.tsx
index a33da041b4a..73b6049b0ef 100644
--- a/examples/x6-example-features/src/pages/graph/index.tsx
+++ b/examples/x6-example-features/src/pages/graph/index.tsx
@@ -37,8 +37,10 @@ export default class Example extends React.Component<
       container: this.container,
       width: 600,
       height: 400,
-      gridSize: 10,
-      defaultConnectionPoint: { name: 'anchor' },
+      grid: { visible: true },
+      connecting: {
+        connectionPoint: 'anchor',
+      },
     })
 
     render(this.graph)
@@ -51,8 +53,8 @@ export default class Example extends React.Component<
         ...prevState.attrs,
         width: options.width,
         height: options.height,
-        originX: options.origin.x,
-        originY: options.origin.y,
+        originX: options.x,
+        originY: options.y,
       },
     }))
 
@@ -106,14 +108,14 @@ export default class Example extends React.Component<
     this.container = container
   }
 
-  onBackgroundChanged = (res: Graph.BackgroundOptions) => {
-    this.graph.drawBackground(res)
+  onBackgroundChanged = (
+    options: Graph.BackgroundManager.BackgroundOptions,
+  ) => {
+    this.graph.drawBackground(options)
   }
 
-  onGridChanged = (options: Grid.NativeItem) => {
-    console.log(options)
-    this.graph.setGrid(options)
-    this.graph.drawGrid()
+  onGridChanged = (options: Graph.GridManager.NativeItem) => {
+    this.graph.drawGrid(options)
   }
 
   onGridSizeChanged = (size: number) => {
diff --git a/examples/x6-example-features/src/pages/hull/index.tsx b/examples/x6-example-features/src/pages/hull/index.tsx
index 9062dbec114..207630503a1 100644
--- a/examples/x6-example-features/src/pages/hull/index.tsx
+++ b/examples/x6-example-features/src/pages/hull/index.tsx
@@ -52,7 +52,7 @@ export default class Example extends React.Component {
         'stroke-width': 3,
       })
 
-      Dom.createVector(graph.drawPane).prepend(boundary)
+      Dom.createVector(graph.view.stage).prepend(boundary)
 
       return boundary
     }
diff --git a/packages/x6/src/definition/grid/index.ts b/packages/x6/src/definition/grid/index.ts
index 008a58c50f1..c452a53885b 100644
--- a/packages/x6/src/definition/grid/index.ts
+++ b/packages/x6/src/definition/grid/index.ts
@@ -92,12 +92,12 @@ export namespace Grid {
   export type NativeNames = keyof Presets
 
   export interface NativeItem<T extends NativeNames = NativeNames> {
-    type: T
+    name: T
     args?: OptionsMap[T]
   }
 
   export interface ManaualItem {
-    type: Exclude<string, NativeNames>
+    name: Exclude<string, NativeNames>
     args?: KeyValue
   }
 }
diff --git a/packages/x6/src/graph/grid.ts b/packages/x6/src/graph/grid.ts
index 8a8518bee90..673932e7485 100644
--- a/packages/x6/src/graph/grid.ts
+++ b/packages/x6/src/graph/grid.ts
@@ -141,8 +141,8 @@ export class GridManager extends Base {
       return []
     }
 
-    const type = (options as GridDefinition.NativeItem).type
-    if (type == null) {
+    const name = (options as GridDefinition.NativeItem).name
+    if (name == null) {
       return [
         {
           ...GridDefinition.presets.dot,
@@ -151,7 +151,7 @@ export class GridManager extends Base {
       ]
     }
 
-    const items = GridDefinition.registry.get(type)
+    const items = GridDefinition.registry.get(name)
     if (items) {
       let args = options.args || []
       if (!Array.isArray(args)) {
@@ -163,7 +163,7 @@ export class GridManager extends Base {
         : [{ ...items, ...args[0] }]
     }
 
-    return GridDefinition.registry.onNotFound(type)
+    return GridDefinition.registry.onNotFound(name)
   }
 
   @Base.dispose()