diff --git a/examples/react-example/src/index.css b/examples/react-example/src/index.css
index b9ae4513e0..6a2929882c 100644
--- a/examples/react-example/src/index.css
+++ b/examples/react-example/src/index.css
@@ -14,8 +14,9 @@
 body {
     margin: 0;
     background-color: #f0f0f0;
-    font-family: "ui-monospace", "SFMono-Regular", "SF Mono", "Menlo",
-        "Consolas", "Liberation Mono", monospace;
+    font-family:
+        "ui-monospace", "SFMono-Regular", "SF Mono", "Menlo", "Consolas",
+        "Liberation Mono", monospace;
 }
 
 .container {
@@ -26,13 +27,26 @@ body {
     bottom: 0;
 
     display: grid;
-    gap: 8px;
     grid-template-columns: 1fr 1fr;
-    grid-template-rows: 45px 1fr;
+    grid-template-rows: 45px 1fr 1fr;
 }
 
 perspective-viewer {
-    grid-row: 2;
+    /* grid-row-start: 2;
+    grid-row-end: 3; */
+    grid-column: 1;
+    margin: 12px;
+}
+
+perspective-workspace {
+    grid-row-start: 2;
+    grid-row-end: 4;
+    grid-column: 2;
+    overflow: hidden;
+}
+
+perspective-workspace perspective-viewer {
+    margin: 0px;
 }
 
 .toolbar {
@@ -49,6 +63,7 @@ perspective-viewer {
 }
 
 button {
-    font-family: "ui-monospace", "SFMono-Regular", "SF Mono", "Menlo",
-        "Consolas", "Liberation Mono", monospace;
+    font-family:
+        "ui-monospace", "SFMono-Regular", "SF Mono", "Menlo", "Consolas",
+        "Liberation Mono", monospace;
 }
diff --git a/examples/react-example/src/index.tsx b/examples/react-example/src/index.tsx
index 23a0ea6429..3ba740324d 100644
--- a/examples/react-example/src/index.tsx
+++ b/examples/react-example/src/index.tsx
@@ -20,9 +20,27 @@
 
 import perspective from "@perspective-dev/client";
 import perspective_viewer from "@perspective-dev/viewer";
+import perspective_workspace from "@perspective-dev/workspace";
+import "@perspective-dev/workspace";
 import "@perspective-dev/viewer-datagrid";
 import "@perspective-dev/viewer-d3fc";
 
+import * as React from "react";
+import { createRoot } from "react-dom/client";
+import {
+    PerspectiveViewer,
+    PerspectiveWorkspace,
+} from "@perspective-dev/react";
+
+import "@perspective-dev/viewer/dist/css/themes.css";
+import "@perspective-dev/workspace/dist/css/pro.css";
+import "./index.css";
+
+import type * as psp from "@perspective-dev/client";
+import type * as pspViewer from "@perspective-dev/viewer";
+
+import SUPERSTORE_ARROW from "superstore-arrow/superstore.lz4.arrow";
+
 import SERVER_WASM from "@perspective-dev/server/dist/wasm/perspective-server.wasm";
 import CLIENT_WASM from "@perspective-dev/viewer/dist/wasm/perspective-viewer.wasm";
 
@@ -37,11 +55,6 @@ await Promise.all([
 // table creation function which both downloads data and loads it into the
 // engine.
 
-import type * as psp from "@perspective-dev/client";
-import type * as pspViewer from "@perspective-dev/viewer";
-
-import SUPERSTORE_ARROW from "superstore-arrow/superstore.lz4.arrow";
-
 const WORKER = await perspective.worker();
 
 async function createNewSuperstoreTable(): Promise<psp.Table> {
@@ -60,23 +73,22 @@ const CONFIG: pspViewer.ViewerConfigUpdate = {
 
 // The React application itself
 
-import * as React from "react";
-import { createRoot } from "react-dom/client";
-import { PerspectiveViewer } from "@perspective-dev/react";
-
-import "@perspective-dev/viewer/dist/css/themes.css";
-import "./index.css";
-
 interface ToolbarState {
     mounted: boolean;
     table?: Promise<psp.Table>;
     config: pspViewer.ViewerConfigUpdate;
+    layout: perspective_workspace.PerspectiveWorkspaceConfig;
 }
 
 const App: React.FC = () => {
     const [state, setState] = React.useState<ToolbarState>(() => ({
         mounted: true,
         table: createNewSuperstoreTable(),
+        layout: {
+            detail: { main: null },
+            sizes: [],
+            viewers: {},
+        },
         config: { ...CONFIG },
     }));
 
@@ -102,9 +114,19 @@ const App: React.FC = () => {
 
     const onConfigUpdate = (config: pspViewer.ViewerConfigUpdate) => {
         console.log("Config Update Event", config);
+        delete config.table;
         setState({ ...state, config });
     };
 
+    const onLayoutUpdate = (
+        layout: perspective_workspace.PerspectiveWorkspaceConfig,
+    ) => {
+        console.log("Layout Update Event", layout);
+
+        // delete config.table;
+        setState({ ...state, layout });
+    };
+
     const onClick = (detail: pspViewer.PerspectiveClickEventDetail) => {
         console.log("Click Event,", detail);
     };
@@ -122,14 +144,19 @@ const App: React.FC = () => {
             </div>
             {state.mounted && (
                 <>
-                    <PerspectiveViewer table={state.table} />
+                    <PerspectiveViewer client={state.table} />
                     <PerspectiveViewer
                         className="my-perspective-viewer"
-                        table={state.table}
+                        client={state.table}
                         config={state.config}
                         onClick={onClick}
-                        onSelect={onSelect}
                         onConfigUpdate={onConfigUpdate}
+                        onSelect={onSelect}
+                    />
+                    <PerspectiveWorkspace
+                        client={WORKER}
+                        layout={state.layout}
+                        onLayoutUpdate={onLayoutUpdate}
                     />
                 </>
             )}
diff --git a/packages/react/package.json b/packages/react/package.json
index c602bee4b1..89dba0b0e2 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -21,6 +21,7 @@
     "dependencies": {
         "@perspective-dev/client": "workspace:",
         "@perspective-dev/viewer": "workspace:",
+        "@perspective-dev/workspace": "workspace:",
         "@types/react": "catalog:",
         "react": "catalog:",
         "react-dom": "catalog:"
diff --git a/packages/react/src/index.tsx b/packages/react/src/index.tsx
index 64d775603d..379c7f35a8 100644
--- a/packages/react/src/index.tsx
+++ b/packages/react/src/index.tsx
@@ -20,87 +20,5 @@
  * @module
  */
 
-import * as React from "react";
-import type * as psp from "@perspective-dev/client";
-import type * as pspViewer from "@perspective-dev/viewer";
-
-function usePspListener<A>(
-    viewer: HTMLElement | null,
-    name: string,
-    f?: (x: A) => void,
-) {
-    React.useEffect(() => {
-        if (!f) return;
-        const ctx = new AbortController();
-        const callback = (e: Event) => f((e as CustomEvent).detail);
-        viewer?.addEventListener(name, callback, { signal: ctx.signal });
-        return () => ctx.abort();
-    }, [viewer, f]);
-}
-
-export interface PerspectiveViewerProps {
-    table?: psp.Table | Promise<psp.Table>;
-    config?: pspViewer.ViewerConfigUpdate;
-    onConfigUpdate?: (config: pspViewer.ViewerConfigUpdate) => void;
-    onClick?: (data: pspViewer.PerspectiveClickEventDetail) => void;
-    onSelect?: (data: pspViewer.PerspectiveSelectEventDetail) => void;
-
-    // Applicable props from `React.HTMLAttributes`, which we cannot extend
-    // directly because Perspective changes the signature of `onClick`.
-    className?: string | undefined;
-    hidden?: boolean | undefined;
-    id?: string | undefined;
-    slot?: string | undefined;
-    style?: React.CSSProperties | undefined;
-    tabIndex?: number | undefined;
-    title?: string | undefined;
-}
-
-function PerspectiveViewerImpl(props: PerspectiveViewerProps) {
-    const [viewer, setViewer] =
-        React.useState<pspViewer.HTMLPerspectiveViewerElement | null>(null);
-
-    React.useEffect(() => {
-        return () => {
-            viewer?.delete();
-        };
-    }, [viewer]);
-
-    React.useEffect(() => {
-        if (props.table) {
-            viewer?.load(props.table);
-        } else {
-            viewer?.eject();
-        }
-    }, [viewer, props.table]);
-
-    React.useEffect(() => {
-        if (props.table && props.config) {
-            viewer?.restore(props.config);
-        }
-    }, [viewer, props.table, JSON.stringify(props.config)]);
-
-    usePspListener(viewer, "perspective-click", props.onClick);
-    usePspListener(viewer, "perspective-select", props.onSelect);
-    usePspListener(viewer, "perspective-config-update", props.onConfigUpdate);
-
-    return (
-        <perspective-viewer
-            ref={setViewer}
-            id={props.id}
-            className={props.className}
-            hidden={props.hidden}
-            slot={props.slot}
-            style={props.style}
-            tabIndex={props.tabIndex}
-            title={props.title}
-        />
-    );
-}
-
-/**
- * A React wrapper component for `<perspective-viewer>` Custom Element.
- */
-export const PerspectiveViewer: React.FC<PerspectiveViewerProps> = React.memo(
-    PerspectiveViewerImpl,
-);
+export * from "./viewer";
+export * from "./workspace";
diff --git a/packages/react/src/utils.tsx b/packages/react/src/utils.tsx
new file mode 100644
index 0000000000..2d81653dc1
--- /dev/null
+++ b/packages/react/src/utils.tsx
@@ -0,0 +1,27 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
+// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
+// ┃ This file is part of the Perspective library, distributed under the terms ┃
+// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+import * as React from "react";
+
+export function usePspListener<A>(
+    el: HTMLElement | undefined | null,
+    event: string,
+    cb?: (x: A) => void,
+) {
+    React.useEffect(() => {
+        if (!cb || !el) return;
+        const ctx = new AbortController();
+        const callback = (e: Event) => cb((e as CustomEvent).detail);
+        el?.addEventListener(event, callback, { signal: ctx.signal });
+        return () => ctx.abort();
+    }, [el, cb]);
+}
diff --git a/packages/react/src/viewer.tsx b/packages/react/src/viewer.tsx
new file mode 100644
index 0000000000..dc9631555a
--- /dev/null
+++ b/packages/react/src/viewer.tsx
@@ -0,0 +1,86 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
+// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
+// ┃ This file is part of the Perspective library, distributed under the terms ┃
+// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+import * as React from "react";
+import type * as psp from "@perspective-dev/client";
+import type * as pspViewer from "@perspective-dev/viewer";
+import { usePspListener } from "./utils";
+
+function PerspectiveViewerImpl(props: PerspectiveViewerProps) {
+    const [viewer, setViewer] =
+        React.useState<pspViewer.HTMLPerspectiveViewerElement | null>(null);
+
+    React.useEffect(() => {
+        return () => {
+            viewer?.delete();
+        };
+    }, [viewer]);
+
+    React.useEffect(() => {
+        if (props.client) {
+            viewer?.load(props.client);
+        } else {
+            viewer?.eject();
+        }
+    }, [viewer, props.client]);
+
+    React.useEffect(() => {
+        if (props.client && props.config) {
+            viewer?.restore(props.config);
+        }
+    }, [viewer, props.client, JSON.stringify(props.config)]);
+
+    usePspListener(viewer, "perspective-click", props.onClick);
+    usePspListener(viewer, "perspective-select", props.onSelect);
+    usePspListener(viewer, "perspective-config-update", props.onConfigUpdate);
+
+    return (
+        <perspective-viewer
+            ref={setViewer}
+            id={props.id}
+            className={props.className}
+            hidden={props.hidden}
+            slot={props.slot}
+            style={props.style}
+            tabIndex={props.tabIndex}
+            title={props.title}
+        />
+    );
+}
+
+/**
+ * Props for the `<PerspectiveViewer>` component.
+ */
+export interface PerspectiveViewerProps {
+    client?: psp.Client | Promise<psp.Client> | psp.Table | Promise<psp.Table>;
+    config?: pspViewer.ViewerConfigUpdate;
+    onConfigUpdate?: (config: pspViewer.ViewerConfigUpdate) => void;
+    onClick?: (data: pspViewer.PerspectiveClickEventDetail) => void;
+    onSelect?: (data: pspViewer.PerspectiveSelectEventDetail) => void;
+
+    // Applicable props from `React.HTMLAttributes`, which we cannot extend
+    // directly because Perspective changes the signature of `onClick`.
+    className?: string | undefined;
+    hidden?: boolean | undefined;
+    id?: string | undefined;
+    slot?: string | undefined;
+    style?: React.CSSProperties | undefined;
+    tabIndex?: number | undefined;
+    title?: string | undefined;
+}
+
+/**
+ * A React wrapper component for `<perspective-viewer>` Custom Element.
+ */
+export const PerspectiveViewer: React.FC<PerspectiveViewerProps> = React.memo(
+    PerspectiveViewerImpl,
+);
diff --git a/packages/react/src/workspace.tsx b/packages/react/src/workspace.tsx
new file mode 100644
index 0000000000..e0b392db8e
--- /dev/null
+++ b/packages/react/src/workspace.tsx
@@ -0,0 +1,94 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
+// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
+// ┃ This file is part of the Perspective library, distributed under the terms ┃
+// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+import type * as psp from "@perspective-dev/client";
+import type * as psp_viewer from "@perspective-dev/viewer";
+import type * as pspWorkspace from "@perspective-dev/workspace";
+import { PerspectiveWorkspaceConfig } from "@perspective-dev/workspace";
+import * as utils from "./utils";
+import * as React from "react";
+
+export interface NewViewEventDetail {
+    config: psp_viewer.ViewerConfigUpdate;
+    widget: pspWorkspace.PerspectiveViewerWidget;
+}
+
+export interface ToggleGloalFilterEventDetail {
+    widget: pspWorkspace.PerspectiveViewerWidget;
+    isGlobalFilter: boolean;
+}
+
+interface PerspectiveWorkspaceProps extends React.HTMLAttributes<HTMLElement> {
+    client: psp.Client | Promise<psp.Client>;
+    layout: PerspectiveWorkspaceConfig;
+    onLayoutUpdate?: (layout: PerspectiveWorkspaceConfig) => void;
+    onNewView?: (detail: NewViewEventDetail) => void;
+    onToggleGlobalFilter?: (detail: ToggleGloalFilterEventDetail) => void;
+}
+
+const PerspectiveWorkspaceImpl = React.forwardRef<
+    pspWorkspace.HTMLPerspectiveWorkspaceElement | undefined,
+    PerspectiveWorkspaceProps
+>(
+    (
+        {
+            client,
+            layout,
+            onLayoutUpdate,
+            onNewView,
+            onToggleGlobalFilter,
+            ...htmlAttributes
+        },
+        ref,
+    ) => {
+        const [workspace, setWorkspace] =
+            React.useState<pspWorkspace.HTMLPerspectiveWorkspaceElement>();
+
+        React.useImperativeHandle(ref, () => workspace, [workspace]);
+        React.useEffect(() => {
+            if (workspace && layout) {
+                workspace.restore(layout);
+            }
+        }, [workspace, layout]);
+
+        React.useEffect(() => {
+            if (workspace && client) {
+                workspace.load(client);
+            }
+        }, [workspace, client]);
+
+        utils.usePspListener(workspace, "workspace-new-view", onNewView);
+        utils.usePspListener(
+            workspace,
+            "workspace-layout-update",
+            onLayoutUpdate
+                ? ({ layout }: { layout: PerspectiveWorkspaceConfig }) =>
+                      workspace?.save().then((x) => onLayoutUpdate(x))
+                : undefined,
+        );
+
+        utils.usePspListener(
+            workspace,
+            "workspace-toggle-global-filter",
+            onToggleGlobalFilter,
+        );
+
+        return (
+            <perspective-workspace
+                ref={(r) => setWorkspace(r ?? undefined)}
+                {...htmlAttributes}
+            ></perspective-workspace>
+        );
+    },
+);
+
+export const PerspectiveWorkspace = React.memo(PerspectiveWorkspaceImpl);
diff --git a/packages/react/test/js/basic.story.tsx b/packages/react/test/js/basic.story.tsx
index f415eef737..39191a7b19 100644
--- a/packages/react/test/js/basic.story.tsx
+++ b/packages/react/test/js/basic.story.tsx
@@ -14,6 +14,7 @@ import perspective from "@perspective-dev/client";
 import perspective_viewer from "@perspective-dev/viewer";
 import "@perspective-dev/viewer-datagrid";
 import "@perspective-dev/viewer-d3fc";
+import "@perspective-dev/workspace";
 
 // @ts-ignore
 import SERVER_WASM from "@perspective-dev/server/dist/wasm/perspective-server.wasm?url";
@@ -26,12 +27,21 @@ await Promise.all([
     perspective_viewer.init_client(fetch(CLIENT_WASM)),
 ]);
 
-import type * as psp from "@perspective-dev/client";
+import * as psp from "@perspective-dev/client";
 import type * as pspViewer from "@perspective-dev/viewer";
 
 // @ts-ignore
 import SUPERSTORE_ARROW from "superstore-arrow/superstore.lz4.arrow?url";
 
+import * as React from "react";
+import {
+    PerspectiveViewer,
+    PerspectiveWorkspace,
+} from "@perspective-dev/react";
+
+import "@perspective-dev/viewer/dist/css/themes.css";
+import "./index.css";
+
 const WORKER = await perspective.worker();
 
 async function createNewSuperstoreTable(): Promise<psp.Table> {
@@ -45,12 +55,6 @@ const CONFIG: pspViewer.ViewerConfigUpdate = {
     group_by: ["State"],
 };
 
-import * as React from "react";
-import { PerspectiveViewer } from "@perspective-dev/react";
-
-import "@perspective-dev/viewer/dist/css/themes.css";
-import "./index.css";
-
 interface ToolbarState {
     mounted: boolean;
     table?: Promise<psp.Table>;
diff --git a/packages/react/test/js/index.css b/packages/react/test/js/index.css
index b9ae4513e0..684ff0e2de 100644
--- a/packages/react/test/js/index.css
+++ b/packages/react/test/js/index.css
@@ -52,3 +52,17 @@ button {
     font-family: "ui-monospace", "SFMono-Regular", "SF Mono", "Menlo",
         "Consolas", "Liberation Mono", monospace;
 }
+
+.workspace-container {
+    display: flex;
+    flex-direction: column;
+
+    .workspace-toolbar {
+        display: flex;
+        flex-direction: row;
+    }
+
+    perspective-workspace {
+        height: 100vh;
+    }
+}
diff --git a/packages/react/test/js/react.spec.tsx b/packages/react/test/js/react.spec.tsx
index f36440b184..57dd2c6348 100644
--- a/packages/react/test/js/react.spec.tsx
+++ b/packages/react/test/js/react.spec.tsx
@@ -11,10 +11,25 @@
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
 import { test, expect } from "@playwright/experimental-ct-react";
-import { PerspectiveViewer } from "@perspective-dev/react";
-import React from "react";
 
 import { App } from "./basic.story";
+import { EmptyWorkspace, SingleView } from "./workspace.story";
+
+async function retryUntilSuccess(
+    fn: () => Promise<boolean>,
+    { maxAttempts = 5, delay = 1000 } = {},
+): Promise<boolean> {
+    for (let attempt = 1; attempt <= maxAttempts; attempt++) {
+        try {
+            const r = await fn();
+            if (r) {
+                return true;
+            }
+        } catch {}
+        await new Promise((r) => setTimeout(r, delay));
+    }
+    return false;
+}
 
 test.describe("Perspective React", () => {
     test("The viewer loads with data in it", async ({ page, mount }) => {
@@ -26,4 +41,64 @@ test.describe("Perspective React", () => {
 
         expect(count).toBe(2);
     });
+
+    test("React workspace functionality", async ({ page, mount }) => {
+        const comp = await mount(<EmptyWorkspace />);
+        const toggleMount = comp.locator("button.toggle-mount");
+        const addViewer = comp.locator("button.add-viewer");
+        const workspace = comp.locator("perspective-workspace");
+        const viewer = comp.locator("perspective-viewer");
+        await toggleMount.waitFor();
+        await addViewer.click();
+        await addViewer.click();
+        await addViewer.click();
+        await page.waitForFunction(
+            () =>
+                document.querySelector("perspective-workspace")!.children
+                    .length === 3,
+        );
+        await expect(viewer).toHaveCount(3);
+        await toggleMount.click();
+        await workspace.waitFor({ state: "detached" });
+        await toggleMount.click();
+        await workspace.waitFor();
+        await page.waitForFunction(
+            () =>
+                document.querySelector("perspective-workspace")!.children
+                    .length === 3,
+        );
+        await expect(viewer).toHaveCount(3);
+    });
+
+    test("Adding a viewer in single-document mode leaves SDM", async ({
+        page,
+        mount,
+    }) => {
+        const name = "abcdef";
+        const comp = await mount(<SingleView name={name} />);
+        const addViewer = comp.locator("button.add-viewer");
+        const viewer = comp.locator("perspective-viewer");
+        const settingsBtn = comp.locator(`perspective-viewer #settings_button`);
+
+        await settingsBtn.waitFor();
+        await addViewer.waitFor();
+        await addViewer.click();
+        await page.waitForFunction(
+            () =>
+                document.querySelector("perspective-workspace")!.children
+                    .length === 2,
+        );
+        expect(await viewer.count()).toBe(2);
+        await settingsBtn.first().click();
+        const settingsPanel = viewer.locator("#settings_panel");
+        await settingsPanel.waitFor();
+        await addViewer.click();
+        await page.waitForFunction(
+            () =>
+                document.querySelector("perspective-workspace")!.children
+                    .length === 3,
+        );
+        expect(await viewer.count()).toBe(3);
+        await settingsPanel.waitFor({ state: "detached" });
+    });
 });
diff --git a/packages/react/test/js/workspace.story.tsx b/packages/react/test/js/workspace.story.tsx
new file mode 100644
index 0000000000..55f7be831d
--- /dev/null
+++ b/packages/react/test/js/workspace.story.tsx
@@ -0,0 +1,155 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
+// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
+// ┃ This file is part of the Perspective library, distributed under the terms ┃
+// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+import "@perspective-dev/workspace";
+
+import {
+    HTMLPerspectiveWorkspaceElement,
+    PerspectiveWorkspaceConfig,
+} from "@perspective-dev/workspace";
+
+import * as React from "react";
+
+import { PerspectiveWorkspace } from "@perspective-dev/react";
+
+import perspective_viewer from "@perspective-dev/viewer";
+import "@perspective-dev/viewer-datagrid";
+import "@perspective-dev/viewer-d3fc";
+import "@perspective-dev/workspace";
+import * as Workspace from "@perspective-dev/workspace";
+
+import * as perspective from "@perspective-dev/client";
+
+import "@perspective-dev/viewer/dist/css/themes.css";
+import "@perspective-dev/workspace/dist/css/pro.css";
+import "./index.css";
+
+// @ts-ignore
+import SERVER_WASM from "@perspective-dev/server/dist/wasm/perspective-server.wasm?url";
+
+// @ts-ignore
+import CLIENT_WASM from "@perspective-dev/viewer/dist/wasm/perspective-viewer.wasm?url";
+
+await Promise.all([
+    perspective.init_server(fetch(SERVER_WASM)),
+    perspective_viewer.init_client(fetch(CLIENT_WASM)),
+]);
+
+const CLIENT = await perspective.worker();
+
+interface WorkspaceState {
+    layout: PerspectiveWorkspaceConfig;
+    mounted: boolean;
+}
+
+interface WorkspaceAppProps {
+    layout: PerspectiveWorkspaceConfig;
+    onSpecial?: () => void;
+}
+
+const WorkspaceApp: React.FC<WorkspaceAppProps> = (props) => {
+    const [state, setState] = React.useState<WorkspaceState>({
+        layout: props.layout,
+        mounted: true,
+    });
+
+    const onClickAddViewer = async () => {
+        const name = window.crypto.randomUUID();
+        const data = `a,b,c\n${Math.random()},${Math.random()},${Math.random()}`;
+        const t = await CLIENT.table(data, { name });
+        console.log(await t.get_name());
+        const nextId = Workspace.genId(state.layout);
+        const layout = Workspace.addViewer(
+            state.layout,
+            {
+                table: name,
+                title: name,
+            },
+            nextId,
+        );
+
+        setState({
+            ...state,
+            layout,
+        });
+    };
+
+    const onClickToggleMount = () =>
+        setState((old) => ({ ...old, mounted: !state.mounted }));
+
+    const onLayoutUpdate = (layout: PerspectiveWorkspaceConfig) => {
+        setState({ ...state, layout });
+    };
+
+    React.useEffect(() => {
+        setState((s) => ({
+            ...s,
+            layout: props.layout,
+        }));
+    }, [props.layout]);
+
+    return (
+        <div className="workspace-container">
+            <div className="workspace-toolbar">
+                <button className="toggle-mount" onClick={onClickToggleMount}>
+                    Toggle Mount
+                </button>
+                <button className="add-viewer" onClick={onClickAddViewer}>
+                    Add Viewer
+                </button>
+                {props.onSpecial && (
+                    <button className="special" onClick={props.onSpecial}>
+                        Special Third Button
+                    </button>
+                )}
+            </div>
+            {state.mounted && (
+                <PerspectiveWorkspace
+                    client={CLIENT}
+                    layout={state.layout}
+                    onLayoutUpdate={onLayoutUpdate}
+                />
+            )}
+        </div>
+    );
+};
+
+/// Renders the app with a default empty workspace
+export const EmptyWorkspace: React.FC = () => {
+    return (
+        <WorkspaceApp
+            layout={{ sizes: [1], viewers: {}, detail: { main: null } }}
+        />
+    );
+};
+
+export const SingleView: React.FC<{ name: string }> = ({ name }) => {
+    const _table = CLIENT.table("a,b,c\n1,2,3", { name });
+    const layout: PerspectiveWorkspaceConfig = {
+        sizes: [1],
+        detail: {
+            main: {
+                type: "tab-area",
+                currentIndex: 0,
+                widgets: [name],
+            },
+        },
+        viewers: {
+            [name]: {
+                table: name,
+                columns: ["a", "b", "c"],
+                title: name,
+            },
+        },
+    };
+
+    return <WorkspaceApp layout={layout} />;
+};
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 6ca0067f25..75239b2bc4 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -654,6 +654,9 @@ importers:
       '@perspective-dev/viewer':
         specifier: 'workspace:'
         version: link:../../rust/perspective-viewer
+      '@perspective-dev/workspace':
+        specifier: 'workspace:'
+        version: link:../workspace
       '@types/react':
         specifier: 'catalog:'
         version: 18.3.26