From 9564319e43ac0fcfa016a4bff8dabc3af37a90ac Mon Sep 17 00:00:00 2001
From: mathuo <6710312+mathuo@users.noreply.github.com>
Date: Fri, 15 Nov 2024 21:18:09 +0000
Subject: [PATCH] chore: fix files

---
 .codesandbox/ci.json                          |  35 ++
 .../customheader-dockview/package.json        |  32 ++
 .../customheader-dockview/public/index.html   |  44 ++
 .../customheader-dockview/src/app.tsx         | 122 +++++
 .../customheader-dockview/src/index.tsx       |  20 +
 .../customheader-dockview/src/styles.css      |  16 +
 .../customheader-dockview/tsconfig.json       |  18 +
 .../react/dockview/constraints/package.json   |  32 ++
 .../dockview/constraints/public/index.html    |  44 ++
 .../react/dockview/constraints/src/app.tsx    | 148 ++++++
 .../react/dockview/constraints/src/index.tsx  |  20 +
 .../react/dockview/constraints/src/styles.css |  16 +
 .../react/dockview/constraints/tsconfig.json  |  18 +
 .../react/dockview/demo-dockview/package.json |  34 ++
 .../dockview/demo-dockview/public/index.html  |  45 ++
 .../react/dockview/demo-dockview/src/app.scss |  96 ++++
 .../react/dockview/demo-dockview/src/app.tsx  | 431 ++++++++++++++++++
 .../dockview/demo-dockview/src/controls.tsx   | 148 ++++++
 .../dockview/demo-dockview/src/debugPanel.tsx | 164 +++++++
 .../demo-dockview/src/defaultLayout.ts        |  67 +++
 .../demo-dockview/src/gridActions.tsx         | 216 +++++++++
 .../demo-dockview/src/groupActions.tsx        | 189 ++++++++
 .../dockview/demo-dockview/src/index.tsx      |  20 +
 .../demo-dockview/src/panelActions.tsx        | 138 ++++++
 .../demo-dockview/src/panelBuilder.tsx        | 115 +++++
 .../dockview/demo-dockview/src/styles.css     |  16 +
 .../dockview/demo-dockview/tsconfig.json      |  18 +
 .../react/dockview/dnd-events/package.json    |  32 ++
 .../dockview/dnd-events/public/index.html     |  44 ++
 .../react/dockview/dnd-events/src/app.tsx     | 142 ++++++
 .../react/dockview/dnd-events/src/index.tsx   |  20 +
 .../react/dockview/dnd-events/src/styles.css  |  16 +
 .../react/dockview/dnd-events/tsconfig.json   |  18 +
 .../react/dockview/dnd-external/package.json  |  32 ++
 .../dockview/dnd-external/public/index.html   |  44 ++
 .../react/dockview/dnd-external/src/app.tsx   | 192 ++++++++
 .../react/dockview/dnd-external/src/index.tsx |  20 +
 .../dockview/dnd-external/src/styles.css      |  16 +
 .../react/dockview/dnd-external/tsconfig.json |  18 +
 .../dockview/floating-groups/package.json     |  32 ++
 .../floating-groups/public/index.html         |  44 ++
 .../dockview/floating-groups/src/app.tsx      | 301 ++++++++++++
 .../dockview/floating-groups/src/index.tsx    |  20 +
 .../dockview/floating-groups/src/styles.css   |  16 +
 .../dockview/floating-groups/src/utils.tsx    |  30 ++
 .../dockview/floating-groups/tsconfig.json    |  18 +
 .../react/dockview/group-actions/package.json |  32 ++
 .../dockview/group-actions/public/index.html  |  44 ++
 .../react/dockview/group-actions/src/app.scss |  20 +
 .../react/dockview/group-actions/src/app.tsx  | 102 +++++
 .../dockview/group-actions/src/index.tsx      |  20 +
 .../dockview/group-actions/src/styles.css     |  16 +
 .../dockview/group-actions/tsconfig.json      |  18 +
 .../react/dockview/layout/package.json        |  32 ++
 .../react/dockview/layout/public/index.html   |  44 ++
 .../react/dockview/layout/src/app.tsx         | 132 ++++++
 .../react/dockview/layout/src/index.tsx       |  20 +
 .../react/dockview/layout/src/styles.css      |  16 +
 .../react/dockview/layout/tsconfig.json       |  18 +
 .../react/dockview/locked/package.json        |  32 ++
 .../react/dockview/locked/public/index.html   |  44 ++
 .../react/dockview/locked/src/app.tsx         |  64 +++
 .../react/dockview/locked/src/index.tsx       |  20 +
 .../react/dockview/locked/src/styles.css      |  16 +
 .../react/dockview/locked/tsconfig.json       |  18 +
 .../dockview/maximize-group/package.json      |  32 ++
 .../dockview/maximize-group/public/index.html |  44 ++
 .../react/dockview/maximize-group/src/app.tsx | 252 ++++++++++
 .../dockview/maximize-group/src/index.tsx     |  20 +
 .../dockview/maximize-group/src/styles.css    |  16 +
 .../dockview/maximize-group/src/utils.tsx     |  30 ++
 .../dockview/maximize-group/tsconfig.json     |  18 +
 .../react/dockview/popout-group/package.json  |  33 ++
 .../dockview/popout-group/public/index.html   |  44 ++
 .../react/dockview/popout-group/src/app.tsx   | 280 ++++++++++++
 .../react/dockview/popout-group/src/index.tsx |  20 +
 .../dockview/popout-group/src/popover.tsx     |  55 +++
 .../dockview/popout-group/src/styles.css      |  16 +
 .../react/dockview/popout-group/src/utils.tsx |  30 ++
 .../react/dockview/popout-group/tsconfig.json |  18 +
 .../react/dockview/render-mode/package.json   |  33 ++
 .../dockview/render-mode/public/index.html    |  45 ++
 .../react/dockview/render-mode/src/app.scss   |   0
 .../react/dockview/render-mode/src/app.tsx    | 160 +++++++
 .../react/dockview/render-mode/src/index.tsx  |  20 +
 .../react/dockview/render-mode/src/styles.css |  16 +
 .../react/dockview/render-mode/tsconfig.json  |  18 +
 .../dockview/resize-container/package.json    |  32 ++
 .../resize-container/public/index.html        |  43 ++
 .../dockview/resize-container/src/app.tsx     | 117 +++++
 .../dockview/resize-container/src/index.tsx   |  20 +
 .../dockview/resize-container/src/styles.css  |  16 +
 .../dockview/resize-container/tsconfig.json   |  18 +
 .../react/dockview/resize/package.json        |  32 ++
 .../react/dockview/resize/public/index.html   |  44 ++
 .../react/dockview/resize/src/app.tsx         | 127 ++++++
 .../react/dockview/resize/src/index.tsx       |  20 +
 .../react/dockview/resize/src/resize.scss     |  23 +
 .../react/dockview/resize/src/styles.css      |  16 +
 .../react/dockview/resize/tsconfig.json       |  18 +
 .../react/dockview/scrollbars/package.json    |  34 ++
 .../dockview/scrollbars/public/index.html     |  45 ++
 .../react/dockview/scrollbars/src/app.scss    |  16 +
 .../react/dockview/scrollbars/src/app.tsx     |  77 ++++
 .../react/dockview/scrollbars/src/index.tsx   |  20 +
 .../react/dockview/scrollbars/src/styles.css  |  16 +
 .../react/dockview/scrollbars/tsconfig.json   |  18 +
 .../react/dockview/tabview/package.json       |  32 ++
 .../react/dockview/tabview/public/index.html  |  44 ++
 .../react/dockview/tabview/src/app.tsx        |  82 ++++
 .../react/dockview/tabview/src/index.tsx      |  20 +
 .../react/dockview/tabview/src/styles.css     |  16 +
 .../react/dockview/tabview/tsconfig.json      |  18 +
 .../dockview/update-parameters/package.json   |  32 ++
 .../update-parameters/public/index.html       |  44 ++
 .../dockview/update-parameters/src/app.tsx    |  85 ++++
 .../dockview/update-parameters/src/index.tsx  |  20 +
 .../dockview/update-parameters/src/styles.css |  16 +
 .../dockview/update-parameters/tsconfig.json  |  18 +
 .../react/dockview/update-title/package.json  |  32 ++
 .../dockview/update-title/public/index.html   |  44 ++
 .../react/dockview/update-title/src/app.tsx   |  74 +++
 .../react/dockview/update-title/src/index.tsx |  20 +
 .../dockview/update-title/src/styles.css      |  16 +
 .../react/dockview/update-title/tsconfig.json |  18 +
 .../react/dockview/watermark/package.json     |  32 ++
 .../dockview/watermark/public/index.html      |  44 ++
 .../react/dockview/watermark/src/app.tsx      | 135 ++++++
 .../react/dockview/watermark/src/index.tsx    |  20 +
 .../react/dockview/watermark/src/styles.css   |  16 +
 .../react/dockview/watermark/tsconfig.json    |  18 +
 .../react/gridview/simple/package.json        |  32 ++
 .../react/gridview/simple/public/index.html   |  44 ++
 .../react/gridview/simple/src/app.scss        |   3 +
 .../react/gridview/simple/src/app.tsx         | 145 ++++++
 .../react/gridview/simple/src/index.tsx       |  20 +
 .../react/gridview/simple/src/styles.css      |  16 +
 .../react/gridview/simple/tsconfig.json       |  18 +
 .../react/paneview/simple/package.json        |  32 ++
 .../react/paneview/simple/public/index.html   |  44 ++
 .../react/paneview/simple/src/app.tsx         | 104 +++++
 .../react/paneview/simple/src/index.tsx       |  20 +
 .../react/paneview/simple/src/styles.css      |  16 +
 .../react/paneview/simple/tsconfig.json       |  18 +
 .../react/splitview/simple/package.json       |  32 ++
 .../react/splitview/simple/public/index.html  |  44 ++
 .../react/splitview/simple/src/app.tsx        |  59 +++
 .../react/splitview/simple/src/index.tsx      |  20 +
 .../react/splitview/simple/src/styles.css     |  16 +
 .../react/splitview/simple/tsconfig.json      |  18 +
 150 files changed, 7574 insertions(+)
 create mode 100644 packages/docs/sandboxes/customheader-dockview/package.json
 create mode 100644 packages/docs/sandboxes/customheader-dockview/public/index.html
 create mode 100644 packages/docs/sandboxes/customheader-dockview/src/app.tsx
 create mode 100644 packages/docs/sandboxes/customheader-dockview/src/index.tsx
 create mode 100644 packages/docs/sandboxes/customheader-dockview/src/styles.css
 create mode 100644 packages/docs/sandboxes/customheader-dockview/tsconfig.json
 create mode 100644 packages/docs/sandboxes/react/dockview/constraints/package.json
 create mode 100644 packages/docs/sandboxes/react/dockview/constraints/public/index.html
 create mode 100644 packages/docs/sandboxes/react/dockview/constraints/src/app.tsx
 create mode 100644 packages/docs/sandboxes/react/dockview/constraints/src/index.tsx
 create mode 100644 packages/docs/sandboxes/react/dockview/constraints/src/styles.css
 create mode 100644 packages/docs/sandboxes/react/dockview/constraints/tsconfig.json
 create mode 100644 packages/docs/sandboxes/react/dockview/demo-dockview/package.json
 create mode 100644 packages/docs/sandboxes/react/dockview/demo-dockview/public/index.html
 create mode 100644 packages/docs/sandboxes/react/dockview/demo-dockview/src/app.scss
 create mode 100644 packages/docs/sandboxes/react/dockview/demo-dockview/src/app.tsx
 create mode 100644 packages/docs/sandboxes/react/dockview/demo-dockview/src/controls.tsx
 create mode 100644 packages/docs/sandboxes/react/dockview/demo-dockview/src/debugPanel.tsx
 create mode 100644 packages/docs/sandboxes/react/dockview/demo-dockview/src/defaultLayout.ts
 create mode 100644 packages/docs/sandboxes/react/dockview/demo-dockview/src/gridActions.tsx
 create mode 100644 packages/docs/sandboxes/react/dockview/demo-dockview/src/groupActions.tsx
 create mode 100644 packages/docs/sandboxes/react/dockview/demo-dockview/src/index.tsx
 create mode 100644 packages/docs/sandboxes/react/dockview/demo-dockview/src/panelActions.tsx
 create mode 100644 packages/docs/sandboxes/react/dockview/demo-dockview/src/panelBuilder.tsx
 create mode 100644 packages/docs/sandboxes/react/dockview/demo-dockview/src/styles.css
 create mode 100644 packages/docs/sandboxes/react/dockview/demo-dockview/tsconfig.json
 create mode 100644 packages/docs/sandboxes/react/dockview/dnd-events/package.json
 create mode 100644 packages/docs/sandboxes/react/dockview/dnd-events/public/index.html
 create mode 100644 packages/docs/sandboxes/react/dockview/dnd-events/src/app.tsx
 create mode 100644 packages/docs/sandboxes/react/dockview/dnd-events/src/index.tsx
 create mode 100644 packages/docs/sandboxes/react/dockview/dnd-events/src/styles.css
 create mode 100644 packages/docs/sandboxes/react/dockview/dnd-events/tsconfig.json
 create mode 100644 packages/docs/sandboxes/react/dockview/dnd-external/package.json
 create mode 100644 packages/docs/sandboxes/react/dockview/dnd-external/public/index.html
 create mode 100644 packages/docs/sandboxes/react/dockview/dnd-external/src/app.tsx
 create mode 100644 packages/docs/sandboxes/react/dockview/dnd-external/src/index.tsx
 create mode 100644 packages/docs/sandboxes/react/dockview/dnd-external/src/styles.css
 create mode 100644 packages/docs/sandboxes/react/dockview/dnd-external/tsconfig.json
 create mode 100644 packages/docs/sandboxes/react/dockview/floating-groups/package.json
 create mode 100644 packages/docs/sandboxes/react/dockview/floating-groups/public/index.html
 create mode 100644 packages/docs/sandboxes/react/dockview/floating-groups/src/app.tsx
 create mode 100644 packages/docs/sandboxes/react/dockview/floating-groups/src/index.tsx
 create mode 100644 packages/docs/sandboxes/react/dockview/floating-groups/src/styles.css
 create mode 100644 packages/docs/sandboxes/react/dockview/floating-groups/src/utils.tsx
 create mode 100644 packages/docs/sandboxes/react/dockview/floating-groups/tsconfig.json
 create mode 100644 packages/docs/sandboxes/react/dockview/group-actions/package.json
 create mode 100644 packages/docs/sandboxes/react/dockview/group-actions/public/index.html
 create mode 100644 packages/docs/sandboxes/react/dockview/group-actions/src/app.scss
 create mode 100644 packages/docs/sandboxes/react/dockview/group-actions/src/app.tsx
 create mode 100644 packages/docs/sandboxes/react/dockview/group-actions/src/index.tsx
 create mode 100644 packages/docs/sandboxes/react/dockview/group-actions/src/styles.css
 create mode 100644 packages/docs/sandboxes/react/dockview/group-actions/tsconfig.json
 create mode 100644 packages/docs/sandboxes/react/dockview/layout/package.json
 create mode 100644 packages/docs/sandboxes/react/dockview/layout/public/index.html
 create mode 100644 packages/docs/sandboxes/react/dockview/layout/src/app.tsx
 create mode 100644 packages/docs/sandboxes/react/dockview/layout/src/index.tsx
 create mode 100644 packages/docs/sandboxes/react/dockview/layout/src/styles.css
 create mode 100644 packages/docs/sandboxes/react/dockview/layout/tsconfig.json
 create mode 100644 packages/docs/sandboxes/react/dockview/locked/package.json
 create mode 100644 packages/docs/sandboxes/react/dockview/locked/public/index.html
 create mode 100644 packages/docs/sandboxes/react/dockview/locked/src/app.tsx
 create mode 100644 packages/docs/sandboxes/react/dockview/locked/src/index.tsx
 create mode 100644 packages/docs/sandboxes/react/dockview/locked/src/styles.css
 create mode 100644 packages/docs/sandboxes/react/dockview/locked/tsconfig.json
 create mode 100644 packages/docs/sandboxes/react/dockview/maximize-group/package.json
 create mode 100644 packages/docs/sandboxes/react/dockview/maximize-group/public/index.html
 create mode 100644 packages/docs/sandboxes/react/dockview/maximize-group/src/app.tsx
 create mode 100644 packages/docs/sandboxes/react/dockview/maximize-group/src/index.tsx
 create mode 100644 packages/docs/sandboxes/react/dockview/maximize-group/src/styles.css
 create mode 100644 packages/docs/sandboxes/react/dockview/maximize-group/src/utils.tsx
 create mode 100644 packages/docs/sandboxes/react/dockview/maximize-group/tsconfig.json
 create mode 100644 packages/docs/sandboxes/react/dockview/popout-group/package.json
 create mode 100644 packages/docs/sandboxes/react/dockview/popout-group/public/index.html
 create mode 100644 packages/docs/sandboxes/react/dockview/popout-group/src/app.tsx
 create mode 100644 packages/docs/sandboxes/react/dockview/popout-group/src/index.tsx
 create mode 100644 packages/docs/sandboxes/react/dockview/popout-group/src/popover.tsx
 create mode 100644 packages/docs/sandboxes/react/dockview/popout-group/src/styles.css
 create mode 100644 packages/docs/sandboxes/react/dockview/popout-group/src/utils.tsx
 create mode 100644 packages/docs/sandboxes/react/dockview/popout-group/tsconfig.json
 create mode 100644 packages/docs/sandboxes/react/dockview/render-mode/package.json
 create mode 100644 packages/docs/sandboxes/react/dockview/render-mode/public/index.html
 create mode 100644 packages/docs/sandboxes/react/dockview/render-mode/src/app.scss
 create mode 100644 packages/docs/sandboxes/react/dockview/render-mode/src/app.tsx
 create mode 100644 packages/docs/sandboxes/react/dockview/render-mode/src/index.tsx
 create mode 100644 packages/docs/sandboxes/react/dockview/render-mode/src/styles.css
 create mode 100644 packages/docs/sandboxes/react/dockview/render-mode/tsconfig.json
 create mode 100644 packages/docs/sandboxes/react/dockview/resize-container/package.json
 create mode 100644 packages/docs/sandboxes/react/dockview/resize-container/public/index.html
 create mode 100644 packages/docs/sandboxes/react/dockview/resize-container/src/app.tsx
 create mode 100644 packages/docs/sandboxes/react/dockview/resize-container/src/index.tsx
 create mode 100644 packages/docs/sandboxes/react/dockview/resize-container/src/styles.css
 create mode 100644 packages/docs/sandboxes/react/dockview/resize-container/tsconfig.json
 create mode 100644 packages/docs/sandboxes/react/dockview/resize/package.json
 create mode 100644 packages/docs/sandboxes/react/dockview/resize/public/index.html
 create mode 100644 packages/docs/sandboxes/react/dockview/resize/src/app.tsx
 create mode 100644 packages/docs/sandboxes/react/dockview/resize/src/index.tsx
 create mode 100644 packages/docs/sandboxes/react/dockview/resize/src/resize.scss
 create mode 100644 packages/docs/sandboxes/react/dockview/resize/src/styles.css
 create mode 100644 packages/docs/sandboxes/react/dockview/resize/tsconfig.json
 create mode 100644 packages/docs/sandboxes/react/dockview/scrollbars/package.json
 create mode 100644 packages/docs/sandboxes/react/dockview/scrollbars/public/index.html
 create mode 100644 packages/docs/sandboxes/react/dockview/scrollbars/src/app.scss
 create mode 100644 packages/docs/sandboxes/react/dockview/scrollbars/src/app.tsx
 create mode 100644 packages/docs/sandboxes/react/dockview/scrollbars/src/index.tsx
 create mode 100644 packages/docs/sandboxes/react/dockview/scrollbars/src/styles.css
 create mode 100644 packages/docs/sandboxes/react/dockview/scrollbars/tsconfig.json
 create mode 100644 packages/docs/sandboxes/react/dockview/tabview/package.json
 create mode 100644 packages/docs/sandboxes/react/dockview/tabview/public/index.html
 create mode 100644 packages/docs/sandboxes/react/dockview/tabview/src/app.tsx
 create mode 100644 packages/docs/sandboxes/react/dockview/tabview/src/index.tsx
 create mode 100644 packages/docs/sandboxes/react/dockview/tabview/src/styles.css
 create mode 100644 packages/docs/sandboxes/react/dockview/tabview/tsconfig.json
 create mode 100644 packages/docs/sandboxes/react/dockview/update-parameters/package.json
 create mode 100644 packages/docs/sandboxes/react/dockview/update-parameters/public/index.html
 create mode 100644 packages/docs/sandboxes/react/dockview/update-parameters/src/app.tsx
 create mode 100644 packages/docs/sandboxes/react/dockview/update-parameters/src/index.tsx
 create mode 100644 packages/docs/sandboxes/react/dockview/update-parameters/src/styles.css
 create mode 100644 packages/docs/sandboxes/react/dockview/update-parameters/tsconfig.json
 create mode 100644 packages/docs/sandboxes/react/dockview/update-title/package.json
 create mode 100644 packages/docs/sandboxes/react/dockview/update-title/public/index.html
 create mode 100644 packages/docs/sandboxes/react/dockview/update-title/src/app.tsx
 create mode 100644 packages/docs/sandboxes/react/dockview/update-title/src/index.tsx
 create mode 100644 packages/docs/sandboxes/react/dockview/update-title/src/styles.css
 create mode 100644 packages/docs/sandboxes/react/dockview/update-title/tsconfig.json
 create mode 100644 packages/docs/sandboxes/react/dockview/watermark/package.json
 create mode 100644 packages/docs/sandboxes/react/dockview/watermark/public/index.html
 create mode 100644 packages/docs/sandboxes/react/dockview/watermark/src/app.tsx
 create mode 100644 packages/docs/sandboxes/react/dockview/watermark/src/index.tsx
 create mode 100644 packages/docs/sandboxes/react/dockview/watermark/src/styles.css
 create mode 100644 packages/docs/sandboxes/react/dockview/watermark/tsconfig.json
 create mode 100644 packages/docs/sandboxes/react/gridview/simple/package.json
 create mode 100644 packages/docs/sandboxes/react/gridview/simple/public/index.html
 create mode 100644 packages/docs/sandboxes/react/gridview/simple/src/app.scss
 create mode 100644 packages/docs/sandboxes/react/gridview/simple/src/app.tsx
 create mode 100644 packages/docs/sandboxes/react/gridview/simple/src/index.tsx
 create mode 100644 packages/docs/sandboxes/react/gridview/simple/src/styles.css
 create mode 100644 packages/docs/sandboxes/react/gridview/simple/tsconfig.json
 create mode 100644 packages/docs/sandboxes/react/paneview/simple/package.json
 create mode 100644 packages/docs/sandboxes/react/paneview/simple/public/index.html
 create mode 100644 packages/docs/sandboxes/react/paneview/simple/src/app.tsx
 create mode 100644 packages/docs/sandboxes/react/paneview/simple/src/index.tsx
 create mode 100644 packages/docs/sandboxes/react/paneview/simple/src/styles.css
 create mode 100644 packages/docs/sandboxes/react/paneview/simple/tsconfig.json
 create mode 100644 packages/docs/sandboxes/react/splitview/simple/package.json
 create mode 100644 packages/docs/sandboxes/react/splitview/simple/public/index.html
 create mode 100644 packages/docs/sandboxes/react/splitview/simple/src/app.tsx
 create mode 100644 packages/docs/sandboxes/react/splitview/simple/src/index.tsx
 create mode 100644 packages/docs/sandboxes/react/splitview/simple/src/styles.css
 create mode 100644 packages/docs/sandboxes/react/splitview/simple/tsconfig.json

diff --git a/.codesandbox/ci.json b/.codesandbox/ci.json
index fd3d8d2ad..60af87ecb 100644
--- a/.codesandbox/ci.json
+++ b/.codesandbox/ci.json
@@ -6,6 +6,41 @@
     "packages/dockview"
   ],
   "sandboxes": [
+    "/packages/docs/sandboxes/constraints-dockview",
+    "/packages/docs/sandboxes/customheader-dockview",
+    "/packages/docs/sandboxes/demo-dockview",
+    "/packages/docs/sandboxes/dnd-dockview",
+    "/packages/docs/sandboxes/dockview-app",
+    "/packages/docs/sandboxes/editor-gridview",
+    "/packages/docs/sandboxes/events-dockview",
+    "/packages/docs/sandboxes/externaldnd-dockview",
+    "/packages/docs/sandboxes/floatinggroup-dockview",
+    "/packages/docs/sandboxes/fullwidthtab-dockview",
+    "/packages/docs/sandboxes/headeractions-dockview",
+    "/packages/docs/sandboxes/groupcontol-dockview",
+    "/packages/docs/sandboxes/iframe-dockview",
+    "/packages/docs/sandboxes/keyboard-dockview",
+    "/packages/docs/sandboxes/layout-dockview",
+    "/packages/docs/sandboxes/lockedgroup-dockview",
+    "/packages/docs/sandboxes/maximizegroup-dockview",
+    "/packages/docs/sandboxes/nativeapp-dockview",
+    "/packages/docs/sandboxes/nested-dockview",
+    "/packages/docs/sandboxes/popoutgroup-dockview",
+    "/packages/docs/sandboxes/rendering-dockview",
+    "/packages/docs/sandboxes/rendermode-dockview",
+    "/packages/docs/sandboxes/resize-dockview",
+    "/packages/docs/sandboxes/resizecontainer-dockview",
+    "/packages/docs/sandboxes/scrollbars-dockview",
+    "/packages/docs/sandboxes/simple-dockview",
+    "/packages/docs/sandboxes/simple-gridview",
+    "/packages/docs/sandboxes/simple-paneview",
+    "/packages/docs/sandboxes/tabheight-dockview",
+    "/packages/docs/sandboxes/updatetitle-dockview",
+    "/packages/docs/sandboxes/watermark-dockview",
+    "/packages/docs/sandboxes/javascript/fullwidthtab-dockview",
+    "/packages/docs/sandboxes/javascript/simple-dockview",
+    "/packages/docs/sandboxes/javascript/tabheight-dockview",
+    "/packages/docs/sandboxes/javascript/vanilla-dockview"
   ],
   "node": "18"
 }
