---
title: "Upgrade to 3.x"
description: "Upgrade to 3.x"
language: "en"
canonical: "https://x6.antv.antgroup.com/en/tutorial/update/"
version: "3.x"
---

[Resource index](/llms.txt)

Compared to 2.x, 3.x mainly focuses on plugin consolidation (unified export), optimized default interactions, introduces animation capabilities, and adds virtual rendering support. The upgrade cost is low.

## Overview

- Plugin and subpackage consolidation: `@antv/x6-plugin-xxxx`, `@antv/x6-common`, and `@antv/x6-geometry` are merged into the main `@antv/x6` package and exported from there.
- Default interaction tweak: canvas `panning` is enabled by default.
- New animation capability: supports imperative, declarative, and custom Shape-based animations.
- With `Scroller`, virtual rendering is available via `virtual: true` for large graphs.

## Upgrade Guide

### package.json

3.x merges commonly used plugins and subpackages into `@antv/x6`, so you no longer need to install separate `@antv/x6-plugin-xxxx` packages. Additionally, the utility package `@antv/x6-common` and geometry package `@antv/x6-geometry` are now part of the main package, and their APIs should be imported from `@antv/x6`.

```json
{
  "@antv/x6": "^3.0.0"
}
```

Remove the following dependencies if present:

- `@antv/x6-plugin-selection`
- `@antv/x6-plugin-transform`
- `@antv/x6-plugin-scroller`
- `@antv/x6-plugin-keyboard`
- `@antv/x6-plugin-history`
- `@antv/x6-plugin-clipboard`
- `@antv/x6-plugin-snapline`
- `@antv/x6-plugin-dnd`
- `@antv/x6-plugin-minimap`
- `@antv/x6-plugin-stencil`
- `@antv/x6-plugin-export`
- `@antv/x6-common`
- `@antv/x6-geometry`

### Import Path Changes

Starting from 3.x, the plugins above are exported from `@antv/x6`. Usage remains the same; simply replace the import path:

```ts
// 2.x
import { Scroller } from '@antv/x6-plugin-scroller'
import { Selection } from '@antv/x6-plugin-selection'
graph.use(new Scroller())
graph.use(new Selection())

// 3.x
import { Scroller, Selection } from '@antv/x6'
graph.use(new Scroller())
graph.use(new Selection())
```

In 3.x, utilities and geometry types previously imported from `@antv/x6-common` and `@antv/x6-geometry` are now exported directly from `@antv/x6`. You only need to update the import path:

```ts
// 2.x
import { Dom, FunctionExt } from '@antv/x6-common'
import { Point, Rectangle } from '@antv/x6-geometry'

// 3.x
import { Dom, FunctionExt, Point, Rectangle } from '@antv/x6'
```

### New Animation Capability

3.x introduces `animate` and removes the 2.x `transition` API, making it easier to add effects to nodes and edges.

See more: [Animation Docs](/en/tutorial/basic/animation).

### Configuration Changes

- Graph panning `panning` is enabled by default (`enabled: true`). To disable, set `panning: false`.
- When graph `panning` conflicts with Selection rubberband triggers, Selection takes precedence.
- With `Scroller`, graph `panning` is disabled by default to avoid interaction conflicts, and virtual rendering can be enabled via `virtual: true`.

### Shape Packages Upgrade (React/Vue/Angular)

- X6 3.x must use the 3.x versions of the shape packages: `@antv/x6-react-shape@^3.x`, `@antv/x6-vue-shape@^3.x`, and `@antv/x6-angular-shape@^3.x`.

```json
{
  "@antv/x6-react-shape": "^3.0.0",
  "@antv/x6-vue-shape": "^3.0.0",
  "@antv/x6-angular-shape": "^3.0.0"
}
```

#### React Provider API Change

Change 2.x `Portal.getProvider()` to 3.x `getProvider()`:

```ts
// 2.x
import { Portal } from '@antv/x6-react-shape'
const Provider = Portal.getProvider()

// 3.x
import { getProvider } from '@antv/x6-react-shape'
const Provider = getProvider()
```