diff --git a/docs/docs/api/dockview.mdx b/docs/docs/api/dockview.mdx
index 2bef702f6..6ad93883b 100644
--- a/docs/docs/api/dockview.mdx
+++ b/docs/docs/api/dockview.mdx
@@ -236,36 +236,44 @@ Through toggling the checkbox you can see that when you only render those panels
 
 ### Drag And Drop
 
-<DndDockview />
-
-Both `DockviewReact` and `PaneviewReact` support drag and drop functionality out of the box.
-
--   `DockviewReact` allows tabs to be repositioned using drag and drop.
--   `PaneviewReact` allows the repositioning of views using drag and drop on the header section.
-
-You can use the utility methods `getPaneData` and `getPanelData` to manually extract the data transfer metadata associated with an active drag and drop event for either of the above components.
+The component exposes some method to help determine whether external drag events should be interacted with or not.
 
 ```tsx
-import {
-    getPaneData,
-    getPanelData,
-    PanelTransfer,
-    PaneTransfer,
-} from 'dockview';
+/**
+ * called when an ondrop event which does not originate from the dockview libray and
+ * passes the showDndOverlay condition occurs
+ **/
+const onDidDrop = (event: DockviewDropEvent) => {
+    const { group } = event;
 
-const panelData: PanelTransfer | undefined = getPanelData();
+    event.api.addPanel({
+        id: 'test',
+        component: 'default',
+        position: {
+            referencePanel: group.activePanel.id,
+            direction: 'within',
+        },
+    });
+};
 
-if (panelData) {
-    // DockviewReact: data transfer metadata associated with the active drag and drop event
-    const { viewId, groupId, panelId } = panelData; // deconstructed object
-}
+/**
+ * called for drag over events which do not originate from the dockview library
+ * allowing the developer to decide where the overlay should be shown for a
+ * particular drag event
+ **/
+const showDndOverlay = (event: DockviewDndOverlayEvent) => {
+    return true;
+};
 
-const paneData: PaneTransfer | undefined = getPaneData();
-
-if (paneData) {
-    // PaneviewReact: data transfer metadata associated with the active drag and drop event
-    const { viewId, paneId } = paneData; // deconstructed object
-}
+return (
+    <DockviewReact
+        components={components}
+        onReady={onReady}
+        className="dockview-theme-dark"
+        onDidDrop={onDidDrop}
+        showDndOverlay={showDndOverlay}
+    />
+);
 ```
 
-See example [here](https://codesandbox.io/s/workspace-saving-example-euo5d).
+<DndDockview />
diff --git a/docs/package.json b/docs/package.json
index 969de6fa8..2374c7151 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -20,7 +20,7 @@
     "@docusaurus/preset-classic": "2.0.0-beta.20",
     "@mdx-js/react": "^1.6.22",
     "clsx": "^1.1.1",
-    "dockview": "^1.4.1",
+    "dockview": "0.0.0-experimental-d306387a-20220521",
     "prism-react-renderer": "^1.3.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
diff --git a/docs/src/components/dockview/dnd.tsx b/docs/src/components/dockview/dnd.tsx
index e92d5cada..344f30d07 100644
--- a/docs/src/components/dockview/dnd.tsx
+++ b/docs/src/components/dockview/dnd.tsx
@@ -1,10 +1,10 @@
 import {
+    DockviewDndOverlayEvent,
     DockviewDropEvent,
     DockviewReact,
     DockviewReadyEvent,
     IDockviewPanelProps,
 } from 'dockview';
-import { DockviewDropTargets } from 'dockview/dist/cjs/groupview/dnd';
 import * as React from 'react';
 
 const components = {
@@ -54,10 +54,19 @@ export const DndDockview = (props: { renderVisibleOnly: boolean }) => {
     };
 
     const onDidDrop = (event: DockviewDropEvent) => {
-        console.log(event);
+        const { group } = event;
+
+        event.api.addPanel({
+            id: 'test',
+            component: 'default',
+            position: {
+                referencePanel: group.activePanel.id,
+                direction: 'within',
+            },
+        });
     };
 
-    const showDndOverlay = (event: DragEvent, targets: DockviewDropTargets) => {
+    const showDndOverlay = (event: DockviewDndOverlayEvent) => {
         return true;
     };
 
@@ -66,8 +75,10 @@ export const DndDockview = (props: { renderVisibleOnly: boolean }) => {
             <div
                 style={{
                     backgroundColor: 'orange',
-                    color: 'white',
+                    padding: '0px 8px',
+                    borderRadius: '4px',
                     width: '100px',
+                    cursor: 'pointer',
                 }}
                 draggable={true}
             >
diff --git a/docs/yarn.lock b/docs/yarn.lock
index d8cead450..38be44005 100644
--- a/docs/yarn.lock
+++ b/docs/yarn.lock
@@ -3354,10 +3354,10 @@ dns-packet@^5.2.2:
   dependencies:
     "@leichtgewicht/ip-codec" "^2.0.1"
 
-dockview@^1.4.1:
-  version "1.4.2"
-  resolved "https://registry.yarnpkg.com/dockview/-/dockview-1.4.2.tgz#20efbedccdebc64f0ee95d19460f158d52dc7792"
-  integrity sha512-GPELYEOd6u83VLJ8XXMV4VE9otuHJydSoeoy4uKyrZ+ZAxxv1UVJiEjub0GVlsMRgeeatT4pnBQsgRpgm8jPkQ==
+dockview@0.0.0-experimental-d306387a-20220521:
+  version "0.0.0-experimental-d306387a-20220521"
+  resolved "https://registry.yarnpkg.com/dockview/-/dockview-0.0.0-experimental-d306387a-20220521.tgz#64ecf9ee358c45c7007d0a4b01f0437064fa5232"
+  integrity sha512-pyOhqXORHY9Y6FOmhzFnZueoJ5kdM1J3elcxNbL+hgvaabcykGHeu+3C42lAFA9xnzi/4ru/31547CRFw26oCw==
 
 docusaurus-plugin-sass@^0.2.2:
   version "0.2.2"