diff --git a/packages/docs/sandboxes/customheader-dockview/package.json b/packages/docs/sandboxes/customheader-dockview/package.json
new file mode 100644
index 000000000..d3ede7462
--- /dev/null
+++ b/packages/docs/sandboxes/customheader-dockview/package.json
@@ -0,0 +1,32 @@
+{
+  "name": "customheader-dockview",
+  "description": "",
+  "keywords": [
+    "dockview"
+  ],
+  "version": "1.0.0",
+  "main": "src/index.tsx",
+  "dependencies": {
+    "dockview": "*",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.28",
+    "@types/react-dom": "^18.0.11",
+    "typescript": "^4.9.5",
+    "react-scripts": "*"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
+}
\ No newline at end of file
diff --git a/packages/docs/sandboxes/customheader-dockview/public/index.html b/packages/docs/sandboxes/customheader-dockview/public/index.html
new file mode 100644
index 000000000..1f8a52426
--- /dev/null
+++ b/packages/docs/sandboxes/customheader-dockview/public/index.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+	<meta name="theme-color" content="#000000">
+	<!--
+      manifest.json provides metadata used when your web app is added to the
+      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
+    -->
+	<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+	<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
+	<!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+	<title>React App</title>
+</head>
+
+<body>
+	<noscript>
+		You need to enable JavaScript to run this app.
+	</noscript>
+	<div id="root"></div>
+	<!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+</body>
+
+</html>
diff --git a/packages/docs/sandboxes/customheader-dockview/src/app.tsx b/packages/docs/sandboxes/customheader-dockview/src/app.tsx
new file mode 100644
index 000000000..4106100a7
--- /dev/null
+++ b/packages/docs/sandboxes/customheader-dockview/src/app.tsx
@@ -0,0 +1,122 @@
+import {
+    DockviewDefaultTab,
+    DockviewReact,
+    DockviewReadyEvent,
+    IDockviewPanelHeaderProps,
+    IDockviewPanelProps,
+} from 'dockview';
+import * as React from 'react';
+
+interface CustomProps {
+    valueA: string;
+}
+
+const components = {
+    default: (props: IDockviewPanelProps<CustomProps>) => {
+        return <div style={{ padding: '20px' }}>{props.api.title}</div>;
+    },
+};
+
+const headerComponents = {
+    default: (props: IDockviewPanelHeaderProps<CustomProps>) => {
+        const onContextMenu = (event: React.MouseEvent) => {
+            event.preventDefault();
+            alert(
+                `This custom header was parsed the params ${JSON.stringify(
+                    props.params
+                )}`
+            );
+        };
+        return <DockviewDefaultTab onContextMenu={onContextMenu} {...props} />;
+    },
+};
+
+const CustomHeadersDockview = (props: { theme?: string }) => {
+    const onReady = (event: DockviewReadyEvent) => {
+        event.api.addPanel({
+            id: 'panel_1',
+            component: 'default',
+            title: 'Panel 1',
+            params: {
+                valueA: 'test value',
+            },
+        });
+        event.api.addPanel({
+            id: 'panel_2',
+            component: 'default',
+            title: 'Panel 2',
+            params: {
+                valueA: 'test value',
+            },
+        });
+        event.api.addPanel({
+            id: 'panel_3',
+            component: 'default',
+            title: 'Panel 3',
+            params: {
+                valueA: 'test value',
+            },
+        });
+        event.api.addPanel({
+            id: 'panel_4',
+            component: 'default',
+            title: 'Panel 4',
+            position: { referencePanel: 'panel_3', direction: 'right' },
+            params: {
+                valueA: 'test value',
+            },
+        });
+        event.api.addPanel({
+            id: 'panel_5',
+            component: 'default',
+            title: 'Panel 5',
+            position: { referencePanel: 'panel_4', direction: 'within' },
+            params: {
+                valueA: 'test value',
+            },
+        });
+        const panel6 = event.api.addPanel({
+            id: 'panel_6',
+            component: 'default',
+            title: 'Panel 6',
+            position: { referencePanel: 'panel_4', direction: 'below' },
+            params: {
+                valueA: 'test value',
+            },
+        });
+        panel6.group.locked = true;
+        panel6.group.header.hidden = true;
+        event.api.addPanel({
+            id: 'panel_7',
+            component: 'default',
+            title: 'Panel 7',
+            position: { referencePanel: 'panel_6', direction: 'right' },
+            params: {
+                valueA: 'test value',
+            },
+        });
+        event.api.addPanel({
+            id: 'panel_8',
+            component: 'default',
+
+            title: 'Panel 8',
+            position: { referencePanel: 'panel_7', direction: 'within' },
+            params: {
+                valueA: 'test value',
+            },
+        });
+
+        event.api.addGroup();
+    };
+
+    return (
+        <DockviewReact
+            components={components}
+            defaultTabComponent={headerComponents.default}
+            onReady={onReady}
+            className={`${props.theme || 'dockview-theme-abyss'}`}
+        />
+    );
+};
+
+export default CustomHeadersDockview;
diff --git a/packages/docs/sandboxes/customheader-dockview/src/index.tsx b/packages/docs/sandboxes/customheader-dockview/src/index.tsx
new file mode 100644
index 000000000..2fe1be232
--- /dev/null
+++ b/packages/docs/sandboxes/customheader-dockview/src/index.tsx
@@ -0,0 +1,20 @@
+import { StrictMode } from 'react';
+import * as ReactDOMClient from 'react-dom/client';
+import './styles.css';
+import 'dockview/dist/styles/dockview.css';
+
+import App from './app';
+
+const rootElement = document.getElementById('root');
+
+if (rootElement) {
+    const root = ReactDOMClient.createRoot(rootElement);
+
+    root.render(
+        <StrictMode>
+            <div className="app">
+                <App />
+            </div>
+        </StrictMode>
+    );
+}
diff --git a/packages/docs/sandboxes/customheader-dockview/src/styles.css b/packages/docs/sandboxes/customheader-dockview/src/styles.css
new file mode 100644
index 000000000..92b6a1b36
--- /dev/null
+++ b/packages/docs/sandboxes/customheader-dockview/src/styles.css
@@ -0,0 +1,16 @@
+body {
+  margin: 0px;
+  color: white;
+  font-family: sans-serif;
+  text-align: center;
+}
+
+#root {
+  height: 100vh;
+  width: 100vw;
+}
+
+.app {
+  height: 100%;
+
+}
diff --git a/packages/docs/sandboxes/customheader-dockview/tsconfig.json b/packages/docs/sandboxes/customheader-dockview/tsconfig.json
new file mode 100644
index 000000000..cdc4fb5f5
--- /dev/null
+++ b/packages/docs/sandboxes/customheader-dockview/tsconfig.json
@@ -0,0 +1,18 @@
+{
+    "compilerOptions": {
+        "outDir": "build/dist",
+        "module": "esnext",
+        "target": "es5",
+        "lib": ["es6", "dom"],
+        "sourceMap": true,
+        "allowJs": true,
+        "jsx": "react-jsx",
+        "moduleResolution": "node",
+        "rootDir": "src",
+        "forceConsistentCasingInFileNames": true,
+        "noImplicitReturns": true,
+        "noImplicitThis": true,
+        "noImplicitAny": true,
+        "strictNullChecks": true
+    }
+}
diff --git a/packages/docs/sandboxes/react/dockview/constraints/package.json b/packages/docs/sandboxes/react/dockview/constraints/package.json
new file mode 100644
index 000000000..f6d71aac3
--- /dev/null
+++ b/packages/docs/sandboxes/react/dockview/constraints/package.json
@@ -0,0 +1,32 @@
+{
+  "name": "dockview.constraints",
+  "description": "",
+  "keywords": [
+    "dockview"
+  ],
+  "version": "1.0.0",
+  "main": "src/index.tsx",
+  "dependencies": {
+    "dockview": "*",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.28",
+    "@types/react-dom": "^18.0.11",
+    "typescript": "^4.9.5",
+    "react-scripts": "*"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
+}
diff --git a/packages/docs/sandboxes/react/dockview/constraints/public/index.html b/packages/docs/sandboxes/react/dockview/constraints/public/index.html
new file mode 100644
index 000000000..1f8a52426
--- /dev/null
+++ b/packages/docs/sandboxes/react/dockview/constraints/public/index.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+	<meta name="theme-color" content="#000000">
+	<!--
+      manifest.json provides metadata used when your web app is added to the
+      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
+    -->
+	<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+	<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
+	<!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+	<title>React App</title>
+</head>
+
+<body>
+	<noscript>
+		You need to enable JavaScript to run this app.
+	</noscript>
+	<div id="root"></div>
+	<!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+</body>
+
+</html>
diff --git a/packages/docs/sandboxes/react/dockview/constraints/src/app.tsx b/packages/docs/sandboxes/react/dockview/constraints/src/app.tsx
new file mode 100644
index 000000000..7824e03a2
--- /dev/null
+++ b/packages/docs/sandboxes/react/dockview/constraints/src/app.tsx
@@ -0,0 +1,148 @@
+import {
+    DockviewApi,
+    DockviewReact,
+    DockviewReadyEvent,
+    GridConstraintChangeEvent,
+    IDockviewPanelProps,
+} from 'dockview';
+import * as React from 'react';
+
+const components = {
+    default: (props: IDockviewPanelProps) => {
+        const [contraints, setContraints] =
+            React.useState<GridConstraintChangeEvent | null>(null);
+
+        React.useEffect(() => {
+            props.api.group.api.onDidConstraintsChange((event) => {
+                setContraints(event);
+            });
+        }, []);
+
+        const onClick = () => {
+            props.api.group.api.setConstraints({
+                maximumWidth: 300,
+                maximumHeight: 300,
+            });
+        };
+
+        return (
+            <div
+                style={{
+                    height: '100%',
+                    padding: '20px',
+                    background: 'var(--dv-group-view-background-color)',
+                    color: 'white',
+                }}
+            >
+                <button onClick={onClick}>Set</button>
+                {contraints && (
+                    <div style={{ fontSize: '13px' }}>
+                        {typeof contraints.maximumHeight === 'number' && (
+                            <div
+                                style={{
+                                    border: '1px solid grey',
+                                    margin: '2px',
+                                    padding: '1px',
+                                }}
+                            >
+                                <span
+                                    style={{ color: 'grey' }}
+                                >{`Maximum Height: `}</span>
+                                <span>{`${contraints.maximumHeight}px`}</span>
+                            </div>
+                        )}
+                        {typeof contraints.minimumHeight === 'number' && (
+                            <div
+                                style={{
+                                    border: '1px solid grey',
+                                    margin: '2px',
+                                    padding: '1px',
+                                }}
+                            >
+                                <span
+                                    style={{ color: 'grey' }}
+                                >{`Minimum Height: `}</span>
+                                <span>{`${contraints.minimumHeight}px`}</span>
+                            </div>
+                        )}
+                        {typeof contraints.maximumWidth === 'number' && (
+                            <div
+                                style={{
+                                    border: '1px solid grey',
+                                    margin: '2px',
+                                    padding: '1px',
+                                }}
+                            >
+                                <span
+                                    style={{ color: 'grey' }}
+                                >{`Maximum Width: `}</span>
+                                <span>{`${contraints.maximumWidth}px`}</span>
+                            </div>
+                        )}
+                        {typeof contraints.minimumWidth === 'number' && (
+                            <div
+                                style={{
+                                    border: '1px solid grey',
+                                    margin: '2px',
+                                    padding: '1px',
+                                }}
+                            >
+                                <span
+                                    style={{ color: 'grey' }}
+                                >{`Minimum Width: `}</span>
+                                <span>{`${contraints.minimumWidth}px`}</span>
+                            </div>
+                        )}
+                    </div>
+                )}
+            </div>
+        );
+    },
+};
+
+const App = (props: { theme?: string }) => {
+    const [api, setApi] = React.useState<DockviewApi>();
+
+    const onReady = (event: DockviewReadyEvent) => {
+        const panel1 = event.api.addPanel({
+            id: 'panel_1',
+            component: 'default',
+        });
+
+        const panel2 = event.api.addPanel({
+            id: 'panel_2',
+            component: 'default',
+            position: {
+                referencePanel: panel1,
+                direction: 'right',
+            },
+        });
+
+        const panel3 = event.api.addPanel({
+            id: 'panel_3',
+            component: 'default',
+            position: {
+                referencePanel: panel2,
+                direction: 'right',
+            },
+        });
+
+        const panel4 = event.api.addPanel({
+            id: 'panel_4',
+            component: 'default',
+            position: {
+                direction: 'below',
+            },
+        });
+    };
+
+    return (
+        <DockviewReact
+            onReady={onReady}
+            components={components}
+            className={`${props.theme || 'dockview-theme-abyss'}`}
+        />
+    );
+};
+
+export default App;
diff --git a/packages/docs/sandboxes/react/dockview/constraints/src/index.tsx b/packages/docs/sandboxes/react/dockview/constraints/src/index.tsx
new file mode 100644
index 000000000..2fe1be232
--- /dev/null
+++ b/packages/docs/sandboxes/react/dockview/constraints/src/index.tsx
@@ -0,0 +1,20 @@
+import { StrictMode } from 'react';
+import * as ReactDOMClient from 'react-dom/client';
+import './styles.css';
+import 'dockview/dist/styles/dockview.css';
+
+import App from './app';
+
+const rootElement = document.getElementById('root');
+
+if (rootElement) {
+    const root = ReactDOMClient.createRoot(rootElement);
+
+    root.render(
+        <StrictMode>
+            <div className="app">
+                <App />
+            </div>
+        </StrictMode>
+    );
+}
diff --git a/packages/docs/sandboxes/react/dockview/constraints/src/styles.css b/packages/docs/sandboxes/react/dockview/constraints/src/styles.css
new file mode 100644
index 000000000..92b6a1b36
--- /dev/null
+++ b/packages/docs/sandboxes/react/dockview/constraints/src/styles.css
@@ -0,0 +1,16 @@
+body {
+  margin: 0px;
+  color: white;
+  font-family: sans-serif;
+  text-align: center;
+}
+
+#root {
+  height: 100vh;
+  width: 100vw;
+}
+
+.app {
+  height: 100%;
+
+}
diff --git a/packages/docs/sandboxes/react/dockview/constraints/tsconfig.json b/packages/docs/sandboxes/react/dockview/constraints/tsconfig.json
new file mode 100644
index 000000000..cdc4fb5f5
--- /dev/null
+++ b/packages/docs/sandboxes/react/dockview/constraints/tsconfig.json
@@ -0,0 +1,18 @@
+{
+    "compilerOptions": {
+        "outDir": "build/dist",
+        "module": "esnext",
+        "target": "es5",
+        "lib": ["es6", "dom"],
+        "sourceMap": true,
+        "allowJs": true,
+        "jsx": "react-jsx",
+        "moduleResolution": "node",
+        "rootDir": "src",
+        "forceConsistentCasingInFileNames": true,
+        "noImplicitReturns": true,
+        "noImplicitThis": true,
+        "noImplicitAny": true,
+        "strictNullChecks": true
+    }
+}
diff --git a/packages/docs/sandboxes/react/dockview/demo-dockview/package.json b/packages/docs/sandboxes/react/dockview/demo-dockview/package.json
new file mode 100644
index 000000000..a0fb2419f
--- /dev/null
+++ b/packages/docs/sandboxes/react/dockview/demo-dockview/package.json
@@ -0,0 +1,34 @@
+{
+  "name": "dockview.demo",
+  "description": "",
+  "keywords": [
+    "dockview"
+  ],
+  "version": "1.0.0",
+  "main": "src/index.tsx",
+  "dependencies": {
+    "dockview": "*",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "uuid": "^9.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.28",
+    "@types/react-dom": "^18.0.11",
+    "@types/uuid": "^9.0.0",
+    "typescript": "^4.9.5",
+    "react-scripts": "*"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
+}
diff --git a/packages/docs/sandboxes/react/dockview/demo-dockview/public/index.html b/packages/docs/sandboxes/react/dockview/demo-dockview/public/index.html
new file mode 100644
index 000000000..5a4850c1d
--- /dev/null
+++ b/packages/docs/sandboxes/react/dockview/demo-dockview/public/index.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+	<meta name="theme-color" content="#000000">
+	<!--
+      manifest.json provides metadata used when your web app is added to the
+      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
+    -->
+	<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+	<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
+
+	<!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+	<title>React App</title>
+</head>
+
+<body>
+	<noscript>
+		You need to enable JavaScript to run this app.
+	</noscript>
+	<div id="root"></div>
+	<!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+</body>
+
+</html>
diff --git a/packages/docs/sandboxes/react/dockview/demo-dockview/src/app.scss b/packages/docs/sandboxes/react/dockview/demo-dockview/src/app.scss
new file mode 100644
index 000000000..6abc9a64d
--- /dev/null
+++ b/packages/docs/sandboxes/react/dockview/demo-dockview/src/app.scss
@@ -0,0 +1,96 @@
+.group-control {
+    .action {
+        padding: 4px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        box-sizing: border-box;
+        font-size: 18px;
+        cursor: pointer;
+
+        &:hover {
+            border-radius: 2px;
+            background-color: var(--dv-icon-hover-background-color);
+        }
+    }
+}
+
+.data-table {
+    table {
+        font-size: 11px;
+        th {
+            padding: 0px 8px;
+        }
+    }
+}
+
+.action-container {
+    display: flex;
+    padding: 4px 0px;
+    overflow: auto;
+
+    button {
+        height: 25px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background-color: #1c254a;
+        color: white;
+        border: none;
+        cursor: pointer;
+        outline: 1px solid #4c65d4;
+
+        &:hover {
+            background-color: #222e62;
+        }
+    }
+
+    .text-button {
+        margin: 0px 4px;
+    }
+
+    .button-action {
+        margin: 0px 4px;
+        // display: flex;
+
+        .selected {
+            background-color: #4864dc;
+        }
+    }
+
+    .button-group {
+        button {
+            margin-right: 0px;
+        }
+    }
+
+    .demo-button {
+        min-width: 50px;
+        padding: 0px 2px;
+        border-radius: 0px;
+        display: flex;
+        flex-grow: 1;
+        align-items: center;
+        outline: 1px solid #4c65d4;
+    }
+
+    .demo-icon-button {
+        outline: 1px solid #4c65d4;
+        flex-grow: 1;
+        display: flex;
+        align-items: center;
+        border-radius: 0px;
+        padding: 0px 4px;
+        border: none;
+        cursor: pointer;
+
+        &:disabled {
+            color: gray;
+            cursor: help;
+        }
+
+        span {
+            font-size: 16px;
+        }
+    }
+}
diff --git a/packages/docs/sandboxes/react/dockview/demo-dockview/src/app.tsx b/packages/docs/sandboxes/react/dockview/demo-dockview/src/app.tsx
new file mode 100644
index 000000000..e2449a4ab
--- /dev/null
+++ b/packages/docs/sandboxes/react/dockview/demo-dockview/src/app.tsx
@@ -0,0 +1,431 @@
+import {
+    DockviewDefaultTab,
+    DockviewReact,
+    DockviewReadyEvent,
+    IDockviewPanelHeaderProps,
+    IDockviewPanelProps,
+    DockviewApi,
+} from 'dockview';
+import * as React from 'react';
+import './app.scss';
+import { defaultConfig } from './defaultLayout';
+import { GridActions } from './gridActions';
+import { PanelActions } from './panelActions';
+import { GroupActions } from './groupActions';
+import { LeftControls, PrefixHeaderControls, RightControls } from './controls';
+import { Table, usePanelApiMetadata } from './debugPanel';
+
+const DebugContext = React.createContext<boolean>(false);
+
+const Option = (props: {
+    title: string;
+    onClick: () => void;
+    value: string;
+}) => {
+    return (
+        <div>
+            <span>{`${props.title}: `}</span>
+            <button onClick={props.onClick}>{props.value}</button>
+        </div>
+    );
+};
+
+const components = {
+    default: (props: IDockviewPanelProps) => {
+        const isDebug = React.useContext(DebugContext);
+        const metadata = usePanelApiMetadata(props.api);
+
+        return (
+            <div
+                style={{
+                    height: '100%',
+                    overflow: 'auto',
+                    position: 'relative',
+                    padding: 5,
+                    border: isDebug ? '2px dashed orange' : '',
+                }}
+            >
+                <span
+                    style={{
+                        position: 'absolute',
+                        top: '50%',
+                        left: '50%',
+                        transform: 'translate(-50%,-50%)',
+                        pointerEvents: 'none',
+                        fontSize: '42px',
+                        opacity: 0.5,
+                    }}
+                >
+                    {props.api.title}
+                </span>
+
+                {isDebug && (
+                    <div style={{ fontSize: '0.8em' }}>
+                        <Option
+                            title="Panel Rendering Mode"
+                            value={metadata.renderer.value}
+                            onClick={() =>
+                                props.api.setRenderer(
+                                    props.api.renderer === 'always'
+                                        ? 'onlyWhenVisible'
+                                        : 'always'
+                                )
+                            }
+                        />
+
+                        <Table data={metadata} />
+                    </div>
+                )}
+            </div>
+        );
+    },
+    nested: (props: IDockviewPanelProps) => {
+        return (
+            <DockviewReact
+                components={components}
+                onReady={(event: DockviewReadyEvent) => {
+                    event.api.addPanel({ id: 'panel_1', component: 'default' });
+                    event.api.addPanel({ id: 'panel_2', component: 'default' });
+                    event.api.addPanel({
+                        id: 'panel_3',
+                        component: 'default',
+                        floating: true,
+                    });
+                }}
+                className={'dockview-theme-abyss'}
+            />
+        );
+    },
+    iframe: (props: IDockviewPanelProps) => {
+        return (
+            <iframe
+                onMouseDown={() => {
+                    if (!props.api.isActive) {
+                        props.api.setActive();
+                    }
+                }}
+                style={{
+                    width: '100%',
+                    height: '100%',
+                }}
+                src="https://dockview.dev"
+            />
+        );
+    },
+};
+
+const headerComponents = {
+    default: (props: IDockviewPanelHeaderProps) => {
+        const onContextMenu = (event: React.MouseEvent) => {
+            event.preventDefault();
+            alert('context menu');
+        };
+        return <DockviewDefaultTab onContextMenu={onContextMenu} {...props} />;
+    },
+};
+
+const colors = [
+    'rgba(255,0,0,0.2)',
+    'rgba(0,255,0,0.2)',
+    'rgba(0,0,255,0.2)',
+    'rgba(255,255,0,0.2)',
+    'rgba(0,255,255,0.2)',
+    'rgba(255,0,255,0.2)',
+];
+let count = 0;
+
+const WatermarkComponent = () => {
+    return <div>custom watermark</div>;
+};
+
+const DockviewDemo = (props: { theme?: string }) => {
+    const [logLines, setLogLines] = React.useState<
+        { text: string; timestamp?: Date; backgroundColor?: string }[]
+    >([]);
+
+    const [panels, setPanels] = React.useState<string[]>([]);
+    const [groups, setGroups] = React.useState<string[]>([]);
+    const [api, setApi] = React.useState<DockviewApi>();
+
+    const [activePanel, setActivePanel] = React.useState<string>();
+    const [activeGroup, setActiveGroup] = React.useState<string>();
+
+    const [pending, setPending] = React.useState<
+        { text: string; timestamp?: Date }[]
+    >([]);
+
+    const addLogLine = (message: string) => {
+        setPending((line) => [
+            { text: message, timestamp: new Date() },
+            ...line,
+        ]);
+    };
+
+    React.useLayoutEffect(() => {
+        if (pending.length === 0) {
+            return;
+        }
+        const color = colors[count++ % colors.length];
+        setLogLines((lines) => [
+            ...pending.map((_) => ({ ..._, backgroundColor: color })),
+            ...lines,
+        ]);
+        setPending([]);
+    }, [pending]);
+
+    const onReady = (event: DockviewReadyEvent) => {
+        setApi(event.api);
+
+        event.api.onDidAddPanel((event) => {
+            setPanels((_) => [..._, event.id]);
+            addLogLine(`Panel Added ${event.id}`);
+        });
+        event.api.onDidActivePanelChange((event) => {
+            setActivePanel(event?.id);
+            addLogLine(`Panel Activated ${event?.id}`);
+        });
+        event.api.onDidRemovePanel((event) => {
+            setPanels((_) => {
+                const next = [..._];
+                next.splice(
+                    next.findIndex((x) => x === event.id),
+                    1
+                );
+
+                return next;
+            });
+            addLogLine(`Panel Removed ${event.id}`);
+        });
+
+        event.api.onDidAddGroup((event) => {
+            setGroups((_) => [..._, event.id]);
+            addLogLine(`Group Added ${event.id}`);
+        });
+
+        event.api.onDidMovePanel((event) => {
+            addLogLine(`Panel Moved ${event.panel.id}`);
+        });
+
+        event.api.onDidRemoveGroup((event) => {
+            setGroups((_) => {
+                const next = [..._];
+                next.splice(
+                    next.findIndex((x) => x === event.id),
+                    1
+                );
+
+                return next;
+            });
+            addLogLine(`Group Removed ${event.id}`);
+        });
+
+        event.api.onDidActiveGroupChange((event) => {
+            setActiveGroup(event?.id);
+            addLogLine(`Group Activated ${event?.id}`);
+        });
+
+        const state = localStorage.getItem('dv-demo-state');
+        if (state) {
+            try {
+                event.api.fromJSON(JSON.parse(state));
+                return;
+            } catch {
+                localStorage.removeItem('dv-demo-state');
+            }
+            return;
+        }
+
+        defaultConfig(event.api);
+    };
+
+    const [watermark, setWatermark] = React.useState<boolean>(false);
+
+    const [gapCheck, setGapCheck] = React.useState<boolean>(false);
+
+    const css = React.useMemo(() => {
+        if (!gapCheck) {
+            return {};
+        }
+
+        return {
+            '--dv-group-gap-size': '0.5rem',
+            '--demo-border': '5px dashed purple',
+        } as React.CSSProperties;
+    }, [gapCheck]);
+
+    const [showLogs, setShowLogs] = React.useState<boolean>(false);
+    const [debug, setDebug] = React.useState<boolean>(false);
+
+    return (
+        <div
+            style={{
+                height: '100%',
+                display: 'flex',
+                flexDirection: 'column',
+                flexGrow: 1,
+                padding: '8px',
+                backgroundColor: 'rgba(0,0,50,0.25)',
+                borderRadius: '8px',
+                position: 'relative',
+                ...css,
+            }}
+        >
+            <div>
+                <GridActions
+                    api={api}
+                    toggleCustomWatermark={() => setWatermark(!watermark)}
+                    hasCustomWatermark={watermark}
+                />
+                {api && (
+                    <PanelActions
+                        api={api}
+                        panels={panels}
+                        activePanel={activePanel}
+                    />
+                )}
+                {api && (
+                    <GroupActions
+                        api={api}
+                        groups={groups}
+                        activeGroup={activeGroup}
+                    />
+                )}
+                {/* <div>
+                    <button
+                        onClick={() => {
+                            setGapCheck(!gapCheck);
+                        }}
+                    >
+                        {gapCheck ? 'Disable Gap Check' : 'Enable Gap Check'}
+                    </button>
+                </div> */}
+            </div>
+            <div
+                className="action-container"
+                style={{
+                    display: 'flex',
+                    justifyContent: 'flex-end',
+                    alignItems: 'center',
+                    padding: '4px',
+                }}
+            >
+                <button
+                    onClick={() => {
+                        setDebug(!debug);
+                    }}
+                >
+                    <span className="material-symbols-outlined">
+                        engineering
+                    </span>
+                </button>
+                <button
+                    onClick={() => {
+                        setShowLogs(!showLogs);
+                    }}
+                >
+                    <span style={{ paddingRight: '4px' }}>
+                        {`${showLogs ? 'Hide' : 'Show'} Events Log`}
+                    </span>
+                    <span className="material-symbols-outlined">terminal</span>
+                </button>
+            </div>
+            <div
+                style={{
+                    flexGrow: 1,
+                    height: 0,
+                    display: 'flex',
+                }}
+            >
+                <div
+                    style={{
+                        flexGrow: 1,
+                        overflow: 'hidden',
+                        height: '100%',
+                        display: 'flex',
+                    }}
+                >
+                    <DebugContext.Provider value={debug}>
+                        <DockviewReact
+                            components={components}
+                            defaultTabComponent={headerComponents.default}
+                            rightHeaderActionsComponent={RightControls}
+                            leftHeaderActionsComponent={LeftControls}
+                            prefixHeaderActionsComponent={PrefixHeaderControls}
+                            watermarkComponent={
+                                watermark ? WatermarkComponent : undefined
+                            }
+                            onReady={onReady}
+                            className={props.theme || 'dockview-theme-abyss'}
+                        />
+                    </DebugContext.Provider>
+                </div>
+
+                {showLogs && (
+                    <div
+                        style={{
+                            width: '400px',
+                            backgroundColor: 'black',
+                            color: 'white',
+                            overflow: 'auto',
+                            fontFamily: 'monospace',
+                            marginLeft: '10px',
+                            flexShrink: 0,
+                        }}
+                    >
+                        {logLines.map((line, i) => {
+                            return (
+                                <div
+                                    style={{
+                                        height: '30px',
+                                        overflow: 'hidden',
+                                        textOverflow: 'ellipsis',
+                                        whiteSpace: 'nowrap',
+                                        fontSize: '13px',
+                                        display: 'flex',
+                                        alignItems: 'center',
+
+                                        backgroundColor: line.backgroundColor,
+                                    }}
+                                    key={i}
+                                >
+                                    <span
+                                        style={{
+                                            display: 'flex',
+                                            alignItems: 'center',
+                                            minWidth: '20px',
+                                            maxWidth: '20px',
+                                            color: 'gray',
+                                            borderRight: '1px solid gray',
+                                            marginRight: '4px',
+                                            paddingLeft: '4px',
+                                            height: '100%',
+                                        }}
+                                    >
+                                        {logLines.length - i}
+                                    </span>
+                                    <span>
+                                        {line.timestamp && (
+                                            <span
+                                                style={{
+                                                    fontSize: '0.7em',
+                                                    padding: '0px 2px',
+                                                }}
+                                            >
+                                                {line.timestamp
+                                                    .toISOString()
+                                                    .substring(11, 23)}
+                                            </span>
+                                        )}
+                                        <span>{line.text}</span>
+                                    </span>
+                                </div>
+                            );
+                        })}
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+};
+
+export default DockviewDemo;
diff --git a/packages/docs/sandboxes/react/dockview/demo-dockview/src/controls.tsx b/packages/docs/sandboxes/react/dockview/demo-dockview/src/controls.tsx
new file mode 100644
index 000000000..63032b5f4
--- /dev/null
+++ b/packages/docs/sandboxes/react/dockview/demo-dockview/src/controls.tsx
@@ -0,0 +1,148 @@
+import { IDockviewHeaderActionsProps } from 'dockview';
+import * as React from 'react';
+import { nextId } from './defaultLayout';
+
+const Icon = (props: {
+    icon: string;
+    title?: string;
+    onClick?: (event: React.MouseEvent) => void;
+}) => {
+    return (
+        <div title={props.title} className="action" onClick={props.onClick}>
+            <span
+                style={{ fontSize: 'inherit' }}
+                className="material-symbols-outlined"
+            >
+                {props.icon}
+            </span>
+        </div>
+    );
+};
+
+const groupControlsComponents: Record<string, React.FC> = {
+    panel_1: () => {
+        return <Icon icon="file_download" />;
+    },
+};
+
+export const RightControls = (props: IDockviewHeaderActionsProps) => {
+    const Component = React.useMemo(() => {
+        if (!props.isGroupActive || !props.activePanel) {
+            return null;
+        }
+
+        return groupControlsComponents[props.activePanel.id];
+    }, [props.isGroupActive, props.activePanel]);
+
+    const [isMaximized, setIsMaximized] = React.useState<boolean>(
+        props.containerApi.hasMaximizedGroup()
+    );
+
+    const [isPopout, setIsPopout] = React.useState<boolean>(
+        props.api.location.type === 'popout'
+    );
+
+    React.useEffect(() => {
+        const disposable = props.containerApi.onDidMaximizedGroupChange(() => {
+            setIsMaximized(props.containerApi.hasMaximizedGroup());
+        });
+
+        const disposable2 = props.api.onDidLocationChange(() => {
+            setIsPopout(props.api.location.type === 'popout');
+        });
+
+        return () => {
+            disposable.dispose();
+            disposable2.dispose();
+        };
+    }, [props.containerApi]);
+
+    const onClick = () => {
+        if (props.containerApi.hasMaximizedGroup()) {
+            props.containerApi.exitMaximizedGroup();
+        } else {
+            props.activePanel?.api.maximize();
+        }
+    };
+
+    const onClick2 = () => {
+        if (props.api.location.type !== 'popout') {
+            props.containerApi.addPopoutGroup(props.group);
+        } else {
+            props.api.moveTo({ position: 'right' });
+        }
+    };
+
+    return (
+        <div
+            className="group-control"
+            style={{
+                display: 'flex',
+                alignItems: 'center',
+                padding: '0px 8px',
+                height: '100%',
+                color: 'var(--dv-activegroup-visiblepanel-tab-color)',
+            }}
+        >
+            {props.isGroupActive && <Icon icon="star" />}
+            {Component && <Component />}
+            <Icon
+                title={isPopout ? 'Close Window' : 'Open In New Window'}
+                icon={isPopout ? 'close_fullscreen' : 'open_in_new'}
+                onClick={onClick2}
+            />
+            {!isPopout && (
+                <Icon
+                    title={isMaximized ? 'Minimize View' : 'Maximize View'}
+                    icon={isMaximized ? 'collapse_content' : 'expand_content'}
+                    onClick={onClick}
+                />
+            )}
+        </div>
+    );
+};
+
+export const LeftControls = (props: IDockviewHeaderActionsProps) => {
+    const onClick = () => {
+        props.containerApi.addPanel({
+            id: `id_${Date.now().toString()}`,
+            component: 'default',
+            title: `Tab ${nextId()}`,
+            position: {
+                referenceGroup: props.group,
+            },
+        });
+    };
+
+    return (
+        <div
+            className="group-control"
+            style={{
+                display: 'flex',
+                alignItems: 'center',
+                padding: '0px 8px',
+                height: '100%',
+                color: 'var(--dv-activegroup-visiblepanel-tab-color)',
+            }}
+        >
+            <Icon onClick={onClick} icon="add" />
+        </div>
+    );
+};
+
+export const PrefixHeaderControls = (props: IDockviewHeaderActionsProps) => {
+    return (
+        <div
+            className="group-control"
+            style={{
+                display: 'flex',
+                alignItems: 'center',
+                padding: '0px 8px',
+                height: '100%',
+                color: 'var(--dv-activegroup-visiblepanel-tab-color)',
+            }}
+        >
+            <Icon icon="Menu" />
+        </div>
+    );
+};
diff --git a/packages/docs/sandboxes/react/dockview/demo-dockview/src/debugPanel.tsx b/packages/docs/sandboxes/react/dockview/demo-dockview/src/debugPanel.tsx
new file mode 100644
index 000000000..4222ce63c
--- /dev/null
+++ b/packages/docs/sandboxes/react/dockview/demo-dockview/src/debugPanel.tsx
@@ -0,0 +1,164 @@
+import {
+    DockviewGroupLocation,
+    DockviewPanelApi,
+    DockviewPanelRenderer,
+} from 'dockview';
+import * as React from 'react';
+
+export interface PanelApiMetadata {
+    isActive: {
+        value: boolean;
+        count: number;
+    };
+    isVisible: {
+        value: boolean;
+        count: number;
+    };
+    renderer: {
+        value: DockviewPanelRenderer;
+        count: number;
+    };
+    isGroupActive: {
+        value: boolean;
+        count: number;
+    };
+    groupChanged: {
+        count: number;
+    };
+    location: {
+        value: DockviewGroupLocation;
+        count: number;
+    };
+    didFocus: {
+        count: number;
+    };
+    dimensions: {
+        count: number;
+        value: { height: number; width: number };
+    };
+}
+
+export const Table = (props: { data: PanelApiMetadata }) => {
+    return (
+        <div className="data-table">
+            <table>
+                <tr>
+                    <th>{'Key'}</th>
+                    <th>{'Count'}</th>
+                    <th>{'Value'}</th>
+                </tr>
+                {Object.entries(props.data).map(([key, value]) => {
+                    return (
+                        <tr key={key}>
+                            <th>{key}</th>
+                            <th>{value.count}</th>
+                            <th>{JSON.stringify(value.value, null, 4)}</th>
+                        </tr>
+                    );
+                })}
+            </table>
+        </div>
+    );
+};
+
+export function usePanelApiMetadata(api: DockviewPanelApi): PanelApiMetadata {
+    const [state, setState] = React.useState<PanelApiMetadata>({
+        isActive: { value: api.isActive, count: 0 },
+        isVisible: { value: api.isVisible, count: 0 },
+        renderer: { value: api.renderer, count: 0 },
+        isGroupActive: { value: api.isGroupActive, count: 0 },
+        groupChanged: { count: 0 },
+        location: { value: api.location, count: 0 },
+        didFocus: { count: 0 },
+        dimensions: {
+            count: 0,
+            value: { height: api.height, width: api.width },
+        },
+    });
+
+    React.useEffect(() => {
+        const d1 = api.onDidActiveChange((event) => {
+            setState((_) => ({
+                ..._,
+                isActive: {
+                    value: event.isActive,
+                    count: _.isActive.count + 1,
+                },
+            }));
+        });
+        const d2 = api.onDidActiveGroupChange((event) => {
+            setState((_) => ({
+                ..._,
+                isGroupActive: {
+                    value: event.isActive,
+                    count: _.isGroupActive.count + 1,
+                },
+            }));
+        });
+        const d3 = api.onDidDimensionsChange((event) => {
+            setState((_) => ({
+                ..._,
+                dimensions: {
+                    count: _.dimensions.count + 1,
+                    value: { height: event.height, width: event.width },
+                },
+            }));
+        });
+        const d4 = api.onDidFocusChange((event) => {
+            setState((_) => ({
+                ..._,
+                didFocus: {
+                    count: _.didFocus.count + 1,
+                },
+            }));
+        });
+        const d5 = api.onDidGroupChange((event) => {
+            setState((_) => ({
+                ..._,
+                groupChanged: {
+                    count: _.groupChanged.count + 1,
+                },
+            }));
+        });
+        const d7 = api.onDidLocationChange((event) => {
+            setState((_) => ({
+                ..._,
+                location: {
+                    value: event.location,
+                    count: _.location.count + 1,
+                },
+            }));
+        });
+        const d8 = api.onDidRendererChange((event) => {
+            setState((_) => ({
+                ..._,
+                renderer: {
+                    value: event.renderer,
+                    count: _.renderer.count + 1,
+                },
+            }));
+        });
+        const d9 = api.onDidVisibilityChange((event) => {
+            setState((_) => ({
+                ..._,
+                isVisible: {
+                    value: event.isVisible,
+                    count: _.isVisible.count + 1,
+                },
+            }));
+        });
+
+        return () => {
+            d1.dispose();
+            d2.dispose();
+            d3.dispose();
+            d4.dispose();
+            d5.dispose();
+            d7.dispose();
+            d8.dispose();
+            d9.dispose();
+        };
+    }, [api]);
+
+    return state;
+}
diff --git a/packages/docs/sandboxes/react/dockview/demo-dockview/src/defaultLayout.ts b/packages/docs/sandboxes/react/dockview/demo-dockview/src/defaultLayout.ts
new file mode 100644
index 000000000..9a44a5a49
--- /dev/null
+++ b/packages/docs/sandboxes/react/dockview/demo-dockview/src/defaultLayout.ts
@@ -0,0 +1,67 @@
+import { DockviewApi } from 'dockview';
+
+export const nextId = (() => {
+    let counter = 0;
+
+    return () => counter++;
+})();
+
+export function defaultConfig(api: DockviewApi) {
+    const panel1 = api.addPanel({
+        id: 'panel_1',
+        component: 'default',
+        renderer: 'always',
+        title: 'Panel 1',
+    });
+
+    api.addPanel({
+        id: 'panel_2',
+        component: 'default',
+        title: 'Panel 2',
+        position: { referencePanel: panel1 },
+    });
+
+    api.addPanel({
+        id: 'panel_3',
+        component: 'default',
+        title: 'Panel 3',
+        position: { referencePanel: panel1 },
+    });
+
+    const panel4 = api.addPanel({
+        id: 'panel_4',
+        component: 'default',
+        title: 'Panel 4',
+        position: { referencePanel: panel1, direction: 'right' },
+    });
+
+    const panel5 = api.addPanel({
+        id: 'panel_5',
+        component: 'default',
+        title: 'Panel 5',
+        position: { referencePanel: panel4 },
+    });
+
+    const panel6 = api.addPanel({
+        id: 'panel_6',
+        component: 'default',
+        title: 'Panel 6',
+        position: { referencePanel: panel5, direction: 'below' },
+    });
+
+    const panel7 = api.addPanel({
+        id: 'panel_7',
+        component: 'default',
+        title: 'Panel 7',
+        position: { referencePanel: panel6, direction: 'left' },
+    });
+
+    api.addPanel({
+        id: 'panel8',
+        component: 'default',
+        title: 'Panel 8',
+        position: { referencePanel: panel7, direction: 'below' },
+    });
+
+    panel1.api.setActive();
+}
diff --git a/packages/docs/sandboxes/react/dockview/demo-dockview/src/gridActions.tsx b/packages/docs/sandboxes/react/dockview/demo-dockview/src/gridActions.tsx
new file mode 100644
index 000000000..8feed27c9
--- /dev/null
+++ b/packages/docs/sandboxes/react/dockview/demo-dockview/src/gridActions.tsx
@@ -0,0 +1,216 @@
+import { DockviewApi } from 'dockview';
+import * as React from 'react';
+import { defaultConfig, nextId } from './defaultLayout';
+
+import { createRoot, Root } from 'react-dom/client';
+import { PanelBuilder } from './panelBuilder';
+
+let mount = document.querySelector('.popover-anchor') as HTMLElement | null;
+
+if (!mount) {
+    mount = document.createElement('div');
+    mount.className = 'popover-anchor';
+    document.body.insertBefore(mount, document.body.firstChild);
+}
+
+const PopoverComponent = (props: {
+    close: () => void;
+    component: React.FC<{ close: () => void }>;
+}) => {
+    const ref = React.useRef<HTMLDivElement>(null);
+
+    React.useEffect(() => {
+        const handler = (ev: MouseEvent) => {
+            let target = ev.target as HTMLElement;
+
+            while (target.parentElement) {
+                if (target === ref.current) {
+                    return;
+                }
+                target = target.parentElement;
+            }
+
+            props.close();
+        };
+
+        window.addEventListener('mousedown', handler);
+
+        return () => {
+            window.removeEventListener('mousedown', handler);
+        };
+    }, []);
+
+    return (
+        <div
+            style={{
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                zIndex: 9999,
+                height: '100%',
+                width: '100%',
+            }}
+        >
+            <div
+                ref={ref}
+                style={{
+                    position: 'absolute',
+                    top: '50%',
+                    left: '50%',
+                    transform: 'translate(-50%,-50%)',
+                    backgroundColor: 'black',
+                    color: 'white',
+                    padding: 10,
+                }}
+            >
+                <props.component close={props.close} />
+            </div>
+        </div>
+    );
+};
+
+function usePopover() {
+    return {
+        open: (Component: React.FC<{ close: () => void }>) => {
+            const el = document.createElement('div');
+            mount!.appendChild(el);
+            const root = createRoot(el);
+
+            root.render(
+                <PopoverComponent
+                    component={Component}
+                    close={() => {
+                        root.unmount();
+                        el.remove();
+                    }}
+                />
+            );
+        },
+    };
+}
+
+export const GridActions = (props: {
+    api?: DockviewApi;
+    hasCustomWatermark: boolean;
+    toggleCustomWatermark: () => void;
+}) => {
+    const onClear = () => {
+        props.api?.clear();
+    };
+
+    const onLoad = () => {
+        const state = localStorage.getItem('dv-demo-state');
+        if (state) {
+            try {
+                props.api?.fromJSON(JSON.parse(state));
+            } catch (err) {
+                console.error('failed to load state', err);
+                localStorage.removeItem('dv-demo-state');
+            }
+        }
+    };
+
+    const onSave = () => {
+        if (props.api) {
+            console.log(props.api.toJSON());
+            localStorage.setItem(
+                'dv-demo-state',
+                JSON.stringify(props.api.toJSON())
+            );
+        }
+    };
+
+    const onReset = () => {
+        if (props.api) {
+            try {
+                props.api.clear();
+                defaultConfig(props.api);
+            } catch (err) {
+                localStorage.removeItem('dv-demo-state');
+            }
+        }
+    };
+
+    const popover = usePopover();
+
+    const onAddPanel = (options?: { advanced: boolean }) => {
+        if (options?.advanced) {
+            popover.open(({ close }) => {
+                return <PanelBuilder api={props.api!} done={close} />;
+            });
+        } else {
+            props.api?.addPanel({
+                id: `id_${Date.now().toString()}`,
+                component: 'default',
+                title: `Tab ${nextId()}`,
+                renderer: 'always',
+            });
+        }
+    };
+
+    const onAddGroup = () => {
+        props.api?.addGroup();
+    };
+
+    const [gap, setGap] = React.useState(0);
+
+    React.useEffect(() => {
+        props.api?.setGap(gap);
+    }, [gap, props.api]);
+
+    return (
+        <div className="action-container">
+            <div className="button-group">
+                <button className="text-button" onClick={() => onAddPanel()}>
+                    Add Panel
+                </button>
+                <button
+                    className="demo-icon-button"
+                    onClick={() => onAddPanel({ advanced: true })}
+                >
+                    <span className="material-symbols-outlined">tune</span>
+                </button>
+            </div>
+            <button className="text-button" onClick={onAddGroup}>
+                Add Group
+            </button>
+            <span className="button-action">
+                <button
+                    className={
+                        props.hasCustomWatermark
+                            ? 'demo-button selected'
+                            : 'demo-button'
+                    }
+                    onClick={props.toggleCustomWatermark}
+                >
+                    Use Custom Watermark
+                </button>
+            </span>
+            <button className="text-button" onClick={onClear}>
+                Clear
+            </button>
+            <button className="text-button" onClick={onLoad}>
+                Load
+            </button>
+            <button className="text-button" onClick={onSave}>
+                Save
+            </button>
+            <button className="text-button" onClick={onReset}>
+                Reset
+            </button>
+            <span style={{ flexGrow: 1 }} />
+            <div style={{ display: 'flex' }}>
+                <span style={{ paddingRight: '4px' }}>Group Gap</span>
+                <input
+                    style={{ width: 40 }}
+                    type="number"
+                    min={0}
+                    max={99}
+                    step={1}
+                    value={gap}
+                    onChange={(event) => setGap(Number(event.target.value))}
+                />
+            </div>
+        </div>
+    );
+};
diff --git a/packages/docs/sandboxes/react/dockview/demo-dockview/src/groupActions.tsx b/packages/docs/sandboxes/react/dockview/demo-dockview/src/groupActions.tsx
new file mode 100644
index 000000000..815621b72
--- /dev/null
+++ b/packages/docs/sandboxes/react/dockview/demo-dockview/src/groupActions.tsx
@@ -0,0 +1,189 @@
+import {
+    DockviewApi,
+    DockviewGroupLocation,
+    DockviewGroupPanel,
+} from 'dockview';
+import * as React from 'react';
+
+const GroupAction = (props: {
+    groupId: string;
+    groups: string[];
+    api: DockviewApi;
+    activeGroup?: string;
+}) => {
+    const onClick = () => {
+        props.api?.getGroup(props.groupId)?.focus();
+    };
+
+    const isActive = props.activeGroup === props.groupId;
+
+    const [group, setGroup] = React.useState<DockviewGroupPanel | undefined>(
+        undefined
+    );
+
+    React.useEffect(() => {
+        const disposable = props.api.onDidLayoutFromJSON(() => {
+            setGroup(props.api.getGroup(props.groupId));
+        });
+
+        setGroup(props.api.getGroup(props.groupId));
+
+        return () => {
+            disposable.dispose();
+        };
+    }, [props.api, props.groupId]);
+
+    const [location, setLocation] =
+        React.useState<DockviewGroupLocation | null>(null);
+    const [isMaximized, setIsMaximized] = React.useState<boolean>(false);
+    const [isVisible, setIsVisible] = React.useState<boolean>(true);
+
+    React.useEffect(() => {
+        if (!group) {
+            setLocation(null);
+            return;
+        }
+
+        const disposable = group.api.onDidLocationChange((event) => {
+            setLocation(event.location);
+        });
+
+        const disposable2 = props.api.onDidMaximizedGroupChange(() => {
+            setIsMaximized(group.api.isMaximized());
+        });
+
+        const disposable3 = group.api.onDidVisibilityChange(() => {
+            setIsVisible(group.api.isVisible);
+        });
+
+        setLocation(group.api.location);
+        setIsMaximized(group.api.isMaximized());
+        setIsVisible(group.api.isVisible);
+
+        return () => {
+            disposable.dispose();
+            disposable2.dispose();
+            disposable3.dispose();
+        };
+    }, [group]);
+
+    return (
+        <div className="button-action">
+            <div style={{ display: 'flex' }}>
+                <button
+                    onClick={onClick}
+                    className={
+                        isActive ? 'demo-button selected' : 'demo-button'
+                    }
+                >
+                    {props.groupId}
+                </button>
+            </div>
+            <div style={{ display: 'flex' }}>
+                <button
+                    className={
+                        location?.type === 'floating'
+                            ? 'demo-icon-button selected'
+                            : 'demo-icon-button'
+                    }
+                    onClick={() => {
+                        if (group) {
+
+                            props.api.addFloatingGroup(group, {
+                                width: 400,
+                                height: 300,
+                                x: 50,
+                                y: 50,
+                                position: {
+                                    bottom: 50,
+                                    right: 50,
+                                },
+                            });
+
+                        }
+                    }}
+                >
+                    <span className="material-symbols-outlined">ad_group</span>
+                </button>
+                <button
+                    className={
+                        location?.type === 'popout'
+                            ? 'demo-icon-button selected'
+                            : 'demo-icon-button'
+                    }
+                    onClick={() => {
+                        if (group) {
+                            props.api.addPopoutGroup(group);
+                        }
+                    }}
+                >
+                    <span className="material-symbols-outlined">
+                        open_in_new
+                    </span>
+                </button>
+                <button
+                    className={
+                        isMaximized
+                            ? 'demo-icon-button selected'
+                            : 'demo-icon-button'
+                    }
+                    onClick={() => {
+                        if (group) {
+                            if (group.api.isMaximized()) {
+                                group.api.exitMaximized();
+                            } else {
+                                group.api.maximize();
+                            }
+                        }
+                    }}
+                >
+                    <span className="material-symbols-outlined">
+                        fullscreen
+                    </span>
+                </button>
+                <button
+                    className="demo-icon-button"
+                    onClick={() => {
+                        console.log(group);
+                        if (group) {
+                            if (group.api.isVisible) {
+                                group.api.setVisible(false);
+                            } else {
+                                group.api.setVisible(true);
+                            }
+                        }
+                    }}
+                >
+                    <span className="material-symbols-outlined">
+                        {isVisible ? 'visibility' : 'visibility_off'}
+                    </span>
+                </button>
+                <button
+                    className="demo-icon-button"
+                    onClick={() => {
+                        const panel = props.api?.getGroup(props.groupId);
+                        panel?.api.close();
+                    }}
+                >
+                    <span className="material-symbols-outlined">close</span>
+                </button>
+            </div>
+        </div>
+    );
+};
+
+export const GroupActions = (props: {
+    groups: string[];
+    api: DockviewApi;
+    activeGroup?: string;
+}) => {
+    return (
+        <div className="action-container">
+            {props.groups.map((groupId) => {
+                return (
+                    <GroupAction key={groupId} {...props} groupId={groupId} />
+                );
+            })}
+        </div>
+    );
+};
diff --git a/packages/docs/sandboxes/react/dockview/demo-dockview/src/index.tsx b/packages/docs/sandboxes/react/dockview/demo-dockview/src/index.tsx
new file mode 100644
index 000000000..2fe1be232
--- /dev/null
+++ b/packages/docs/sandboxes/react/dockview/demo-dockview/src/index.tsx
@@ -0,0 +1,20 @@
+import { StrictMode } from 'react';
+import * as ReactDOMClient from 'react-dom/client';
+import './styles.css';
+import 'dockview/dist/styles/dockview.css';
+
+import App from './app';
+
+const rootElement = document.getElementById('root');
+
+if (rootElement) {
+    const root = ReactDOMClient.createRoot(rootElement);
+
+    root.render(
+        <StrictMode>
+            <div className="app">
+                <App />
+            </div>
+        </StrictMode>
+    );
+}
diff --git a/packages/docs/sandboxes/react/dockview/demo-dockview/src/panelActions.tsx b/packages/docs/sandboxes/react/dockview/demo-dockview/src/panelActions.tsx
new file mode 100644
index 000000000..c81a63077
--- /dev/null
+++ b/packages/docs/sandboxes/react/dockview/demo-dockview/src/panelActions.tsx
@@ -0,0 +1,138 @@
+import { DockviewApi, IDockviewPanel } from 'dockview';
+import * as React from 'react';
+
+const PanelAction = (props: {
+    panels: string[];
+    api: DockviewApi;
+    activePanel?: string;
+    panelId: string;
+}) => {
+    const onClick = () => {
+        props.api.getPanel(props.panelId)?.focus();
+    };
+
+    React.useEffect(() => {
+        const panel = props.api.getPanel(props.panelId);
+        if (panel) {
+            const disposable = panel.api.onDidVisibilityChange((event) => {
+                setVisible(event.isVisible);
+            });
+            setVisible(panel.api.isVisible);
+
+            return () => {
+                disposable.dispose();
+            };
+        }
+    }, [props.api, props.panelId]);
+
+    const [panel, setPanel] = React.useState<IDockviewPanel | undefined>(
+        undefined
+    );
+
+    React.useEffect(() => {
+        const list = [
+            props.api.onDidLayoutFromJSON(() => {
+                setPanel(props.api.getPanel(props.panelId));
+            }),
+        ];
+
+        if (panel) {
+            const disposable = panel.api.onDidVisibilityChange((event) => {
+                setVisible(event.isVisible);
+            });
+            setVisible(panel.api.isVisible);
+
+            list.push(disposable);
+        }
+
+        setPanel(props.api.getPanel(props.panelId));
+
+        return () => {
+            list.forEach((l) => l.dispose());
+        };
+    }, [props.api, props.panelId]);
+
+    const [visible, setVisible] = React.useState<boolean>(true);
+
+    return (
+        <div className="button-action">
+            <div style={{ display: 'flex' }}>
+                <button
+                    className={
+                        props.activePanel === props.panelId
+                            ? 'demo-button selected'
+                            : 'demo-button'
+                    }
+                    onClick={onClick}
+                >
+                    {props.panelId}
+                </button>
+            </div>
+            <div style={{ display: 'flex' }}>
+                <button
+                    className="demo-icon-button"
+                    onClick={() => {
+                        const panel = props.api.getPanel(props.panelId);
+                        if (panel) {
+                            props.api.addFloatingGroup(panel, {
+                                position: {
+                                    width: 400,
+                                    height: 300,
+                                    bottom: 50,
+                                    right: 50,
+                                },
+                            });
+                        }
+                    }}
+                >
+                    <span className="material-symbols-outlined">ad_group</span>
+                </button>
+                <button
+                    className="demo-icon-button"
+                    onClick={() => {
+                        const panel = props.api.getPanel(props.panelId);
+                        if (panel) {
+                            props.api.addPopoutGroup(panel);
+                        }
+                    }}
+                >
+                    <span className="material-symbols-outlined">
+                        open_in_new
+                    </span>
+                </button>
+                <button
+                    className="demo-icon-button"
+                    onClick={() => {
+                        const panel = props.api.getPanel(props.panelId);
+                        panel?.api.close();
+                    }}
+                >
+                    <span className="material-symbols-outlined">close</span>
+                </button>
+                <button
+                    title="Panel visiblity cannot be edited manually."
+                    disabled={true}
+                    className="demo-icon-button"
+                >
+                    <span className="material-symbols-outlined">
+                        {visible ? 'visibility' : 'visibility_off'}
+                    </span>
+                </button>
+            </div>
+        </div>
+    );
+};
+
+export const PanelActions = (props: {
+    panels: string[];
+    api: DockviewApi;
+    activePanel?: string;
+}) => {
+    return (
+        <div className="action-container">
+            {props.panels.map((id) => {
+                return <PanelAction key={id} {...props} panelId={id} />;
+            })}
+        </div>
+    );
+};
diff --git a/packages/docs/sandboxes/react/dockview/demo-dockview/src/panelBuilder.tsx b/packages/docs/sandboxes/react/dockview/demo-dockview/src/panelBuilder.tsx
new file mode 100644
index 000000000..e6d53e05a
--- /dev/null
+++ b/packages/docs/sandboxes/react/dockview/demo-dockview/src/panelBuilder.tsx
@@ -0,0 +1,115 @@
+import { DockviewApi } from 'dockview';
+import * as React from 'react';
+import { nextId } from './defaultLayout';
+
+export const PanelBuilder = (props: { api: DockviewApi; done: () => void }) => {
+    const [parameters, setParameters] = React.useState<{
+        initialWidth?: number;
+        initialHeight?: number;
+        maximumHeight?: number;
+        maximumWidth?: number;
+        minimumHeight?: number;
+        minimumWidth?: number;
+    }>({});
+    return (
+        <div>
+            <div
+                style={{
+                    display: 'grid',
+                    gridTemplateColumns: '1fr 1fr',
+                }}
+            >
+                <div>{'Initial Width'}</div>
+                <input
+                    type="number"
+                    value={parameters.initialWidth}
+                    onChange={(event) =>
+                        setParameters((_) => ({
+                            ..._,
+                            initialWidth: Number(event.target.value),
+                        }))
+                    }
+                />
+                <div>{'Initial Height'}</div>
+                <input
+                    type="number"
+                    value={parameters.initialHeight}
+                    onChange={(event) =>
+                        setParameters((_) => ({
+                            ..._,
+                            initialHeight: Number(event.target.value),
+                        }))
+                    }
+                />
+                <div>{'Maximum Width'}</div>
+                <input
+                    type="number"
+                    value={parameters.maximumWidth}
+                    onChange={(event) =>
+                        setParameters((_) => ({
+                            ..._,
+                            maximumWidth: Number(event.target.value),
+                        }))
+                    }
+                />
+                <div>{'Maximum Height'}</div>
+                <input
+                    type="number"
+                    value={parameters.maximumHeight}
+                    onChange={(event) =>
+                        setParameters((_) => ({
+                            ..._,
+                            maximumHeight: Number(event.target.value),
+                        }))
+                    }
+                />
+                <div>{'Minimum Width'}</div>
+                <input
+                    type="number"
+                    value={parameters.minimumWidth}
+                    onChange={(event) =>
+                        setParameters((_) => ({
+                            ..._,
+                            minimumWidth: Number(event.target.value),
+                        }))
+                    }
+                />
+                <div>{'Minimum Height'}</div>
+                <input
+                    type="number"
+                    value={parameters.minimumHeight}
+                    onChange={(event) =>
+                        setParameters((_) => ({
+                            ..._,
+                            minimumHeight: Number(event.target.value),
+                        }))
+                    }
+                />
+            </div>
+            <div>
+                <button
+                    onClick={() => {
+                        props.done();
+                    }}
+                >
+                    Cancel
+                </button>
+                <button
+                    onClick={() => {
+                        props.api?.addPanel({
+                            id: `id_${Date.now().toString()}`,
+                            component: 'default',
+                            title: `Tab ${nextId()}`,
+                            renderer: 'always',
+                            ...parameters,
+                        });
+
+                        props.done();
+                    }}
+                >
+                    Go
+                </button>
+            </div>
+        </div>
+    );
+};
diff --git a/packages/docs/sandboxes/react/dockview/demo-dockview/src/styles.css b/packages/docs/sandboxes/react/dockview/demo-dockview/src/styles.css
new file mode 100644
index 000000000..92b6a1b36
--- /dev/null
+++ b/packages/docs/sandboxes/react/dockview/demo-dockview/src/styles.css
@@ -0,0 +1,16 @@
+body {
+  margin: 0px;
+  color: white;
+  font-family: sans-serif;
+  text-align: center;
+}
+
+#root {
+  height: 100vh;
+  width: 100vw;
+}
+
+.app {
+  height: 100%;
+
+}
diff --git a/packages/docs/sandboxes/react/dockview/demo-dockview/tsconfig.json b/packages/docs/sandboxes/react/dockview/demo-dockview/tsconfig.json
new file mode 100644
index 000000000..cdc4fb5f5
--- /dev/null
+++ b/packages/docs/sandboxes/react/dockview/demo-dockview/tsconfig.json
@@ -0,0 +1,18 @@
+{
+    "compilerOptions": {
+        "outDir": "build/dist",
+        "module": "esnext",
+        "target": "es5",
+        "lib": ["es6", "dom"],
+        "sourceMap": true,
+        "allowJs": true,
+        "jsx": "react-jsx",
+        "moduleResolution": "node",
+        "rootDir": "src",
+        "forceConsistentCasingInFileNames": true,
+        "noImplicitReturns": true,
+        "noImplicitThis": true,
+        "noImplicitAny": true,
+        "strictNullChecks": true
+    }
+}
diff --git a/packages/docs/sandboxes/react/dockview/dnd-events/package.json b/packages/docs/sandboxes/react/dockview/dnd-events/package.json
new file mode 100644
index 000000000..f13f19373
--- /dev/null
+++ b/packages/docs/sandboxes/react/dockview/dnd-events/package.json
@@ -0,0 +1,32 @@
+{
+  "name": "dockview.dnd-events",
+  "description": "",
+  "keywords": [
+    "dockview"
+  ],
+  "version": "1.0.0",
+  "main": "src/index.tsx",
+  "dependencies": {
+    "dockview": "*",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.28",
+    "@types/react-dom": "^18.0.11",
+    "typescript": "^4.9.5",
+    "react-scripts": "*"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
+}
diff --git a/packages/docs/sandboxes/react/dockview/dnd-events/public/index.html b/packages/docs/sandboxes/react/dockview/dnd-events/public/index.html
new file mode 100644
index 000000000..1f8a52426
--- /dev/null
+++ b/packages/docs/sandboxes/react/dockview/dnd-events/public/index.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+	<meta name="theme-color" content="#000000">
+	<!--
+      manifest.json provides metadata used when your web app is added to the
+      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
+    -->
+	<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+	<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
+	<!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+	<title>React App</title>
+</head>
+
+<body>
+	<noscript>
+		You need to enable JavaScript to run this app.
+	</noscript>
+	<div id="root"></div>
+	<!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+</body>
+
+</html>
diff --git a/packages/docs/sandboxes/react/dockview/dnd-events/src/app.tsx b/packages/docs/sandboxes/react/dockview/dnd-events/src/app.tsx
new file mode 100644
index 000000000..80d62fb19
--- /dev/null
+++ b/packages/docs/sandboxes/react/dockview/dnd-events/src/app.tsx
@@ -0,0 +1,142 @@
+import {
+    DockviewApi,
+    DockviewReact,
+    DockviewReadyEvent,
+    IDockviewPanelProps,
+} from 'dockview';
+import * as React from 'react';
+
+const Default = (props: IDockviewPanelProps) => {
+    return (
+        <div style={{ height: '100%' }}>
+            <div>{props.api.title}</div>
+        </div>
+    );
+};
+
+const components = {
+    default: Default,
+};
+
+const Component = (props: { theme?: string }) => {
+    const [disablePanelDrag, setDisablePanelDrag] =
+        React.useState<boolean>(false);
+    const [disableGroupDrag, setDisableGroupDrag] =
+        React.useState<boolean>(false);
+    const [disableOverlay, setDisableOverlay] = React.useState<boolean>(false);
+
+    const [api, setApi] = React.useState<DockviewApi>();
+
+    React.useEffect(() => {
+        if (!api) {
+            return;
+        }
+
+        const disposables = [
+            api.onWillDragPanel((e) => {
+                if (!disablePanelDrag) {
+                    return;
+                }
+                e.nativeEvent.preventDefault();
+            }),
+
+            api.onWillDragGroup((e) => {
+                if (!disableGroupDrag) {
+                    return;
+                }
+                e.nativeEvent.preventDefault();
+            }),
+            api.onWillShowOverlay((e) => {
+                console.log(e);
+
+                if (!disableOverlay) {
+                    return;
+                }
+
+                e.preventDefault();
+            }),
+
+            api.onWillDrop((e) => {
+                //
+            }),
+
+            api.onDidDrop((e) => {
+                //
+            }),
+        ];
+
+        return () => {
+            disposables.forEach((disposable) => {
+                disposable.dispose();
+            });
+        };
+    }, [api, disablePanelDrag, disableGroupDrag, disableOverlay]);
+
+    const onReady = (event: DockviewReadyEvent) => {
+        setApi(event.api);
+
+        event.api.addPanel({
+            id: 'panel_1',
+            component: 'default',
+        });
+
+        event.api.addPanel({
+            id: 'panel_2',
+            component: 'default',
+            position: {
+                direction: 'right',
+                referencePanel: 'panel_1',
+            },
+        });
+
+        event.api.addPanel({
+            id: 'panel_3',
+            component: 'default',
+            position: {
+                direction: 'below',
+                referencePanel: 'panel_1',
+            },
+        });
+        event.api.addPanel({
+            id: 'panel_4',
+            component: 'default',
+        });
+        event.api.addPanel({
+            id: 'panel_5',
+            component: 'default',
+        });
+    };
+
+    return (
+        <div
+            style={{ display: 'flex', flexDirection: 'column', height: '100%' }}
+        >
+            <div>
+                <button
+                    onClick={() => setDisablePanelDrag(!disablePanelDrag)}
+                >{`Panel Drag: ${
+                    disablePanelDrag ? 'disabled' : 'enabled'
+                }`}</button>
+                <button
+                    onClick={() => setDisableGroupDrag(!disableGroupDrag)}
+                >{`Group Drag: ${
+                    disableGroupDrag ? 'disabled' : 'enabled'
+                }`}</button>
+                <button
+                    onClick={() => setDisableOverlay(!disableOverlay)}
+                >{`Overlay: ${
+                    disableOverlay ? 'disabled' : 'enabled'
+                }`}</button>
+            </div>
+            <div style={{ flexGrow: 1 }}>
+                <DockviewReact
+                    className={`${props.theme || 'dockview-theme-abyss'}`}
+                    onReady={onReady}
+                    components={components}
+                />
+            </div>
+        </div>
+    );
+};
+
+export default Component;
diff --git a/packages/docs/sandboxes/react/dockview/dnd-events/src/index.tsx b/packages/docs/sandboxes/react/dockview/dnd-events/src/index.tsx
new file mode 100644
index 000000000..2fe1be232
--- /dev/null
+++ b/packages/docs/sandboxes/react/dockview/dnd-events/src/index.tsx
@@ -0,0 +1,20 @@
+import { StrictMode } from 'react';
+import * as ReactDOMClient from 'react-dom/client';
+import './styles.css';
+import 'dockview/dist/styles/dockview.css';
+
+import App from './app';
+
+const rootElement = document.getElementById('root');
+
+if (rootElement) {
+    const root = ReactDOMClient.createRoot(rootElement);
+
+    root.render(
+        <StrictMode>
+            <div className="app">
+                <App />
+            </div>
+        </StrictMode>
+    );
+}
diff --git a/packages/docs/sandboxes/react/dockview/dnd-events/src/styles.css b/packages/docs/sandboxes/react/dockview/dnd-events/src/styles.css
new file mode 100644
index 000000000..92b6a1b36
--- /dev/null
+++ b/packages/docs/sandboxes/react/dockview/dnd-events/src/styles.css
@@ -0,0 +1,16 @@
+body {
+  margin: 0px;
+  color: white;
+  font-family: sans-serif;
+  text-align: center;
+}
+
+#root {
+  height: 100vh;
+  width: 100vw;
+}
+
+.app {
+  height: 100%;
+
+}
diff --git a/packages/docs/sandboxes/react/dockview/dnd-events/tsconfig.json b/packages/docs/sandboxes/react/dockview/dnd-events/tsconfig.json
new file mode 100644
index 000000000..cdc4fb5f5
--- /dev/null
+++ b/packages/docs/sandboxes/react/dockview/dnd-events/tsconfig.json
@@ -0,0 +1,18 @@
+{
+    "compilerOptions": {
+        "outDir": "build/dist",
+        "module": "esnext",
+        "target": "es5",
+        "lib": ["es6", "dom"],
+        "sourceMap": true,
+        "allowJs": true,
+        "jsx": "react-jsx",
+        "moduleResolution": "node",
+        "rootDir": "src",
+        "forceConsistentCasingInFileNames": true,
+        "noImplicitReturns": true,
+        "noImplicitThis": true,
+        "noImplicitAny": true,
+        "strictNullChecks": true
+    }
+}
diff --git a/packages/docs/sandboxes/react/dockview/dnd-external/package.json b/packages/docs/sandboxes/react/dockview/dnd-external/package.json
new file mode 100644
index 000000000..81a6d6880
--- /dev/null
+++ b/packages/docs/sandboxes/react/dockview/dnd-external/package.json
@@ -0,0 +1,32 @@
+{
+  "name": "dockview.dnd-external",
+  "description": "",
+  "keywords": [
+    "dockview"
+  ],
+  "version": "1.0.0",
+  "main": "src/index.tsx",
+  "dependencies": {
+    "dockview": "*",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.28",
+    "@types/react-dom": "^18.0.11",
+    "typescript": "^4.9.5",
+    "react-scripts": "*"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
+}
\ No newline at end of file
diff --git a/packages/docs/sandboxes/react/dockview/dnd-external/public/index.html b/packages/docs/sandboxes/react/dockview/dnd-external/public/index.html
new file mode 100644
index 000000000..1f8a52426
--- /dev/null
+++ b/packages/docs/sandboxes/react/dockview/dnd-external/public/index.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+	<meta name="theme-color" content="#000000">
+	<!--
+      manifest.json provides metadata used when your web app is added to the
+      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
+    -->
+	<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+	<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
+	<!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+	<title>React App</title>
+</head>
+
+<body>
+	<noscript>
+		You need to enable JavaScript to run this app.
+	</noscript>
+	<div id="root"></div>
+	<!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+</body>
+
+</html>
diff --git a/packages/docs/sandboxes/react/dockview/dnd-external/src/app.tsx b/packages/docs/sandboxes/react/dockview/dnd-external/src/app.tsx
new file mode 100644
index 000000000..8d3c70cad
--- /dev/null
+++ b/packages/docs/sandboxes/react/dockview/dnd-external/src/app.tsx
@@ -0,0 +1,192 @@
+import {
+    DockviewApi,
+    DockviewDndOverlayEvent,
+    DockviewDidDropEvent,
+    DockviewReact,
+    DockviewReadyEvent,
+    IDockviewPanelProps,
+    positionToDirection,
+} from 'dockview';
+import * as React from 'react';
+
+const components = {
+    default: (props: IDockviewPanelProps<{ title: string }>) => {
+        return (
+            <div style={{ padding: '20px' }}>
+                <div>{props.params.title}</div>
+            </div>
+        );
+    },
+};
+
+const DraggableElement = () => (
+    <span
+        tabIndex={-1}
+        onDragStart={(event) => {
+            if (event.dataTransfer) {
+                event.dataTransfer.effectAllowed = 'move';
+
+                event.dataTransfer.setData('text/plain', 'nothing');
+            }
+        }}
+        style={{
+            backgroundColor: 'orange',
+            padding: '0px 8px',
+            borderRadius: '4px',
+            width: '100px',
+            cursor: 'pointer',
+        }}
+        draggable={true}
+    >
+        Drag me into the dock
+    </span>
+);
+
+const DndDockview = (props: { renderVisibleOnly: boolean; theme?: string }) => {
+    const [api, setApi] = React.useState<DockviewApi>();
+
+    React.useEffect(() => {
+        if (!api) {
+            return;
+        }
+
+        api.addPanel({
+            id: 'panel_1',
+            component: 'default',
+            params: {
+                title: 'Panel 1',
+            },
+        });
+
+        api.addPanel({
+            id: 'panel_2',
+            component: 'default',
+            params: {
+                title: 'Panel 2',
+            },
+        });
+
+        api.addPanel({
+            id: 'panel_3',
+            component: 'default',
+            params: {
+                title: 'Panel 3',
+            },
+        });
+
+        api.addPanel({
+            id: 'panel_4',
+            component: 'default',
+            params: {
+                title: 'Panel 4',
+            },
+            position: { referencePanel: 'panel_1', direction: 'right' },
+        });
+
+        const panelDragDisposable = api.onWillDragPanel((event) => {
+            const dataTransfer = event.nativeEvent.dataTransfer;
+
+            if (dataTransfer) {
+                dataTransfer.setData(
+                    'text/plain',
+                    'Some custom panel data transfer data'
+                );
+                dataTransfer.setData(
+                    'text/json',
+                    '{text: "Some custom panel data transfer data"}'
+                );
+            }
+        });
+
+        const groupDragDisposable = api.onWillDragGroup((event) => {
+            const dataTransfer = event.nativeEvent.dataTransfer;
+
+            if (dataTransfer) {
+                dataTransfer.setData(
+                    'text/plain',
+                    'Some custom group data transfer data'
+                );
+                dataTransfer.setData(
+                    'text/json',
+                    '{text: "Some custom group data transfer data"}'
+                );
+            }
+        });
+
+        return () => {
+            panelDragDisposable.dispose();
+            groupDragDisposable.dispose();
+        };
+    }, [api]);
+
+    const onReady = (event: DockviewReadyEvent) => {
+        setApi(event.api);
+    };
+
+    const onDidDrop = (event: DockviewDidDropEvent) => {
+        event.api.addPanel({
+            id: 'test',
+            component: 'default',
+            position: {
+                direction: positionToDirection(event.position),
+                referenceGroup: event.group || undefined,
+            },
+        });
+    };
+
+    const showDndOverlay = (event: DockviewDndOverlayEvent) => {
+        return true;
+    };
+
+    const onDrop = (event: React.DragEvent) => {
+        const dataTransfer = event.dataTransfer;
+
+        let text = 'The following dataTransfer data was found:\n';
+
+        for (let i = 0; i < dataTransfer.items.length; i++) {
+            const item = dataTransfer.items[i];
+            const value = dataTransfer.getData(item.type);
+            text += `type=${item.type},data=${value}\n`;
+        }
+
+        alert(text);
+    };
+
+    return (
+        <div
+            style={{
+                display: 'flex',
+                flexDirection: 'column',
+                height: '100%',
+            }}
+        >
+            <div style={{ margin: '2px 0px' }}>
+                <DraggableElement />
+                <div
+                    style={{
+                        padding: '0px 4px',
+                        backgroundColor: 'black',
+                        borderRadius: '2px',
+                        color: 'white',
+                    }}
+                    onDrop={onDrop}
+                >
+                    Drop a tab or group here to inspect the attached metadata
+                </div>
+            </div>
+            <DockviewReact
+                components={components}
+                onReady={onReady}
+                className={`${props.theme || 'dockview-theme-abyss'}`}
+                onDidDrop={onDidDrop}
+                showDndOverlay={showDndOverlay}
+                rootOverlayModel={{
+                    size: { value: 100, type: 'pixels' },
+                    activationSize: { value: 5, type: 'percentage' },
+                }}
+            />
+        </div>
+    );
+};
+
+export default DndDockview;
diff --git a/packages/docs/sandboxes/react/dockview/dnd-external/src/index.tsx b/packages/docs/sandboxes/react/dockview/dnd-external/src/index.tsx
new file mode 100644
index 000000000..2fe1be232
--- /dev/null
+++ b/packages/docs/sandboxes/react/dockview/dnd-external/src/index.tsx
@@ -0,0 +1,20 @@
+import { StrictMode } from 'react';
+import * as ReactDOMClient from 'react-dom/client';
+import './styles.css';
+import 'dockview/dist/styles/dockview.css';
+
+import App from './app';
+
+const rootElement = document.getElementById('root');
+
+if (rootElement) {
+    const root = ReactDOMClient.createRoot(rootElement);
+
+    root.render(
+        <StrictMode>
+            <div className="app">
+                <App />
+            </div>
+        </StrictMode>
+    );
+}
diff --git a/packages/docs/sandboxes/react/dockview/dnd-external/src/styles.css b/packages/docs/sandboxes/react/dockview/dnd-external/src/styles.css
new file mode 100644
index 000000000..92b6a1b36
--- /dev/null
+++ b/packages/docs/sandboxes/react/dockview/dnd-external/src/styles.css
@@ -0,0 +1,16 @@
+body {
+  margin: 0px;
+  color: white;
+  font-family: sans-serif;
+  text-align: center;
+}
+
+#root {
+  height: 100vh;
+  width: 100vw;
+}
+
+.app {
+  height: 100%;
+
+}
diff --git a/packages/docs/sandboxes/react/dockview/dnd-external/tsconfig.json b/packages/docs/sandboxes/react/dockview/dnd-external/tsconfig.json
new file mode 100644
index 000000000..cdc4fb5f5
--- /dev/null
+++ b/packages/docs/sandboxes/react/dockview/dnd-external/tsconfig.json
@@ -0,0 +1,18 @@
+{
+    "compilerOptions": {
+        "outDir": "build/dist",
+        "module": "esnext",
+        "target": "es5",
+        "lib": ["es6", "dom"],
+        "sourceMap": true,
+        "allowJs": true,
+        "jsx": "react-jsx",
+        "moduleResolution": "node",
+        "rootDir": "src",
+        "forceConsistentCasingInFileNames": true,
+        "noImplicitReturns": true,
+        "noImplicitThis": true,
+        "noImplicitAny": true,
+        "strictNullChecks": true
+    }
+}
diff --git a/packages/docs/sandboxes/react/dockview/floating-groups/package.json b/packages/docs/sandboxes/react/dockview/floating-groups/package.json
new file mode 100644
index 000000000..cc2e6edd5
--- /dev/null
+++ b/packages/docs/sandboxes/react/dockview/floating-groups/package.json
@@ -0,0 +1,32 @@
+{
+  "name": "dockview.floating-groups",
+  "description": "",
+  "keywords": [
+    "dockview"
+  ],
+  "version": "1.0.0",
+  "main": "src/index.tsx",
+  "dependencies": {
+    "dockview": "*",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.28",
+    "@types/react-dom": "^18.0.11",
+    "typescript": "^4.9.5",
+    "react-scripts": "*"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
+}
diff --git a/packages/docs/sandboxes/react/dockview/floating-groups/public/index.html b/packages/docs/sandboxes/react/dockview/floating-groups/public/index.html
new file mode 100644
index 000000000..1f8a52426
--- /dev/null
+++ b/packages/docs/sandboxes/react/dockview/floating-groups/public/index.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+	<meta name="theme-color" content="#000000">
+	<!--
+      manifest.json provides metadata used when your web app is added to the
+      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
+    -->
+	<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+	<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
+	<!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+	<title>React App</title>
+</head>
+
+<body>
+	<noscript>
+		You need to enable JavaScript to run this app.
+	</noscript>
+	<div id="root"></div>
+	<!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+</body>
+
+</html>
diff --git a/packages/docs/sandboxes/react/dockview/floating-groups/src/app.tsx b/packages/docs/sandboxes/react/dockview/floating-groups/src/app.tsx
new file mode 100644
index 000000000..760da4458
--- /dev/null
+++ b/packages/docs/sandboxes/react/dockview/floating-groups/src/app.tsx
@@ -0,0 +1,301 @@
+import {
+    DockviewApi,
+    DockviewGroupPanel,
+    DockviewReact,
+    DockviewReadyEvent,
+    IDockviewHeaderActionsProps,
+    IDockviewPanelProps,
+    SerializedDockview,
+} from 'dockview';
+import * as React from 'react';
+import { Icon } from './utils';
+
+const components = {
+    default: (props: IDockviewPanelProps<{ title: string }>) => {
+        return (
+            <div
+                style={{
+                    height: '100%',
+                    padding: '20px',
+                    background: 'var(--dv-group-view-background-color)',
+                }}
+            >
+                {props.params.title}
+            </div>
+        );
+    },
+};
+
+const counter = (() => {
+    let i = 0;
+
+    return {
+        next: () => ++i,
+    };
+})();
+
+function loadDefaultLayout(api: DockviewApi) {
+    api.addPanel({
+        id: 'panel_1',
+        component: 'default',
+    });
+
+    api.addPanel({
+        id: 'panel_2',
+        component: 'default',
+    });
+
+    api.addPanel({
+        id: 'panel_3',
+        component: 'default',
+    });
+
+    const panel4 = api.addPanel({
+        id: 'panel_4',
+        component: 'default',
+        floating: true,
+    });
+
+    api.addPanel({
+        id: 'panel_5',
+        component: 'default',
+        floating: false,
+        position: { referencePanel: panel4 },
+    });
+
+    api.addPanel({
+        id: 'panel_6',
+        component: 'default',
+    });
+}
+
+let panelCount = 0;
+
+function addPanel(api: DockviewApi) {
+    api.addPanel({
+        id: (++panelCount).toString(),
+        title: `Tab ${panelCount}`,
+        component: 'default',
+    });
+}
+
+function addFloatingPanel2(api: DockviewApi) {
+    api.addPanel({
+        id: (++panelCount).toString(),
+        title: `Tab ${panelCount}`,
+        component: 'default',
+        floating: { width: 250, height: 150, left: 50, top: 50 },
+    });
+}
+
+function safeParse<T>(value: any): T | null {
+    try {
+        return JSON.parse(value) as T;
+    } catch (err) {
+        return null;
+    }
+}
+
+const useLocalStorage = <T,>(
+    key: string
+): [T | null, (setter: T | null) => void] => {
+    const [state, setState] = React.useState<T | null>(
+        safeParse(localStorage.getItem(key))
+    );
+
+    React.useEffect(() => {
+        const _state = localStorage.getItem('key');
+        try {
+            if (_state !== null) {
+                setState(JSON.parse(_state));
+            }
+        } catch (err) {
+            //
+        }
+    }, [key]);
+
+    return [
+        state,
+        (_state: T | null) => {
+            if (_state === null) {
+                localStorage.removeItem(key);
+            } else {
+                localStorage.setItem(key, JSON.stringify(_state));
+                setState(_state);
+            }
+        },
+    ];
+};
+
+export const DockviewPersistence = (props: { theme?: string }) => {
+    const [api, setApi] = React.useState<DockviewApi>();
+    const [layout, setLayout] =
+        useLocalStorage<SerializedDockview>('floating.layout');
+
+    const [disableFloatingGroups, setDisableFloatingGroups] =
+        React.useState<boolean>(false);
+
+    const load = (api: DockviewApi) => {
+        api.clear();
+        if (layout) {
+            try {
+                api.fromJSON(layout);
+            } catch (err) {
+                console.error(err);
+                api.clear();
+                loadDefaultLayout(api);
+            }
+        } else {
+            loadDefaultLayout(api);
+        }
+    };
+
+    const onReady = (event: DockviewReadyEvent) => {
+        load(event.api);
+        setApi(event.api);
+    };
+
+    const [options, setOptions] = React.useState<
+        'boundedWithinViewport' | undefined
+    >(undefined);
+
+    return (
+        <div
+            style={{
+                display: 'flex',
+                flexDirection: 'column',
+                height: '100%',
+            }}
+        >
+            <div style={{ height: '25px' }}>
+                <button
+                    onClick={() => {
+                        if (api) {
+                            setLayout(api.toJSON());
+                        }
+                    }}
+                >
+                    Save
+                </button>
+                <button
+                    onClick={() => {
+                        if (api) {
+                            load(api);
+                        }
+                    }}
+                >
+                    Load
+                </button>
+                <button
+                    onClick={() => {
+                        api!.clear();
+                        setLayout(null);
+                    }}
+                >
+                    Clear
+                </button>
+                <button
+                    onClick={() => {
+                        addFloatingPanel2(api!);
+                    }}
+                >
+                    Add Floating Group
+                </button>
+                <button
+                    onClick={() => {
+                        setOptions(
+                            options === undefined
+                                ? 'boundedWithinViewport'
+                                : undefined
+                        );
+                    }}
+                >
+                    {`Bounds: ${options ? 'Within' : 'Overflow'}`}
+                </button>
+                <button
+                    onClick={() => {
+                        setDisableFloatingGroups((x) => !x);
+                    }}
+                >
+                    {`${
+                        disableFloatingGroups ? 'Enable' : 'Disable'
+                    } floating groups`}
+                </button>
+            </div>
+            <div
+                style={{
+                    flexGrow: 1,
+                }}
+            >
+                <DockviewReact
+                    onReady={onReady}
+                    components={components}
+                    watermarkComponent={Watermark}
+                    leftHeaderActionsComponent={LeftComponent}
+                    rightHeaderActionsComponent={RightComponent}
+                    disableFloatingGroups={disableFloatingGroups}
+                    floatingGroupBounds={options}
+                    className={`${props.theme || 'dockview-theme-abyss'}`}
+                />
+            </div>
+        </div>
+    );
+};
+
+const LeftComponent = (props: IDockviewHeaderActionsProps) => {
+    const onClick = () => {
+        addPanel(props.containerApi);
+    };
+    return (
+        <div style={{ height: '100%', color: 'white', padding: '0px 4px' }}>
+            <Icon onClick={onClick} icon={'add'} />
+        </div>
+    );
+};
+
+const RightComponent = (props: IDockviewHeaderActionsProps) => {
+    const [floating, setFloating] = React.useState<boolean>(
+        props.api.location.type === 'floating'
+    );
+
+    React.useEffect(() => {
+        const disposable = props.group.api.onDidLocationChange((event) => {
+            setFloating(event.location.type === 'floating');
+        });
+
+        return () => {
+            disposable.dispose();
+        };
+    }, [props.group.api]);
+
+    const onClick = () => {
+        if (floating) {
+            const group = props.containerApi.addGroup();
+            props.group.api.moveTo({ group });
+        } else {
+            props.containerApi.addFloatingGroup(props.group, {
+                position: {
+                    width: 400,
+                    height: 300,
+                    bottom: 50,
+                    right: 50,
+                },
+            });
+        }
+    };
+
+    return (
+        <div style={{ height: '100%', color: 'white', padding: '0px 4px' }}>
+            <Icon
+                onClick={onClick}
+                icon={floating ? 'jump_to_element' : 'back_to_tab'}
+            />
+        </div>
+    );
+};
+
+export default DockviewPersistence;
+
+const Watermark = () => {
+    return <div style={{ color: 'white', padding: '8px' }}>watermark</div>;
+};
diff --git a/packages/docs/sandboxes/react/dockview/floating-groups/src/index.tsx b/packages/docs/sandboxes/react/dockview/floating-groups/src/index.tsx
new file mode 100644
index 000000000..2fe1be232
--- /dev/null
+++ b/packages/docs/sandboxes/react/dockview/floating-groups/src/index.tsx
@@ -0,0 +1,20 @@
+import { StrictMode } from 'react';
+import * as ReactDOMClient from 'react-dom/client';
+import './styles.css';
+import 'dockview/dist/styles/dockview.css';
+
+import App from './app';
+
+const rootElement = document.getElementById('root');
+
+if (rootElement) {
+    const root = ReactDOMClient.createRoot(rootElement);
+
+    root.render(
+        <StrictMode>
+            <div className="app">
+                <App />
+            </div>
+        </StrictMode>
+    );
+}
diff --git a/packages/docs/sandboxes/react/dockview/floating-groups/src/styles.css b/packages/docs/sandboxes/react/dockview/floating-groups/src/styles.css
new file mode 100644
index 000000000..92b6a1b36
--- /dev/null
+++ b/packages/docs/sandboxes/react/dockview/floating-groups/src/styles.css
@@ -0,0 +1,16 @@
+body {
+  margin: 0px;
+  color: white;
+  font-family: sans-serif;
+  text-align: center;
+}
+
+#root {
+  height: 100vh;
+  width: 100vw;
+}
+
+.app {
+  height: 100%;
+
+}
diff --git a/packages/docs/sandboxes/react/dockview/floating-groups/src/utils.tsx b/packages/docs/sandboxes/react/dockview/floating-groups/src/utils.tsx
new file mode 100644
index 000000000..457128d67
--- /dev/null
+++ b/packages/docs/sandboxes/react/dockview/floating-groups/src/utils.tsx
@@ -0,0 +1,30 @@
+import * as React from 'react';
+
+export const Icon = (props: {
+    icon: string;
+    title?: string;
+    onClick?: (event: React.MouseEvent) => void;
+}) => {
+    return (
+        <div
+            title={props.title}
+            style={{
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+                width: '30px',
+                height: '100%',
+
+                fontSize: '18px',
+            }}
+            onClick={props.onClick}
+        >
+            <span
+                style={{ fontSize: 'inherit', cursor: 'pointer' }}
+                className="material-symbols-outlined"
+            >
+                {props.icon}
+            </span>
+        </div>
+    );
+};
diff --git a/packages/docs/sandboxes/react/dockview/floating-groups/tsconfig.json b/packages/docs/sandboxes/react/dockview/floating-groups/tsconfig.json
new file mode 100644
index 000000000..cdc4fb5f5
--- /dev/null
+++ b/packages/docs/sandboxes/react/dockview/floating-groups/tsconfig.json
@@ -0,0 +1,18 @@
+{
+    "compilerOptions": {
+        "outDir": "build/dist",
+        "module": "esnext",
+        "target": "es5",
+        "lib": ["es6", "dom"],
+        "sourceMap": true,
+        "allowJs": true,
+        "jsx": "react-jsx",
+        "moduleResolution": "node",
+        "rootDir": "src",
+        "forceConsistentCasingInFileNames": true,
+        "noImplicitReturns": true,
+        "noImplicitThis": true,
+        "noImplicitAny": true,
+        "strictNullChecks": true
+    }
+}
diff --git a/packages/docs/sandboxes/react/dockview/group-actions/package.json b/packages/docs/sandboxes/react/dockview/group-actions/package.json
new file mode 100644
index 000000000..2659c53db
--- /dev/null
+++ b/packages/docs/sandboxes/react/dockview/group-actions/package.json
@@ -0,0 +1,32 @@
+{
+  "name": "dockview.group-actions",
+  "description": "",
+  "keywords": [
+    "dockview"
+  ],
+  "version": "1.0.0",
+  "main": "src/index.tsx",
+  "dependencies": {
+    "dockview": "*",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.28",
+    "@types/react-dom": "^18.0.11",
+    "typescript": "^4.9.5",
+    "react-scripts": "*"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
+}
diff --git a/packages/docs/sandboxes/react/dockview/group-actions/public/index.html b/packages/docs/sandboxes/react/dockview/group-actions/public/index.html
new file mode 100644
index 000000000..1f8a52426
--- /dev/null
+++ b/packages/docs/sandboxes/react/dockview/group-actions/public/index.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+	<meta name="theme-color" content="#000000">
+	<!--
+      manifest.json provides metadata used when your web app is added to the
+      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
+    -->
+	<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+	<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
+	<!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+	<title>React App</title>
+</head>
+
+<body>
+	<noscript>
+		You need to enable JavaScript to run this app.
+	</noscript>
+	<div id="root"></div>
+	<!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+</body>
+
+</html>
diff --git a/packages/docs/sandboxes/react/dockview/group-actions/src/app.scss b/packages/docs/sandboxes/react/dockview/group-actions/src/app.scss
new file mode 100644
index 000000000..843296bb2
--- /dev/null
+++ b/packages/docs/sandboxes/react/dockview/group-actions/src/app.scss
@@ -0,0 +1,20 @@
+.dockview-groupcontrol-demo {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    color: white;
+    background-color: black;
+    padding: 0px 8px;
+
+    margin: 1px;
+    border: 1px dotted orange;
+
+    .dockview-groupcontrol-demo-group-active {
+        padding: 0px 8px;
+    }
+
+    .dockview-groupcontrol-demo-active-panel {
+        color: yellow;
+        padding: 0px 8px;
+    }
+}
diff --git a/packages/docs/sandboxes/react/dockview/group-actions/src/app.tsx b/packages/docs/sandboxes/react/dockview/group-actions/src/app.tsx
new file mode 100644
index 000000000..2abda91fa
--- /dev/null
+++ b/packages/docs/sandboxes/react/dockview/group-actions/src/app.tsx
@@ -0,0 +1,102 @@
+import {
+    DockviewReact,
+    DockviewReadyEvent,
+    IDockviewHeaderActionsProps,
+    IDockviewPanelProps,
+} from 'dockview';
+import * as React from 'react';
+import './app.scss';
+
+const components = {
+    default: (props: IDockviewPanelProps<{ title: string; x?: number }>) => {
+        return (
+            <div
+                style={{
+                    display: 'flex',
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                    color: 'gray',
+                    height: '100%',
+                }}
+            >
+                <span>{`${props.api.title}`}</span>
+            </div>
+        );
+    },
+};
+
+const RightHeaderActions = (props: IDockviewHeaderActionsProps) => {
+    const isGroupActive = props.isGroupActive;
+
+    return (
+        <div className="dockview-groupcontrol-demo">
+            <span
+                className="dockview-groupcontrol-demo-group-active"
+                style={{
+                    background: isGroupActive ? 'green' : 'red',
+                }}
+            >
+                {isGroupActive ? 'Group Active' : 'Group Inactive'}
+            </span>
+        </div>
+    );
+};
+
+const LeftHeaderActions = (props: IDockviewHeaderActionsProps) => {
+    const activePanel = props.activePanel;
+
+    return (
+        <div className="dockview-groupcontrol-demo">
+            <span className="dockview-groupcontrol-demo-active-panel">{`activePanel: ${
+                activePanel?.id || 'null'
+            }`}</span>
+        </div>
+    );
+};
+
+const PrefixHeader = (props: IDockviewHeaderActionsProps) => {
+    const activePanel = props.activePanel;
+
+    return <div className="dockview-groupcontrol-demo">{'🌲'}</div>;
+};
+
+const DockviewGroupControl = (props: { theme: string }) => {
+    const onReady = (event: DockviewReadyEvent) => {
+        event.api.addPanel({
+            id: 'panel_1',
+            component: 'default',
+            title: 'Panel 1',
+        });
+
+        event.api.addPanel({
+            id: 'panel_2',
+            component: 'default',
+            title: 'Panel 2',
+            position: {
+                direction: 'right',
+            },
+        });
+
+        event.api.addPanel({
+            id: 'panel_3',
+            component: 'default',
+            title: 'Panel 3',
+            position: {
+                direction: 'below',
+            },
+        });
+    };
+
+    return (
+        <DockviewReact
+            onReady={onReady}
+            components={components}
+            prefixHeaderActionsComponent={PrefixHeader}
+            leftHeaderActionsComponent={LeftHeaderActions}
+            rightHeaderActionsComponent={RightHeaderActions}
+            className={`${props.theme || 'dockview-theme-abyss'}`}
+        />
+    );
+};
+
+export default DockviewGroupControl;
diff --git a/packages/docs/sandboxes/react/dockview/group-actions/src/index.tsx b/packages/docs/sandboxes/react/dockview/group-actions/src/index.tsx
new file mode 100644
index 000000000..2fe1be232
--- /dev/null
+++ b/packages/docs/sandboxes/react/dockview/group-actions/src/index.tsx
@@ -0,0 +1,20 @@
+import { StrictMode } from 'react';
+import * as ReactDOMClient from 'react-dom/client';
+import './styles.css';
+import 'dockview/dist/styles/dockview.css';
+
+import App from './app';
+
+const rootElement = document.getElementById('root');
+
+if (rootElement) {
+    const root = ReactDOMClient.createRoot(rootElement);
+
+    root.render(
+        <StrictMode>
+            <div className="app">
+                <App />
+            </div>
+        </StrictMode>
+    );
+}
diff --git a/packages/docs/sandboxes/react/dockview/group-actions/src/styles.css b/packages/docs/sandboxes/react/dockview/group-actions/src/styles.css
new file mode 100644
index 000000000..92b6a1b36
--- /dev/null
+++ b/packages/docs/sandboxes/react/dockview/group-actions/src/styles.css
@@ -0,0 +1,16 @@
+body {
+  margin: 0px;
+  color: white;
+  font-family: sans-serif;
+  text-align: center;
+}
+
+#root {
+  height: 100vh;
+  width: 100vw;
+}
+
+.app {
+  height: 100%;
+
+}
diff --git a/packages/docs/sandboxes/react/dockview/group-actions/tsconfig.json b/packages/docs/sandboxes/react/dockview/group-actions/tsconfig.json
new file mode 100644
index 000000000..cdc4fb5f5
--- /dev/null
+++ b/packages/docs/sandboxes/react/dockview/group-actions/tsconfig.json
@@ -0,0 +1,18 @@
+{
+    "compilerOptions": {
+        "outDir": "build/dist",
+        "module": "esnext",
+        "target": "es5",
+        "lib": ["es6", "dom"],
+        "sourceMap": true,
+        "allowJs": true,
+        "jsx": "react-jsx",
+        "moduleResolution": "node",
+        "rootDir": "src",
+        "forceConsistentCasingInFileNames": true,
+        "noImplicitReturns": true,
+        "noImplicitThis": true,
+        "noImplicitAny": true,
+        "strictNullChecks": true
+    }
+}
diff --git a/packages/docs/sandboxes/react/dockview/layout/package.json b/packages/docs/sandboxes/react/dockview/layout/package.json
new file mode 100644
index 000000000..bcd7df024
--- /dev/null
+++ b/packages/docs/sandboxes/react/dockview/layout/package.json
@@ -0,0 +1,32 @@
+{
+  "name": "dockview.layout",
+  "description": "",
+  "keywords": [
+    "dockview"
+  ],
+  "version": "1.0.0",
+  "main": "src/index.tsx",
+  "dependencies": {
+    "dockview": "*",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.28",
+    "@types/react-dom": "^18.0.11",
+    "typescript": "^4.9.5",
+    "react-scripts": "*"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
+}
diff --git a/packages/docs/sandboxes/react/dockview/layout/public/index.html b/packages/docs/sandboxes/react/dockview/layout/public/index.html
new file mode 100644
index 000000000..1f8a52426
--- /dev/null
+++ b/packages/docs/sandboxes/react/dockview/layout/public/index.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+	<meta name="theme-color" content="#000000">
+	<!--
+      manifest.json provides metadata used when your web app is added to the
+      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
+    -->
+	<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+	<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
+	<!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+	<title>React App</title>
+</head>
+
+<body>
+	<noscript>
+		You need to enable JavaScript to run this app.
+	</noscript>
+	<div id="root"></div>
+	<!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+</body>
+
+</html>
diff --git a/packages/docs/sandboxes/react/dockview/layout/src/app.tsx b/packages/docs/sandboxes/react/dockview/layout/src/app.tsx
new file mode 100644
index 000000000..85d76bd39
--- /dev/null
+++ b/packages/docs/sandboxes/react/dockview/layout/src/app.tsx
@@ -0,0 +1,132 @@
+import {
+    DockviewApi,
+    DockviewReact,
+    DockviewReadyEvent,
+    IDockviewPanelProps,
+} from 'dockview';
+import * as React from 'react';
+
+const components = {
+    default: (props: IDockviewPanelProps<{ title: string }>) => {
+        return (
+            <div
+                style={{
+                    height: '100%',
+                    padding: '20px',
+                    background: 'var(--dv-group-view-background-color)',
+                }}
+            >
+                {props.params.title}
+            </div>
+        );
+    },
+};
+
+const counter = (() => {
+    let i = 0;
+
+    return {
+        next: () => ++i,
+    };
+})();
+
+function loadDefaultLayout(api: DockviewApi) {
+    api.addPanel({
+        id: 'panel_1',
+        component: 'default',
+    });
+
+    api.addPanel({
+        id: 'panel_2',
+        component: 'default',
+    });
+
+    api.addPanel({
+        id: 'panel_3',
+        component: 'default',
+    });
+}
+
+export const DockviewPersistence = (props: { theme?: string }) => {
+    const [api, setApi] = React.useState<DockviewApi>();
+
+    const clearLayout = () => {
+        localStorage.removeItem('dockview_persistence_layout');
+        if (api) {
+            api.clear();
+            loadDefaultLayout(api);
+        }
+    };
+
+    const onReady = (event: DockviewReadyEvent) => {
+        const layoutString = localStorage.getItem(
+            'dockview_persistence_layout'
+        );
+
+        let success = false;
+
+        if (layoutString) {
+            try {
+                const layout = JSON.parse(layoutString);
+                event.api.fromJSON(layout);
+                success = true;
+            } catch (err) {
+                console.error(err);
+            }
+        }
+
+        if (!success) {
+            loadDefaultLayout(event.api);
+        }
+
+        setApi(event.api);
+    };
+
+    React.useEffect(() => {
+        if (!api) {
+            return;
+        }
+
+        api.onDidLayoutChange(() => {
+            const layout = api.toJSON();
+
+            localStorage.setItem(
+                'dockview_persistence_layout',
+                JSON.stringify(layout)
+            );
+        });
+    }, [api]);
+
+    return (
+        <div
+            style={{
+                display: 'flex',
+                flexDirection: 'column',
+                height: '100%',
+            }}
+        >
+            <div style={{ height: '25px' }}>
+                <button onClick={clearLayout}>Reset Layout</button>
+            </div>
+            <div
+                style={{
+                    flexGrow: 1,
+                    overflow: 'hidden',
+                }}
+            >
+                <DockviewReact
+                    onReady={onReady}
+                    components={components}
+                    watermarkComponent={Watermark}
+                    className={`${props.theme || 'dockview-theme-abyss'}`}
+                />
+            </div>
+        </div>
+    );
+};
+
+export default DockviewPersistence;
+
+const Watermark = () => {
+    return <div style={{ color: 'white', padding: '8px' }}>watermark</div>;
+};
diff --git a/packages/docs/sandboxes/react/dockview/layout/src/index.tsx b/packages/docs/sandboxes/react/dockview/layout/src/index.tsx
new file mode 100644
index 000000000..2fe1be232
--- /dev/null
+++ b/packages/docs/sandboxes/react/dockview/layout/src/index.tsx
@@ -0,0 +1,20 @@
+import { StrictMode } from 'react';
+import * as ReactDOMClient from 'react-dom/client';
+import './styles.css';
+import 'dockview/dist/styles/dockview.css';
+
+import App from './app';
+
+const rootElement = document.getElementById('root');
+
+if (rootElement) {
+    const root = ReactDOMClient.createRoot(rootElement);
+
+    root.render(
+        <StrictMode>
+            <div className="app">
+                <App />
+            </div>
+        </StrictMode>
+    );
+}
diff --git a/packages/docs/sandboxes/react/dockview/layout/src/styles.css b/packages/docs/sandboxes/react/dockview/layout/src/styles.css
new file mode 100644
index 000000000..92b6a1b36
--- /dev/null
+++ b/packages/docs/sandboxes/react/dockview/layout/src/styles.css
@@ -0,0 +1,16 @@
+body {
+  margin: 0px;
+  color: white;
+  font-family: sans-serif;
+  text-align: center;
+}
+
+#root {
+  height: 100vh;
+  width: 100vw;
+}
+
+.app {
+  height: 100%;
+
+}
diff --git a/packages/docs/sandboxes/react/dockview/layout/tsconfig.json b/packages/docs/sandboxes/react/dockview/layout/tsconfig.json
new file mode 100644
index 000000000..cdc4fb5f5
--- /dev/null
+++ b/packages/docs/sandboxes/react/dockview/layout/tsconfig.json
@@ -0,0 +1,18 @@
+{
+    "compilerOptions": {
+        "outDir": "build/dist",
+        "module": "esnext",
+        "target": "es5",
+        "lib": ["es6", "dom"],
+        "sourceMap": true,
+        "allowJs": true,
+        "jsx": "react-jsx",
+        "moduleResolution": "node",
+        "rootDir": "src",
+        "forceConsistentCasingInFileNames": true,
+        "noImplicitReturns": true,
+        "noImplicitThis": true,
+        "noImplicitAny": true,
+        "strictNullChecks": true
+    }
+}
diff --git a/packages/docs/sandboxes/react/dockview/locked/package.json b/packages/docs/sandboxes/react/dockview/locked/package.json
new file mode 100644
index 000000000..ed18fba32
--- /dev/null
+++ b/packages/docs/sandboxes/react/dockview/locked/package.json
@@ -0,0 +1,32 @@
+{
+  "name": "dockview.locked",
+  "description": "",
+  "keywords": [
+    "dockview"
+  ],
+  "version": "1.0.0",
+  "main": "src/index.tsx",
+  "dependencies": {
+    "dockview": "*",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.28",
+    "@types/react-dom": "^18.0.11",
+    "typescript": "^4.9.5",
+    "react-scripts": "*"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
+}
diff --git a/packages/docs/sandboxes/react/dockview/locked/public/index.html b/packages/docs/sandboxes/react/dockview/locked/public/index.html
new file mode 100644
index 000000000..1f8a52426
--- /dev/null
+++ b/packages/docs/sandboxes/react/dockview/locked/public/index.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+	<meta name="theme-color" content="#000000">
+	<!--
+      manifest.json provides metadata used when your web app is added to the
+      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
+    -->
+	<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+	<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
+	<!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+	<title>React App</title>
+</head>
+
+<body>
+	<noscript>
+		You need to enable JavaScript to run this app.
+	</noscript>
+	<div id="root"></div>
+	<!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+</body>
+
+</html>
diff --git a/packages/docs/sandboxes/react/dockview/locked/src/app.tsx b/packages/docs/sandboxes/react/dockview/locked/src/app.tsx
new file mode 100644
index 000000000..9a462adc9
--- /dev/null
+++ b/packages/docs/sandboxes/react/dockview/locked/src/app.tsx
@@ -0,0 +1,64 @@
+import {
+    DockviewReact,
+    DockviewReadyEvent,
+    IDockviewPanelProps,
+} from 'dockview';
+import * as React from 'react';
+
+const Default = (props: IDockviewPanelProps) => {
+    return (
+        <div style={{ height: '100%' }}>
+            <div>{props.api.title}</div>
+        </div>
+    );
+};
+
+const components = {
+    default: Default,
+};
+
+const Component = (props: { theme?: string }) => {
+    const onReady = (event: DockviewReadyEvent) => {
+        event.api.addPanel({
+            id: 'panel_1',
+            component: 'default',
+        });
+
+        event.api.addPanel({
+            id: 'panel_2',
+            component: 'default',
+            position: {
+                direction: 'right',
+                referencePanel: 'panel_1',
+            },
+        });
+
+        event.api.addPanel({
+            id: 'panel_3',
+            component: 'default',
+            position: {
+                direction: 'below',
+                referencePanel: 'panel_1',
+            },
+        });
+        event.api.addPanel({
+            id: 'panel_4',
+            component: 'default',
+        });
+        event.api.addPanel({
+            id: 'panel_5',
+            component: 'default',
+        });
+    };
+
+    return (
+        <DockviewReact
+            className={`${props.theme || 'dockview-theme-abyss'}`}
+            onReady={onReady}
+            components={components}
+            locked={true}
+        />
+    );
+};
+
+export default Component;
diff --git a/packages/docs/sandboxes/react/dockview/locked/src/index.tsx b/packages/docs/sandboxes/react/dockview/locked/src/index.tsx
new file mode 100644
index 000000000..2fe1be232
--- /dev/null
+++ b/packages/docs/sandboxes/react/dockview/locked/src/index.tsx
@@ -0,0 +1,20 @@
+import { StrictMode } from 'react';
+import * as ReactDOMClient from 'react-dom/client';
+import './styles.css';
+import 'dockview/dist/styles/dockview.css';
+
+import App from './app';
+
+const rootElement = document.getElementById('root');
+
+if (rootElement) {
+    const root = ReactDOMClient.createRoot(rootElement);
+
+    root.render(
+        <StrictMode>
+            <div className="app">
+                <App />
+            </div>
+        </StrictMode>
+    );
+}
diff --git a/packages/docs/sandboxes/react/dockview/locked/src/styles.css b/packages/docs/sandboxes/react/dockview/locked/src/styles.css
new file mode 100644
index 000000000..92b6a1b36
--- /dev/null
+++ b/packages/docs/sandboxes/react/dockview/locked/src/styles.css
@@ -0,0 +1,16 @@
+body {
+  margin: 0px;
+  color: white;
+  font-family: sans-serif;
+  text-align: center;
+}
+
+#root {
+  height: 100vh;
+  width: 100vw;
+}
+
+.app {
+  height: 100%;
+
+}
diff --git a/packages/docs/sandboxes/react/dockview/locked/tsconfig.json b/packages/docs/sandboxes/react/dockview/locked/tsconfig.json
new file mode 100644
index 000000000..cdc4fb5f5
--- /dev/null
+++ b/packages/docs/sandboxes/react/dockview/locked/tsconfig.json
@@ -0,0 +1,18 @@
+{
+    "compilerOptions": {
+        "outDir": "build/dist",
+        "module": "esnext",
+        "target": "es5",
+        "lib": ["es6", "dom"],
+        "sourceMap": true,
+        "allowJs": true,
+        "jsx": "react-jsx",
+        "moduleResolution": "node",
+        "rootDir": "src",
+        "forceConsistentCasingInFileNames": true,
+        "noImplicitReturns": true,
+        "noImplicitThis": true,
+        "noImplicitAny": true,
+        "strictNullChecks": true
+    }
+}
diff --git a/packages/docs/sandboxes/react/dockview/maximize-group/package.json b/packages/docs/sandboxes/react/dockview/maximize-group/package.json
new file mode 100644
index 000000000..2baf5ff16
--- /dev/null
+++ b/packages/docs/sandboxes/react/dockview/maximize-group/package.json
@@ -0,0 +1,32 @@
+{
+  "name": "dockview.maximize-group",
+  "description": "",
+  "keywords": [
+    "dockview"
+  ],
+  "version": "1.0.0",
+  "main": "src/index.tsx",
+  "dependencies": {
+    "dockview": "*",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.28",
+    "@types/react-dom": "^18.0.11",
+    "typescript": "^4.9.5",
+    "react-scripts": "*"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
+}
diff --git a/packages/docs/sandboxes/react/dockview/maximize-group/public/index.html b/packages/docs/sandboxes/react/dockview/maximize-group/public/index.html
new file mode 100644
index 000000000..1f8a52426
--- /dev/null
+++ b/packages/docs/sandboxes/react/dockview/maximize-group/public/index.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+	<meta name="theme-color" content="#000000">
+	<!--
+      manifest.json provides metadata used when your web app is added to the
+      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
+    -->
+	<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+	<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
+	<!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+	<title>React App</title>
+</head>
+
+<body>
+	<noscript>
+		You need to enable JavaScript to run this app.
+	</noscript>
+	<div id="root"></div>
+	<!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+</body>
+
+</html>
diff --git a/packages/docs/sandboxes/react/dockview/maximize-group/src/app.tsx b/packages/docs/sandboxes/react/dockview/maximize-group/src/app.tsx
new file mode 100644
index 000000000..f0b105f56
--- /dev/null
+++ b/packages/docs/sandboxes/react/dockview/maximize-group/src/app.tsx
@@ -0,0 +1,252 @@
+import {
+    DockviewApi,
+    DockviewGroupPanel,
+    DockviewReact,
+    DockviewReadyEvent,
+    IDockviewHeaderActionsProps,
+    IDockviewPanelProps,
+    SerializedDockview,
+} from 'dockview';
+import * as React from 'react';
+import { Icon } from './utils';
+
+const components = {
+    default: (props: IDockviewPanelProps<{ title: string }>) => {
+        return (
+            <div
+                style={{
+                    height: '100%',
+                    padding: '20px',
+                    background: 'var(--dv-group-view-background-color)',
+                }}
+            >
+                {props.params.title}
+            </div>
+        );
+    },
+};
+
+const counter = (() => {
+    let i = 0;
+
+    return {
+        next: () => ++i,
+    };
+})();
+
+function loadDefaultLayout(api: DockviewApi) {
+    api.addPanel({
+        id: 'panel_1',
+        component: 'default',
+    });
+
+    api.addPanel({
+        id: 'panel_2',
+        component: 'default',
+    });
+
+    api.addPanel({
+        id: 'panel_3',
+        component: 'default',
+    });
+
+    api.addPanel({
+        id: 'panel_4',
+        component: 'default',
+    });
+
+    api.addPanel({
+        id: 'panel_5',
+        component: 'default',
+        position: { direction: 'right' },
+    });
+
+    api.addPanel({
+        id: 'panel_6',
+        component: 'default',
+    });
+}
+
+let panelCount = 0;
+
+function safeParse<T>(value: any): T | null {
+    try {
+        return JSON.parse(value) as T;
+    } catch (err) {
+        return null;
+    }
+}
+
+const useLocalStorage = <T,>(
+    key: string
+): [T | null, (setter: T | null) => void] => {
+    const [state, setState] = React.useState<T | null>(
+        safeParse(localStorage.getItem(key))
+    );
+
+    React.useEffect(() => {
+        const _state = localStorage.getItem('key');
+        try {
+            if (_state !== null) {
+                setState(JSON.parse(_state));
+            }
+        } catch (err) {
+            //
+        }
+    }, [key]);
+
+    return [
+        state,
+        (_state: T | null) => {
+            if (_state === null) {
+                localStorage.removeItem(key);
+            } else {
+                localStorage.setItem(key, JSON.stringify(_state));
+                setState(_state);
+            }
+        },
+    ];
+};
+
+export const App = (props: { theme?: string }) => {
+    const [api, setApi] = React.useState<DockviewApi>();
+    const [layout, setLayout] =
+        useLocalStorage<SerializedDockview>('floating.layout');
+
+    const [disableFloatingGroups, setDisableFloatingGroups] =
+        React.useState<boolean>(false);
+
+    const load = (api: DockviewApi) => {
+        api.clear();
+        if (layout) {
+            try {
+                api.fromJSON(layout);
+            } catch (err) {
+                console.error(err);
+                api.clear();
+                loadDefaultLayout(api);
+            }
+        } else {
+            loadDefaultLayout(api);
+        }
+    };
+
+    const onReady = (event: DockviewReadyEvent) => {
+        load(event.api);
+        setApi(event.api);
+    };
+
+    const [options, setOptions] = React.useState<
+        'boundedWithinViewport' | undefined
+    >(undefined);
+
+    return (
+        <div
+            style={{
+                display: 'flex',
+                flexDirection: 'column',
+                height: '100%',
+            }}
+        >
+            <div style={{ height: '25px' }}>
+                <button
+                    onClick={() => {
+                        if (api) {
+                            setLayout(api.toJSON());
+                        }
+                    }}
+                >
+                    Save
+                </button>
+                <button
+                    onClick={() => {
+                        if (api) {
+                            load(api);
+                        }
+                    }}
+                >
+                    Load
+                </button>
+                <button
+                    onClick={() => {
+                        api!.clear();
+                        setLayout(null);
+                    }}
+                >
+                    Clear
+                </button>
+            </div>
+            <div
+                style={{
+                    flexGrow: 1,
+                }}
+            >
+                <DockviewReact
+                    onReady={onReady}
+                    components={components}
+                    watermarkComponent={Watermark}
+                    leftHeaderActionsComponent={LeftComponent}
+                    rightHeaderActionsComponent={RightComponent}
+                    disableFloatingGroups={disableFloatingGroups}
+                    floatingGroupBounds={options}
+                    className={`${props.theme || 'dockview-theme-abyss'}`}
+                />
+            </div>
+        </div>
+    );
+};
+
+const LeftComponent = (props: IDockviewHeaderActionsProps) => {
+    const onClick = () => {
+        props.containerApi.addPanel({
+            id: (++panelCount).toString(),
+            title: `Tab ${panelCount}`,
+            component: 'default',
+            position: { referenceGroup: props.group },
+        });
+    };
+    return (
+        <div style={{ height: '100%', color: 'white', padding: '0px 4px' }}>
+            <Icon onClick={onClick} icon={'add'} />
+        </div>
+    );
+};
+
+const RightComponent = (props: IDockviewHeaderActionsProps) => {
+    const [maximized, setMaximized] = React.useState<boolean>(
+        props.api.isMaximized()
+    );
+
+    React.useEffect(() => {
+        const disposable = props.containerApi.onDidMaximizedGroupChange(() => {
+            setMaximized(props.api.isMaximized());
+        });
+
+        return () => {
+            disposable.dispose();
+        };
+    }, [props.containerApi]);
+
+    const onClick = () => {
+        if (maximized) {
+            props.api.exitMaximized();
+        } else {
+            props.api.maximize();
+        }
+    };
+
+    return (
+        <div style={{ height: '100%', color: 'white', padding: '0px 4px' }}>
+            <Icon
+                onClick={onClick}
+                icon={maximized ? 'jump_to_element' : 'back_to_tab'}
+            />
+        </div>
+    );
+};
+
+export default App;
+
+const Watermark = () => {
+    return <div style={{ color: 'white', padding: '8px' }}>watermark</div>;
+};
diff --git a/packages/docs/sandboxes/react/dockview/maximize-group/src/index.tsx b/packages/docs/sandboxes/react/dockview/maximize-group/src/index.tsx
new file mode 100644
index 000000000..2fe1be232
--- /dev/null
+++ b/packages/docs/sandboxes/react/dockview/maximize-group/src/index.tsx
@@ -0,0 +1,20 @@
+import { StrictMode } from 'react';
+import * as ReactDOMClient from 'react-dom/client';
+import './styles.css';
+import 'dockview/dist/styles/dockview.css';
+
+import App from './app';
+
+const rootElement = document.getElementById('root');
+
+if (rootElement) {
+    const root = ReactDOMClient.createRoot(rootElement);
+
+    root.render(
+        <StrictMode>
+            <div className="app">
+                <App />
+            </div>
+        </StrictMode>
+    );
+}
diff --git a/packages/docs/sandboxes/react/dockview/maximize-group/src/styles.css b/packages/docs/sandboxes/react/dockview/maximize-group/src/styles.css
new file mode 100644
index 000000000..92b6a1b36
--- /dev/null
+++ b/packages/docs/sandboxes/react/dockview/maximize-group/src/styles.css
@@ -0,0 +1,16 @@
+body {
+  margin: 0px;
+  color: white;
+  font-family: sans-serif;
+  text-align: center;
+}
+
+#root {
+  height: 100vh;
+  width: 100vw;
+}
+
+.app {
+  height: 100%;
+
+}
diff --git a/packages/docs/sandboxes/react/dockview/maximize-group/src/utils.tsx b/packages/docs/sandboxes/react/dockview/maximize-group/src/utils.tsx
new file mode 100644
index 000000000..457128d67
--- /dev/null
+++ b/packages/docs/sandboxes/react/dockview/maximize-group/src/utils.tsx
@@ -0,0 +1,30 @@
+import * as React from 'react';
+
+export const Icon = (props: {
+    icon: string;
+    title?: string;
+    onClick?: (event: React.MouseEvent) => void;
+}) => {
+    return (
+        <div
+            title={props.title}
+            style={{
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+                width: '30px',
+                height: '100%',
+
+                fontSize: '18px',
+            }}
+            onClick={props.onClick}
+        >
+            <span
+                style={{ fontSize: 'inherit', cursor: 'pointer' }}
+                className="material-symbols-outlined"
+            >
+                {props.icon}
+            </span>
+        </div>
+    );
+};
diff --git a/packages/docs/sandboxes/react/dockview/maximize-group/tsconfig.json b/packages/docs/sandboxes/react/dockview/maximize-group/tsconfig.json
new file mode 100644
index 000000000..cdc4fb5f5
--- /dev/null
+++ b/packages/docs/sandboxes/react/dockview/maximize-group/tsconfig.json
@@ -0,0 +1,18 @@
+{
+    "compilerOptions": {
+        "outDir": "build/dist",
+        "module": "esnext",
+        "target": "es5",
+        "lib": ["es6", "dom"],
+        "sourceMap": true,
+        "allowJs": true,
+        "jsx": "react-jsx",
+        "moduleResolution": "node",
+        "rootDir": "src",
+        "forceConsistentCasingInFileNames": true,
+        "noImplicitReturns": true,
+        "noImplicitThis": true,
+        "noImplicitAny": true,
+        "strictNullChecks": true
+    }
+}
diff --git a/packages/docs/sandboxes/react/dockview/popout-group/package.json b/packages/docs/sandboxes/react/dockview/popout-group/package.json
new file mode 100644
index 000000000..414f9443b
--- /dev/null
+++ b/packages/docs/sandboxes/react/dockview/popout-group/package.json
@@ -0,0 +1,33 @@
+{
+  "name": "dockview.popout-group",
+  "description": "",
+  "keywords": [
+    "dockview"
+  ],
+  "version": "1.0.0",
+  "main": "src/index.tsx",
+  "dependencies": {
+    "dockview": "*",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-laag": "^2.0.5"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.28",
+    "@types/react-dom": "^18.0.11",
+    "typescript": "^4.9.5",
+    "react-scripts": "*"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
+}
diff --git a/packages/docs/sandboxes/react/dockview/popout-group/public/index.html b/packages/docs/sandboxes/react/dockview/popout-group/public/index.html
new file mode 100644
index 000000000..1f8a52426
--- /dev/null
+++ b/packages/docs/sandboxes/react/dockview/popout-group/public/index.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+	<meta name="theme-color" content="#000000">
+	<!--
+      manifest.json provides metadata used when your web app is added to the
+      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
+    -->
+	<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+	<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
+	<!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+	<title>React App</title>
+</head>
+
+<body>
+	<noscript>
+		You need to enable JavaScript to run this app.
+	</noscript>
+	<div id="root"></div>
+	<!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+</body>
+
+</html>
diff --git a/packages/docs/sandboxes/react/dockview/popout-group/src/app.tsx b/packages/docs/sandboxes/react/dockview/popout-group/src/app.tsx
new file mode 100644
index 000000000..fbca7560d
--- /dev/null
+++ b/packages/docs/sandboxes/react/dockview/popout-group/src/app.tsx
@@ -0,0 +1,280 @@
+import {
+    DockviewApi,
+    DockviewReact,
+    DockviewReadyEvent,
+    IDockviewHeaderActionsProps,
+    IDockviewPanelProps,
+    SerializedDockview,
+    DockviewPanelApi,
+} from 'dockview';
+import * as React from 'react';
+import { Icon } from './utils';
+import { PopoverMenu } from './popover';
+
+function usePanelWindowObject(api: DockviewPanelApi): Window {
+    const [document, setDocument] = React.useState<Window>(api.getWindow());
+
+    React.useEffect(() => {
+        const disposable = api.onDidLocationChange((event) => {
+            setDocument(api.getWindow());
+        });
+
+        return () => {
+            disposable.dispose();
+        };
+    }, [api]);
+
+    return document;
+}
+
+const components = {
+    default: (props: IDockviewPanelProps<{ title: string }>) => {
+        const _window = usePanelWindowObject(props.api);
+
+        const [reset, setReset] = React.useState<boolean>(false);
+
+        return (
+            <div
+                style={{
+                    height: '100%',
+                    padding: '20px',
+                    background: 'var(--dv-group-view-background-color)',
+                }}
+            >
+                <button
+                    onClick={() => {
+                        console.log(_window);
+                        setReset(true);
+                        setTimeout(() => {
+                            setReset(false);
+                        }, 2000);
+                    }}
+                >
+                    Print
+                </button>
+                {!reset && <PopoverMenu window={_window} />}
+                {props.api.title}
+            </div>
+        );
+    },
+};
+
+function loadDefaultLayout(api: DockviewApi) {
+    api.addPanel({
+        id: 'panel_1',
+        component: 'default',
+    });
+
+    // api.addPanel({
+    //     id: 'panel_2',
+    //     component: 'default',
+    // });
+
+    // api.addPanel({
+    //     id: 'panel_3',
+    //     component: 'default',
+    // });
+
+    // api.addPanel({
+    //     id: 'panel_4',
+    //     component: 'default',
+    // });
+
+    // api.addPanel({
+    //     id: 'panel_5',
+    //     component: 'default',
+    //     position: { direction: 'right' },
+    // });
+
+    // api.addPanel({
+    //     id: 'panel_6',
+    //     component: 'default',
+    // });
+}
+
+let panelCount = 0;
+
+function safeParse<T>(value: any): T | null {
+    try {
+        return JSON.parse(value) as T;
+    } catch (err) {
+        return null;
+    }
+}
+
+const useLocalStorage = <T,>(
+    key: string
+): [T | null, (setter: T | null) => void] => {
+    const [state, setState] = React.useState<T | null>(
+        safeParse(localStorage.getItem(key))
+    );
+
+    React.useEffect(() => {
+        const _state = localStorage.getItem('key');
+        try {
+            if (_state !== null) {
+                setState(JSON.parse(_state));
+            }
+        } catch (err) {
+            //
+        }
+    }, [key]);
+
+    return [
+        state,
+        (_state: T | null) => {
+            if (_state === null) {
+                localStorage.removeItem(key);
+            } else {
+                localStorage.setItem(key, JSON.stringify(_state));
+                setState(_state);
+            }
+        },
+    ];
+};
+
+export const App = (props: { theme?: string }) => {
+    const [api, setApi] = React.useState<DockviewApi>();
+    const [layout, setLayout] =
+        useLocalStorage<SerializedDockview>('floating.layout');
+
+    const [disableFloatingGroups, setDisableFloatingGroups] =
+        React.useState<boolean>(false);
+
+    const load = (api: DockviewApi) => {
+        api.clear();
+        if (layout) {
+            try {
+                api.fromJSON(layout);
+            } catch (err) {
+                console.error(err);
+                api.clear();
+                loadDefaultLayout(api);
+            }
+        } else {
+            loadDefaultLayout(api);
+        }
+    };
+
+    const onReady = (event: DockviewReadyEvent) => {
+        load(event.api);
+        setApi(event.api);
+    };
+
+    const [options, setOptions] = React.useState<
+        'boundedWithinViewport' | undefined
+    >(undefined);
+
+    return (
+        <div
+            style={{
+                display: 'flex',
+                flexDirection: 'column',
+                height: '100%',
+            }}
+        >
+            <div style={{ height: '25px' }}>
+                <button
+                    onClick={() => {
+                        if (api) {
+                            setLayout(api.toJSON());
+                        }
+                    }}
+                >
+                    Save
+                </button>
+                <button
+                    onClick={() => {
+                        if (api) {
+                            load(api);
+                        }
+                    }}
+                >
+                    Load
+                </button>
+                <button
+                    onClick={() => {
+                        api!.clear();
+                        setLayout(null);
+                    }}
+                >
+                    Clear
+                </button>
+            </div>
+            <div
+                style={{
+                    flexGrow: 1,
+                }}
+            >
+                <DockviewReact
+                    onReady={onReady}
+                    components={components}
+                    watermarkComponent={Watermark}
+                    leftHeaderActionsComponent={LeftComponent}
+                    rightHeaderActionsComponent={RightComponent}
+                    disableFloatingGroups={disableFloatingGroups}
+                    floatingGroupBounds={options}
+                    className={`${props.theme || 'dockview-theme-abyss'}`}
+                />
+            </div>
+        </div>
+    );
+};
+
+const LeftComponent = (props: IDockviewHeaderActionsProps) => {
+    const onClick = () => {
+        props.containerApi.addPanel({
+            id: (++panelCount).toString(),
+            title: `Tab ${panelCount}`,
+            component: 'default',
+            position: { referenceGroup: props.group },
+        });
+    };
+    return (
+        <div style={{ height: '100%', color: 'white', padding: '0px 4px' }}>
+            <Icon onClick={onClick} icon={'add'} />
+        </div>
+    );
+};
+
+const RightComponent = (props: IDockviewHeaderActionsProps) => {
+    const [popout, setPopout] = React.useState<boolean>(
+        props.api.location.type === 'popout'
+    );
+
+    React.useEffect(() => {
+        const disposable = props.group.api.onDidLocationChange((event) => [
+            setPopout(event.location.type === 'popout'),
+        ]);
+
+        return () => {
+            disposable.dispose();
+        };
+    }, [props.group.api]);
+
+    const onClick = () => {
+        if (popout) {
+            const group = props.containerApi.addGroup();
+            props.group.api.moveTo({ group });
+        } else {
+            const window = props.containerApi.addPopoutGroup(props.group, {
+                popoutUrl: '/popout/index.html',
+            });
+        }
+    };
+
+    return (
+        <div style={{ height: '100%', color: 'white', padding: '0px 4px' }}>
+            <Icon
+                onClick={onClick}
+                icon={popout ? 'jump_to_element' : 'back_to_tab'}
+            />
+        </div>
+    );
+};
+
+export default App;
+
+const Watermark = () => {
+    return <div style={{ color: 'white', padding: '8px' }}>watermark</div>;
+};
diff --git a/packages/docs/sandboxes/react/dockview/popout-group/src/index.tsx b/packages/docs/sandboxes/react/dockview/popout-group/src/index.tsx
new file mode 100644
index 000000000..2fe1be232
--- /dev/null
+++ b/packages/docs/sandboxes/react/dockview/popout-group/src/index.tsx
@@ -0,0 +1,20 @@
+import { StrictMode } from 'react';
+import * as ReactDOMClient from 'react-dom/client';
+import './styles.css';
+import 'dockview/dist/styles/dockview.css';
+
+import App from './app';
+
+const rootElement = document.getElementById('root');
+
+if (rootElement) {
+    const root = ReactDOMClient.createRoot(rootElement);
+
+    root.render(
+        <StrictMode>
+            <div className="app">
+                <App />
+            </div>
+        </StrictMode>
+    );
+}
diff --git a/packages/docs/sandboxes/react/dockview/popout-group/src/popover.tsx b/packages/docs/sandboxes/react/dockview/popout-group/src/popover.tsx
new file mode 100644
index 000000000..9d9663443
--- /dev/null
+++ b/packages/docs/sandboxes/react/dockview/popout-group/src/popover.tsx
@@ -0,0 +1,55 @@
+import { useLayer, Arrow } from 'react-laag';
+import { motion, AnimatePresence } from 'framer-motion';
+import * as React from 'react';
+import { DockviewPanelApi } from 'dockview';
+
+export function PopoverMenu(props: { window: Window }) {
+    const [isOpen, setOpen] = React.useState(false);
+
+    // helper function to close the menu
+    function close() {
+        setOpen(false);
+    }
+
+    const { renderLayer, triggerProps, layerProps, arrowProps } = useLayer({
+        isOpen,
+        onOutsideClick: close, // close the menu when the user clicks outside
+        onDisappear: close, // close the menu when the menu gets scrolled out of sight
+        overflowContainer: false, // keep the menu positioned inside the container
+        auto: true, // automatically find the best placement
+        placement: 'top-end', // we prefer to place the menu "top-end"
+        triggerOffset: 12, // keep some distance to the trigger
+        containerOffset: 16, // give the menu some room to breath relative to the container
+        arrowOffset: 16, // let the arrow have some room to breath also,
+        environment: props.window,
+        container: props.window
+            ? () => {
+                  const el = props.window.document.body;
+                  Object.setPrototypeOf(el, HTMLElement.prototype);
+                  return el;
+              }
+            : undefined,
+    });
+
+    // Again, we're using framer-motion for the transition effect
+    return (
+        <>
+            <button {...triggerProps} onClick={() => setOpen(!isOpen)}>
+                {isOpen ? 'Hide' : 'Show'}
+            </button>
+            {renderLayer(
+                <AnimatePresence>
+                    {isOpen && (
+                        <motion.ul {...layerProps}>
+                            <li>Item 1</li>
+                            <li>Item 2</li>
+                            <li>Item 3</li>
+                            <li>Item 4</li>
+                            <Arrow {...arrowProps} />
+                        </motion.ul>
+                    )}
+                </AnimatePresence>
+            )}
+        </>
+    );
+}
diff --git a/packages/docs/sandboxes/react/dockview/popout-group/src/styles.css b/packages/docs/sandboxes/react/dockview/popout-group/src/styles.css
new file mode 100644
index 000000000..92b6a1b36
--- /dev/null
+++ b/packages/docs/sandboxes/react/dockview/popout-group/src/styles.css
@@ -0,0 +1,16 @@
+body {
+  margin: 0px;
+  color: white;
+  font-family: sans-serif;
+  text-align: center;
+}
+
+#root {
+  height: 100vh;
+  width: 100vw;
+}
+
+.app {
+  height: 100%;
+
+}
diff --git a/packages/docs/sandboxes/react/dockview/popout-group/src/utils.tsx b/packages/docs/sandboxes/react/dockview/popout-group/src/utils.tsx
new file mode 100644
index 000000000..457128d67
--- /dev/null
+++ b/packages/docs/sandboxes/react/dockview/popout-group/src/utils.tsx
@@ -0,0 +1,30 @@
+import * as React from 'react';
+
+export const Icon = (props: {
+    icon: string;
+    title?: string;
+    onClick?: (event: React.MouseEvent) => void;
+}) => {
+    return (
+        <div
+            title={props.title}
+            style={{
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+                width: '30px',
+                height: '100%',
+
+                fontSize: '18px',
+            }}
+            onClick={props.onClick}
+        >
+            <span
+                style={{ fontSize: 'inherit', cursor: 'pointer' }}
+                className="material-symbols-outlined"
+            >
+                {props.icon}
+            </span>
+        </div>
+    );
+};
diff --git a/packages/docs/sandboxes/react/dockview/popout-group/tsconfig.json b/packages/docs/sandboxes/react/dockview/popout-group/tsconfig.json
new file mode 100644
index 000000000..cdc4fb5f5
--- /dev/null
+++ b/packages/docs/sandboxes/react/dockview/popout-group/tsconfig.json
@@ -0,0 +1,18 @@
+{
+    "compilerOptions": {
+        "outDir": "build/dist",
+        "module": "esnext",
+        "target": "es5",
+        "lib": ["es6", "dom"],
+        "sourceMap": true,
+        "allowJs": true,
+        "jsx": "react-jsx",
+        "moduleResolution": "node",
+        "rootDir": "src",
+        "forceConsistentCasingInFileNames": true,
+        "noImplicitReturns": true,
+        "noImplicitThis": true,
+        "noImplicitAny": true,
+        "strictNullChecks": true
+    }
+}
diff --git a/packages/docs/sandboxes/react/dockview/render-mode/package.json b/packages/docs/sandboxes/react/dockview/render-mode/package.json
new file mode 100644
index 000000000..dff2e3306
--- /dev/null
+++ b/packages/docs/sandboxes/react/dockview/render-mode/package.json
@@ -0,0 +1,33 @@
+{
+  "name": "dockview.render-mode",
+  "description": "",
+  "keywords": [
+    "dockview"
+  ],
+  "version": "1.0.0",
+  "main": "src/index.tsx",
+  "dependencies": {
+    "dockview": "*",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.28",
+    "@types/react-dom": "^18.0.11",
+    "@types/uuid": "^9.0.0",
+    "typescript": "^4.9.5",
+    "react-scripts": "*"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
+}
diff --git a/packages/docs/sandboxes/react/dockview/render-mode/public/index.html b/packages/docs/sandboxes/react/dockview/render-mode/public/index.html
new file mode 100644
index 000000000..5a4850c1d
--- /dev/null
+++ b/packages/docs/sandboxes/react/dockview/render-mode/public/index.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+	<meta name="theme-color" content="#000000">
+	<!--
+      manifest.json provides metadata used when your web app is added to the
+      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
+    -->
+	<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+	<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
+
+	<!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+	<title>React App</title>
+</head>
+
+<body>
+	<noscript>
+		You need to enable JavaScript to run this app.
+	</noscript>
+	<div id="root"></div>
+	<!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+</body>
+
+</html>
diff --git a/packages/docs/sandboxes/react/dockview/render-mode/src/app.scss b/packages/docs/sandboxes/react/dockview/render-mode/src/app.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/docs/sandboxes/react/dockview/render-mode/src/app.tsx b/packages/docs/sandboxes/react/dockview/render-mode/src/app.tsx
new file mode 100644
index 000000000..13ed9ba19
--- /dev/null
+++ b/packages/docs/sandboxes/react/dockview/render-mode/src/app.tsx
@@ -0,0 +1,160 @@
+import {
+    DockviewReact,
+    DockviewReadyEvent,
+    IDockviewPanelProps,
+    DockviewPanelApi,
+    DockviewPanelRenderer,
+    DockviewApi,
+    SerializedDockview,
+} from 'dockview';
+import * as React from 'react';
+import './app.scss';
+
+const useRenderer = (
+    api: DockviewPanelApi
+): [DockviewPanelRenderer, (value: DockviewPanelRenderer) => void] => {
+    const [mode, setMode] = React.useState<DockviewPanelRenderer>(api.renderer);
+
+    React.useEffect(() => {
+        const disposable = api.onDidRendererChange((event) => {
+            setMode(event.renderer);
+        });
+
+        return () => {
+            disposable.dispose();
+        };
+    }, []);
+
+    const _setMode = React.useCallback(
+        (mode: DockviewPanelRenderer) => {
+            api.setRenderer(mode);
+        },
+        [api]
+    );
+
+    return [mode, _setMode];
+};
+
+const components = {
+    default: (props: IDockviewPanelProps<{ title: string }>) => {
+        const [mode, setMode] = useRenderer(props.api);
+
+        return (
+            <div style={{ height: '100%', overflow: 'auto', color: 'white' }}>
+                <div
+                    style={{
+                        height: '1000px',
+                        padding: '20px',
+                        overflow: 'auto',
+                    }}
+                >
+                    <div>{props.api.title}</div>
+                    <input />
+                    <div>
+                        {mode}
+                        <button
+                            onClick={() => {
+                                setMode(
+                                    mode === 'onlyWhenVisible'
+                                        ? 'always'
+                                        : 'onlyWhenVisible'
+                                );
+                            }}
+                        >
+                            Toggle render mode
+                        </button>
+                    </div>
+                </div>
+            </div>
+        );
+    },
+};
+
+const DockviewDemo = (props: { theme?: string }) => {
+    const [value, setValue] = React.useState<string>('100');
+    const [api, setApi] = React.useState<DockviewApi | null>(null);
+
+    const onReady = (event: DockviewReadyEvent) => {
+        event.api.addPanel({
+            id: 'panel_1',
+            component: 'default',
+            title: 'Panel 1',
+        });
+        event.api.addPanel({
+            id: 'panel_2',
+            component: 'default',
+            title: 'Panel 2',
+            position: { referencePanel: 'panel_1', direction: 'within' },
+        });
+        event.api.addPanel({
+            id: 'panel_3',
+            component: 'default',
+            title: 'Panel 3',
+        });
+
+        event.api.addPanel({
+            id: 'panel_4',
+            component: 'default',
+            title: 'Panel 4',
+            position: { referencePanel: 'panel_3', direction: 'below' },
+        });
+
+        setApi(event.api);
+    };
+
+    const onSave = () => {
+        if (!api) {
+            return;
+        }
+
+        localStorage.setItem(
+            'dv_rendermode_state',
+            JSON.stringify({ size: value, state: api.toJSON() })
+        );
+    };
+
+    const onLoad = () => {
+        if (!api) {
+            return;
+        }
+
+        const state = localStorage.getItem('dv_rendermode_state');
+        if (typeof state !== 'string') {
+            return;
+        }
+
+        const json = JSON.parse(state) as {
+            size: string;
+            state: SerializedDockview;
+        };
+        setValue(json.size);
+        api.fromJSON(json.state);
+    };
+
+    return (
+        <div
+            style={{ height: '100%', display: 'flex', flexDirection: 'column' }}
+        >
+            <div>
+                <button onClick={onSave}>Save</button>
+                <button onClick={onLoad}>Load</button>
+                <input
+                    onChange={(event) => setValue(event.target.value)}
+                    type="range"
+                    min="1"
+                    max="100"
+                    value={value}
+                />
+            </div>
+            <div style={{ height: `${value}%`, width: `${value}%` }}>
+                <DockviewReact
+                    components={components}
+                    onReady={onReady}
+                    className={props.theme || 'dockview-theme-abyss'}
+                />
+            </div>
+        </div>
+    );
+};
+
+export default DockviewDemo;
diff --git a/packages/docs/sandboxes/react/dockview/render-mode/src/index.tsx b/packages/docs/sandboxes/react/dockview/render-mode/src/index.tsx
new file mode 100644
index 000000000..2fe1be232
--- /dev/null
+++ b/packages/docs/sandboxes/react/dockview/render-mode/src/index.tsx
@@ -0,0 +1,20 @@
+import { StrictMode } from 'react';
+import * as ReactDOMClient from 'react-dom/client';
+import './styles.css';
+import 'dockview/dist/styles/dockview.css';
+
+import App from './app';
+
+const rootElement = document.getElementById('root');
+
+if (rootElement) {
+    const root = ReactDOMClient.createRoot(rootElement);
+
+    root.render(
+        <StrictMode>
+            <div className="app">
+                <App />
+            </div>
+        </StrictMode>
+    );
+}
diff --git a/packages/docs/sandboxes/react/dockview/render-mode/src/styles.css b/packages/docs/sandboxes/react/dockview/render-mode/src/styles.css
new file mode 100644
index 000000000..92b6a1b36
--- /dev/null
+++ b/packages/docs/sandboxes/react/dockview/render-mode/src/styles.css
@@ -0,0 +1,16 @@
+body {
+  margin: 0px;
+  color: white;
+  font-family: sans-serif;
+  text-align: center;
+}
+
+#root {
+  height: 100vh;
+  width: 100vw;
+}
+
+.app {
+  height: 100%;
+
+}
diff --git a/packages/docs/sandboxes/react/dockview/render-mode/tsconfig.json b/packages/docs/sandboxes/react/dockview/render-mode/tsconfig.json
new file mode 100644
index 000000000..cdc4fb5f5
--- /dev/null
+++ b/packages/docs/sandboxes/react/dockview/render-mode/tsconfig.json
@@ -0,0 +1,18 @@
+{
+    "compilerOptions": {
+        "outDir": "build/dist",
+        "module": "esnext",
+        "target": "es5",
+        "lib": ["es6", "dom"],
+        "sourceMap": true,
+        "allowJs": true,
+        "jsx": "react-jsx",
+        "moduleResolution": "node",
+        "rootDir": "src",
+        "forceConsistentCasingInFileNames": true,
+        "noImplicitReturns": true,
+        "noImplicitThis": true,
+        "noImplicitAny": true,
+        "strictNullChecks": true
+    }
+}
diff --git a/packages/docs/sandboxes/react/dockview/resize-container/package.json b/packages/docs/sandboxes/react/dockview/resize-container/package.json
new file mode 100644
index 000000000..600427917
--- /dev/null
+++ b/packages/docs/sandboxes/react/dockview/resize-container/package.json
@@ -0,0 +1,32 @@
+{
+  "name": "dockview.resize-container",
+  "description": "",
+  "keywords": [
+    "dockview"
+  ],
+  "version": "1.0.0",
+  "main": "src/index.tsx",
+  "dependencies": {
+    "dockview": "*",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.28",
+    "@types/react-dom": "^18.0.11",
+    "typescript": "^4.9.5",
+    "react-scripts": "*"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
+}
\ No newline at end of file
diff --git a/packages/docs/sandboxes/react/dockview/resize-container/public/index.html b/packages/docs/sandboxes/react/dockview/resize-container/public/index.html
new file mode 100644
index 000000000..67c682336
--- /dev/null
+++ b/packages/docs/sandboxes/react/dockview/resize-container/public/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+	<meta name="theme-color" content="#000000">
+	<!--
+      manifest.json provides metadata used when your web app is added to the
+      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
+    -->
+	<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+	<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+	<!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+	<title>React App</title>
+</head>
+
+<body>
+	<noscript>
+		You need to enable JavaScript to run this app.
+	</noscript>
+	<div id="root"></div>
+	<!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+</body>
+
+</html>
diff --git a/packages/docs/sandboxes/react/dockview/resize-container/src/app.tsx b/packages/docs/sandboxes/react/dockview/resize-container/src/app.tsx
new file mode 100644
index 000000000..25c397bc2
--- /dev/null
+++ b/packages/docs/sandboxes/react/dockview/resize-container/src/app.tsx
@@ -0,0 +1,117 @@
+import {
+    DockviewReact,
+    DockviewReadyEvent,
+    IDockviewPanelProps,
+} from 'dockview';
+import * as React from 'react';
+
+const components = {
+    default: (props: IDockviewPanelProps<{ title: string }>) => {
+        return (
+            <div style={{ padding: '20px', color: 'white' }}>
+                {props.params.title}
+            </div>
+        );
+    },
+};
+
+export const App: React.FC = (props: { theme?: string }) => {
+    const onReady = (event: DockviewReadyEvent) => {
+        const panel = event.api.addPanel({
+            id: 'panel_1',
+            component: 'default',
+            params: {
+                title: 'Panel 1',
+            },
+        });
+
+        panel.group.locked = true;
+        panel.group.header.hidden = true;
+
+        event.api.addPanel({
+            id: 'panel_2',
+            component: 'default',
+            params: {
+                title: 'Panel 2',
+            },
+        });
+
+        event.api.addPanel({
+            id: 'panel_3',
+            component: 'default',
+            params: {
+                title: 'Panel 3',
+            },
+        });
+
+        event.api.addPanel({
+            id: 'panel_4',
+            component: 'default',
+            params: {
+                title: 'Panel 4',
+            },
+            position: { referencePanel: 'panel_1', direction: 'right' },
+        });
+
+        const panel5 = event.api.addPanel({
+            id: 'panel_5',
+            component: 'default',
+            params: {
+                title: 'Panel 5',
+            },
+            position: { referencePanel: 'panel_3', direction: 'right' },
+        });
+
+        // panel5.group!.model.header.hidden = true;
+        // panel5.group!.model.locked = true;
+
+        event.api.addPanel({
+            id: 'panel_6',
+            component: 'default',
+            params: {
+                title: 'Panel 6',
+            },
+            position: { referencePanel: 'panel_5', direction: 'below' },
+        });
+
+        event.api.addPanel({
+            id: 'panel_7',
+            component: 'default',
+            params: {
+                title: 'Panel 7',
+            },
+            position: { referencePanel: 'panel_6', direction: 'right' },
+        });
+    };
+
+    return (
+        <DockviewReact
+            components={components}
+            onReady={onReady}
+            className={`${props.theme || 'dockview-theme-abyss'}`}
+        />
+    );
+};
+
+const Container = (props: any) => {
+    const [value, setValue] = React.useState<string>('50');
+
+    return (
+        <div
+            style={{ height: '100%', display: 'flex', flexDirection: 'column' }}
+        >
+            <input
+                onChange={(event) => setValue(event.target.value)}
+                type="range"
+                min="1"
+                max="100"
+                value={value}
+            />
+            <div style={{ height: `${value}%`, width: `${value}%` }}>
+                <App {...props} />
+            </div>
+        </div>
+    );
+};
+
+export default Container;
diff --git a/packages/docs/sandboxes/react/dockview/resize-container/src/index.tsx b/packages/docs/sandboxes/react/dockview/resize-container/src/index.tsx
new file mode 100644
index 000000000..2fe1be232
--- /dev/null
+++ b/packages/docs/sandboxes/react/dockview/resize-container/src/index.tsx
@@ -0,0 +1,20 @@
+import { StrictMode } from 'react';
+import * as ReactDOMClient from 'react-dom/client';
+import './styles.css';
+import 'dockview/dist/styles/dockview.css';
+
+import App from './app';
+
+const rootElement = document.getElementById('root');
+
+if (rootElement) {
+    const root = ReactDOMClient.createRoot(rootElement);
+
+    root.render(
+        <StrictMode>
+            <div className="app">
+                <App />
+            </div>
+        </StrictMode>
+    );
+}
diff --git a/packages/docs/sandboxes/react/dockview/resize-container/src/styles.css b/packages/docs/sandboxes/react/dockview/resize-container/src/styles.css
new file mode 100644
index 000000000..92b6a1b36
--- /dev/null
+++ b/packages/docs/sandboxes/react/dockview/resize-container/src/styles.css
@@ -0,0 +1,16 @@
+body {
+  margin: 0px;
+  color: white;
+  font-family: sans-serif;
+  text-align: center;
+}
+
+#root {
+  height: 100vh;
+  width: 100vw;
+}
+
+.app {
+  height: 100%;
+
+}
diff --git a/packages/docs/sandboxes/react/dockview/resize-container/tsconfig.json b/packages/docs/sandboxes/react/dockview/resize-container/tsconfig.json
new file mode 100644
index 000000000..cdc4fb5f5
--- /dev/null
+++ b/packages/docs/sandboxes/react/dockview/resize-container/tsconfig.json
@@ -0,0 +1,18 @@
+{
+    "compilerOptions": {
+        "outDir": "build/dist",
+        "module": "esnext",
+        "target": "es5",
+        "lib": ["es6", "dom"],
+        "sourceMap": true,
+        "allowJs": true,
+        "jsx": "react-jsx",
+        "moduleResolution": "node",
+        "rootDir": "src",
+        "forceConsistentCasingInFileNames": true,
+        "noImplicitReturns": true,
+        "noImplicitThis": true,
+        "noImplicitAny": true,
+        "strictNullChecks": true
+    }
+}
diff --git a/packages/docs/sandboxes/react/dockview/resize/package.json b/packages/docs/sandboxes/react/dockview/resize/package.json
new file mode 100644
index 000000000..6936b9103
--- /dev/null
+++ b/packages/docs/sandboxes/react/dockview/resize/package.json
@@ -0,0 +1,32 @@
+{
+  "name": "dockview.resize",
+  "description": "",
+  "keywords": [
+    "dockview"
+  ],
+  "version": "1.0.0",
+  "main": "src/index.tsx",
+  "dependencies": {
+    "dockview": "*",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.28",
+    "@types/react-dom": "^18.0.11",
+    "typescript": "^4.9.5",
+    "react-scripts": "*"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
+}
diff --git a/packages/docs/sandboxes/react/dockview/resize/public/index.html b/packages/docs/sandboxes/react/dockview/resize/public/index.html
new file mode 100644
index 000000000..1f8a52426
--- /dev/null
+++ b/packages/docs/sandboxes/react/dockview/resize/public/index.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+	<meta name="theme-color" content="#000000">
+	<!--
+      manifest.json provides metadata used when your web app is added to the
+      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
+    -->
+	<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+	<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
+	<!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+	<title>React App</title>
+</head>
+
+<body>
+	<noscript>
+		You need to enable JavaScript to run this app.
+	</noscript>
+	<div id="root"></div>
+	<!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+</body>
+
+</html>
diff --git a/packages/docs/sandboxes/react/dockview/resize/src/app.tsx b/packages/docs/sandboxes/react/dockview/resize/src/app.tsx
new file mode 100644
index 000000000..a712edccc
--- /dev/null
+++ b/packages/docs/sandboxes/react/dockview/resize/src/app.tsx
@@ -0,0 +1,127 @@
+import {
+    DockviewReact,
+    DockviewReadyEvent,
+    IDockviewPanelProps,
+} from 'dockview';
+import * as React from 'react';
+import './resize.scss';
+
+const Default = (props: IDockviewPanelProps) => {
+    const [width, setWidth] = React.useState<number>(100);
+    const [height, setHeight] = React.useState<number>(100);
+
+    return (
+        <div className="resize-panel">
+            <div style={{ height: '25px' }}>{props.api.title}</div>
+            <div className="resize-control">
+                <span>Width:</span>
+                <input
+                    value={width}
+                    onChange={(e) => setWidth(Number(e.target.value))}
+                    type="number"
+                    min={50}
+                    step={1}
+                />
+                <button
+                    style={{ width: '100px' }}
+                    onClick={() => {
+                        props.api.group.api.setSize({
+                            width,
+                        });
+                    }}
+                >
+                    Resize Group
+                </button>
+                <button
+                    style={{ width: '100px' }}
+                    onClick={() => {
+                        props.api.setSize({
+                            width,
+                        });
+                    }}
+                >
+                    Resize panel
+                </button>
+            </div>
+            <div className="resize-control">
+                <span>Height:</span>
+                <input
+                    value={height}
+                    onChange={(e) => setHeight(Number(e.target.value))}
+                    type="number"
+                    min={50}
+                    step={1}
+                />
+                <button
+                    style={{ width: '100px' }}
+                    onClick={() => {
+                        props.api.group.api.setSize({
+                            height,
+                        });
+                    }}
+                >
+                    Resize Group
+                </button>
+                <button
+                    style={{ width: '100px' }}
+                    onClick={() => {
+                        props.api.setSize({
+                            height,
+                        });
+                    }}
+                >
+                    Resize Panel
+                </button>
+            </div>
+        </div>
+    );
+};
+
+const components = {
+    default: Default,
+};
+
+const ResizeDockview = (props: { theme?: string }) => {
+    const onReady = (event: DockviewReadyEvent) => {
+        event.api.addPanel({
+            id: 'panel_1',
+            component: 'default',
+        });
+
+        event.api.addPanel({
+            id: 'panel_2',
+            component: 'default',
+            position: {
+                direction: 'right',
+                referencePanel: 'panel_1',
+            },
+        });
+
+        event.api.addPanel({
+            id: 'panel_3',
+            component: 'default',
+            position: {
+                direction: 'below',
+                referencePanel: 'panel_1',
+            },
+        });
+        event.api.addPanel({
+            id: 'panel_4',
+            component: 'default',
+        });
+        event.api.addPanel({
+            id: 'panel_5',
+            component: 'default',
+        });
+    };
+
+    return (
+        <DockviewReact
+            className={`${props.theme || 'dockview-theme-abyss'}`}
+            onReady={onReady}
+            components={components}
+        />
+    );
+};
+
+export default ResizeDockview;
diff --git a/packages/docs/sandboxes/react/dockview/resize/src/index.tsx b/packages/docs/sandboxes/react/dockview/resize/src/index.tsx
new file mode 100644
index 000000000..2fe1be232
--- /dev/null
+++ b/packages/docs/sandboxes/react/dockview/resize/src/index.tsx
@@ -0,0 +1,20 @@
+import { StrictMode } from 'react';
+import * as ReactDOMClient from 'react-dom/client';
+import './styles.css';
+import 'dockview/dist/styles/dockview.css';
+
+import App from './app';
+
+const rootElement = document.getElementById('root');
+
+if (rootElement) {
+    const root = ReactDOMClient.createRoot(rootElement);
+
+    root.render(
+        <StrictMode>
+            <div className="app">
+                <App />
+            </div>
+        </StrictMode>
+    );
+}
diff --git a/packages/docs/sandboxes/react/dockview/resize/src/resize.scss b/packages/docs/sandboxes/react/dockview/resize/src/resize.scss
new file mode 100644
index 000000000..25b49d5cb
--- /dev/null
+++ b/packages/docs/sandboxes/react/dockview/resize/src/resize.scss
@@ -0,0 +1,23 @@
+.resize-panel {
+    padding: 10px;
+    color: white;
+
+    .resize-control {
+        display: flex;
+        height: 18px;
+        line-height: 18px;
+        font-size: 13px;
+
+        span {
+            width: 60px;
+        }
+
+        input {
+            width: 75px;
+        }
+
+        button {
+            width: 50px;
+        }
+    }
+}
diff --git a/packages/docs/sandboxes/react/dockview/resize/src/styles.css b/packages/docs/sandboxes/react/dockview/resize/src/styles.css
new file mode 100644
index 000000000..92b6a1b36
--- /dev/null
+++ b/packages/docs/sandboxes/react/dockview/resize/src/styles.css
@@ -0,0 +1,16 @@
+body {
+  margin: 0px;
+  color: white;
+  font-family: sans-serif;
+  text-align: center;
+}
+
+#root {
+  height: 100vh;
+  width: 100vw;
+}
+
+.app {
+  height: 100%;
+
+}
diff --git a/packages/docs/sandboxes/react/dockview/resize/tsconfig.json b/packages/docs/sandboxes/react/dockview/resize/tsconfig.json
new file mode 100644
index 000000000..cdc4fb5f5
--- /dev/null
+++ b/packages/docs/sandboxes/react/dockview/resize/tsconfig.json
@@ -0,0 +1,18 @@
+{
+    "compilerOptions": {
+        "outDir": "build/dist",
+        "module": "esnext",
+        "target": "es5",
+        "lib": ["es6", "dom"],
+        "sourceMap": true,
+        "allowJs": true,
+        "jsx": "react-jsx",
+        "moduleResolution": "node",
+        "rootDir": "src",
+        "forceConsistentCasingInFileNames": true,
+        "noImplicitReturns": true,
+        "noImplicitThis": true,
+        "noImplicitAny": true,
+        "strictNullChecks": true
+    }
+}
diff --git a/packages/docs/sandboxes/react/dockview/scrollbars/package.json b/packages/docs/sandboxes/react/dockview/scrollbars/package.json
new file mode 100644
index 000000000..95a6e3227
--- /dev/null
+++ b/packages/docs/sandboxes/react/dockview/scrollbars/package.json
@@ -0,0 +1,34 @@
+{
+  "name": "dockview.scrollbars",
+  "description": "",
+  "keywords": [
+    "dockview"
+  ],
+  "version": "1.0.0",
+  "main": "src/index.tsx",
+  "dependencies": {
+    "dockview": "*",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "uuid": "^9.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.28",
+    "@types/react-dom": "^18.0.11",
+    "@types/uuid": "^9.0.0",
+    "typescript": "^4.9.5",
+    "react-scripts": "*"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
+}
diff --git a/packages/docs/sandboxes/react/dockview/scrollbars/public/index.html b/packages/docs/sandboxes/react/dockview/scrollbars/public/index.html
new file mode 100644
index 000000000..5a4850c1d
--- /dev/null
+++ b/packages/docs/sandboxes/react/dockview/scrollbars/public/index.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+	<meta name="theme-color" content="#000000">
+	<!--
+      manifest.json provides metadata used when your web app is added to the
+      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
+    -->
+	<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+	<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
+
+	<!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+	<title>React App</title>
+</head>
+
+<body>
+	<noscript>
+		You need to enable JavaScript to run this app.
+	</noscript>
+	<div id="root"></div>
+	<!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+</body>
+
+</html>
diff --git a/packages/docs/sandboxes/react/dockview/scrollbars/src/app.scss b/packages/docs/sandboxes/react/dockview/scrollbars/src/app.scss
new file mode 100644
index 000000000..e03cd2acf
--- /dev/null
+++ b/packages/docs/sandboxes/react/dockview/scrollbars/src/app.scss
@@ -0,0 +1,16 @@
+.group-control {
+    .action {
+        padding: 4px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        box-sizing: border-box;
+        font-size: 18px;
+        cursor: pointer;
+
+        &:hover {
+            border-radius: 2px;
+            background-color: var(--dv-icon-hover-background-color);
+        }
+    }
+}
diff --git a/packages/docs/sandboxes/react/dockview/scrollbars/src/app.tsx b/packages/docs/sandboxes/react/dockview/scrollbars/src/app.tsx
new file mode 100644
index 000000000..bece60098
--- /dev/null
+++ b/packages/docs/sandboxes/react/dockview/scrollbars/src/app.tsx
@@ -0,0 +1,77 @@
+import {
+    DockviewReact,
+    DockviewReadyEvent,
+    IDockviewPanelProps,
+} from 'dockview';
+import './app.scss';
+
+const TEXT =
+    'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.';
+
+const components = {
+    fixedHeightContainer: (props: IDockviewPanelProps<{ title: string }>) => {
+        return (
+            <div style={{ height: '100%', color: 'white' }}>
+                {[TEXT, '\n\n'].join('').repeat(20)}
+            </div>
+        );
+    },
+    overflowContainer: (props: IDockviewPanelProps<{ title: string }>) => {
+        return (
+            <div style={{ height: '2000px', overflow: 'auto', color: 'white' }}>
+                {[TEXT, '\n\n'].join('').repeat(20)}
+            </div>
+        );
+    },
+    userDefinedOverflowContainer: (
+        props: IDockviewPanelProps<{ title: string }>
+    ) => {
+        return (
+            <div style={{ height: '100%', color: 'white' }}>
+                <div
+                    style={{
+                        height: '100%',
+                        color: 'white',
+                        overflow: 'auto',
+                    }}
+                >
+                    {[TEXT, '\n\n'].join('').repeat(20)}
+                </div>
+            </div>
+        );
+    },
+};
+
+const DockviewComponent = (props: { theme?: string }) => {
+    const onReady = (event: DockviewReadyEvent) => {
+        event.api.addPanel({
+            id: 'panel_1',
+            component: 'fixedHeightContainer',
+            title: 'Panel 1',
+        });
+
+        event.api.addPanel({
+            id: 'panel_2',
+            component: 'overflowContainer',
+            title: 'Panel 2',
+            position: { direction: 'right' },
+        });
+
+        event.api.addPanel({
+            id: 'panel_3',
+            component: 'userDefinedOverflowContainer',
+            title: 'Panel 3',
+            position: { direction: 'right' },
+        });
+    };
+
+    return (
+        <DockviewReact
+            components={components}
+            onReady={onReady}
+            className={props.theme || 'dockview-theme-abyss'}
+        />
+    );
+};
+
+export default DockviewComponent;
diff --git a/packages/docs/sandboxes/react/dockview/scrollbars/src/index.tsx b/packages/docs/sandboxes/react/dockview/scrollbars/src/index.tsx
new file mode 100644
index 000000000..2fe1be232
--- /dev/null
+++ b/packages/docs/sandboxes/react/dockview/scrollbars/src/index.tsx
@@ -0,0 +1,20 @@
+import { StrictMode } from 'react';
+import * as ReactDOMClient from 'react-dom/client';
+import './styles.css';
+import 'dockview/dist/styles/dockview.css';
+
+import App from './app';
+
+const rootElement = document.getElementById('root');
+
+if (rootElement) {
+    const root = ReactDOMClient.createRoot(rootElement);
+
+    root.render(
+        <StrictMode>
+            <div className="app">
+                <App />
+            </div>
+        </StrictMode>
+    );
+}
diff --git a/packages/docs/sandboxes/react/dockview/scrollbars/src/styles.css b/packages/docs/sandboxes/react/dockview/scrollbars/src/styles.css
new file mode 100644
index 000000000..92b6a1b36
--- /dev/null
+++ b/packages/docs/sandboxes/react/dockview/scrollbars/src/styles.css
@@ -0,0 +1,16 @@
+body {
+  margin: 0px;
+  color: white;
+  font-family: sans-serif;
+  text-align: center;
+}
+
+#root {
+  height: 100vh;
+  width: 100vw;
+}
+
+.app {
+  height: 100%;
+
+}
diff --git a/packages/docs/sandboxes/react/dockview/scrollbars/tsconfig.json b/packages/docs/sandboxes/react/dockview/scrollbars/tsconfig.json
new file mode 100644
index 000000000..cdc4fb5f5
--- /dev/null
+++ b/packages/docs/sandboxes/react/dockview/scrollbars/tsconfig.json
@@ -0,0 +1,18 @@
+{
+    "compilerOptions": {
+        "outDir": "build/dist",
+        "module": "esnext",
+        "target": "es5",
+        "lib": ["es6", "dom"],
+        "sourceMap": true,
+        "allowJs": true,
+        "jsx": "react-jsx",
+        "moduleResolution": "node",
+        "rootDir": "src",
+        "forceConsistentCasingInFileNames": true,
+        "noImplicitReturns": true,
+        "noImplicitThis": true,
+        "noImplicitAny": true,
+        "strictNullChecks": true
+    }
+}
diff --git a/packages/docs/sandboxes/react/dockview/tabview/package.json b/packages/docs/sandboxes/react/dockview/tabview/package.json
new file mode 100644
index 000000000..72194abb4
--- /dev/null
+++ b/packages/docs/sandboxes/react/dockview/tabview/package.json
@@ -0,0 +1,32 @@
+{
+  "name": "dockview.tabview",
+  "description": "",
+  "keywords": [
+    "dockview"
+  ],
+  "version": "1.0.0",
+  "main": "src/index.tsx",
+  "dependencies": {
+    "dockview": "*",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.28",
+    "@types/react-dom": "^18.0.11",
+    "typescript": "^4.9.5",
+    "react-scripts": "*"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
+}
diff --git a/packages/docs/sandboxes/react/dockview/tabview/public/index.html b/packages/docs/sandboxes/react/dockview/tabview/public/index.html
new file mode 100644
index 000000000..1f8a52426
--- /dev/null
+++ b/packages/docs/sandboxes/react/dockview/tabview/public/index.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+	<meta name="theme-color" content="#000000">
+	<!--
+      manifest.json provides metadata used when your web app is added to the
+      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
+    -->
+	<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+	<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
+	<!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+	<title>React App</title>
+</head>
+
+<body>
+	<noscript>
+		You need to enable JavaScript to run this app.
+	</noscript>
+	<div id="root"></div>
+	<!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+</body>
+
+</html>
diff --git a/packages/docs/sandboxes/react/dockview/tabview/src/app.tsx b/packages/docs/sandboxes/react/dockview/tabview/src/app.tsx
new file mode 100644
index 000000000..e93753e86
--- /dev/null
+++ b/packages/docs/sandboxes/react/dockview/tabview/src/app.tsx
@@ -0,0 +1,82 @@
+import {
+    DockviewApi,
+    DockviewReact,
+    DockviewReadyEvent,
+    IDockviewPanelProps,
+} from 'dockview';
+import * as React from 'react';
+
+const Default = (props: IDockviewPanelProps) => {
+    return (
+        <div style={{ height: '100%' }}>
+            <div>{props.api.title}</div>
+        </div>
+    );
+};
+
+const components = {
+    default: Default,
+};
+
+const Component = (props: { theme?: string }) => {
+    const [api, setApi] = React.useState<DockviewApi>();
+
+    React.useEffect(() => {
+        if (!api) {
+            return;
+        }
+
+        const disposables = [
+            api.onWillShowOverlay((e) => {
+                if (e.kind === 'header_space' || e.kind === 'tab') {
+                    return;
+                }
+                e.preventDefault();
+            }),
+        ];
+
+        return () => {
+            disposables.forEach((disposable) => {
+                disposable.dispose();
+            });
+        };
+    }, [api]);
+
+    const onReady = (event: DockviewReadyEvent) => {
+        setApi(event.api);
+
+        event.api.addPanel({
+            id: 'panel_1',
+            component: 'default',
+        });
+
+        event.api.addPanel({
+            id: 'panel_2',
+            component: 'default',
+        });
+
+        event.api.addPanel({
+            id: 'panel_3',
+            component: 'default',
+        });
+        event.api.addPanel({
+            id: 'panel_4',
+            component: 'default',
+        });
+        event.api.addPanel({
+            id: 'panel_5',
+            component: 'default',
+        });
+    };
+
+    return (
+        <DockviewReact
+            className={`${props.theme || 'dockview-theme-abyss'}`}
+            onReady={onReady}
+            components={components}
+            disableFloatingGroups={true}
+        />
+    );
+};
+
+export default Component;
diff --git a/packages/docs/sandboxes/react/dockview/tabview/src/index.tsx b/packages/docs/sandboxes/react/dockview/tabview/src/index.tsx
new file mode 100644
index 000000000..2fe1be232
--- /dev/null
+++ b/packages/docs/sandboxes/react/dockview/tabview/src/index.tsx
@@ -0,0 +1,20 @@
+import { StrictMode } from 'react';
+import * as ReactDOMClient from 'react-dom/client';
+import './styles.css';
+import 'dockview/dist/styles/dockview.css';
+
+import App from './app';
+
+const rootElement = document.getElementById('root');
+
+if (rootElement) {
+    const root = ReactDOMClient.createRoot(rootElement);
+
+    root.render(
+        <StrictMode>
+            <div className="app">
+                <App />
+            </div>
+        </StrictMode>
+    );
+}
diff --git a/packages/docs/sandboxes/react/dockview/tabview/src/styles.css b/packages/docs/sandboxes/react/dockview/tabview/src/styles.css
new file mode 100644
index 000000000..92b6a1b36
--- /dev/null
+++ b/packages/docs/sandboxes/react/dockview/tabview/src/styles.css
@@ -0,0 +1,16 @@
+body {
+  margin: 0px;
+  color: white;
+  font-family: sans-serif;
+  text-align: center;
+}
+
+#root {
+  height: 100vh;
+  width: 100vw;
+}
+
+.app {
+  height: 100%;
+
+}
diff --git a/packages/docs/sandboxes/react/dockview/tabview/tsconfig.json b/packages/docs/sandboxes/react/dockview/tabview/tsconfig.json
new file mode 100644
index 000000000..cdc4fb5f5
--- /dev/null
+++ b/packages/docs/sandboxes/react/dockview/tabview/tsconfig.json
@@ -0,0 +1,18 @@
+{
+    "compilerOptions": {
+        "outDir": "build/dist",
+        "module": "esnext",
+        "target": "es5",
+        "lib": ["es6", "dom"],
+        "sourceMap": true,
+        "allowJs": true,
+        "jsx": "react-jsx",
+        "moduleResolution": "node",
+        "rootDir": "src",
+        "forceConsistentCasingInFileNames": true,
+        "noImplicitReturns": true,
+        "noImplicitThis": true,
+        "noImplicitAny": true,
+        "strictNullChecks": true
+    }
+}
diff --git a/packages/docs/sandboxes/react/dockview/update-parameters/package.json b/packages/docs/sandboxes/react/dockview/update-parameters/package.json
new file mode 100644
index 000000000..1e3974aa3
--- /dev/null
+++ b/packages/docs/sandboxes/react/dockview/update-parameters/package.json
@@ -0,0 +1,32 @@
+{
+  "name": "dockview.update-parameters",
+  "description": "",
+  "keywords": [
+    "dockview"
+  ],
+  "version": "1.0.0",
+  "main": "src/index.tsx",
+  "dependencies": {
+    "dockview": "*",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.28",
+    "@types/react-dom": "^18.0.11",
+    "typescript": "^4.9.5",
+    "react-scripts": "*"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
+}
\ No newline at end of file
diff --git a/packages/docs/sandboxes/react/dockview/update-parameters/public/index.html b/packages/docs/sandboxes/react/dockview/update-parameters/public/index.html
new file mode 100644
index 000000000..1f8a52426
--- /dev/null
+++ b/packages/docs/sandboxes/react/dockview/update-parameters/public/index.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+	<meta name="theme-color" content="#000000">
+	<!--
+      manifest.json provides metadata used when your web app is added to the
+      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
+    -->
+	<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+	<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
+	<!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+	<title>React App</title>
+</head>
+
+<body>
+	<noscript>
+		You need to enable JavaScript to run this app.
+	</noscript>
+	<div id="root"></div>
+	<!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+</body>
+
+</html>
diff --git a/packages/docs/sandboxes/react/dockview/update-parameters/src/app.tsx b/packages/docs/sandboxes/react/dockview/update-parameters/src/app.tsx
new file mode 100644
index 000000000..5c4b6e08d
--- /dev/null
+++ b/packages/docs/sandboxes/react/dockview/update-parameters/src/app.tsx
@@ -0,0 +1,85 @@
+import {
+    DockviewReact,
+    DockviewReadyEvent,
+    IDockviewPanelHeaderProps,
+    IDockviewPanelProps,
+} from 'dockview';
+import * as React from 'react';
+
+interface CustomParams {
+    myValue: number;
+}
+
+const components = {
+    default: (props: IDockviewPanelProps<CustomParams>) => {
+        const [running, setRunning] = React.useState<boolean>(false);
+
+        React.useEffect(() => {
+            if (!running) {
+                return;
+            }
+
+            const interval = setInterval(() => {
+                props.api.updateParameters({ myValue: Date.now() });
+            }, 1000);
+            props.api.updateParameters({ myValue: Date.now() });
+            return () => {
+                clearInterval(interval);
+            };
+        }, [running]);
+
+        return (
+            <div style={{ padding: '20px', color: 'white' }}>
+                <div>{props.api.title}</div>
+                <button onClick={() => setRunning(!running)}>
+                    {running ? 'Stop' : 'Start'}
+                </button>
+                <span>{`value: ${props.params.myValue}`}</span>
+            </div>
+        );
+    },
+};
+
+const tabComponents = {
+    default: (props: IDockviewPanelHeaderProps<CustomParams>) => {
+        return (
+            <div>
+                <div>{`custom tab: ${props.api.title}`}</div>
+                <span>{`value: ${props.params.myValue}`}</span>
+            </div>
+        );
+    },
+};
+
+export const App: React.FC = (props: { theme?: string }) => {
+    const onReady = (event: DockviewReadyEvent) => {
+        event.api.addPanel({
+            id: 'panel_1',
+            component: 'default',
+            tabComponent: 'default',
+            params: {
+                myValue: Date.now(),
+            },
+        });
+
+        event.api.addPanel({
+            id: 'panel_2',
+            component: 'default',
+            tabComponent: 'default',
+            params: {
+                myValue: Date.now(),
+            },
+        });
+    };
+
+    return (
+        <DockviewReact
+            components={components}
+            tabComponents={tabComponents}
+            onReady={onReady}
+            className={props.theme || 'dockview-theme-abyss'}
+        />
+    );
+};
+
+export default App;
diff --git a/packages/docs/sandboxes/react/dockview/update-parameters/src/index.tsx b/packages/docs/sandboxes/react/dockview/update-parameters/src/index.tsx
new file mode 100644
index 000000000..2fe1be232
--- /dev/null
+++ b/packages/docs/sandboxes/react/dockview/update-parameters/src/index.tsx
@@ -0,0 +1,20 @@
+import { StrictMode } from 'react';
+import * as ReactDOMClient from 'react-dom/client';
+import './styles.css';
+import 'dockview/dist/styles/dockview.css';
+
+import App from './app';
+
+const rootElement = document.getElementById('root');
+
+if (rootElement) {
+    const root = ReactDOMClient.createRoot(rootElement);
+
+    root.render(
+        <StrictMode>
+            <div className="app">
+                <App />
+            </div>
+        </StrictMode>
+    );
+}
diff --git a/packages/docs/sandboxes/react/dockview/update-parameters/src/styles.css b/packages/docs/sandboxes/react/dockview/update-parameters/src/styles.css
new file mode 100644
index 000000000..92b6a1b36
--- /dev/null
+++ b/packages/docs/sandboxes/react/dockview/update-parameters/src/styles.css
@@ -0,0 +1,16 @@
+body {
+  margin: 0px;
+  color: white;
+  font-family: sans-serif;
+  text-align: center;
+}
+
+#root {
+  height: 100vh;
+  width: 100vw;
+}
+
+.app {
+  height: 100%;
+
+}
diff --git a/packages/docs/sandboxes/react/dockview/update-parameters/tsconfig.json b/packages/docs/sandboxes/react/dockview/update-parameters/tsconfig.json
new file mode 100644
index 000000000..cdc4fb5f5
--- /dev/null
+++ b/packages/docs/sandboxes/react/dockview/update-parameters/tsconfig.json
@@ -0,0 +1,18 @@
+{
+    "compilerOptions": {
+        "outDir": "build/dist",
+        "module": "esnext",
+        "target": "es5",
+        "lib": ["es6", "dom"],
+        "sourceMap": true,
+        "allowJs": true,
+        "jsx": "react-jsx",
+        "moduleResolution": "node",
+        "rootDir": "src",
+        "forceConsistentCasingInFileNames": true,
+        "noImplicitReturns": true,
+        "noImplicitThis": true,
+        "noImplicitAny": true,
+        "strictNullChecks": true
+    }
+}
diff --git a/packages/docs/sandboxes/react/dockview/update-title/package.json b/packages/docs/sandboxes/react/dockview/update-title/package.json
new file mode 100644
index 000000000..450cf100d
--- /dev/null
+++ b/packages/docs/sandboxes/react/dockview/update-title/package.json
@@ -0,0 +1,32 @@
+{
+  "name": "dockview.update-title",
+  "description": "",
+  "keywords": [
+    "dockview"
+  ],
+  "version": "1.0.0",
+  "main": "src/index.tsx",
+  "dependencies": {
+    "dockview": "*",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.28",
+    "@types/react-dom": "^18.0.11",
+    "typescript": "^4.9.5",
+    "react-scripts": "*"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
+}
diff --git a/packages/docs/sandboxes/react/dockview/update-title/public/index.html b/packages/docs/sandboxes/react/dockview/update-title/public/index.html
new file mode 100644
index 000000000..1f8a52426
--- /dev/null
+++ b/packages/docs/sandboxes/react/dockview/update-title/public/index.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+	<meta name="theme-color" content="#000000">
+	<!--
+      manifest.json provides metadata used when your web app is added to the
+      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
+    -->
+	<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+	<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
+	<!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+	<title>React App</title>
+</head>
+
+<body>
+	<noscript>
+		You need to enable JavaScript to run this app.
+	</noscript>
+	<div id="root"></div>
+	<!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+</body>
+
+</html>
diff --git a/packages/docs/sandboxes/react/dockview/update-title/src/app.tsx b/packages/docs/sandboxes/react/dockview/update-title/src/app.tsx
new file mode 100644
index 000000000..a1dd96358
--- /dev/null
+++ b/packages/docs/sandboxes/react/dockview/update-title/src/app.tsx
@@ -0,0 +1,74 @@
+import {
+    DockviewReact,
+    DockviewReadyEvent,
+    IDockviewPanelProps,
+} from 'dockview';
+import * as React from 'react';
+
+const components = {
+    default: (props: IDockviewPanelProps<{ myValue: string }>) => {
+        const [title, setTitle] = React.useState<string>(props.api.title ?? '');
+
+        const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+            setTitle(event.target.value);
+        };
+
+        const onClick = () => {
+            props.api.setTitle(title);
+        };
+
+        return (
+            <div style={{ padding: '20px', color: 'white' }}>
+                <div>
+                    <span style={{ color: 'grey' }}>{'props.api.title='}</span>
+                    <span>{`${props.api.title}`}</span>
+                </div>
+                <input value={title} onChange={onChange} />
+                <button onClick={onClick}>Change</button>
+                {JSON.stringify(Object.keys(props.params))}
+            </div>
+        );
+    },
+};
+
+export const App: React.FC = (props: { theme?: string }) => {
+    const onReady = (event: DockviewReadyEvent) => {
+        const panel = event.api.addPanel({
+            id: 'panel_1',
+            component: 'default',
+            title: 'Panel 1',
+        });
+
+        const panel2 = event.api.addPanel({
+            id: 'panel_2',
+            component: 'default',
+            title: 'Panel 2',
+            position: { referencePanel: panel },
+        });
+
+        const panel3 = event.api.addPanel({
+            id: 'panel_3',
+            component: 'default',
+            title: 'Panel 3',
+
+            position: { referencePanel: panel, direction: 'right' },
+        });
+
+        const panel4 = event.api.addPanel({
+            id: 'panel_4',
+            component: 'default',
+            title: 'Panel 4',
+            position: { referencePanel: panel3 },
+        });
+    };
+
+    return (
+        <DockviewReact
+            components={components}
+            onReady={onReady}
+            className={`${props.theme || 'dockview-theme-abyss'}`}
+        />
+    );
+};
+
+export default App;
diff --git a/packages/docs/sandboxes/react/dockview/update-title/src/index.tsx b/packages/docs/sandboxes/react/dockview/update-title/src/index.tsx
new file mode 100644
index 000000000..2fe1be232
--- /dev/null
+++ b/packages/docs/sandboxes/react/dockview/update-title/src/index.tsx
@@ -0,0 +1,20 @@
+import { StrictMode } from 'react';
+import * as ReactDOMClient from 'react-dom/client';
+import './styles.css';
+import 'dockview/dist/styles/dockview.css';
+
+import App from './app';
+
+const rootElement = document.getElementById('root');
+
+if (rootElement) {
+    const root = ReactDOMClient.createRoot(rootElement);
+
+    root.render(
+        <StrictMode>
+            <div className="app">
+                <App />
+            </div>
+        </StrictMode>
+    );
+}
diff --git a/packages/docs/sandboxes/react/dockview/update-title/src/styles.css b/packages/docs/sandboxes/react/dockview/update-title/src/styles.css
new file mode 100644
index 000000000..92b6a1b36
--- /dev/null
+++ b/packages/docs/sandboxes/react/dockview/update-title/src/styles.css
@@ -0,0 +1,16 @@
+body {
+  margin: 0px;
+  color: white;
+  font-family: sans-serif;
+  text-align: center;
+}
+
+#root {
+  height: 100vh;
+  width: 100vw;
+}
+
+.app {
+  height: 100%;
+
+}
diff --git a/packages/docs/sandboxes/react/dockview/update-title/tsconfig.json b/packages/docs/sandboxes/react/dockview/update-title/tsconfig.json
new file mode 100644
index 000000000..cdc4fb5f5
--- /dev/null
+++ b/packages/docs/sandboxes/react/dockview/update-title/tsconfig.json
@@ -0,0 +1,18 @@
+{
+    "compilerOptions": {
+        "outDir": "build/dist",
+        "module": "esnext",
+        "target": "es5",
+        "lib": ["es6", "dom"],
+        "sourceMap": true,
+        "allowJs": true,
+        "jsx": "react-jsx",
+        "moduleResolution": "node",
+        "rootDir": "src",
+        "forceConsistentCasingInFileNames": true,
+        "noImplicitReturns": true,
+        "noImplicitThis": true,
+        "noImplicitAny": true,
+        "strictNullChecks": true
+    }
+}
diff --git a/packages/docs/sandboxes/react/dockview/watermark/package.json b/packages/docs/sandboxes/react/dockview/watermark/package.json
new file mode 100644
index 000000000..73b2a641e
--- /dev/null
+++ b/packages/docs/sandboxes/react/dockview/watermark/package.json
@@ -0,0 +1,32 @@
+{
+  "name": "dockview.watermark",
+  "description": "",
+  "keywords": [
+    "dockview"
+  ],
+  "version": "1.0.0",
+  "main": "src/index.tsx",
+  "dependencies": {
+    "dockview": "*",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.28",
+    "@types/react-dom": "^18.0.11",
+    "typescript": "^4.9.5",
+    "react-scripts": "*"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
+}
diff --git a/packages/docs/sandboxes/react/dockview/watermark/public/index.html b/packages/docs/sandboxes/react/dockview/watermark/public/index.html
new file mode 100644
index 000000000..1f8a52426
--- /dev/null
+++ b/packages/docs/sandboxes/react/dockview/watermark/public/index.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+	<meta name="theme-color" content="#000000">
+	<!--
+      manifest.json provides metadata used when your web app is added to the
+      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
+    -->
+	<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+	<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
+	<!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+	<title>React App</title>
+</head>
+
+<body>
+	<noscript>
+		You need to enable JavaScript to run this app.
+	</noscript>
+	<div id="root"></div>
+	<!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+</body>
+
+</html>
diff --git a/packages/docs/sandboxes/react/dockview/watermark/src/app.tsx b/packages/docs/sandboxes/react/dockview/watermark/src/app.tsx
new file mode 100644
index 000000000..5380fc356
--- /dev/null
+++ b/packages/docs/sandboxes/react/dockview/watermark/src/app.tsx
@@ -0,0 +1,135 @@
+import {
+    DockviewApi,
+    DockviewReact,
+    DockviewReadyEvent,
+    IDockviewPanelProps,
+    IWatermarkPanelProps,
+    Orientation,
+} from 'dockview';
+import * as React from 'react';
+
+const components = {
+    default: (props: IDockviewPanelProps<{ title: string }>) => {
+        return (
+            <div
+                style={{
+                    height: '100%',
+                    padding: '20px',
+                    background: 'var(--dv-group-view-background-color)',
+                }}
+            >
+                {props.params.title}
+            </div>
+        );
+    },
+};
+
+const counter = (() => {
+    let i = 0;
+
+    return {
+        next: () => ++i,
+    };
+})();
+
+const Watermark = (props: IWatermarkPanelProps) => {
+    const isGroup = props.containerApi.groups.length > 0;
+
+    const addPanel = () => {
+        props.containerApi.addPanel({
+            id: counter.next().toString(),
+            component: 'default',
+        });
+    };
+
+    return (
+        <div
+            style={{
+                height: '100%',
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+                color: 'white',
+            }}
+        >
+            <div
+                style={{
+                    display: 'flex',
+                    flexDirection: 'column',
+                }}
+            >
+                <span>
+                    This is a custom watermark. You can put whatever React
+                    component you want here
+                </span>
+                <span>
+                    <button onClick={addPanel}>Add New Panel</button>
+                </span>
+                {isGroup && (
+                    <span>
+                        <button
+                            onClick={() => {
+                                props.close();
+                            }}
+                        >
+                            Close Group
+                        </button>
+                    </span>
+                )}
+            </div>
+        </div>
+    );
+};
+
+const DockviewWatermark = (props: { theme?: string }) => {
+    const [api, setApi] = React.useState<DockviewApi>();
+
+    const onReady = (event: DockviewReadyEvent) => {
+        // event.api.addPanel({
+        //     id: 'panel_1',
+        //     component: 'default',
+        // });
+
+        event.api.fromJSON({
+            grid: {
+                orientation: Orientation.HORIZONTAL,
+                root: { type: 'branch', data: [] },
+                height: 100,
+                width: 100,
+            },
+            panels: {},
+        });
+
+        setApi(event.api);
+    };
+
+    const onClick = () => {
+        if (!api) {
+            return;
+        }
+
+        api.addGroup();
+    };
+
+    return (
+        <div
+            style={{
+                display: 'flex',
+                flexDirection: 'column',
+                height: '100%',
+            }}
+        >
+            <div>
+                <button onClick={onClick}>Add Empty Group</button>
+            </div>
+            <DockviewReact
+                onReady={onReady}
+                components={components}
+                watermarkComponent={Watermark}
+                className={`${props.theme || 'dockview-theme-abyss'}`}
+            />
+        </div>
+    );
+};
+
+export default DockviewWatermark;
diff --git a/packages/docs/sandboxes/react/dockview/watermark/src/index.tsx b/packages/docs/sandboxes/react/dockview/watermark/src/index.tsx
new file mode 100644
index 000000000..2fe1be232
--- /dev/null
+++ b/packages/docs/sandboxes/react/dockview/watermark/src/index.tsx
@@ -0,0 +1,20 @@
+import { StrictMode } from 'react';
+import * as ReactDOMClient from 'react-dom/client';
+import './styles.css';
+import 'dockview/dist/styles/dockview.css';
+
+import App from './app';
+
+const rootElement = document.getElementById('root');
+
+if (rootElement) {
+    const root = ReactDOMClient.createRoot(rootElement);
+
+    root.render(
+        <StrictMode>
+            <div className="app">
+                <App />
+            </div>
+        </StrictMode>
+    );
+}
diff --git a/packages/docs/sandboxes/react/dockview/watermark/src/styles.css b/packages/docs/sandboxes/react/dockview/watermark/src/styles.css
new file mode 100644
index 000000000..92b6a1b36
--- /dev/null
+++ b/packages/docs/sandboxes/react/dockview/watermark/src/styles.css
@@ -0,0 +1,16 @@
+body {
+  margin: 0px;
+  color: white;
+  font-family: sans-serif;
+  text-align: center;
+}
+
+#root {
+  height: 100vh;
+  width: 100vw;
+}
+
+.app {
+  height: 100%;
+
+}
diff --git a/packages/docs/sandboxes/react/dockview/watermark/tsconfig.json b/packages/docs/sandboxes/react/dockview/watermark/tsconfig.json
new file mode 100644
index 000000000..cdc4fb5f5
--- /dev/null
+++ b/packages/docs/sandboxes/react/dockview/watermark/tsconfig.json
@@ -0,0 +1,18 @@
+{
+    "compilerOptions": {
+        "outDir": "build/dist",
+        "module": "esnext",
+        "target": "es5",
+        "lib": ["es6", "dom"],
+        "sourceMap": true,
+        "allowJs": true,
+        "jsx": "react-jsx",
+        "moduleResolution": "node",
+        "rootDir": "src",
+        "forceConsistentCasingInFileNames": true,
+        "noImplicitReturns": true,
+        "noImplicitThis": true,
+        "noImplicitAny": true,
+        "strictNullChecks": true
+    }
+}
diff --git a/packages/docs/sandboxes/react/gridview/simple/package.json b/packages/docs/sandboxes/react/gridview/simple/package.json
new file mode 100644
index 000000000..4495d37cb
--- /dev/null
+++ b/packages/docs/sandboxes/react/gridview/simple/package.json
@@ -0,0 +1,32 @@
+{
+  "name": "gridview.simple",
+  "description": "",
+  "keywords": [
+    "dockview"
+  ],
+  "version": "1.0.0",
+  "main": "src/index.tsx",
+  "dependencies": {
+    "dockview": "*",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.28",
+    "@types/react-dom": "^18.0.11",
+    "typescript": "^4.9.5",
+    "react-scripts": "*"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
+}
diff --git a/packages/docs/sandboxes/react/gridview/simple/public/index.html b/packages/docs/sandboxes/react/gridview/simple/public/index.html
new file mode 100644
index 000000000..1f8a52426
--- /dev/null
+++ b/packages/docs/sandboxes/react/gridview/simple/public/index.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+	<meta name="theme-color" content="#000000">
+	<!--
+      manifest.json provides metadata used when your web app is added to the
+      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
+    -->
+	<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+	<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
+	<!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+	<title>React App</title>
+</head>
+
+<body>
+	<noscript>
+		You need to enable JavaScript to run this app.
+	</noscript>
+	<div id="root"></div>
+	<!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+</body>
+
+</html>
diff --git a/packages/docs/sandboxes/react/gridview/simple/src/app.scss b/packages/docs/sandboxes/react/gridview/simple/src/app.scss
new file mode 100644
index 000000000..a708b2796
--- /dev/null
+++ b/packages/docs/sandboxes/react/gridview/simple/src/app.scss
@@ -0,0 +1,3 @@
+.simple-gridview-example {
+    --dv-active-sash-color: #007acc;
+}
diff --git a/packages/docs/sandboxes/react/gridview/simple/src/app.tsx b/packages/docs/sandboxes/react/gridview/simple/src/app.tsx
new file mode 100644
index 000000000..5b78eb186
--- /dev/null
+++ b/packages/docs/sandboxes/react/gridview/simple/src/app.tsx
@@ -0,0 +1,145 @@
+import {
+    GridviewApi,
+    GridviewReact,
+    GridviewReadyEvent,
+    IGridviewPanelProps,
+    LayoutPriority,
+    Orientation,
+} from 'dockview';
+import * as React from 'react';
+
+const components = {
+    default: (props: IGridviewPanelProps<{ title: string }>) => {
+        return (
+            <div style={{ padding: '20px', color: 'white' }}>
+                {props.params.title}
+            </div>
+        );
+    },
+};
+
+export const App: React.FC = (props: { theme?: string }) => {
+    const [api, setApi] = React.useState<GridviewApi>();
+
+    const onReady = (event: GridviewReadyEvent) => {
+        const panel1 = event.api.addPanel({
+            id: 'panel_1',
+            component: 'default',
+            params: {
+                title: 'Panel 1',
+            },
+        });
+
+        event.api.addPanel({
+            id: 'panel_2',
+            component: 'default',
+            params: {
+                title: 'Panel 2',
+            },
+            priority: LayoutPriority.High,
+        });
+
+        event.api.addPanel({
+            id: 'panel_3',
+            component: 'default',
+            params: {
+                title: 'Panel 3',
+            },
+        });
+
+        event.api.addPanel({
+            id: 'panel_4',
+            component: 'default',
+            params: {
+                title: 'Panel 4',
+            },
+
+            position: { referencePanel: 'panel_2', direction: 'right' },
+        });
+
+        event.api.addPanel({
+            id: 'panel_5',
+            component: 'default',
+            params: {
+                title: 'Panel 5',
+            },
+
+            position: { referencePanel: 'panel_3', direction: 'right' },
+        });
+
+        event.api.addPanel({
+            id: 'panel_6',
+            component: 'default',
+            params: {
+                title: 'Panel 6',
+            },
+            position: { referencePanel: 'panel_5', direction: 'below' },
+            minimumWidth: 10,
+        });
+
+        event.api.addPanel({
+            id: 'panel_7',
+            component: 'default',
+            params: {
+                title: 'Panel 7',
+            },
+            position: { referencePanel: 'panel_6', direction: 'right' },
+            minimumWidth: 10,
+        });
+
+        event.api.addPanel({
+            id: 'panel_8',
+            component: 'default',
+            params: {
+                title: 'Panel 8',
+            },
+            position: { referencePanel: 'panel_6', direction: 'right' },
+            minimumWidth: 10,
+        });
+
+        setApi(event.api);
+    };
+
+    return (
+        <div
+            style={{ height: '100%', display: 'flex', flexDirection: 'column' }}
+        >
+            <div>
+                <button
+                    onClick={() => {
+                        if (!api) {
+                            return;
+                        }
+
+                        const panel = api.getPanel('panel_3');
+
+                        if (!panel) {
+                            return;
+                        }
+
+                        // panel.api.setVisible(!panel.api.isVisible);
+
+                        if (panel.height === 0) {
+                            panel.api.setSize({ height: 200 });
+                        } else {
+                            panel.api.setSize({ height: 0 });
+                        }
+                    }}
+                >
+                    Resize
+                </button>
+            </div>
+            <div style={{ flexGrow: 1 }}>
+                <GridviewReact
+                    components={components}
+                    onReady={onReady}
+                    // proportionalLayout={false}
+                    orientation={Orientation.VERTICAL}
+                    className={props.theme || 'dockview-theme-abyss'}
+                />
+            </div>
+        </div>
+    );
+};
+
+export default App;
diff --git a/packages/docs/sandboxes/react/gridview/simple/src/index.tsx b/packages/docs/sandboxes/react/gridview/simple/src/index.tsx
new file mode 100644
index 000000000..2fe1be232
--- /dev/null
+++ b/packages/docs/sandboxes/react/gridview/simple/src/index.tsx
@@ -0,0 +1,20 @@
+import { StrictMode } from 'react';
+import * as ReactDOMClient from 'react-dom/client';
+import './styles.css';
+import 'dockview/dist/styles/dockview.css';
+
+import App from './app';
+
+const rootElement = document.getElementById('root');
+
+if (rootElement) {
+    const root = ReactDOMClient.createRoot(rootElement);
+
+    root.render(
+        <StrictMode>
+            <div className="app">
+                <App />
+            </div>
+        </StrictMode>
+    );
+}
diff --git a/packages/docs/sandboxes/react/gridview/simple/src/styles.css b/packages/docs/sandboxes/react/gridview/simple/src/styles.css
new file mode 100644
index 000000000..92b6a1b36
--- /dev/null
+++ b/packages/docs/sandboxes/react/gridview/simple/src/styles.css
@@ -0,0 +1,16 @@
+body {
+  margin: 0px;
+  color: white;
+  font-family: sans-serif;
+  text-align: center;
+}
+
+#root {
+  height: 100vh;
+  width: 100vw;
+}
+
+.app {
+  height: 100%;
+
+}
diff --git a/packages/docs/sandboxes/react/gridview/simple/tsconfig.json b/packages/docs/sandboxes/react/gridview/simple/tsconfig.json
new file mode 100644
index 000000000..cdc4fb5f5
--- /dev/null
+++ b/packages/docs/sandboxes/react/gridview/simple/tsconfig.json
@@ -0,0 +1,18 @@
+{
+    "compilerOptions": {
+        "outDir": "build/dist",
+        "module": "esnext",
+        "target": "es5",
+        "lib": ["es6", "dom"],
+        "sourceMap": true,
+        "allowJs": true,
+        "jsx": "react-jsx",
+        "moduleResolution": "node",
+        "rootDir": "src",
+        "forceConsistentCasingInFileNames": true,
+        "noImplicitReturns": true,
+        "noImplicitThis": true,
+        "noImplicitAny": true,
+        "strictNullChecks": true
+    }
+}
diff --git a/packages/docs/sandboxes/react/paneview/simple/package.json b/packages/docs/sandboxes/react/paneview/simple/package.json
new file mode 100644
index 000000000..a2fa0292a
--- /dev/null
+++ b/packages/docs/sandboxes/react/paneview/simple/package.json
@@ -0,0 +1,32 @@
+{
+  "name": "paneview.simple",
+  "description": "",
+  "keywords": [
+    "dockview"
+  ],
+  "version": "1.0.0",
+  "main": "src/index.tsx",
+  "dependencies": {
+    "dockview": "*",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.28",
+    "@types/react-dom": "^18.0.11",
+    "typescript": "^4.9.5",
+    "react-scripts": "*"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
+}
diff --git a/packages/docs/sandboxes/react/paneview/simple/public/index.html b/packages/docs/sandboxes/react/paneview/simple/public/index.html
new file mode 100644
index 000000000..1f8a52426
--- /dev/null
+++ b/packages/docs/sandboxes/react/paneview/simple/public/index.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+	<meta name="theme-color" content="#000000">
+	<!--
+      manifest.json provides metadata used when your web app is added to the
+      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
+    -->
+	<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+	<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
+	<!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+	<title>React App</title>
+</head>
+
+<body>
+	<noscript>
+		You need to enable JavaScript to run this app.
+	</noscript>
+	<div id="root"></div>
+	<!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+</body>
+
+</html>
diff --git a/packages/docs/sandboxes/react/paneview/simple/src/app.tsx b/packages/docs/sandboxes/react/paneview/simple/src/app.tsx
new file mode 100644
index 000000000..5f982595e
--- /dev/null
+++ b/packages/docs/sandboxes/react/paneview/simple/src/app.tsx
@@ -0,0 +1,104 @@
+import {
+    PaneviewReact,
+    PaneviewReadyEvent,
+    IPaneviewPanelProps,
+} from 'dockview';
+import * as React from 'react';
+
+const components = {
+    default: (props: IPaneviewPanelProps<{ title: string }>) => {
+        return (
+            <div
+                style={{
+                    padding: '10px',
+                    height: '100%',
+                    backgroundColor: 'rgb(60,60,60)',
+                }}
+            >
+                {props.params.title}
+            </div>
+        );
+    },
+};
+
+const MyHeaderComponent = (props: IPaneviewPanelProps<{ title: string }>) => {
+    const [expanded, setExpanded] = React.useState<boolean>(
+        props.api.isExpanded
+    );
+
+    React.useEffect(() => {
+        const disposable = props.api.onDidExpansionChange((event) => {
+            setExpanded(event.isExpanded);
+        });
+
+        return () => {
+            disposable.dispose();
+        };
+    }, []);
+
+    const onClick = () => {
+        props.api.setExpanded(!expanded);
+    };
+
+    return (
+        <div
+            style={{
+                padding: '10px',
+                height: '100%',
+                backgroundColor: 'rgb(60,60,60)',
+            }}
+        >
+            <a
+                onClick={onClick}
+                className={expanded ? 'expanded' : 'collapsed'}
+            />
+            <span>{props.params.title}</span>
+        </div>
+    );
+};
+
+const headerComponents = {
+    myHeaderComponent: MyHeaderComponent,
+};
+
+export const App: React.FC = (props: { theme?: string }) => {
+    const onReady = (event: PaneviewReadyEvent) => {
+        event.api.addPanel({
+            id: 'panel_1',
+            component: 'default',
+            params: {
+                title: 'Panel 1',
+            },
+            title: 'Panel 1',
+        });
+
+        event.api.addPanel({
+            id: 'panel_2',
+            component: 'default',
+            params: {
+                title: 'Panel 2',
+            },
+            title: 'Panel 2',
+        });
+
+        event.api.addPanel({
+            id: 'panel_3',
+            component: 'default',
+            params: {
+                title: 'Panel 3',
+            },
+            title: 'Panel 3',
+        });
+    };
+
+    return (
+        <PaneviewReact
+            components={components}
+            headerComponents={headerComponents}
+            onReady={onReady}
+            className={props.theme || 'dockview-theme-abyss'}
+        />
+    );
+};
+
+export default App;
diff --git a/packages/docs/sandboxes/react/paneview/simple/src/index.tsx b/packages/docs/sandboxes/react/paneview/simple/src/index.tsx
new file mode 100644
index 000000000..2fe1be232
--- /dev/null
+++ b/packages/docs/sandboxes/react/paneview/simple/src/index.tsx
@@ -0,0 +1,20 @@
+import { StrictMode } from 'react';
+import * as ReactDOMClient from 'react-dom/client';
+import './styles.css';
+import 'dockview/dist/styles/dockview.css';
+
+import App from './app';
+
+const rootElement = document.getElementById('root');
+
+if (rootElement) {
+    const root = ReactDOMClient.createRoot(rootElement);
+
+    root.render(
+        <StrictMode>
+            <div className="app">
+                <App />
+            </div>
+        </StrictMode>
+    );
+}
diff --git a/packages/docs/sandboxes/react/paneview/simple/src/styles.css b/packages/docs/sandboxes/react/paneview/simple/src/styles.css
new file mode 100644
index 000000000..92b6a1b36
--- /dev/null
+++ b/packages/docs/sandboxes/react/paneview/simple/src/styles.css
@@ -0,0 +1,16 @@
+body {
+  margin: 0px;
+  color: white;
+  font-family: sans-serif;
+  text-align: center;
+}
+
+#root {
+  height: 100vh;
+  width: 100vw;
+}
+
+.app {
+  height: 100%;
+
+}
diff --git a/packages/docs/sandboxes/react/paneview/simple/tsconfig.json b/packages/docs/sandboxes/react/paneview/simple/tsconfig.json
new file mode 100644
index 000000000..cdc4fb5f5
--- /dev/null
+++ b/packages/docs/sandboxes/react/paneview/simple/tsconfig.json
@@ -0,0 +1,18 @@
+{
+    "compilerOptions": {
+        "outDir": "build/dist",
+        "module": "esnext",
+        "target": "es5",
+        "lib": ["es6", "dom"],
+        "sourceMap": true,
+        "allowJs": true,
+        "jsx": "react-jsx",
+        "moduleResolution": "node",
+        "rootDir": "src",
+        "forceConsistentCasingInFileNames": true,
+        "noImplicitReturns": true,
+        "noImplicitThis": true,
+        "noImplicitAny": true,
+        "strictNullChecks": true
+    }
+}
diff --git a/packages/docs/sandboxes/react/splitview/simple/package.json b/packages/docs/sandboxes/react/splitview/simple/package.json
new file mode 100644
index 000000000..142268454
--- /dev/null
+++ b/packages/docs/sandboxes/react/splitview/simple/package.json
@@ -0,0 +1,32 @@
+{
+  "name": "splitview.simple",
+  "description": "",
+  "keywords": [
+    "dockview"
+  ],
+  "version": "1.0.0",
+  "main": "src/index.tsx",
+  "dependencies": {
+    "dockview": "*",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.28",
+    "@types/react-dom": "^18.0.11",
+    "typescript": "^4.9.5",
+    "react-scripts": "*"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
+}
diff --git a/packages/docs/sandboxes/react/splitview/simple/public/index.html b/packages/docs/sandboxes/react/splitview/simple/public/index.html
new file mode 100644
index 000000000..1f8a52426
--- /dev/null
+++ b/packages/docs/sandboxes/react/splitview/simple/public/index.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+	<meta name="theme-color" content="#000000">
+	<!--
+      manifest.json provides metadata used when your web app is added to the
+      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
+    -->
+	<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+	<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
+	<!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+	<title>React App</title>
+</head>
+
+<body>
+	<noscript>
+		You need to enable JavaScript to run this app.
+	</noscript>
+	<div id="root"></div>
+	<!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+</body>
+
+</html>
diff --git a/packages/docs/sandboxes/react/splitview/simple/src/app.tsx b/packages/docs/sandboxes/react/splitview/simple/src/app.tsx
new file mode 100644
index 000000000..5ac4d460d
--- /dev/null
+++ b/packages/docs/sandboxes/react/splitview/simple/src/app.tsx
@@ -0,0 +1,59 @@
+import {
+    SplitviewReact,
+    SplitviewReadyEvent,
+    ISplitviewPanelProps,
+} from 'dockview';
+import * as React from 'react';
+
+const components = {
+    default: (props: ISplitviewPanelProps<{ title: string }>) => {
+        return (
+            <div
+                style={{
+                    padding: '10px',
+                    height: '100%',
+                }}
+            >
+                {props.params.title}
+            </div>
+        );
+    },
+};
+
+export const App: React.FC = (props: { theme?: string }) => {
+    const onReady = (event: SplitviewReadyEvent) => {
+        event.api.addPanel({
+            id: 'panel_1',
+            component: 'default',
+            params: {
+                title: 'Panel 1',
+            },
+        });
+
+        event.api.addPanel({
+            id: 'panel_2',
+            component: 'default',
+            params: {
+                title: 'Panel 2',
+            },
+        });
+
+        event.api.addPanel({
+            id: 'panel_3',
+            component: 'default',
+            params: {
+                title: 'Panel 3',
+            },
+        });
+    };
+
+    return (
+        <SplitviewReact
+            components={components}
+            onReady={onReady}
+            className={props.theme || 'dockview-theme-abyss'}
+        />
+    );
+};
+
+export default App;
diff --git a/packages/docs/sandboxes/react/splitview/simple/src/index.tsx b/packages/docs/sandboxes/react/splitview/simple/src/index.tsx
new file mode 100644
index 000000000..2fe1be232
--- /dev/null
+++ b/packages/docs/sandboxes/react/splitview/simple/src/index.tsx
@@ -0,0 +1,20 @@
+import { StrictMode } from 'react';
+import * as ReactDOMClient from 'react-dom/client';
+import './styles.css';
+import 'dockview/dist/styles/dockview.css';
+
+import App from './app';
+
+const rootElement = document.getElementById('root');
+
+if (rootElement) {
+    const root = ReactDOMClient.createRoot(rootElement);
+
+    root.render(
+        <StrictMode>
+            <div className="app">
+                <App />
+            </div>
+        </StrictMode>
+    );
+}
diff --git a/packages/docs/sandboxes/react/splitview/simple/src/styles.css b/packages/docs/sandboxes/react/splitview/simple/src/styles.css
new file mode 100644
index 000000000..92b6a1b36
--- /dev/null
+++ b/packages/docs/sandboxes/react/splitview/simple/src/styles.css
@@ -0,0 +1,16 @@
+body {
+  margin: 0px;
+  color: white;
+  font-family: sans-serif;
+  text-align: center;
+}
+
+#root {
+  height: 100vh;
+  width: 100vw;
+}
+
+.app {
+  height: 100%;
+
+}
diff --git a/packages/docs/sandboxes/react/splitview/simple/tsconfig.json b/packages/docs/sandboxes/react/splitview/simple/tsconfig.json
new file mode 100644
index 000000000..cdc4fb5f5
--- /dev/null
+++ b/packages/docs/sandboxes/react/splitview/simple/tsconfig.json
@@ -0,0 +1,18 @@
+{
+    "compilerOptions": {
+        "outDir": "build/dist",
+        "module": "esnext",
+        "target": "es5",
+        "lib": ["es6", "dom"],
+        "sourceMap": true,
+        "allowJs": true,
+        "jsx": "react-jsx",
+        "moduleResolution": "node",
+        "rootDir": "src",
+        "forceConsistentCasingInFileNames": true,
+        "noImplicitReturns": true,
+        "noImplicitThis": true,
+        "noImplicitAny": true,
+        "strictNullChecks": true
+    }
+}