diff --git a/Composer/cypress/integration/Breadcrumb.spec.js b/Composer/cypress/integration/Breadcrumb.spec.js
index 6ac7dd16e3..b6f94e0465 100644
--- a/Composer/cypress/integration/Breadcrumb.spec.js
+++ b/Composer/cypress/integration/Breadcrumb.spec.js
@@ -1,39 +1,72 @@
 /// <reference types="Cypress" />
 
 context('breadcrumb', () => {
-  beforeEach(() => {
+  before(() => {
     cy.visit(Cypress.env('COMPOSER_URL'));
     cy.openBot('ToDoBot');
   });
 
+  beforeEach(() => {
+    // Return to Main.dialog
+    cy.get('[data-testid="ProjectTree"]').within(() => {
+      cy.getByText('ToDoBot.Main').click();
+    });
+  });
+
   it('can show dialog name in breadcrumb', () => {
+    // Should path = main dialog at first render
     cy.getByTestId('Breadcrumb')
       .invoke('text')
       .should('contain', 'ToDoBot.Main');
 
+    // Click on AddToDo dialog
     cy.get('[data-testid="ProjectTree"]').within(() => {
       cy.getByText('AddToDo').click();
     });
-
     cy.getByTestId('Breadcrumb')
       .invoke('text')
       .should('contain', 'AddToDo');
 
+    // Return to Main.dialog
     cy.get('[data-testid="ProjectTree"]').within(() => {
       cy.getByText('ToDoBot.Main').click();
-      cy.getByText('#AddIntent').click();
     });
 
-    cy.withinEditor('VisualEditor', () => {
-      cy.getByText('AddIntent').click();
+    cy.getByTestId('Breadcrumb')
+      .invoke('text')
+      .should('contain', 'ToDoBot');
+  });
+
+  it('can show event name in breadcrumb', () => {
+    cy.get('[data-testid="ProjectTree"]').within(() => {
+      cy.getByText('AddToDo').click();
+      cy.wait(100);
+      cy.getByText('Handle an Event: BeginDialog').click();
       cy.wait(100);
+    });
+
+    cy.getByTestId('Breadcrumb')
+      .invoke('text')
+      .should('match', /AddToDo.*Handle an Event.*/);
+  });
+
+  it('can show action name in breadcrumb', () => {
+    cy.wait(100);
+    cy.get('[data-testid="ProjectTree"]').within(() => {
+      cy.getByText('ToDoBot.Main').click();
+      cy.wait(500);
+    });
+
+    // Click on an action
+    cy.withinEditor('VisualEditor', () => {
       cy.getByTestId('RuleEditor').within(() => {
-        cy.getByText('AddToDo').click();
+        cy.getByText('Send an Activity').click();
+        cy.wait(500);
       });
     });
 
     cy.getByTestId('Breadcrumb')
       .invoke('text')
-      .should('match', /ToDoBot.+AddToDo/);
+      .should('match', /ToDoBot.+Send an Activity/);
   });
 });
diff --git a/Composer/cypress/integration/CreateNewBot.spec.js b/Composer/cypress/integration/CreateNewBot.spec.js
index 24d47ef25e..98336733e4 100644
--- a/Composer/cypress/integration/CreateNewBot.spec.js
+++ b/Composer/cypress/integration/CreateNewBot.spec.js
@@ -3,13 +3,20 @@
 context('Creating a new bot', () => {
   beforeEach(() => {
     cy.visit(Cypress.env('COMPOSER_URL'));
+    cy.wait(1000);
+    cy.get('[data-testid="LeftNav-CommandBarButtonHome"]').click();
+    cy.wait(5000);
+    cy.get('[data-testid="homePage-ToolBar-New"]').within(() => {
+      cy.getByText('New').click();
+    });
+    cy.wait(5000);
   });
 
   it('can create a new bot', () => {
-    cy.get('[data-testid="LeftNav-CommandBarButtonHome"]').click();
-    cy.get('[data-testid="homePage-ToolBar-New"]').click();
     cy.get('input[data-testid="Create from scratch"]').click();
+    cy.wait(100);
     cy.get('button[data-testid="NextStepButton"]').click();
+    cy.wait(100);
     cy.get('input[data-testid="NewDialogName"]').type('__TestNewProject');
     cy.get('input[data-testid="NewDialogName"]').type('{enter}');
     cy.get('[data-testid="ProjectTree"]').within(() => {
@@ -18,10 +25,12 @@ context('Creating a new bot', () => {
   });
 
   it('can create a bot from the ToDo template', () => {
-    cy.get('[data-testid="homePage-ToolBar-New"]').click();
     cy.get('input[data-testid="Create from template"]').click({ force: true });
+    cy.wait(100);
     cy.get('[data-testid="ToDoBot"]').click();
+    cy.wait(100);
     cy.get('button[data-testid="NextStepButton"]').click();
+    cy.wait(100);
     cy.get('input[data-testid="NewDialogName"]').type('__TestNewProject');
     cy.get('input[data-testid="NewDialogName"]').type('{enter}');
     cy.get('[data-testid="ProjectTree"]').within(() => {
diff --git a/Composer/cypress/integration/CursorMove.spec.js b/Composer/cypress/integration/CursorMove.spec.js
deleted file mode 100644
index 759176fc1a..0000000000
--- a/Composer/cypress/integration/CursorMove.spec.js
+++ /dev/null
@@ -1,73 +0,0 @@
-/// <reference types="Cypress" />
-require('cypress-plugin-tab');
-
-// this test is too unstable right now
-// re-enable when stablized
-context('Cursor move', () => {
-  beforeEach(() => {
-    cy.visit(Cypress.env('COMPOSER_URL'));
-    cy.openBot('ToDoBot');
-  });
-  it('can move cursor by pressing direction key or tab', () => {
-    cy.get('[data-testid="ProjectTree"]').within(() => {
-      cy.getByText('AddToDo').click();
-      cy.wait(100);
-    });
-
-    cy.withinEditor('VisualEditor', () => {
-      cy.get('[data-is-node=true]').as('selectedNodes');
-      cy.get('@selectedNodes')
-        .eq(1)
-        .click();
-
-      // down arrow
-      cy.get('[data-test-id="keyboard-zone"]').type('{downarrow}');
-      cy.wait(100);
-      cy.get('@selectedNodes')
-        .eq(2)
-        .should('have.class', 'step-renderer-container--selected');
-
-      cy.wait(100);
-
-      // right arrow
-      cy.get('[data-test-id="keyboard-zone"]').type('{rightarrow}');
-      cy.wait(100);
-      cy.get('@selectedNodes')
-        .eq(4)
-        .should('have.class', 'step-renderer-container--selected');
-
-      cy.wait(100);
-
-      // left arrow
-      cy.get('[data-test-id="keyboard-zone"]').type('{leftarrow}');
-      cy.wait(100);
-      cy.get('@selectedNodes')
-        .eq(5)
-        .should('have.class', 'step-renderer-container--selected');
-
-      cy.wait(100);
-
-      // up arrow
-      cy.get('[data-test-id="keyboard-zone"]').type('{uparrow}');
-      cy.wait(100);
-      cy.get('@selectedNodes')
-        .eq(3)
-        .should('have.class', 'step-renderer-container--selected');
-      cy.wait(100);
-
-      cy.get('[data-is-selectable=true]').as('selectedElements');
-
-      cy.get('@selectedElements')
-        .eq(1)
-        .click();
-
-      // tab
-      cy.get('[data-test-id="keyboard-zone"]').tab();
-      cy.wait(100);
-      cy.get('@selectedElements')
-        .eq(2)
-        .should('have.class', 'step-renderer-container--selected');
-      cy.wait(100);
-    });
-  });
-});
diff --git a/Composer/cypress/integration/LUPage.spec.js b/Composer/cypress/integration/LUPage.spec.js
index 1d07fca875..e0ae983f8c 100644
--- a/Composer/cypress/integration/LUPage.spec.js
+++ b/Composer/cypress/integration/LUPage.spec.js
@@ -1,7 +1,7 @@
 /// <reference types="Cypress" />
 
 context('check language understanding page', () => {
-  beforeEach(() => {
+  before(() => {
     cy.visit(Cypress.env('COMPOSER_URL'));
     cy.openBot('ToDoLuisBot');
   });
diff --git a/Composer/cypress/integration/LuisDeploy.spec.js b/Composer/cypress/integration/LuisDeploy.spec.js
index dd32c89bab..8b2b546c16 100644
--- a/Composer/cypress/integration/LuisDeploy.spec.js
+++ b/Composer/cypress/integration/LuisDeploy.spec.js
@@ -31,6 +31,7 @@ context('Luis Deploy', () => {
       response: 'fixture:luPublish/success',
     });
     cy.getByText('Start Bot').click();
+    cy.wait(5000);
     // clear its settings before
     cy.get('[data-testid="ProjectNameInput"]')
       .clear()
@@ -44,6 +45,7 @@ context('Luis Deploy', () => {
     // wait for the debounce interval of sync settings
     cy.wait(1000);
     cy.getByText('Publish').click();
+    cy.wait(1000);
     cy.getByText('Restart Bot').should('exist');
     cy.getByText('Test in Emulator').should('exist');
 
@@ -54,7 +56,9 @@ context('Luis Deploy', () => {
       response: 'fixture:luPublish/error',
     });
     cy.getByText('Restart Bot').click();
+    cy.wait(1000);
     cy.getByText('Try again').click();
+    cy.wait(1000);
     cy.get('[data-testid="AuthoringKeyInput"]').type('no-id');
     cy.getByText('Publish').click();
   });
diff --git a/Composer/cypress/integration/RemoveDialog.spec.js b/Composer/cypress/integration/RemoveDialog.spec.js
index 31bd85e20b..1fc4c24dbe 100644
--- a/Composer/cypress/integration/RemoveDialog.spec.js
+++ b/Composer/cypress/integration/RemoveDialog.spec.js
@@ -16,7 +16,9 @@ context('RemoveDialog', () => {
         .invoke('attr', 'style', 'visibility: visible')
         .click();
     });
-    cy.getByText('Delete').click();
+    cy.get('.ms-ContextualMenu-linkContent > .ms-ContextualMenu-itemText').within(() => {
+      cy.getByText('Delete').click();
+    });
     cy.getByText('Yes').click();
     cy.get('[data-testid="ProjectTree"]').within(() => {
       cy.get('[title="AddItem"]').should('not.exist');
diff --git a/Composer/cypress/integration/ToDoBot.spec.js b/Composer/cypress/integration/ToDoBot.spec.js
index c22df37fae..1ab7ca638b 100644
--- a/Composer/cypress/integration/ToDoBot.spec.js
+++ b/Composer/cypress/integration/ToDoBot.spec.js
@@ -1,7 +1,7 @@
 /// <reference types="Cypress" />
 
 context('ToDo Bot', () => {
-  beforeEach(() => {
+  before(() => {
     cy.visit(Cypress.env('COMPOSER_URL'));
     cy.openBot('ToDoBot');
   });
@@ -9,6 +9,7 @@ context('ToDo Bot', () => {
   it('can open the main dialog', () => {
     cy.get('[data-testid="ProjectTree"]').within(() => {
       cy.getByText('ToDoBot.Main').click();
+      cy.wait(100);
     });
     cy.withinEditor('FormEditor', () => {
       cy.getByDisplayValue('ToDoBot.Main').should('exist');
@@ -33,6 +34,7 @@ context('ToDo Bot', () => {
   it('can open the ClearToDos dialog', () => {
     cy.get('[data-testid="ProjectTree"]').within(() => {
       cy.getByText('ClearToDos').click();
+      cy.wait(100);
     });
 
     cy.withinEditor('FormEditor', () => {
@@ -46,6 +48,7 @@ context('ToDo Bot', () => {
   it('can open the DeleteToDo dialog', () => {
     cy.get('[data-testid="ProjectTree"]').within(() => {
       cy.getByText('DeleteToDo').click();
+      cy.wait(100);
     });
 
     cy.withinEditor('FormEditor', () => {
@@ -59,6 +62,7 @@ context('ToDo Bot', () => {
   it('can open the ShowToDos dialog', () => {
     cy.get('[data-testid="ProjectTree"]').within(() => {
       cy.getByText('ShowToDos').click();
+      cy.wait(100);
     });
 
     cy.withinEditor('FormEditor', () => {
diff --git a/Composer/cypress/integration/VisualDesigner.spec.js b/Composer/cypress/integration/VisualDesigner.spec.js
index d77fafec8e..e0b5b8c8bc 100644
--- a/Composer/cypress/integration/VisualDesigner.spec.js
+++ b/Composer/cypress/integration/VisualDesigner.spec.js
@@ -1,39 +1,14 @@
 /// <reference types="Cypress" />
 
 context('Visual Designer', () => {
-  beforeEach(() => {
+  before(() => {
     cy.visit(Cypress.env('COMPOSER_URL'));
-    cy.startFromTemplate('EmptyBot', 'VisualDesignerTest');
+    cy.openBot('ToDoBot');
   });
 
-  //will remove skip after add trigger is ok
-  it('can add a rule from the visual designer', () => {
-    cy.addEventHandler('Handle a Dialog Event');
-    cy.wait(100);
-
-    cy.withinEditor('VisualEditor', () => {
-      cy.contains('Handle a Dialog Event').should('exist');
-    });
-
-    cy.addEventHandler('Handle an Intent');
-    cy.wait(100);
-
-    cy.withinEditor('VisualEditor', () => {
-      cy.contains('Handle an Intent').should('exist');
-    });
-
-    cy.addEventHandler('Handle Unknown Intent');
-    cy.wait(100);
-
-    cy.withinEditor('VisualEditor', () => {
-      cy.contains('Handle Unknown Intent').should('exist');
-    });
-
-    cy.addEventHandler('Handle ConversationUpdate');
-    cy.wait(100);
-
+  it('can find Visual Designer default trigger in container', () => {
     cy.withinEditor('VisualEditor', () => {
-      cy.contains('Handle ConversationUpdate').should('exist');
+      cy.getByText('Trigger').should('exist');
     });
   });
 });
diff --git a/Composer/cypress/support/commands.js b/Composer/cypress/support/commands.js
index 9d9fb50dd9..8550d6d2e2 100644
--- a/Composer/cypress/support/commands.js
+++ b/Composer/cypress/support/commands.js
@@ -26,7 +26,9 @@ import 'cypress-testing-library/add-commands';
 
 Cypress.Commands.add('openBot', botName => {
   cy.get('[data-testid="LeftNav-CommandBarButtonHome"]').click();
-  cy.getByText('Open').click();
+  cy.get('[data-testid="homePage-ToolBar-Open"]').within(() => {
+    cy.getByText('Open').click();
+  });
   cy.get('[data-testid="SelectLocation"]').within(() => {
     cy.get(`[aria-label="${botName}"]`).click({ force: true });
     cy.wait(500);
diff --git a/Composer/packages/client/src/ShellApi.ts b/Composer/packages/client/src/ShellApi.ts
index 7e5d7fd7bf..4f08ee333f 100644
--- a/Composer/packages/client/src/ShellApi.ts
+++ b/Composer/packages/client/src/ShellApi.ts
@@ -67,7 +67,7 @@ const shellNavigator = (shellPage: string, opts: { id?: string } = {}) => {
 export const ShellApi: React.FC = () => {
   const { state, actions } = useContext(StoreContext);
   const { dialogs, schemas, lgFiles, luFiles, designPageLocation, focusPath, breadcrumb } = state;
-  const updateDialog = useDebouncedFunc(actions.updateDialog);
+  const updateDialog = actions.updateDialog;
   const updateLuFile = actions.updateLuFile; //if debounced, error can't pass to form
   const updateLgFile = useDebouncedFunc(actions.updateLgFile);
   const updateLgTemplate = useDebouncedFunc(actions.updateLgTemplate);
@@ -278,12 +278,6 @@ export const ShellApi: React.FC = () => {
     }
   }
 
-  function flushUpdates() {
-    if (updateDialog.flush) {
-      updateDialog.flush();
-    }
-  }
-
   function cleanData() {
     const cleanedData = sanitizeDialogData(dialogsMap[dialogId]);
     if (!isEqual(dialogsMap[dialogId], cleanedData)) {
@@ -293,7 +287,6 @@ export const ShellApi: React.FC = () => {
       };
       updateDialog(payload);
     }
-    flushUpdates();
   }
 
   function navTo({ path }) {
diff --git a/Composer/packages/client/src/extension-container/ExtensionContainer.tsx b/Composer/packages/client/src/extension-container/ExtensionContainer.tsx
index 3824447a74..84306e5d61 100644
--- a/Composer/packages/client/src/extension-container/ExtensionContainer.tsx
+++ b/Composer/packages/client/src/extension-container/ExtensionContainer.tsx
@@ -114,6 +114,16 @@ function ExtensionContainer() {
       }
     });
 
+    apiClient.registerApi('rpc', (method, ...params) => {
+      const handler = (window as any)[method];
+      let result;
+      if (handler) {
+        result = handler(...params);
+      }
+
+      return result;
+    });
+
     shellApi.getState().then(result => {
       setShellData(result);
     });
diff --git a/Composer/packages/client/src/messenger/FrameAPI.ts b/Composer/packages/client/src/messenger/FrameAPI.ts
new file mode 100644
index 0000000000..ce5a1303dc
--- /dev/null
+++ b/Composer/packages/client/src/messenger/FrameAPI.ts
@@ -0,0 +1,44 @@
+import ApiClient from './ApiClient';
+
+const apiClient = new ApiClient();
+
+export class FrameAPI {
+  frameId: string;
+  frameRef: any;
+
+  constructor(frameId: string) {
+    this.frameId = frameId;
+    this.frameRef = null;
+  }
+
+  /**
+   * Initialize the frame ref at first invocation.
+   */
+  invoke = (method: string, ...rest) => {
+    if (!this.frameRef) {
+      this.frameRef = window.frames[this.frameId];
+    }
+
+    if (this.frameRef && this.frameRef[method]) {
+      return apiClient.apiCall('rpc', [method, ...rest], this.frameRef);
+    }
+    return Promise.reject();
+  };
+}
+
+export const VisualEditorAPI = (() => {
+  const visualEditorFrameAPI = new FrameAPI('VisualEditor');
+  // HACK: under cypress env, avoid invoking API inside frame too frequently (especially the `hasEleemntFocused`). It will lead to CI test quite fagile.
+  // TODO: remove this hack logic after refactoring state sync logic between shell and editors.
+  if ((window as any).Cypress) {
+    visualEditorFrameAPI.invoke = () => Promise.resolve(false);
+  }
+
+  return {
+    hasElementFocused: () => visualEditorFrameAPI.invoke('hasElementFocused'),
+    hasElementSelected: () => visualEditorFrameAPI.invoke('hasElementSelected'),
+    copySelection: () => visualEditorFrameAPI.invoke('copySelection'),
+    cutSelection: () => visualEditorFrameAPI.invoke('cutSelection'),
+    deleteSelection: () => visualEditorFrameAPI.invoke('deleteSelection'),
+  };
+})();
diff --git a/Composer/packages/client/src/pages/design/index.js b/Composer/packages/client/src/pages/design/index.js
index b66fa5fbde..38cc1d02a3 100644
--- a/Composer/packages/client/src/pages/design/index.js
+++ b/Composer/packages/client/src/pages/design/index.js
@@ -4,6 +4,7 @@ import formatMessage from 'format-message';
 import { globalHistory } from '@reach/router';
 import { toLower, get } from 'lodash';
 
+import { VisualEditorAPI } from '../../messenger/FrameAPI';
 import { TestController } from '../../TestController';
 import { BASEPATH, DialogDeleting } from '../../constants';
 import { getbreadcrumbLabel, deleteTrigger, createSelectedPath } from '../../utils';
@@ -88,6 +89,8 @@ function DesignPage(props) {
   const { dialogId, selected } = designPageLocation;
   const [triggerModalVisible, setTriggerModalVisibility] = useState(false);
   const [triggerButtonVisible, setTriggerButtonVisibility] = useState(false);
+  const [nodeOperationAvailable, setNodeOperationAvailability] = useState(false);
+
   useEffect(() => {
     if (match) {
       const { dialogId } = match;
@@ -155,6 +158,14 @@ function DesignPage(props) {
     }
   };
 
+  VisualEditorAPI.hasElementSelected()
+    .then(selected => {
+      setNodeOperationAvailability(selected);
+    })
+    .catch(() => {
+      setNodeOperationAvailability(false);
+    });
+
   const toolbarItems = [
     {
       type: 'action',
@@ -180,6 +191,42 @@ function DesignPage(props) {
       },
       align: 'left',
     },
+    {
+      type: 'action',
+      text: formatMessage('Cut'),
+      buttonProps: {
+        disabled: !nodeOperationAvailable,
+        iconProps: {
+          iconName: 'Cut',
+        },
+        onClick: () => VisualEditorAPI.cutSelection(),
+      },
+      align: 'left',
+    },
+    {
+      type: 'action',
+      text: formatMessage('Copy'),
+      buttonProps: {
+        disabled: !nodeOperationAvailable,
+        iconProps: {
+          iconName: 'Copy',
+        },
+        onClick: () => VisualEditorAPI.copySelection(),
+      },
+      align: 'left',
+    },
+    {
+      type: 'action',
+      text: formatMessage('Delete'),
+      buttonProps: {
+        disabled: !nodeOperationAvailable,
+        iconProps: {
+          iconName: 'Delete',
+        },
+        onClick: () => VisualEditorAPI.deleteSelection(),
+      },
+      align: 'left',
+    },
     {
       type: 'element',
       element: <TestController />,
@@ -287,6 +334,7 @@ function DesignPage(props) {
                 <div css={visualPanel}>
                   {breadcrumbItems}
                   <iframe
+                    id="VisualEditor"
                     key="VisualEditor"
                     name="VisualEditor"
                     css={visualEditor}
diff --git a/Composer/packages/extensions/obiformeditor/src/ObiFormEditor.tsx b/Composer/packages/extensions/obiformeditor/src/ObiFormEditor.tsx
index 53b1ea6a02..8b3bc303d5 100644
--- a/Composer/packages/extensions/obiformeditor/src/ObiFormEditor.tsx
+++ b/Composer/packages/extensions/obiformeditor/src/ObiFormEditor.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import ErrorBoundary, { FallbackProps } from 'react-error-boundary';
 import { MessageBar, MessageBarType } from 'office-ui-fabric-react';
+import { debounce } from 'lodash';
 
 import { FormEditor, FormEditorProps } from './FormEditor';
 
@@ -30,9 +31,11 @@ const ObiFormEditor: React.FC<FormEditorProps> = props => {
     props.onChange(data, props.focusedSteps[0]);
   };
 
+  const debouncedOnChange = debounce(onChange, 750);
+
   return (
     <ErrorBoundary key={props.focusPath} FallbackComponent={ErrorInfo}>
-      <FormEditor {...props} onChange={onChange} />
+      <FormEditor {...props} onChange={debouncedOnChange} />
     </ErrorBoundary>
   );
 };
diff --git a/Composer/packages/extensions/visual-designer/__tests__/index.test.tsx b/Composer/packages/extensions/visual-designer/__tests__/index.test.tsx
index 333a8981b7..fbed6dcf37 100644
--- a/Composer/packages/extensions/visual-designer/__tests__/index.test.tsx
+++ b/Composer/packages/extensions/visual-designer/__tests__/index.test.tsx
@@ -25,7 +25,9 @@ describe('<VisualDesigner />', () => {
         dialogId="SomeDialog"
         focusedEvent="events[0]"
         focusedSteps={['events[0].steps[0]']}
-        shellApi={{}}
+        shellApi={{
+          saveData: () => {},
+        }}
       />
     );
 
diff --git a/Composer/packages/extensions/visual-designer/src/components/lib/KeyboardZone.tsx b/Composer/packages/extensions/visual-designer/src/components/lib/KeyboardZone.tsx
index 1e332f1f80..219e1b3ef6 100644
--- a/Composer/packages/extensions/visual-designer/src/components/lib/KeyboardZone.tsx
+++ b/Composer/packages/extensions/visual-designer/src/components/lib/KeyboardZone.tsx
@@ -2,7 +2,7 @@
 import { jsx } from '@emotion/core';
 import { FC, useRef } from 'react';
 
-import { findCommand } from '../../constants/KeyboardCommandTypes';
+import { mapShortcutToKeyboardCommand } from '../../constants/KeyboardCommandTypes';
 
 interface NodeProps {
   when: string;
@@ -30,8 +30,7 @@ export const KeyboardZone: FC<NodeProps> = ({ when, onCommand, children }): JSX.
           keyCode += `.${key}`;
         }
       }
-      console.log(keyCode);
-      onCommand(findCommand(keyCode));
+      onCommand(mapShortcutToKeyboardCommand(keyCode));
     }
     delete keyPressed.current[e.key];
   };
diff --git a/Composer/packages/extensions/visual-designer/src/components/menus/EdgeMenu.tsx b/Composer/packages/extensions/visual-designer/src/components/menus/EdgeMenu.tsx
index 46122908dd..d0bfaa894e 100644
--- a/Composer/packages/extensions/visual-designer/src/components/menus/EdgeMenu.tsx
+++ b/Composer/packages/extensions/visual-designer/src/components/menus/EdgeMenu.tsx
@@ -2,11 +2,13 @@ import React, { useContext } from 'react';
 import classnames from 'classnames';
 import formatMessage from 'format-message';
 import { createStepMenu, DialogGroup } from 'shared-menus';
+import { IContextualMenu } from 'office-ui-fabric-react';
 
 import { EdgeAddButtonSize } from '../../constants/ElementSizes';
+import { ClipboardContext } from '../../store/ClipboardContext';
+import { SelectionContext } from '../../store/SelectionContext';
 import { AttrNames } from '../../constants/ElementAttributes';
 import { MenuTypes } from '../../constants/MenuTypes';
-import { SelectionContext } from '../../store/SelectionContext';
 
 import { IconMenu } from './IconMenu';
 
@@ -15,16 +17,45 @@ interface EdgeMenuProps {
   onClick: (item: string | null) => void;
 }
 
-const declareElementAttributes = (id: string) => {
-  return {
-    [AttrNames.SelectableElement]: true,
-    [AttrNames.EdgeMenuElement]: true,
-    [AttrNames.SelectedId]: `${id}${MenuTypes.EdgeMenu}`,
-  };
+const buildEdgeMenuItemsFromClipboardContext = (context, onClick): IContextualMenu[] => {
+  const { clipboardActions } = context;
+  const menuItems = createStepMenu(
+    [
+      DialogGroup.RESPONSE,
+      DialogGroup.INPUT,
+      DialogGroup.BRANCHING,
+      DialogGroup.STEP,
+      DialogGroup.MEMORY,
+      DialogGroup.CODE,
+      DialogGroup.LOG,
+    ],
+    true,
+    (e, item) => onClick(item ? item.$type : null)
+  );
+
+  if (clipboardActions.length) {
+    menuItems.unshift({
+      key: 'Paste',
+      name: 'Paste',
+      style: { color: 'lightblue' },
+      onClick: () => onClick('PASTE'),
+    });
+  }
+  return menuItems;
 };
+
 export const EdgeMenu: React.FC<EdgeMenuProps> = ({ id, onClick, ...rest }) => {
+  const clipboarcContext = useContext(ClipboardContext);
   const { selectedIds } = useContext(SelectionContext);
   const nodeSelected = selectedIds.includes(`${id}${MenuTypes.EdgeMenu}`);
+  const declareElementAttributes = (id: string) => {
+    return {
+      [AttrNames.SelectableElement]: true,
+      [AttrNames.EdgeMenuElement]: true,
+      [AttrNames.SelectedId]: `${id}${MenuTypes.EdgeMenu}`,
+    };
+  };
+
   return (
     <div
       style={{
@@ -45,19 +76,7 @@ export const EdgeMenu: React.FC<EdgeMenuProps> = ({ id, onClick, ...rest }) => {
         iconStyles={{ background: 'white', color: '#005CE6' }}
         iconSize={10}
         nodeSelected={nodeSelected}
-        menuItems={createStepMenu(
-          [
-            DialogGroup.RESPONSE,
-            DialogGroup.INPUT,
-            DialogGroup.BRANCHING,
-            DialogGroup.STEP,
-            DialogGroup.MEMORY,
-            DialogGroup.CODE,
-            DialogGroup.LOG,
-          ],
-          true,
-          (e, item) => onClick(item ? item.$type : null)
-        )}
+        menuItems={buildEdgeMenuItemsFromClipboardContext(clipboarcContext, onClick)}
         label={formatMessage('Add')}
         {...rest}
       />
diff --git a/Composer/packages/extensions/visual-designer/src/components/nodes/Trigger.tsx b/Composer/packages/extensions/visual-designer/src/components/nodes/Trigger.tsx
index 41b85359e7..0ff02a719a 100644
--- a/Composer/packages/extensions/visual-designer/src/components/nodes/Trigger.tsx
+++ b/Composer/packages/extensions/visual-designer/src/components/nodes/Trigger.tsx
@@ -3,7 +3,6 @@ import { jsx } from '@emotion/core';
 import { ConceptLabels } from 'shared-menus';
 
 import { TriggerSize } from '../../constants/ElementSizes';
-import { AttrNames } from '../../constants/ElementAttributes';
 import { ElementIcon } from '../../utils/obiPropertyResolver';
 
 import { FormCard } from './templates/FormCard';
@@ -22,23 +21,11 @@ function getLabel(data: any): string {
   return data.$type;
 }
 
-const declareElementAttributes = (id: string) => {
-  return {
-    [AttrNames.SelectableElement]: true,
-    [AttrNames.NodeElement]: true,
-    [AttrNames.SelectedId]: id,
-    [AttrNames.FocusedId]: id,
-  };
-};
-
-export const Trigger = ({ id, data, focused, onClick }): JSX.Element => (
+export const Trigger = ({ id, data, onClick = () => {} }): JSX.Element => (
   <div
     css={{
       ...TriggerSize,
-      outline: focused ? '1px solid #0078d4' : 'none',
-      '&:hover': !focused && { outline: '1px solid #323130' },
     }}
-    {...declareElementAttributes(id)}
   >
     <FormCard
       nodeColors={{
diff --git a/Composer/packages/extensions/visual-designer/src/components/renderers/ElementRenderer.tsx b/Composer/packages/extensions/visual-designer/src/components/renderers/ElementRenderer.tsx
index 602904c9f7..5bd1bfdd22 100644
--- a/Composer/packages/extensions/visual-designer/src/components/renderers/ElementRenderer.tsx
+++ b/Composer/packages/extensions/visual-designer/src/components/renderers/ElementRenderer.tsx
@@ -105,9 +105,7 @@ export const ElementRenderer: FC<NodeProps> = ({ id, data, onEvent, onResize }):
       <ChosenRenderer
         id={id}
         data={data}
-        onEvent={(action, id) => {
-          onEvent(action, id, selectedId);
-        }}
+        onEvent={onEvent}
         onResize={size => {
           onResize(size, 'element');
         }}
diff --git a/Composer/packages/extensions/visual-designer/src/constants/KeyboardCommandTypes.ts b/Composer/packages/extensions/visual-designer/src/constants/KeyboardCommandTypes.ts
index a134b11d9f..67c6e68983 100644
--- a/Composer/packages/extensions/visual-designer/src/constants/KeyboardCommandTypes.ts
+++ b/Composer/packages/extensions/visual-designer/src/constants/KeyboardCommandTypes.ts
@@ -1,3 +1,5 @@
+import { EditorConfig } from '../editors/editorConfig';
+
 export const KeyboardCommandTypes = {
   Cursor: {
     MoveUp: 'cursor move up',
@@ -13,61 +15,91 @@ export const KeyboardCommandTypes = {
   },
   Node: {
     Delete: 'delete node',
+    Copy: 'copy',
+    Cut: 'cut',
+    Paste: 'paste',
   },
 };
 
+const findCommandAreaByValue = (() => {
+  // Construct a inverted index to find shortcut area quickly.
+  const cmdAreaByValue: { [_: string]: string } = {};
+  const areaKeys = Object.keys(KeyboardCommandTypes);
+
+  for (const areaKey of areaKeys) {
+    const cmdsUnderArea = KeyboardCommandTypes[areaKey];
+    const cmdValues: string[] = Object.values(cmdsUnderArea);
+    for (const cmd of cmdValues) {
+      cmdAreaByValue[cmd as string] = areaKey;
+    }
+  }
+
+  return (command: string) => cmdAreaByValue[command];
+})();
+
 export const KeyboardPrimaryTypes = {
   Cursor: 'Cursor',
   Node: 'Node',
 };
 
-// Map system name and keyboard key
-const SystemKeyboardCommandTypes = {
-  // Windows keyboard shotcuts
+const BasicShortcuts = {
+  'Windows.Delete': KeyboardCommandTypes.Node.Delete,
+  'Mac.Delete': KeyboardCommandTypes.Node.Delete,
+};
+
+const TabNavShortcuts = {
+  'Windows.Tab': KeyboardCommandTypes.Cursor.MoveNext,
+  'Windows.Shift.Tab': KeyboardCommandTypes.Cursor.MovePrevious,
+  'Mac.Tab': KeyboardCommandTypes.Cursor.MoveNext,
+  'Mac.Shift.Tab': KeyboardCommandTypes.Cursor.MovePrevious,
+};
+
+const ArrowMoveShortcuts = {
   'Windows.ArrowUp': KeyboardCommandTypes.Cursor.MoveUp,
   'Windows.ArrowDown': KeyboardCommandTypes.Cursor.MoveDown,
   'Windows.ArrowLeft': KeyboardCommandTypes.Cursor.MoveLeft,
   'Windows.ArrowRight': KeyboardCommandTypes.Cursor.MoveRight,
+
   'Windows.Shift.ArrowUp': KeyboardCommandTypes.Cursor.ShortMoveUp,
   'Windows.Shift.ArrowDown': KeyboardCommandTypes.Cursor.ShortMoveDown,
   'Windows.Shift.ArrowLeft': KeyboardCommandTypes.Cursor.ShortMoveLeft,
   'Windows.Shift.ArrowRight': KeyboardCommandTypes.Cursor.ShortMoveRight,
-  'Windows.Tab': KeyboardCommandTypes.Cursor.MoveNext,
-  'Windows.Shift.Tab': KeyboardCommandTypes.Cursor.MovePrevious,
-  'Windows.Delete': KeyboardCommandTypes.Node.Delete,
 
-  // Mac keyboard shotcuts
   'Mac.ArrowUp': KeyboardCommandTypes.Cursor.MoveUp,
   'Mac.ArrowDown': KeyboardCommandTypes.Cursor.MoveDown,
   'Mac.ArrowLeft': KeyboardCommandTypes.Cursor.MoveLeft,
   'Mac.ArrowRight': KeyboardCommandTypes.Cursor.MoveRight,
+
   'Mac.Shift.ArrowUp': KeyboardCommandTypes.Cursor.ShortMoveUp,
   'Mac.Shift.ArrowDown': KeyboardCommandTypes.Cursor.ShortMoveDown,
   'Mac.Shift.ArrowLeft': KeyboardCommandTypes.Cursor.ShortMoveLeft,
   'Mac.Shift.ArrowRight': KeyboardCommandTypes.Cursor.ShortMoveRight,
-  'Mac.Tab': KeyboardCommandTypes.Cursor.MoveNext,
-  'Mac.Shift.Tab': KeyboardCommandTypes.Cursor.MovePrevious,
-  'Mac.Delete': KeyboardCommandTypes.Node.Delete,
 };
 
-export function findCommand(keyCode) {
-  const command = SystemKeyboardCommandTypes[keyCode];
-  let commands: { [key: string]: string };
-  let primaryType = '';
-  let commandKey: string | undefined;
-  Object.keys(KeyboardCommandTypes).forEach(key => {
-    commands = KeyboardCommandTypes[key];
-    Object.keys(commands).forEach(action => {
-      if (commands[action] === command) {
-        commandKey = action;
-        primaryType = key;
-      }
-    });
-  });
-
-  if (commandKey) {
-    return { primaryType, command };
-  } else {
-    return {};
-  }
+const KeyboardNodeEditingShortcuts = {
+  'Windows.Control.C': KeyboardCommandTypes.Node.Copy,
+  'Windows.Control.c': KeyboardCommandTypes.Node.Copy,
+  'Windows.Control.X': KeyboardCommandTypes.Node.Cut,
+  'Windows.Control.x': KeyboardCommandTypes.Node.Cut,
+
+  'Mac.Meta.C': KeyboardCommandTypes.Node.Copy,
+  'Mac.Meta.c': KeyboardCommandTypes.Node.Copy,
+  'Mac.Meta.X': KeyboardCommandTypes.Node.Cut,
+  'Mac.Meta.x': KeyboardCommandTypes.Node.Cut,
+};
+
+const { arrowNavigation, tabNavigation, keyboardNodeEditing } = EditorConfig.features;
+
+const SupportedShortcuts = {
+  ...BasicShortcuts,
+  ...(arrowNavigation ? ArrowMoveShortcuts : null),
+  ...(tabNavigation ? TabNavShortcuts : null),
+  ...(keyboardNodeEditing ? KeyboardNodeEditingShortcuts : null),
+};
+
+export function mapShortcutToKeyboardCommand(keyCode) {
+  const command = SupportedShortcuts[keyCode];
+  const area = findCommandAreaByValue(command);
+
+  return { area, command };
 }
diff --git a/Composer/packages/extensions/visual-designer/src/constants/NodeEventTypes.ts b/Composer/packages/extensions/visual-designer/src/constants/NodeEventTypes.ts
index b833928656..0ec9df5bc7 100644
--- a/Composer/packages/extensions/visual-designer/src/constants/NodeEventTypes.ts
+++ b/Composer/packages/extensions/visual-designer/src/constants/NodeEventTypes.ts
@@ -8,4 +8,9 @@ export enum NodeEventTypes {
   InsertAfter = 'event.data.insert-after',
   Insert = 'event.data.insert',
   InsertEvent = 'event.data.insert-event',
+  CopySelection = 'event.data.copy-selection',
+  CutSelection = 'event.data.cut-selection',
+  DeleteSelection = 'event.data.delete-selection',
+  AppendSelection = 'event.data.paste-selection--keyboard',
+  InsertSelection = 'event.data.paste-selection--menu',
 }
diff --git a/Composer/packages/extensions/visual-designer/src/editors/ObiEditor.tsx b/Composer/packages/extensions/visual-designer/src/editors/ObiEditor.tsx
index d55cbc18fd..6d85a78745 100644
--- a/Composer/packages/extensions/visual-designer/src/editors/ObiEditor.tsx
+++ b/Composer/packages/extensions/visual-designer/src/editors/ObiEditor.tsx
@@ -6,11 +6,22 @@ import { MarqueeSelection, Selection } from 'office-ui-fabric-react/lib/MarqueeS
 import { NodeEventTypes } from '../constants/NodeEventTypes';
 import { KeyboardCommandTypes, KeyboardPrimaryTypes } from '../constants/KeyboardCommandTypes';
 import { AttrNames } from '../constants/ElementAttributes';
+import { ObiTypes } from '../constants/ObiTypes';
 import { NodeRendererContext } from '../store/NodeRendererContext';
 import { SelectionContext, SelectionContextData } from '../store/SelectionContext';
-import { deleteNode, insert } from '../utils/jsonTracker';
+import { ClipboardContext } from '../store/ClipboardContext';
+import {
+  deleteNode,
+  insert,
+  cutNodes,
+  copyNodes,
+  appendNodesAfter,
+  pasteNodes,
+  deleteNodes,
+} from '../utils/jsonTracker';
 import { moveCursor } from '../utils/cursorTracker';
 import { NodeIndexGenerator } from '../utils/NodeIndexGetter';
+import { normalizeSelection } from '../utils/normalizeSelection';
 import { KeyboardZone } from '../components/lib/KeyboardZone';
 
 import { AdaptiveDialogEditor } from './AdaptiveDialogEditor';
@@ -25,18 +36,23 @@ export const ObiEditor: FC<ObiEditorProps> = ({
 }): JSX.Element | null => {
   let divRef;
 
-  const { focusedId, removeLgTemplate } = useContext(NodeRendererContext);
+  const { focusedId, focusedEvent, removeLgTemplate } = useContext(NodeRendererContext);
+  const [clipboardContext, setClipboardContext] = useState({
+    clipboardActions: [],
+    setClipboardActions: actions => setClipboardContext({ ...clipboardContext, clipboardActions: actions }),
+  });
 
   const dispatchEvent = (eventName: NodeEventTypes, eventData: any): any => {
     let handler;
     switch (eventName) {
       case NodeEventTypes.Focus:
-        handler = (id, selectedId?) => {
+        handler = id => {
+          const newFocusedIds = id ? [id] : [];
           setSelectionContext({
-            getNodeIndex: selectionContext.getNodeIndex,
-            selectedIds: [selectedId || id],
+            ...selectionContext,
+            selectedIds: [...newFocusedIds],
           });
-          onFocusSteps(id ? [id] : []);
+          onFocusSteps([...newFocusedIds]);
         };
         break;
       case NodeEventTypes.FocusEvent:
@@ -48,7 +64,7 @@ export const ObiEditor: FC<ObiEditorProps> = ({
       case NodeEventTypes.Delete:
         handler = e => {
           const cleanLgTemplate = (removedData: any): void => {
-            if (removedData && removedData.$type === 'Microsoft.SendActivity') {
+            if (removedData && removedData.$type === ObiTypes.SendActivity) {
               if (removedData.activity && removedData.activity.indexOf('[bfdactivity-') !== -1) {
                 removeLgTemplate('common', removedData.activity.slice(1, removedData.activity.length - 1));
               }
@@ -59,17 +75,53 @@ export const ObiEditor: FC<ObiEditorProps> = ({
         };
         break;
       case NodeEventTypes.Insert:
+        if (eventData.$type === 'PASTE') {
+          handler = e => {
+            const dialog = pasteNodes(data, e.id, e.position, clipboardContext.clipboardActions);
+            onChange(dialog);
+          };
+        } else {
+          handler = e => {
+            const dialog = insert(data, e.id, e.position, e.$type);
+            onChange(dialog);
+            onFocusSteps([`${e.id}[${e.position || 0}]`]);
+          };
+        }
+        break;
+      case NodeEventTypes.InsertEvent:
         handler = e => {
           const dialog = insert(data, e.id, e.position, e.$type);
           onChange(dialog);
-          onFocusSteps([`${e.id}[${e.position || 0}]`]);
+          onFocusEvent(`${e.id}[${e.position || 0}]`);
         };
         break;
-      case NodeEventTypes.InsertEvent:
+      case NodeEventTypes.CopySelection:
         handler = e => {
-          const dialog = insert(data, e.id, e.position, e.$type);
+          const copiedActions = copyNodes(data, e.actionIds);
+          clipboardContext.setClipboardActions(copiedActions);
+        };
+        break;
+      case NodeEventTypes.CutSelection:
+        handler = e => {
+          const { dialog, cutData } = cutNodes(data, e.actionIds);
+          clipboardContext.setClipboardActions(cutData);
+          onChange(dialog);
+          onFocusSteps([]);
+        };
+        break;
+      case NodeEventTypes.DeleteSelection:
+        handler = e => {
+          const dialog = deleteNodes(data, e.actionIds);
+          onChange(dialog);
+          onFocusSteps([]);
+        };
+        break;
+      case NodeEventTypes.AppendSelection:
+        handler = e => {
+          // forbid paste to root level.
+          if (!e.target || e.target === focusedEvent) return;
+          const dialog = appendNodesAfter(data, e.target, e.actions);
           onChange(dialog);
-          onFocusEvent(`${e.id}[${e.position || 0}]`);
         };
         break;
       default:
@@ -109,6 +161,10 @@ export const ObiEditor: FC<ObiEditorProps> = ({
     }
   }, [focusedId, selectionContext]);
 
+  useEffect(() => {
+    onChange(data);
+  }, [selectionContext]);
+
   useEffect(
     (): void => {
       selection.setItems(nodeIndexGenerator.current.getItemList());
@@ -124,15 +180,16 @@ export const ObiEditor: FC<ObiEditorProps> = ({
     onSelectionChanged: (): void => {
       const selectedIndices = selection.getSelectedIndices();
       const selectedIds = selectedIndices.map(index => nodeItems[index].key as string);
-      const newContext = {
-        getNodeIndex: selectionContext.getNodeIndex,
-        selectedIds,
-      };
 
-      // TODO: normalize selectedIds
-      onFocusSteps(selectedIds);
-      console.log(selectedIds);
-      setSelectionContext(newContext);
+      if (selectedIds.length === 1) {
+        // TODO: Change to focus all selected nodes after Form Editor support showing multiple nodes.
+        onFocusSteps(selectedIds);
+      }
+
+      setSelectionContext({
+        ...selectionContext,
+        selectedIds,
+      });
     },
   });
 
@@ -142,15 +199,50 @@ export const ObiEditor: FC<ObiEditorProps> = ({
   };
   const [selectedElements, setSelectedElements] = useState<NodeListOf<HTMLElement>>(querySelectedElements());
 
-  const handleKeyboardCommand = ({ primaryType, command }) => {
-    const currentSelectedId = selectionContext.selectedIds[0];
-    switch (primaryType) {
+  const getClipboardTargetsFromContext = (): string[] => {
+    const selectedActionIds = normalizeSelection(selectionContext.selectedIds);
+    if (selectedActionIds.length === 0 && focusedId) {
+      selectedActionIds.push(focusedId);
+    }
+    return selectedActionIds;
+  };
+
+  // HACK: use global handler before we solve iframe state sync problem
+  (window as any).hasElementFocused = () => !!focusedId && focusedId !== focusedEvent;
+  (window as any).hasElementSelected = () =>
+    !!(selectionContext && selectionContext.selectedIds && selectionContext.selectedIds.length) ||
+    (window as any).hasElementFocused();
+
+  (window as any).copySelection = () =>
+    dispatchEvent(NodeEventTypes.CopySelection, { actionIds: getClipboardTargetsFromContext() });
+  (window as any).cutSelection = () =>
+    dispatchEvent(NodeEventTypes.CutSelection, { actionIds: getClipboardTargetsFromContext() });
+  (window as any).deleteSelection = () =>
+    dispatchEvent(NodeEventTypes.DeleteSelection, { actionIds: getClipboardTargetsFromContext() });
+
+  const handleKeyboardCommand = ({ area, command }) => {
+    switch (area) {
       case KeyboardPrimaryTypes.Node:
-        if (command === KeyboardCommandTypes.Node.Delete) {
-          dispatchEvent(NodeEventTypes.Delete, { id: focusedId });
+        switch (command) {
+          case KeyboardCommandTypes.Node.Delete:
+            dispatchEvent(NodeEventTypes.DeleteSelection, { actionIds: getClipboardTargetsFromContext() });
+            break;
+          case KeyboardCommandTypes.Node.Copy:
+            dispatchEvent(NodeEventTypes.CopySelection, { actionIds: getClipboardTargetsFromContext() });
+            break;
+          case KeyboardCommandTypes.Node.Cut:
+            dispatchEvent(NodeEventTypes.CutSelection, { actionIds: getClipboardTargetsFromContext() });
+            break;
+          case KeyboardCommandTypes.Node.Paste:
+            dispatchEvent(NodeEventTypes.AppendSelection, {
+              target: focusedId,
+              actions: clipboardContext.clipboardActions,
+            });
+            break;
         }
         break;
       case KeyboardPrimaryTypes.Cursor: {
+        const currentSelectedId = selectionContext.selectedIds[0] || focusedId;
         const { selected, focused } = moveCursor(selectedElements, currentSelectedId, command);
         setSelectionContext({
           getNodeIndex: selectionContext.getNodeIndex,
@@ -166,42 +258,44 @@ export const ObiEditor: FC<ObiEditorProps> = ({
   if (!data) return renderFallbackContent();
   return (
     <SelectionContext.Provider value={selectionContext}>
-      <KeyboardZone onCommand={handleKeyboardCommand} when={keyboardStatus}>
-        <MarqueeSelection selection={selection} css={{ width: '100%', height: '100%' }}>
-          <div
-            tabIndex={0}
-            className="obi-editor-container"
-            data-testid="obi-editor-container"
-            css={{
-              width: '100%',
-              height: '100%',
-              padding: '48px 20px',
-              boxSizing: 'border-box',
-              '&:focus': { outline: 'none' },
-            }}
-            ref={el => (divRef = el)}
-            onKeyUp={e => {
-              const keyString = e.key;
-              if (keyString === 'Delete' && focusedId) {
-                dispatchEvent(NodeEventTypes.Delete, { id: focusedId });
-              }
-            }}
-            onClick={e => {
-              e.stopPropagation();
-              dispatchEvent(NodeEventTypes.Focus, '');
-            }}
-          >
-            <AdaptiveDialogEditor
-              id={path}
-              data={data}
-              onEvent={(eventName, eventData) => {
-                divRef.focus({ preventScroll: true });
-                dispatchEvent(eventName, eventData);
+      <ClipboardContext.Provider value={clipboardContext}>
+        <KeyboardZone onCommand={handleKeyboardCommand} when={keyboardStatus}>
+          <MarqueeSelection selection={selection} css={{ width: '100%', height: '100%' }}>
+            <div
+              tabIndex={0}
+              className="obi-editor-container"
+              data-testid="obi-editor-container"
+              css={{
+                width: '100%',
+                height: '100%',
+                padding: '48px 20px',
+                boxSizing: 'border-box',
+                '&:focus': { outline: 'none' },
+              }}
+              ref={el => (divRef = el)}
+              onKeyUp={e => {
+                const keyString = e.key;
+                if (keyString === 'Delete' && focusedId) {
+                  dispatchEvent(NodeEventTypes.Delete, { id: focusedId });
+                }
+              }}
+              onClick={e => {
+                e.stopPropagation();
+                dispatchEvent(NodeEventTypes.Focus, '');
               }}
-            />
-          </div>
-        </MarqueeSelection>
-      </KeyboardZone>
+            >
+              <AdaptiveDialogEditor
+                id={path}
+                data={data}
+                onEvent={(eventName, eventData) => {
+                  divRef.focus({ preventScroll: true });
+                  dispatchEvent(eventName, eventData);
+                }}
+              />
+            </div>
+          </MarqueeSelection>
+        </KeyboardZone>
+      </ClipboardContext.Provider>
     </SelectionContext.Provider>
   );
 };
diff --git a/Composer/packages/extensions/visual-designer/src/editors/RuleEditor.tsx b/Composer/packages/extensions/visual-designer/src/editors/RuleEditor.tsx
index 0c9410281c..90ddced88a 100644
--- a/Composer/packages/extensions/visual-designer/src/editors/RuleEditor.tsx
+++ b/Composer/packages/extensions/visual-designer/src/editors/RuleEditor.tsx
@@ -65,16 +65,7 @@ export const RuleEditor = ({ id, data, onEvent }): JSX.Element => {
         id={stepGroup.id}
         data={stepGroup.data}
         onEvent={onEvent}
-        trigger={
-          <Trigger
-            id={id}
-            data={data}
-            focused={focusedId === id}
-            onClick={() => {
-              onEvent(NodeEventTypes.Focus, id);
-            }}
-          />
-        }
+        trigger={<Trigger id={id} data={data} />}
       />
     </div>
   );
diff --git a/Composer/packages/extensions/visual-designer/src/editors/editorConfig.ts b/Composer/packages/extensions/visual-designer/src/editors/editorConfig.ts
index 290e516ee6..60e0c8c337 100644
--- a/Composer/packages/extensions/visual-designer/src/editors/editorConfig.ts
+++ b/Composer/packages/extensions/visual-designer/src/editors/editorConfig.ts
@@ -1,5 +1,8 @@
 export const EditorConfig = {
   features: {
     showEvents: false,
+    arrowNavigation: true,
+    tabNavigation: true,
+    keyboardNodeEditing: false,
   },
 };
diff --git a/Composer/packages/extensions/visual-designer/src/store/ClipboardContext.ts b/Composer/packages/extensions/visual-designer/src/store/ClipboardContext.ts
new file mode 100644
index 0000000000..4b9e52bb09
--- /dev/null
+++ b/Composer/packages/extensions/visual-designer/src/store/ClipboardContext.ts
@@ -0,0 +1,6 @@
+import React from 'react';
+
+export const ClipboardContext = React.createContext({
+  clipboardActions: [],
+  setClipboardActions: actions => {},
+});
diff --git a/Composer/packages/extensions/visual-designer/src/utils/jsonTracker.ts b/Composer/packages/extensions/visual-designer/src/utils/jsonTracker.ts
index 4d2da29ba5..2a99299e89 100644
--- a/Composer/packages/extensions/visual-designer/src/utils/jsonTracker.ts
+++ b/Composer/packages/extensions/visual-designer/src/utils/jsonTracker.ts
@@ -1,10 +1,9 @@
 import { cloneDeep, get, set } from 'lodash';
-import nanoid from 'nanoid/generate';
 import { seedNewDialog } from 'shared-menus';
 
 import { getFriendlyName } from '../components/nodes/utils';
 
-function locateNode(dialog: { [key: string]: any }, path: string) {
+function parseSelector(path: string): null | string[] {
   if (!path) return null;
 
   const selectors = path.split('.');
@@ -12,13 +11,13 @@ function locateNode(dialog: { [key: string]: any }, path: string) {
     return null;
   }
 
-  if (selectors[0] === '$') {
+  if (selectors[0] === '$' || selectors[0] === '') {
     selectors.shift();
   }
 
   const normalizedSelectors = selectors.reduce(
     (result, selector) => {
-      // e.g. steps[0]
+      // e.g. actions[0]
       const parseResult = selector.match(/(\w+)\[(\d+)\]/);
 
       if (parseResult) {
@@ -34,12 +33,20 @@ function locateNode(dialog: { [key: string]: any }, path: string) {
     [] as any[]
   );
 
-  // Locate the manipulated json node
+  return normalizedSelectors;
+}
+
+function locateNode(dialog: { [key: string]: any }, path: string) {
+  const selectors = parseSelector(path);
+  if (!Array.isArray(selectors)) return null;
+  if (selectors.length === 0) return dialog;
+
+  // Locate the to be manipulated json node
   let parentData: object = {};
   let currentKey: number | string = '';
   let currentData = dialog;
 
-  for (const selector of normalizedSelectors) {
+  for (const selector of selectors) {
     parentData = currentData;
     currentData = parentData[selector];
     currentKey = selector;
@@ -50,6 +57,35 @@ function locateNode(dialog: { [key: string]: any }, path: string) {
   return { parentData, currentData, currentKey };
 }
 
+/**
+ * The difference between `prepareNode` and `locateNode` is,
+ * `prepareNode` will create new container to make sure your path is always valid.
+ */
+function prepareTargetArray(dialog: { [key: string]: any }, arrayPath: string) {
+  const selectors = parseSelector(arrayPath);
+  if (!Array.isArray(selectors)) return null;
+  if (selectors.length === 0) return { parentData: null, currentKey: null, currentData: dialog };
+
+  // Locate the manipulated json node
+  let parentData: object = {};
+  let currentKey: number | string = '';
+  let currentData = dialog;
+
+  for (const selector of selectors) {
+    parentData = currentData;
+    currentData = parentData[selector];
+    currentKey = selector;
+
+    if (currentData === undefined) {
+      // lodash.set will create `[ null ]` which is not expected.
+      currentData = [];
+      parentData[currentKey] = currentData;
+    }
+  }
+
+  return { parentData, currentData, currentKey };
+}
+
 export function queryNode(inputDialog, path) {
   const target = locateNode(inputDialog, path);
   if (!target) return null;
@@ -81,6 +117,40 @@ export function deleteNode(inputDialog, path, callbackOnRemovedData?: (removedDa
   return dialog;
 }
 
+export function deleteNodes(inputDialog, nodeIds: string[], callbackOnRemovedData?: (removedData: any) => any) {
+  const dialog = cloneDeep(inputDialog);
+
+  const nodeLocations = nodeIds.map(id => locateNode(dialog, id));
+  const deletedNodes: any[] = [];
+
+  // mark deletion
+  nodeLocations.forEach(location => {
+    if (!location) return;
+    deletedNodes.push(location.currentData);
+
+    if (Array.isArray(location.parentData)) {
+      location.parentData[location.currentKey] = null;
+    } else {
+      delete location.parentData[location.currentKey];
+    }
+  });
+
+  // delete empty slots in array
+  nodeLocations.forEach(location => {
+    if (!location || !Array.isArray(location.parentData)) return;
+    for (let i = location.parentData.length - 1; i >= 0; i--) {
+      if (location.parentData[i] === null) location.parentData.splice(i, 1);
+    }
+  });
+
+  // invoke callback handler
+  if (callbackOnRemovedData && typeof callbackOnRemovedData === 'function') {
+    deletedNodes.forEach(x => callbackOnRemovedData(x));
+  }
+
+  return dialog;
+}
+
 export function insert(inputDialog, path, position, $type) {
   const dialog = cloneDeep(inputDialog);
   const current = get(dialog, path, []);
@@ -97,3 +167,47 @@ export function insert(inputDialog, path, position, $type) {
 
   return dialog;
 }
+
+export function copyNodes(inputDialog, nodeIds: string[]): any[] {
+  const nodes = nodeIds.map(id => queryNode(inputDialog, id)).filter(x => x !== null);
+  return JSON.parse(JSON.stringify(nodes));
+}
+
+export function cutNodes(inputDialog, nodeIds: string[]) {
+  const nodesData = copyNodes(inputDialog, nodeIds);
+  const newDialog = deleteNodes(inputDialog, nodeIds);
+
+  return { dialog: newDialog, cutData: nodesData };
+}
+
+export function appendNodesAfter(inputDialog, targetId, newNodes) {
+  if (!Array.isArray(newNodes) || newNodes.length === 0) {
+    return inputDialog;
+  }
+
+  const dialog = cloneDeep(inputDialog);
+  const prevNode = locateNode(dialog, targetId);
+
+  if (!prevNode || !Array.isArray(prevNode.parentData)) {
+    return inputDialog;
+  }
+
+  prevNode.parentData.splice(parseInt(prevNode.currentKey as string) + 1, 0, ...newNodes);
+  return dialog;
+}
+
+export function pasteNodes(inputDialog, arrayPath, arrayIndex, newNodes) {
+  if (!Array.isArray(newNodes) || newNodes.length === 0) {
+    return inputDialog;
+  }
+
+  const dialog = cloneDeep(inputDialog);
+  const targetArray = prepareTargetArray(dialog, arrayPath);
+
+  if (!targetArray || !Array.isArray(targetArray.currentData)) {
+    return inputDialog;
+  }
+
+  targetArray.currentData.splice(arrayIndex, 0, ...newNodes);
+  return dialog;
+}
diff --git a/Composer/packages/extensions/visual-designer/src/utils/normalizeSelection.ts b/Composer/packages/extensions/visual-designer/src/utils/normalizeSelection.ts
new file mode 100644
index 0000000000..4713abfcb0
--- /dev/null
+++ b/Composer/packages/extensions/visual-designer/src/utils/normalizeSelection.ts
@@ -0,0 +1,16 @@
+export const normalizeSelection = (selectedIds: string[]): string[] => {
+  if (!Array.isArray(selectedIds)) return [];
+  // events[0] < events[0].actions[0] < events[1] < events[1].actions[0]
+  const ascendingIds = [...selectedIds].sort();
+
+  for (let i = 0; i < ascendingIds.length; i++) {
+    const parentId = ascendingIds[i];
+    for (let j = i + 1; j < ascendingIds.length; j++) {
+      if (ascendingIds[j].indexOf(parentId) === 0) {
+        ascendingIds[j] = '';
+      }
+    }
+  }
+
+  return ascendingIds.filter(id => id);
+};