logo

X6

  • Tutorials
  • API
  • Examples
  • Q&A
  • Change Log
  • XFlow
  • Productsantv logo arrow
  • 2.x
  • start
    • Introduction
    • Quick Start
  • component
    • XFlowGraph Canvas
    • Background
    • Grid
    • Clipboard Copy and Paste
    • History Undo Redo
    • Minimap
    • Snapline Alignment Lines
    • Transform
    • Control Controller
  • Hook
    • useGraphInstance
    • useGraphStore
    • useGraphEvent
    • useDnd
    • useClipboard
    • useExport
    • useHistory
    • useKeyboard
  • Store

Clipboard Copy and Paste

Previous
Grid
Next
History Undo Redo

Resource

Ant Design
Galacea Effects
Umi-React Application Framework
Dumi-Component doc generator
ahooks-React Hooks Library

Community

Ant Financial Experience Tech
seeconfSEE Conf-Experience Tech Conference

Help

GitHub
StackOverflow

more productsMore Productions

Ant DesignAnt Design-Enterprise UI design language
yuqueYuque-Knowledge creation and Sharing tool
EggEgg-Enterprise-class Node development framework
kitchenKitchen-Sketch Tool set
GalaceanGalacean-Interactive solution
xtechLiven Experience technology
© Copyright 2025 Ant Group Co., Ltd..备案号：京ICP备15032932号-38

Loading...

Copy and paste nodes and edges

Basic Usage

Note

The <Clipboard /> component can only be used properly within the <XFlow /> component.

By importing this component under the XFlow component, you can enable the ability to copy and paste nodes and edges on the canvas.

Combined with useClipboard, you can quickly implement copy and paste functionality.

<XFlow>
  ...
  <Clipboard />
</XFlow>

API

Clipboard

Parameter NameDescriptionTypeDefault Value
useLocalStorageWhen enabled, the copied nodes/edges are also saved to localStorage, allowing copy/paste to work even after the browser is refreshed or reopened.booleanfalse
Card title
Paste Offset
30