diff --git a/extensions/lib/hello-someone/hello-someone.ts b/extensions/lib/hello-someone/hello-someone.ts
index e601850c51..34193a5b8c 100644
--- a/extensions/lib/hello-someone/hello-someone.ts
+++ b/extensions/lib/hello-someone/hello-someone.ts
@@ -1,7 +1,13 @@
 import papi from 'papi';
-import type { WebViewContentType } from 'shared/data/web-view.model';
+import type {
+  WebViewContentType,
+  WebViewDefinition,
+  SavedWebViewDefinition,
+} from 'shared/data/web-view.model';
 import { UnsubscriberAsync } from 'shared/utils/papi-util';
 import type IDataProvider from 'shared/models/data-provider.interface';
+import type { IWebViewProvider } from 'shared/models/web-view-provider.model';
+import type { ExecutionActivationContext } from 'extension-host/extension-types/extension-activation-context.model';
 // @ts-expect-error ts(1192) this file has no default export; the text is exported by rollup
 import helloSomeoneHtmlWebView from './hello-someone.web-view.ejs';
 
@@ -45,7 +51,28 @@ const greetingsDataProviderEngine = {
   },
 };
 
-export async function activate() {
+const peopleWebViewType = 'hello-someone.people-viewer';
+const peopleWebViewIdKey = 'people-web-view-id';
+
+/**
+ * Simple web view provider that provides People web views when papi requests them
+ */
+const peopleWebViewProvider: IWebViewProvider = {
+  async getWebView(savedWebView: SavedWebViewDefinition): Promise<WebViewDefinition | undefined> {
+    if (savedWebView.webViewType !== peopleWebViewType)
+      throw new Error(
+        `${peopleWebViewType} provider received request to provide a ${savedWebView.webViewType} web view`,
+      );
+    return {
+      ...savedWebView,
+      title: 'People',
+      contentType: 'html' as WebViewContentType.HTML,
+      content: helloSomeoneHtmlWebView,
+    };
+  },
+};
+
+export async function activate(context: ExecutionActivationContext) {
   logger.info('Hello Someone is activating!');
 
   const greetingsDataProviderPromise = papi.dataProvider.registerEngine(
@@ -53,14 +80,9 @@ export async function activate() {
     greetingsDataProviderEngine,
   );
 
-  await papi.webViews.addWebView(
-    {
-      id: 'Hello Someone',
-      title: 'Hello Someone HTML',
-      contentType: 'html' as WebViewContentType.HTML,
-      content: helloSomeoneHtmlWebView,
-    },
-    { type: 'panel', direction: 'top' },
+  const peopleWebViewProviderPromise = papi.webViews.registerWebViewProvider(
+    peopleWebViewType,
+    peopleWebViewProvider,
   );
 
   const unsubPromises: Promise<UnsubscriberAsync>[] = [
@@ -80,11 +102,47 @@ export async function activate() {
     ),
   ];
 
-  // For now, let's just make things easy and await the data provider promise at the end so we don't hold everything else up
+  // Create a webview or get the existing webview if ours already exists
+  // Note: here, we are storing a created webview's id when we create it, and using that id on
+  // `existingId` to look specifically for the webview that we previously created if we have ever
+  // created one in a previous session. This means that, if someone else creates a people web view,
+  // it will be distinct from this one. We are creating our own web view here. See `hello-world.ts`
+  // for an example of getting any webview with the specified `webViewType`
+
+  // Get existing webview id if we previously created a webview for this type
+  let existingPeopleWebViewId: string | undefined;
+  try {
+    existingPeopleWebViewId = await papi.storage.readUserData(
+      context.executionToken,
+      peopleWebViewIdKey,
+    );
+  } catch (e) {
+    existingPeopleWebViewId = undefined;
+  }
+
+  // Get the existing web view if one exists or create a new one
+  const peopleWebViewId = await papi.webViews.getWebView(
+    peopleWebViewType,
+    { type: 'panel', direction: 'top' },
+    { existingId: existingPeopleWebViewId },
+  );
+
+  // Save newly acquired webview id
+  await papi.storage.writeUserData(
+    context.executionToken,
+    peopleWebViewIdKey,
+    peopleWebViewId || '',
+  );
+
+  // For now, let's just make things easy and await the registration promises at the end so we don't hold everything else up
   const greetingsDataProvider = await greetingsDataProviderPromise;
+  const peopleWebViewProviderResolved = await peopleWebViewProviderPromise;
 
   const combinedUnsubscriber: UnsubscriberAsync = papi.util.aggregateUnsubscriberAsyncs(
-    (await Promise.all(unsubPromises)).concat([greetingsDataProvider.dispose]),
+    (await Promise.all(unsubPromises)).concat([
+      greetingsDataProvider.dispose,
+      peopleWebViewProviderResolved.dispose,
+    ]),
   );
   logger.info('Hello Someone is finished activating!');
   return combinedUnsubscriber;
diff --git a/extensions/lib/hello-someone/hello-someone.web-view.ejs b/extensions/lib/hello-someone/hello-someone.web-view.ejs
index 6a463ff698..6a55b7b712 100644
--- a/extensions/lib/hello-someone/hello-someone.web-view.ejs
+++ b/extensions/lib/hello-someone/hello-someone.web-view.ejs
@@ -19,6 +19,8 @@
     <div id="any-greetings-update-count">Any Greetings Updates: 0</div>
     <div id="bill-any-greetings-update-count">Any Greetings Updates (via Bill): 0</div>
     <div id="bill-greetings-update-count">Bill Greetings Updates: 0</div>
+    <br />
+    <div><button id="new-web-view-button" type="button">Create a new People WebView!</button></div>
     <script>
       // Enable webview debugging
       console.debug('Debug Hello Someone WebView');
@@ -121,6 +123,15 @@
             `Bill Greetings Updates: ${billGreetingsUpdateCount}`,
           );
         });
+
+        // Attach handler for new-web-view-button
+        const newWebViewButton = document.getElementById('new-web-view-button');
+        newWebViewButton.addEventListener('click', async () => {
+          const webViewId = await papi.webViews.getWebView('hello-someone.people-viewer', {
+            type: 'float',
+          });
+          print(`New People webview id: ${webViewId}`);
+        });
       }
 
       if (document.readyState === 'loading')
diff --git a/extensions/lib/hello-world/hello-world.ts b/extensions/lib/hello-world/hello-world.ts
index e5c560225c..907e9c6e73 100644
--- a/extensions/lib/hello-world/hello-world.ts
+++ b/extensions/lib/hello-world/hello-world.ts
@@ -1,7 +1,12 @@
 import papi from 'papi';
 import { UnsubscriberAsync } from 'shared/utils/papi-util';
-import type { WebViewContentType } from 'shared/data/web-view.model';
-import { GreetingsDataProvider } from '@extensions/hello-someone/hello-someone';
+import type {
+  WebViewContentType,
+  WebViewDefinition,
+  SavedWebViewDefinition,
+} from 'shared/data/web-view.model';
+import type { GreetingsDataProvider } from '@extensions/hello-someone/hello-someone';
+import type { IWebViewProvider } from 'shared/models/web-view-provider.model';
 // @ts-expect-error ts(1192) this file has no default export; the text is exported by rollup
 import helloWorldReactWebView from './hello-world.web-view';
 import helloWorldReactWebViewStyles from './hello-world.web-view.scss?inline';
@@ -14,9 +19,59 @@ logger.info('Hello world is importing!');
 
 const unsubscribers: UnsubscriberAsync[] = [];
 
+const htmlWebViewType = 'hello-world.html';
+
+/**
+ * Simple web view provider that provides sample html web views when papi requests them
+ */
+const htmlWebViewProvider: IWebViewProvider = {
+  async getWebView(savedWebView: SavedWebViewDefinition): Promise<WebViewDefinition | undefined> {
+    if (savedWebView.webViewType !== htmlWebViewType)
+      throw new Error(
+        `${htmlWebViewType} provider received request to provide a ${savedWebView.webViewType} web view`,
+      );
+    return {
+      ...savedWebView,
+      title: 'Hello World HTML',
+      contentType: 'html' as WebViewContentType.HTML,
+      content: helloWorldHtmlWebView,
+    };
+  },
+};
+
+const reactWebViewType = 'hello-world.react';
+
+/**
+ * Simple web view provider that provides React web views when papi requests them
+ */
+const reactWebViewProvider: IWebViewProvider = {
+  async getWebView(savedWebView: SavedWebViewDefinition): Promise<WebViewDefinition | undefined> {
+    if (savedWebView.webViewType !== reactWebViewType)
+      throw new Error(
+        `${reactWebViewType} provider received request to provide a ${savedWebView.webViewType} web view`,
+      );
+    return {
+      ...savedWebView,
+      title: 'Hello World React',
+      content: helloWorldReactWebView,
+      styles: helloWorldReactWebViewStyles,
+    };
+  },
+};
+
 export async function activate(): Promise<UnsubscriberAsync> {
   logger.info('Hello world is activating!');
 
+  const htmlWebViewProviderPromise = papi.webViews.registerWebViewProvider(
+    htmlWebViewType,
+    htmlWebViewProvider,
+  );
+
+  const reactWebViewProviderPromise = papi.webViews.registerWebViewProvider(
+    reactWebViewType,
+    reactWebViewProvider,
+  );
+
   const unsubPromises: Promise<UnsubscriberAsync>[] = [
     papi.commands.registerCommand('hello-world.hello-world', () => {
       return 'Hello world!';
@@ -32,19 +87,13 @@ export async function activate(): Promise<UnsubscriberAsync> {
     .then((scr) => logger.info(scr.text.replace(/\n/g, '')))
     .catch((e) => logger.error(`Could not get Scripture from bible-api! Reason: ${e}`));
 
-  papi.webViews.addWebView({
-    id: 'Hello World HTML',
-    title: 'Hello World HTML',
-    contentType: 'html' as WebViewContentType.HTML,
-    content: helloWorldHtmlWebView,
-  });
-
-  await papi.webViews.addWebView({
-    id: 'Hello World React',
-    title: 'Hello World React',
-    content: helloWorldReactWebView,
-    styles: helloWorldReactWebViewStyles,
-  });
+  // Create webviews or get an existing webview if one already exists for this type
+  // Note: here, we are using `existingId: '?'` to indicate we do not want to create a new webview
+  // if one already exists. The webview that already exists could have been created by anyone
+  // anywhere; it just has to match `webViewType`. See `hello-someone.ts` for an example of keeping
+  // an existing webview that was specifically created by `hello-someone`.
+  papi.webViews.getWebView(htmlWebViewType, undefined, { existingId: '?' });
+  papi.webViews.getWebView(reactWebViewType, undefined, { existingId: '?' });
 
   const greetingsDataProvider = await papi.dataProvider.get<GreetingsDataProvider>(
     'hello-someone.greetings',
@@ -59,8 +108,15 @@ export async function activate(): Promise<UnsubscriberAsync> {
     unsubscribers.push(unsubGreetings);
   }
 
+  // For now, let's just make things easy and await the registration promises at the end so we don't hold everything else up
+  const htmlWebViewProviderResolved = await htmlWebViewProviderPromise;
+  const reactWebViewProviderResolved = await reactWebViewProviderPromise;
+
   const combinedUnsubscriber: UnsubscriberAsync = papi.util.aggregateUnsubscriberAsyncs(
-    await Promise.all(unsubPromises),
+    (await Promise.all(unsubPromises)).concat([
+      htmlWebViewProviderResolved.dispose,
+      reactWebViewProviderResolved.dispose,
+    ]),
   );
   logger.info('Hello World is finished activating!');
   return combinedUnsubscriber;
diff --git a/lib/papi-dts/papi.d.ts b/lib/papi-dts/papi.d.ts
index 72d016e645..5b7df9d91f 100644
--- a/lib/papi-dts/papi.d.ts
+++ b/lib/papi-dts/papi.d.ts
@@ -181,26 +181,6 @@ declare module 'shared/utils/papi-util' {
   export function serializeRequestType(category: string, directive: string): string;
   /** Split a request message requestType string into its parts */
   export function deserializeRequestType(requestType: string): RequestType;
-  /** Parts of a Dock Tab ID */
-  export interface TabIdParts {
-    /** Type of the tab */
-    type: string;
-    /** ID of the particular tab type */
-    typeId: string;
-  }
-  /**
-   * Create a tab ID.
-   * @param type Type of the tab.
-   * @param typeId ID of the particular tab type.
-   * @returns a tab ID
-   */
-  export function serializeTabId(type: string, typeId: string): string;
-  /**
-   * Split the tab ID into its parts.
-   * @param id Tab ID.
-   * @returns The two parts of the tab ID
-   */
-  export function deserializeTabId(id: string): TabIdParts;
   /**
    * HTML Encodes the provided string.
    * Thanks to ChatGPT
@@ -1100,30 +1080,40 @@ declare module 'shared/services/command.service' {
 }
 declare module 'shared/data/web-view.model' {
   import { ReactNode } from 'react';
-  export type WebViewProps = Omit<WebViewContents, 'componentName'>;
   /**
-   * Information used to recreate a tab
+   * Saved information used to recreate a tab.
+   *
+   * {@link TabLoader} loads this into {@link TabInfo}
+   * {@link TabSaver} saves {@link TabInfo} into this
    */
   export type SavedTabInfo = {
     /**
-     * Tab ID - must be unique
+     * Tab ID - a unique identifier that identifies this tab. If this tab is a WebView, this id will
+     * match the WebViewDefinition.id
+     */
+    id: string;
+    /**
+     * Type of tab - indicates what kind of built-in tab this info represents
      */
-    id?: string;
+    tabType: string;
     /**
-     * Data needed to recreate the tab during load
+     * Data needed to load the tab
      */
     data?: unknown;
   };
   /**
-   * Information needed to create a tab inside of Paranext
+   * Information that Paranext uses to create a tab in the dock layout.
+   *
+   * {@link TabLoader} loads {@link SavedTabInfo} into this
+   * {@link TabSaver} saves this into {@link SavedTabInfo}
    */
-  export type TabInfo = {
+  export type TabInfo = SavedTabInfo & {
     /**
      * Text to show on the title bar of the tab
      */
-    title: string;
+    tabTitle: string;
     /**
-     * Content to show inside the tab
+     * Content to show inside the tab.
      */
     content: ReactNode;
     /**
@@ -1136,34 +1126,74 @@ declare module 'shared/data/web-view.model' {
     minHeight?: number;
   };
   /**
+   * Function that takes a {@link SavedTabInfo} and creates a Paranext tab out of it. Each type of tab
+   * must provide a {@link TabLoader}.
+   *
    * For now all tab creators must do their own data type verification
    */
-  export type TabCreator = (tabData: SavedTabInfo) => TabInfo;
+  export type TabLoader = (savedTabInfo: SavedTabInfo) => TabInfo;
+  /**
+   * Function that takes a Paranext tab and creates a saved tab out of it. Each type of tab can
+   * provide a {@link TabSaver}. If they do not provide one, the properties added by `TabInfo` are
+   * stripped from TabInfo by `saveTabInfoBase` before saving (so it is just a {@link SavedTabInfo}).
+   */
+  export type TabSaver = (tabInfo: TabInfo) => SavedTabInfo;
+  /** The type of code that defines a webview's content */
   export enum WebViewContentType {
+    /**
+     * This webview is a React webview. It must specify its component by setting it to
+     * `globalThis.webViewComponent`
+     */
     React = 'react',
+    /** This webview is a raw HTML/JS/CSS webview. */
     HTML = 'html',
   }
+  /** What type a WebView is. Each WebView definition must have a unique type. */
+  export type WebViewType = string;
+  /** Id for a specific WebView. Each WebView has a unique id */
+  export type WebViewId = string;
   /** Base WebView properties that all WebViews share */
-  type WebViewContentsBase = {
-    id: string;
+  type WebViewDefinitionBase = {
+    /** What type of WebView this is. Unique to all other WebView definitions */
+    webViewType: WebViewType;
+    /** Unique id among webviews specific to this webview instance. */
+    id: WebViewId;
+    /** The code for the WebView that papi puts into an iframe */
     content: string;
+    /** Name of the tab for the WebView */
     title?: string;
   };
   /** WebView representation using React */
-  export type WebViewContentsReact = WebViewContentsBase & {
+  export type WebViewDefinitionReact = WebViewDefinitionBase & {
+    /** Indicates this WebView uses React */
     contentType?: WebViewContentType.React;
+    /** String of styles to be loaded into the iframe for this WebView */
     styles?: string;
   };
   /** WebView representation using HTML */
-  export type WebViewContentsHtml = WebViewContentsBase & {
+  export type WebViewDefinitionHtml = WebViewDefinitionBase & {
+    /** Indicates this WebView uses HTML */
     contentType: WebViewContentType.HTML;
   };
-  /** WebView definition created by extensions to show web content */
-  export type WebViewContents = WebViewContentsReact | WebViewContentsHtml;
-  export const TYPE_WEBVIEW = 'webView';
+  /** Properties defining a type of WebView created by extensions to show web content */
+  export type WebViewDefinition = WebViewDefinitionReact | WebViewDefinitionHtml;
+  /**
+   * Saved WebView information that does not contain the actual content of the WebView. Saved into
+   * layouts. Could have as little as the type and id. WebView providers load these into actual
+   * {@link WebViewDefinition}s and verify any existing properties on the WebViews.
+   */
+  export type SavedWebViewDefinition = (
+    | Partial<Omit<WebViewDefinitionReact, 'content' | 'styles'>>
+    | Partial<Omit<WebViewDefinitionHtml, 'content'>>
+  ) &
+    Pick<WebViewDefinitionBase, 'id' | 'webViewType'>;
+  /** Props that are passed to the web view component */
+  export type WebViewProps = WebViewDefinition;
+  /** Information about a tab in a panel */
   interface TabLayout {
     type: 'tab';
   }
+  /** Information about a floating window */
   export interface FloatLayout {
     type: 'float';
     floatSize?: {
@@ -1182,43 +1212,44 @@ declare module 'shared/data/web-view.model' {
     | 'move'
     | 'active'
     | 'update';
+  /** Information about a panel */
   interface PanelLayout {
     type: 'panel';
     direction?: PanelDirection;
     /** If undefined, it will add in the `direction` relative to the previously added tab. */
     targetTabId?: string;
   }
+  /** Information about how a Paranext tab fits into the dock layout */
   export type Layout = TabLayout | FloatLayout | PanelLayout;
-  /** Event emitted when webViews are added */
+  /** Event emitted when webViews are created */
   export type AddWebViewEvent = {
-    webView: WebViewProps;
+    webView: SavedWebViewDefinition;
     layout: Layout;
   };
-}
-declare module 'shared/services/web-view.service' {
-  import { AddWebViewEvent, Layout, WebViewContents } from 'shared/data/web-view.model';
-  /** Event that emits with webView info when a webView is added */
-  export const onDidAddWebView: import('shared/models/papi-event.model').PapiEvent<AddWebViewEvent>;
-  /**
-   * Adds a WebView and runs all event handlers who are listening to this event
-   * @param webView full html document to set as the webview iframe contents. Can be shortened to just a string
-   * @returns promise that resolves nothing if we successfully handled the webView
-   */
-  export const addWebView: (webView: WebViewContents, layout?: Layout) => Promise<void>;
-  /** Sets up the WebViewService. Runs only once */
-  export const initialize: () => Promise<void>;
-  /** All the exports in this service that are to be exposed on the PAPI */
-  export const papiWebViewService: {
-    onDidAddWebView: import('shared/models/papi-event.model').PapiEvent<AddWebViewEvent>;
-    addWebView: (webView: WebViewContents, layout?: Layout) => Promise<void>;
-    initialize: () => Promise<void>;
-  };
-}
-declare module 'shared/services/internet.service' {
-  const internetService: {
-    fetch: typeof fetch;
+  /** Options that affect what `webViews.getWebView` does */
+  export type GetWebViewOptions = {
+    /**
+     * If provided and if a web view with this id exists, requests from the web view provider an
+     * existing WebView with this id if one exists. The web view provider can deny the request if it
+     * chooses to do so.
+     *
+     * Alternatively, set this to '?' to attempt to find any existing web view with the specified
+     * webViewType.
+     *
+     * Note: setting `existingId` to `undefined` counts as providing in this case (providing is tested
+     * with `'existingId' in options`, not just testing if `existingId` is truthy). Not providing an
+     * `existingId` at all is the only way to specify we are not looking for an existing webView
+     */
+    existingId?: string | '?' | undefined;
+    /**
+     * Whether to create a webview with a new id and a webview with id `existingId` was not found.
+     * Only relevant if `existingId` is provided. If `existingId` is not provided, this property is
+     * ignored.
+     *
+     * Defaults to true
+     */
+    createNewIfNotFound?: boolean;
   };
-  export default internetService;
 }
 declare module 'shared/utils/async-variable' {
   /**
@@ -1391,6 +1422,195 @@ declare module 'shared/models/network-object.model' {
     networkObjectPromise: Promise<NetworkObject<T>>,
   ) => Partial<NetworkableObject>;
 }
+declare module 'shared/models/web-view-provider.model' {
+  import {
+    GetWebViewOptions,
+    WebViewDefinition,
+    SavedWebViewDefinition,
+  } from 'shared/data/web-view.model';
+  import {
+    DisposableNetworkObject,
+    NetworkObject,
+    NetworkableObject,
+  } from 'shared/models/network-object.model';
+  import { CanHaveOnDidDispose } from 'shared/models/disposal.model';
+  export interface IWebViewProvider extends NetworkableObject {
+    /**
+     * @param savedWebView filled out if an existing webview is being called for (matched by id).
+     * Just id if this is a new request or if the web view with the existing id was not found
+     * @param getWebViewOptions
+     */
+    getWebView(
+      savedWebView: SavedWebViewDefinition,
+      getWebViewOptions: GetWebViewOptions,
+    ): Promise<WebViewDefinition | undefined>;
+  }
+  export interface WebViewProvider
+    extends NetworkObject<NetworkableObject>,
+      CanHaveOnDidDispose<IWebViewProvider> {}
+  export interface DisposableWebViewProvider
+    extends DisposableNetworkObject<NetworkableObject>,
+      Omit<WebViewProvider, 'dispose'> {}
+}
+declare module 'shared/services/web-view-provider.service' {
+  /**
+   * Handles registering web view providers and serving web views around the papi.
+   * Exposed on the papi.
+   */
+  import {
+    DisposableWebViewProvider,
+    IWebViewProvider,
+    WebViewProvider,
+  } from 'shared/models/web-view-provider.model';
+  /**
+   * Indicate if we are aware of an existing web view provider with the given type. If a web view
+   * provider with the given type is somewhere else on the network, this function won't tell you about
+   * it unless something else in the existing process is subscribed to it.
+   * @param webViewType type of webView to check for
+   */
+  function hasKnown(webViewType: string): boolean;
+  /**
+   * Register a web view provider to serve webViews for a specified type of webViews
+   *
+   * @param webViewType type of web view to provide
+   * @param webViewProvider object to register as a webView provider including control over disposing
+   * of it.
+   *
+   * WARNING: setting a webView provider mutates the provided object.
+   * @returns `webViewProvider` modified to be a network object
+   */
+  function register(
+    webViewType: string,
+    webViewProvider: IWebViewProvider,
+  ): Promise<DisposableWebViewProvider>;
+  /**
+   * Get a web view provider that has previously been set up
+   * @param webViewType type of webview provider to get
+   * @returns web view provider with the given name if one exists, undefined otherwise
+   */
+  function get(webViewType: string): Promise<WebViewProvider | undefined>;
+  const webViewProviderService: {
+    initialize: () => Promise<void>;
+    hasKnown: typeof hasKnown;
+    register: typeof register;
+    get: typeof get;
+  };
+  export const papiWebViewProviderService: {
+    register: typeof register;
+  };
+  export default webViewProviderService;
+}
+declare module 'shared/services/web-view.service' {
+  import { Unsubscriber } from 'shared/utils/papi-util';
+  import { MutableRefObject } from 'react';
+  import {
+    AddWebViewEvent,
+    Layout,
+    SavedTabInfo,
+    TabInfo,
+    WebViewProps,
+    WebViewType,
+    WebViewId,
+    GetWebViewOptions,
+    WebViewDefinition,
+    SavedWebViewDefinition,
+  } from 'shared/data/web-view.model';
+  import { DockLayout, DropDirection, LayoutBase } from 'rc-dock';
+  /** rc-dock's onLayoutChange prop made asynchronous - resolves */
+  export type OnLayoutChangeRCDock = (
+    newLayout: LayoutBase,
+    currentTabId?: string,
+    direction?: DropDirection,
+  ) => Promise<void>;
+  /** Properties related to the dock layout provided by `paranext-dock-layout.component.tsx` */
+  export type PapiDockLayout = {
+    /** The rc-dock dock layout React element ref. Used to perform operations on the layout */
+    dockLayout: DockLayout;
+    /**
+     * A ref to a function that runs when the layout changes. We set this ref to our
+     * {@link onLayoutChange} function
+     */
+    onLayoutChangeRef: MutableRefObject<OnLayoutChangeRCDock | undefined>;
+    /** Function to call to add or update a webview in the layout */
+    addWebViewToDock: (webView: WebViewProps, layout: Layout) => void;
+    /**
+     * The layout to use as the default layout if the dockLayout doesn't have a layout loaded.
+     *
+     * TODO: This should be removed and the `testLayout` imported directly in this file once this
+     * service is refactored to split the code between processes. The only reason this is passed from
+     * `paranext-dock-layout.component.tsx` is that we cannot import `testLayout` here since this
+     * service is currently all shared code. Refactor should happen in #203
+     */
+    testLayout: LayoutBase;
+  };
+  /** Event that emits with webView info when a webView is added */
+  export const onDidAddWebView: import('shared/models/papi-event.model').PapiEvent<AddWebViewEvent>;
+  /**
+   * Basic `saveTabInfo` that simply strips the properties added by {@link TabInfo} off of the object
+   * and returns it as a {@link SavedTabInfo}. Runs as the {@link TabSaver} by default if the tab type
+   * does not have a specific `TabSaver`
+   */
+  export function saveTabInfoBase(tabInfo: TabInfo): SavedTabInfo;
+  /**
+   * Converts web view definition used in an actual docking tab into saveable web view information by
+   * stripping out the members we don't want to save
+   * @param webViewDefinition web view to save
+   * @returns saveable web view information based on `webViewDefinition`
+   */
+  export function convertWebViewDefinitionToSaved(
+    webViewDefinition: WebViewDefinition,
+  ): SavedWebViewDefinition;
+  /**
+   * Register a dock layout React element to be used by this service to perform layout-related
+   * operations
+   * @param dockLayout dock layout element to register along with other important properties
+   * @returns function used to unregister this dock layout
+   */
+  export function registerDockLayout(dockLayout: PapiDockLayout): Unsubscriber;
+  /**
+   * Creates a new web view or gets an existing one depending on if you request an existing one and
+   * if the web view provider decides to give that existing one to you (it is up to the provider).
+   *
+   * @param webViewType type of WebView to create
+   * @param layout information about where you want the web view to go. Defaults to adding as a tab
+   * @param options options that affect what this function does. For example, you can provide an
+   * existing web view id to request an existing web view with that id.
+   *
+   * @returns promise that resolves to the id of the webview we got.
+   */
+  export const getWebView: (
+    webViewType: WebViewType,
+    layout?: Layout,
+    options?: GetWebViewOptions,
+  ) => Promise<WebViewId | undefined>;
+  /** Sets up the WebViewService. Runs only once */
+  export const initialize: () => Promise<void>;
+  export const registerWebViewProvider: (
+    webViewType: string,
+    webViewProvider: import('shared/models/web-view-provider.model').IWebViewProvider,
+  ) => Promise<import('shared/models/web-view-provider.model').DisposableWebViewProvider>;
+  /** All the exports in this service that are to be exposed on the PAPI */
+  export const papiWebViewService: {
+    onDidAddWebView: import('shared/models/papi-event.model').PapiEvent<AddWebViewEvent>;
+    getWebView: (
+      webViewType: WebViewType,
+      layout?: Layout,
+      options?: GetWebViewOptions,
+    ) => Promise<WebViewId | undefined>;
+    initialize: () => Promise<void>;
+    registerWebViewProvider: (
+      webViewType: string,
+      webViewProvider: import('shared/models/web-view-provider.model').IWebViewProvider,
+    ) => Promise<import('shared/models/web-view-provider.model').DisposableWebViewProvider>;
+  };
+  export type PapiWebViewService = typeof papiWebViewService;
+}
+declare module 'shared/services/internet.service' {
+  const internetService: {
+    fetch: typeof fetch;
+  };
+  export default internetService;
+}
 declare module 'shared/models/data-provider.model' {
   import { UnsubscriberAsync } from 'shared/utils/papi-util';
   import { PapiEventHandler } from 'shared/models/papi-event.model';
@@ -1568,9 +1788,10 @@ declare module 'shared/services/data-provider.service' {
    */
   import IDataProvider, { IDisposableDataProvider } from 'shared/models/data-provider.interface';
   import IDataProviderEngine from 'shared/models/data-provider-engine.model';
-  /** Indicate if we are aware of an existing data provider with the given name. If a data provider
-   *  with the given name is someone else on the network, this function won't tell you about it
-   *  unless something else in the existing process is subscribed to it.
+  /**
+   * Indicate if we are aware of an existing data provider with the given name. If a data provider
+   * with the given name is somewhere else on the network, this function won't tell you about it
+   * unless something else in the existing process is subscribed to it.
    */
   function hasKnown(providerName: string): boolean;
   /**
@@ -1580,7 +1801,7 @@ declare module 'shared/services/data-provider.service' {
    *
    * WARNING: registering a dataProviderEngine mutates the provided object.
    * Its `notifyUpdate` and `set` methods are layered over to facilitate data provider subscriptions.
-   * @returns information about the data provider including control over disposing of it.
+   * @returns the data provider including control over disposing of it.
    *  Note that this data provider is a new object distinct from the data provider engine passed in.
    * @type `TSelector` - the type of selector used to get some data from this provider.
    *  A selector is an object a caller provides to the data provider to tell the provider what subset of data it wants.
@@ -1997,14 +2218,27 @@ declare module 'papi' {
    */
   import * as commandService from 'shared/services/command.service';
   import * as papiUtil from 'shared/utils/papi-util';
-  import * as webViewService from 'shared/services/web-view.service';
   import PapiEventEmitter from 'shared/models/papi-event-emitter.model';
   const papi: {
     EventEmitter: typeof PapiEventEmitter;
     fetch: typeof fetch;
     commands: typeof commandService;
     util: typeof papiUtil;
-    webViews: typeof webViewService;
+    webViews: {
+      onDidAddWebView: import('shared/models/papi-event.model').PapiEvent<
+        import('shared/data/web-view.model').AddWebViewEvent
+      >;
+      getWebView: (
+        webViewType: string,
+        layout?: import('shared/data/web-view.model').Layout,
+        options?: import('shared/data/web-view.model').GetWebViewOptions,
+      ) => Promise<string | undefined>;
+      initialize: () => Promise<void>;
+      registerWebViewProvider: (
+        webViewType: string,
+        webViewProvider: import('shared/models/web-view-provider.model').IWebViewProvider,
+      ) => Promise<import('shared/models/web-view-provider.model').DisposableWebViewProvider>;
+    };
     react: {
       context: {
         TestContext: import('react').Context<string>;
diff --git a/package-lock.json b/package-lock.json
index 7b56a10a3f..1ff0fd5459 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -21,7 +21,7 @@
         "memoize-one": "^6.0.0",
         "node-localstorage": "^2.2.1",
         "papi-components": "file:lib/papi-components",
-        "rc-dock": "^3.2.17",
+        "rc-dock": "^3.2.18",
         "react": "^18.2.0",
         "react-data-grid": "^7.0.0-beta.28",
         "react-dom": "^18.2.0",
@@ -90,6 +90,7 @@
         "lint-staged": "^13.2.0",
         "mini-css-extract-plugin": "^2.7.4",
         "nodemon": "^2.0.21",
+        "patch-package": "^7.0.0",
         "prettier": "^2.8.4",
         "react-refresh": "^0.14.0",
         "react-test-renderer": "^18.2.0",
@@ -7843,6 +7844,12 @@
         "esbuild": ">=0.10.0"
       }
     },
+    "node_modules/@yarnpkg/lockfile": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@yarnpkg/lockfile/-/lockfile-1.1.0.tgz",
+      "integrity": "sha512-GpSwvyXOcOOlV70vbnzjj4fW5xW/FdUF6nQEt1ENy7m4ZCczi1+/buVUPAqmGfqznsORNFzUMjctTIp8a9tuCQ==",
+      "dev": true
+    },
     "node_modules/7zip-bin": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/7zip-bin/-/7zip-bin-5.1.1.tgz",
@@ -9736,10 +9743,19 @@
       "dev": true
     },
     "node_modules/ci-info": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-3.3.0.tgz",
-      "integrity": "sha512-riT/3vI5YpVH6/qomlDnJow6TBee2PBKSEpx3O32EGPYbWGIRsIlGRms3Sm74wYE1JMo8RnO04Hb12+v1J5ICw==",
-      "dev": true
+      "version": "3.8.0",
+      "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-3.8.0.tgz",
+      "integrity": "sha512-eXTggHWSooYhq49F2opQhuHWgzucfF2YgODK4e1566GQs5BIfP30B0oenwBJHfWxAs2fyPB1s7Mg949zLf61Yw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/sibiraj-s"
+        }
+      ],
+      "engines": {
+        "node": ">=8"
+      }
     },
     "node_modules/cjs-module-lexer": {
       "version": "1.2.2",
@@ -13852,6 +13868,15 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/find-yarn-workspace-root": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/find-yarn-workspace-root/-/find-yarn-workspace-root-2.0.0.tgz",
+      "integrity": "sha512-1IMnbjt4KzsQfnhnzNd8wUEgXZ44IzZaZmnLYx7D5FZlaHt2gW20Cri8Q+E/t5tIj4+epTBub+2Zxu/vNILzqQ==",
+      "dev": true,
+      "dependencies": {
+        "micromatch": "^4.0.2"
+      }
+    },
     "node_modules/flat-cache": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.0.4.tgz",
@@ -17068,6 +17093,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/klaw-sync": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/klaw-sync/-/klaw-sync-6.0.0.tgz",
+      "integrity": "sha512-nIeuVSzdCCs6TDPTqI8w1Yre34sSq7AkZ4B3sfOBbI2CgVSB4Du4aLQijFU2+lhAFCwt9+42Hel6lQNIv6AntQ==",
+      "dev": true,
+      "dependencies": {
+        "graceful-fs": "^4.1.11"
+      }
+    },
     "node_modules/kleur": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/kleur/-/kleur-3.0.3.tgz",
@@ -19035,6 +19069,15 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/os-tmpdir": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz",
+      "integrity": "sha512-D2FR03Vir7FIu45XBY20mTb+/ZSWB00sjU9jdQXt83gDrI4Ztz5Fs7/yy74g2N5SVQY4xY1qDr4rNddwYRVX0g==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/p-cancelable": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/p-cancelable/-/p-cancelable-2.1.1.tgz",
@@ -19211,6 +19254,138 @@
         "tslib": "^2.0.3"
       }
     },
+    "node_modules/patch-package": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/patch-package/-/patch-package-7.0.0.tgz",
+      "integrity": "sha512-eYunHbnnB2ghjTNc5iL1Uo7TsGMuXk0vibX3RFcE/CdVdXzmdbMsG/4K4IgoSuIkLTI5oHrMQk4+NkFqSed0BQ==",
+      "dev": true,
+      "dependencies": {
+        "@yarnpkg/lockfile": "^1.1.0",
+        "chalk": "^4.1.2",
+        "ci-info": "^3.7.0",
+        "cross-spawn": "^7.0.3",
+        "find-yarn-workspace-root": "^2.0.0",
+        "fs-extra": "^9.0.0",
+        "klaw-sync": "^6.0.0",
+        "minimist": "^1.2.6",
+        "open": "^7.4.2",
+        "rimraf": "^2.6.3",
+        "semver": "^5.6.0",
+        "slash": "^2.0.0",
+        "tmp": "^0.0.33",
+        "yaml": "^2.2.2"
+      },
+      "bin": {
+        "patch-package": "index.js"
+      },
+      "engines": {
+        "node": ">=14",
+        "npm": ">5"
+      }
+    },
+    "node_modules/patch-package/node_modules/fs-extra": {
+      "version": "9.1.0",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
+      "integrity": "sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==",
+      "dev": true,
+      "dependencies": {
+        "at-least-node": "^1.0.0",
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^6.0.1",
+        "universalify": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/patch-package/node_modules/jsonfile": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
+      "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
+      "dev": true,
+      "dependencies": {
+        "universalify": "^2.0.0"
+      },
+      "optionalDependencies": {
+        "graceful-fs": "^4.1.6"
+      }
+    },
+    "node_modules/patch-package/node_modules/open": {
+      "version": "7.4.2",
+      "resolved": "https://registry.npmjs.org/open/-/open-7.4.2.tgz",
+      "integrity": "sha512-MVHddDVweXZF3awtlAS+6pgKLlm/JgxZ90+/NBurBoQctVOOB/zDdVjcyPzQ+0laDGbsWgrRkflI65sQeOgT9Q==",
+      "dev": true,
+      "dependencies": {
+        "is-docker": "^2.0.0",
+        "is-wsl": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/patch-package/node_modules/rimraf": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
+      "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==",
+      "dev": true,
+      "dependencies": {
+        "glob": "^7.1.3"
+      },
+      "bin": {
+        "rimraf": "bin.js"
+      }
+    },
+    "node_modules/patch-package/node_modules/semver": {
+      "version": "5.7.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
+      "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+      "dev": true,
+      "bin": {
+        "semver": "bin/semver"
+      }
+    },
+    "node_modules/patch-package/node_modules/slash": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/slash/-/slash-2.0.0.tgz",
+      "integrity": "sha512-ZYKh3Wh2z1PpEXWr0MpSBZ0V6mZHAQfYevttO11c51CaWjGTaadiKZ+wVt1PbMlDV5qhMFslpZCemhwOK7C89A==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/patch-package/node_modules/tmp": {
+      "version": "0.0.33",
+      "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz",
+      "integrity": "sha512-jRCJlojKnZ3addtTOjdIqoRuPEKBvNXcGYqzO6zWZX8KfKEpnGY5jfggJQ3EjKuu8D4bJRr0y+cYJFmYbImXGw==",
+      "dev": true,
+      "dependencies": {
+        "os-tmpdir": "~1.0.2"
+      },
+      "engines": {
+        "node": ">=0.6.0"
+      }
+    },
+    "node_modules/patch-package/node_modules/universalify": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
+      "integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==",
+      "dev": true,
+      "engines": {
+        "node": ">= 10.0.0"
+      }
+    },
+    "node_modules/patch-package/node_modules/yaml": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.3.1.tgz",
+      "integrity": "sha512-2eHWfjaoXgTBC2jNM1LRef62VQa0umtvRiDSk6HSzW7RvS5YtkabJrwYLLEKWBc8a5U2PTSCs+dJjUTJdlHsWQ==",
+      "dev": true,
+      "engines": {
+        "node": ">= 14"
+      }
+    },
     "node_modules/path-browserify": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-1.0.1.tgz",
@@ -20500,9 +20675,9 @@
       }
     },
     "node_modules/rc-dock": {
-      "version": "3.2.17",
-      "resolved": "https://registry.npmjs.org/rc-dock/-/rc-dock-3.2.17.tgz",
-      "integrity": "sha512-GhgIVsQ/h3lnamcXz0gO9JKtJ54uhfaDC7Sa6EgchvVyRfljArqxL3nMdWNCo47Y7SEbtptmqPNS1FP7xo2Rog==",
+      "version": "3.2.18",
+      "resolved": "https://registry.npmjs.org/rc-dock/-/rc-dock-3.2.18.tgz",
+      "integrity": "sha512-5I0CNgrv/3pctK9WkoEMFTwitJhXx2cMHVyygReDJI8qXw9dayE3xxJgnybbELGFeLkDfVhFSfKz6zSboAVbxw==",
       "dependencies": {
         "classnames": "^2.3.1",
         "lodash": "^4.17.21",
@@ -30700,6 +30875,12 @@
         "tslib": "^2.4.0"
       }
     },
+    "@yarnpkg/lockfile": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@yarnpkg/lockfile/-/lockfile-1.1.0.tgz",
+      "integrity": "sha512-GpSwvyXOcOOlV70vbnzjj4fW5xW/FdUF6nQEt1ENy7m4ZCczi1+/buVUPAqmGfqznsORNFzUMjctTIp8a9tuCQ==",
+      "dev": true
+    },
     "7zip-bin": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/7zip-bin/-/7zip-bin-5.1.1.tgz",
@@ -32178,9 +32359,9 @@
       "dev": true
     },
     "ci-info": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-3.3.0.tgz",
-      "integrity": "sha512-riT/3vI5YpVH6/qomlDnJow6TBee2PBKSEpx3O32EGPYbWGIRsIlGRms3Sm74wYE1JMo8RnO04Hb12+v1J5ICw==",
+      "version": "3.8.0",
+      "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-3.8.0.tgz",
+      "integrity": "sha512-eXTggHWSooYhq49F2opQhuHWgzucfF2YgODK4e1566GQs5BIfP30B0oenwBJHfWxAs2fyPB1s7Mg949zLf61Yw==",
       "dev": true
     },
     "cjs-module-lexer": {
@@ -35220,6 +35401,15 @@
         "path-exists": "^4.0.0"
       }
     },
+    "find-yarn-workspace-root": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/find-yarn-workspace-root/-/find-yarn-workspace-root-2.0.0.tgz",
+      "integrity": "sha512-1IMnbjt4KzsQfnhnzNd8wUEgXZ44IzZaZmnLYx7D5FZlaHt2gW20Cri8Q+E/t5tIj4+epTBub+2Zxu/vNILzqQ==",
+      "dev": true,
+      "requires": {
+        "micromatch": "^4.0.2"
+      }
+    },
     "flat-cache": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.0.4.tgz",
@@ -37602,6 +37792,15 @@
       "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==",
       "dev": true
     },
+    "klaw-sync": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/klaw-sync/-/klaw-sync-6.0.0.tgz",
+      "integrity": "sha512-nIeuVSzdCCs6TDPTqI8w1Yre34sSq7AkZ4B3sfOBbI2CgVSB4Du4aLQijFU2+lhAFCwt9+42Hel6lQNIv6AntQ==",
+      "dev": true,
+      "requires": {
+        "graceful-fs": "^4.1.11"
+      }
+    },
     "kleur": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/kleur/-/kleur-3.0.3.tgz",
@@ -39055,6 +39254,12 @@
         "wcwidth": "^1.0.1"
       }
     },
+    "os-tmpdir": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz",
+      "integrity": "sha512-D2FR03Vir7FIu45XBY20mTb+/ZSWB00sjU9jdQXt83gDrI4Ztz5Fs7/yy74g2N5SVQY4xY1qDr4rNddwYRVX0g==",
+      "dev": true
+    },
     "p-cancelable": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/p-cancelable/-/p-cancelable-2.1.1.tgz",
@@ -39205,6 +39410,104 @@
         "tslib": "^2.0.3"
       }
     },
+    "patch-package": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/patch-package/-/patch-package-7.0.0.tgz",
+      "integrity": "sha512-eYunHbnnB2ghjTNc5iL1Uo7TsGMuXk0vibX3RFcE/CdVdXzmdbMsG/4K4IgoSuIkLTI5oHrMQk4+NkFqSed0BQ==",
+      "dev": true,
+      "requires": {
+        "@yarnpkg/lockfile": "^1.1.0",
+        "chalk": "^4.1.2",
+        "ci-info": "^3.7.0",
+        "cross-spawn": "^7.0.3",
+        "find-yarn-workspace-root": "^2.0.0",
+        "fs-extra": "^9.0.0",
+        "klaw-sync": "^6.0.0",
+        "minimist": "^1.2.6",
+        "open": "^7.4.2",
+        "rimraf": "^2.6.3",
+        "semver": "^5.6.0",
+        "slash": "^2.0.0",
+        "tmp": "^0.0.33",
+        "yaml": "^2.2.2"
+      },
+      "dependencies": {
+        "fs-extra": {
+          "version": "9.1.0",
+          "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
+          "integrity": "sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==",
+          "dev": true,
+          "requires": {
+            "at-least-node": "^1.0.0",
+            "graceful-fs": "^4.2.0",
+            "jsonfile": "^6.0.1",
+            "universalify": "^2.0.0"
+          }
+        },
+        "jsonfile": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
+          "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
+          "dev": true,
+          "requires": {
+            "graceful-fs": "^4.1.6",
+            "universalify": "^2.0.0"
+          }
+        },
+        "open": {
+          "version": "7.4.2",
+          "resolved": "https://registry.npmjs.org/open/-/open-7.4.2.tgz",
+          "integrity": "sha512-MVHddDVweXZF3awtlAS+6pgKLlm/JgxZ90+/NBurBoQctVOOB/zDdVjcyPzQ+0laDGbsWgrRkflI65sQeOgT9Q==",
+          "dev": true,
+          "requires": {
+            "is-docker": "^2.0.0",
+            "is-wsl": "^2.1.1"
+          }
+        },
+        "rimraf": {
+          "version": "2.7.1",
+          "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
+          "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==",
+          "dev": true,
+          "requires": {
+            "glob": "^7.1.3"
+          }
+        },
+        "semver": {
+          "version": "5.7.1",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
+          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+          "dev": true
+        },
+        "slash": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/slash/-/slash-2.0.0.tgz",
+          "integrity": "sha512-ZYKh3Wh2z1PpEXWr0MpSBZ0V6mZHAQfYevttO11c51CaWjGTaadiKZ+wVt1PbMlDV5qhMFslpZCemhwOK7C89A==",
+          "dev": true
+        },
+        "tmp": {
+          "version": "0.0.33",
+          "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz",
+          "integrity": "sha512-jRCJlojKnZ3addtTOjdIqoRuPEKBvNXcGYqzO6zWZX8KfKEpnGY5jfggJQ3EjKuu8D4bJRr0y+cYJFmYbImXGw==",
+          "dev": true,
+          "requires": {
+            "os-tmpdir": "~1.0.2"
+          }
+        },
+        "universalify": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
+          "integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==",
+          "dev": true
+        },
+        "yaml": {
+          "version": "2.3.1",
+          "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.3.1.tgz",
+          "integrity": "sha512-2eHWfjaoXgTBC2jNM1LRef62VQa0umtvRiDSk6HSzW7RvS5YtkabJrwYLLEKWBc8a5U2PTSCs+dJjUTJdlHsWQ==",
+          "dev": true
+        }
+      }
+    },
     "path-browserify": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-1.0.1.tgz",
@@ -40104,9 +40407,9 @@
       }
     },
     "rc-dock": {
-      "version": "3.2.17",
-      "resolved": "https://registry.npmjs.org/rc-dock/-/rc-dock-3.2.17.tgz",
-      "integrity": "sha512-GhgIVsQ/h3lnamcXz0gO9JKtJ54uhfaDC7Sa6EgchvVyRfljArqxL3nMdWNCo47Y7SEbtptmqPNS1FP7xo2Rog==",
+      "version": "3.2.18",
+      "resolved": "https://registry.npmjs.org/rc-dock/-/rc-dock-3.2.18.tgz",
+      "integrity": "sha512-5I0CNgrv/3pctK9WkoEMFTwitJhXx2cMHVyygReDJI8qXw9dayE3xxJgnybbELGFeLkDfVhFSfKz6zSboAVbxw==",
       "requires": {
         "classnames": "^2.3.1",
         "lodash": "^4.17.21",
diff --git a/package.json b/package.json
index fc91c96ba8..78224e35c6 100644
--- a/package.json
+++ b/package.json
@@ -54,7 +54,7 @@
     "build:types": "cd lib/papi-dts && npm run build",
     "build:papi-components": "cd lib/papi-components && npm run build",
     "csharp:tool:restore": "cd c-sharp && dotnet tool restore",
-    "postinstall": "ts-node .erb/scripts/check-native-dep.js && electron-builder install-app-deps && cd extensions && npm install && cd .. && cross-env NODE_ENV=development TS_NODE_TRANSPILE_ONLY=true webpack --config ./.erb/configs/webpack.config.renderer.dev.dll.ts",
+    "postinstall": "patch-package && ts-node .erb/scripts/check-native-dep.js && electron-builder install-app-deps && cd extensions && npm install && cd .. && cross-env NODE_ENV=development TS_NODE_TRANSPILE_ONLY=true webpack --config ./.erb/configs/webpack.config.renderer.dev.dll.ts",
     "lint": "npm run build:types && npm run build:extensions && cross-env NODE_ENV=development eslint . --ext .js,.jsx,.ts,.tsx && cd lib/papi-dts && npm run lint && cd ../../extensions && npm run lint",
     "lint:config": "cross-env NODE_ENV=development eslint --print-config .eslintrc.js > .eslintConfig.json",
     "lint:staged": "npm run build:types && npm run build:extensions && lint-staged -q && cd lib/papi-dts && npm run lint:staged && cd ../../extensions && npm run lint:staged",
@@ -104,7 +104,7 @@
     "memoize-one": "^6.0.0",
     "node-localstorage": "^2.2.1",
     "papi-components": "file:lib/papi-components",
-    "rc-dock": "^3.2.17",
+    "rc-dock": "^3.2.18",
     "react": "^18.2.0",
     "react-data-grid": "^7.0.0-beta.28",
     "react-dom": "^18.2.0",
@@ -173,6 +173,7 @@
     "lint-staged": "^13.2.0",
     "mini-css-extract-plugin": "^2.7.4",
     "nodemon": "^2.0.21",
+    "patch-package": "^7.0.0",
     "prettier": "^2.8.4",
     "react-refresh": "^0.14.0",
     "react-test-renderer": "^18.2.0",
diff --git a/patches/rc-dock+3.2.18.patch b/patches/rc-dock+3.2.18.patch
new file mode 100644
index 0000000000..308d943fec
--- /dev/null
+++ b/patches/rc-dock+3.2.18.patch
@@ -0,0 +1,228 @@
+diff --git a/node_modules/rc-dock/README.md b/node_modules/rc-dock/README.md
+index 2a7a4bc..ad0da92 100644
+--- a/node_modules/rc-dock/README.md
++++ b/node_modules/rc-dock/README.md
+@@ -122,7 +122,7 @@ dockMove(source: TabData | PanelData, target: string | TabData | PanelData | Box
+ find PanelData or TabData by id
+ 
+ ```typescript
+-find(id: string): PanelData | TabData;
++find(id: string | ((item: PanelData | TabData | BoxData) => boolean), filter?: Filter): PanelData | TabData | BoxData | undefined;
+ ```
+ 
+ ### updateTab [🗎](https://ticlo.github.io/rc-dock/classes/docklayout.docklayout-1.html#updatetab)
+diff --git a/node_modules/rc-dock/es/Algorithm.d.ts b/node_modules/rc-dock/es/Algorithm.d.ts
+index e886078..f6db041 100644
+--- a/node_modules/rc-dock/es/Algorithm.d.ts
++++ b/node_modules/rc-dock/es/Algorithm.d.ts
+@@ -16,7 +16,7 @@ export declare enum Filter {
+     AnyTabPanel = 123,
+     All = 127
+ }
+-export declare function find(layout: LayoutData, id: string, filter?: Filter): PanelData | TabData | BoxData | undefined;
++export declare function find(layout: LayoutData, id: string | ((item: PanelData | TabData | BoxData) => boolean), filter?: Filter): PanelData | TabData | BoxData | undefined;
+ export declare function addNextToTab(layout: LayoutData, source: TabData | PanelData, target: TabData, direction: DropDirection): LayoutData;
+ export declare function addTabToPanel(layout: LayoutData, source: TabData | PanelData, panel: PanelData, idx?: number): LayoutData;
+ export declare function converToPanel(source: TabData | PanelData): PanelData;
+diff --git a/node_modules/rc-dock/es/Algorithm.js b/node_modules/rc-dock/es/Algorithm.js
+index c93e88f..d03bd19 100644
+--- a/node_modules/rc-dock/es/Algorithm.js
++++ b/node_modules/rc-dock/es/Algorithm.js
+@@ -60,13 +60,16 @@ export function nextZIndex(current) {
+     }
+     return ++_zCount;
+ }
++function compareFindId(item, id) {
++    return item && (typeof id === 'function' ? id(item) : item.id === id);
++}
+ function findInPanel(panel, id, filter) {
+-    if (panel.id === id && (filter & Filter.Panel)) {
++    if (compareFindId(panel, id) && (filter & Filter.Panel)) {
+         return panel;
+     }
+     if (filter & Filter.Tab) {
+         for (let tab of panel.tabs) {
+-            if (tab.id === id) {
++            if (compareFindId(tab, id)) {
+                 return tab;
+             }
+         }
+@@ -75,7 +78,7 @@ function findInPanel(panel, id, filter) {
+ }
+ function findInBox(box, id, filter) {
+     let result;
+-    if ((filter | Filter.Box) && (box === null || box === void 0 ? void 0 : box.id) === id) {
++    if ((filter | Filter.Box) && compareFindId(box, id)) {
+         return box;
+     }
+     if (!(box === null || box === void 0 ? void 0 : box.children)) {
+diff --git a/node_modules/rc-dock/es/DockData.d.ts b/node_modules/rc-dock/es/DockData.d.ts
+index 89b1506..65e58e0 100644
+--- a/node_modules/rc-dock/es/DockData.d.ts
++++ b/node_modules/rc-dock/es/DockData.d.ts
+@@ -290,7 +290,7 @@ export interface DockContext {
+     /**
+      * Find PanelData or TabData by id
+      */
+-    find(id: string, filter?: Filter): PanelData | TabData | BoxData | undefined;
++    find(id: string | ((item: PanelData | TabData | BoxData) => boolean), filter?: Filter): PanelData | TabData | BoxData | undefined;
+     /**
+      * Update a tab with new TabData
+      * @param id tab id to update
+diff --git a/node_modules/rc-dock/es/DockLayout.d.ts b/node_modules/rc-dock/es/DockLayout.d.ts
+index d951ae7..e13b0d8 100644
+--- a/node_modules/rc-dock/es/DockLayout.d.ts
++++ b/node_modules/rc-dock/es/DockLayout.d.ts
+@@ -111,7 +111,7 @@ export declare class DockLayout extends DockPortalManager implements DockContext
+      */
+     dockMove(source: TabData | PanelData, target: string | TabData | PanelData | BoxData | null, direction: DropDirection, floatPosition?: FloatPosition): void;
+     /** @inheritDoc */
+-    find(id: string, filter?: Algorithm.Filter): PanelData | TabData | BoxData | undefined;
++    find(id: string | ((item: PanelData | TabData | BoxData) => boolean), filter?: Algorithm.Filter): PanelData | TabData | BoxData | undefined;
+     /** @ignore */
+     getLayoutSize(): LayoutSize;
+     /** @inheritDoc */
+diff --git a/node_modules/rc-dock/lib/Algorithm.d.ts b/node_modules/rc-dock/lib/Algorithm.d.ts
+index e886078..f6db041 100644
+--- a/node_modules/rc-dock/lib/Algorithm.d.ts
++++ b/node_modules/rc-dock/lib/Algorithm.d.ts
+@@ -16,7 +16,7 @@ export declare enum Filter {
+     AnyTabPanel = 123,
+     All = 127
+ }
+-export declare function find(layout: LayoutData, id: string, filter?: Filter): PanelData | TabData | BoxData | undefined;
++export declare function find(layout: LayoutData, id: string | ((item: PanelData | TabData | BoxData) => boolean), filter?: Filter): PanelData | TabData | BoxData | undefined;
+ export declare function addNextToTab(layout: LayoutData, source: TabData | PanelData, target: TabData, direction: DropDirection): LayoutData;
+ export declare function addTabToPanel(layout: LayoutData, source: TabData | PanelData, panel: PanelData, idx?: number): LayoutData;
+ export declare function converToPanel(source: TabData | PanelData): PanelData;
+diff --git a/node_modules/rc-dock/lib/Algorithm.js b/node_modules/rc-dock/lib/Algorithm.js
+index 5f22efa..6f547b8 100644
+--- a/node_modules/rc-dock/lib/Algorithm.js
++++ b/node_modules/rc-dock/lib/Algorithm.js
+@@ -66,13 +66,16 @@ function nextZIndex(current) {
+     return ++_zCount;
+ }
+ exports.nextZIndex = nextZIndex;
++function compareFindId(item, id) {
++    return item && (typeof id === 'function' ? id(item) : item.id === id);
++}
+ function findInPanel(panel, id, filter) {
+-    if (panel.id === id && (filter & Filter.Panel)) {
++    if (compareFindId(panel, id) && (filter & Filter.Panel)) {
+         return panel;
+     }
+     if (filter & Filter.Tab) {
+         for (let tab of panel.tabs) {
+-            if (tab.id === id) {
++            if (compareFindId(tab, id)) {
+                 return tab;
+             }
+         }
+@@ -81,7 +84,7 @@ function findInPanel(panel, id, filter) {
+ }
+ function findInBox(box, id, filter) {
+     let result;
+-    if ((filter | Filter.Box) && (box === null || box === void 0 ? void 0 : box.id) === id) {
++    if ((filter | Filter.Box) && compareFindId(box, id)) {
+         return box;
+     }
+     if (!(box === null || box === void 0 ? void 0 : box.children)) {
+diff --git a/node_modules/rc-dock/lib/DockData.d.ts b/node_modules/rc-dock/lib/DockData.d.ts
+index 89b1506..65e58e0 100644
+--- a/node_modules/rc-dock/lib/DockData.d.ts
++++ b/node_modules/rc-dock/lib/DockData.d.ts
+@@ -290,7 +290,7 @@ export interface DockContext {
+     /**
+      * Find PanelData or TabData by id
+      */
+-    find(id: string, filter?: Filter): PanelData | TabData | BoxData | undefined;
++    find(id: string | ((item: PanelData | TabData | BoxData) => boolean), filter?: Filter): PanelData | TabData | BoxData | undefined;
+     /**
+      * Update a tab with new TabData
+      * @param id tab id to update
+diff --git a/node_modules/rc-dock/lib/DockLayout.d.ts b/node_modules/rc-dock/lib/DockLayout.d.ts
+index d951ae7..e13b0d8 100644
+--- a/node_modules/rc-dock/lib/DockLayout.d.ts
++++ b/node_modules/rc-dock/lib/DockLayout.d.ts
+@@ -111,7 +111,7 @@ export declare class DockLayout extends DockPortalManager implements DockContext
+      */
+     dockMove(source: TabData | PanelData, target: string | TabData | PanelData | BoxData | null, direction: DropDirection, floatPosition?: FloatPosition): void;
+     /** @inheritDoc */
+-    find(id: string, filter?: Algorithm.Filter): PanelData | TabData | BoxData | undefined;
++    find(id: string | ((item: PanelData | TabData | BoxData) => boolean), filter?: Algorithm.Filter): PanelData | TabData | BoxData | undefined;
+     /** @ignore */
+     getLayoutSize(): LayoutSize;
+     /** @inheritDoc */
+diff --git a/node_modules/rc-dock/src/Algorithm.ts b/node_modules/rc-dock/src/Algorithm.ts
+index f0844eb..9f2e63b 100644
+--- a/node_modules/rc-dock/src/Algorithm.ts
++++ b/node_modules/rc-dock/src/Algorithm.ts
+@@ -79,14 +79,18 @@ export function nextZIndex(current?: number): number {
+   return ++_zCount;
+ }
+ 
++function compareFindId(item: PanelData | TabData | BoxData, id: string | ((item: PanelData | TabData | BoxData) => boolean)): boolean {
++  return item && (typeof id === 'function' ? id(item) : item.id === id);
++}
++
+ 
+-function findInPanel(panel: PanelData, id: string, filter: Filter): PanelData | TabData | undefined {
+-  if (panel.id === id && (filter & Filter.Panel)) {
++function findInPanel(panel: PanelData, id: string | ((item: PanelData | TabData | BoxData) => boolean), filter: Filter): PanelData | TabData | undefined {
++  if (compareFindId(panel, id) && (filter & Filter.Panel)) {
+     return panel;
+   }
+   if (filter & Filter.Tab) {
+     for (let tab of panel.tabs) {
+-      if (tab.id === id) {
++      if (compareFindId(tab, id)) {
+         return tab;
+       }
+     }
+@@ -94,9 +98,9 @@ function findInPanel(panel: PanelData, id: string, filter: Filter): PanelData |
+   return undefined;
+ }
+ 
+-function findInBox(box: BoxData | undefined, id: string, filter: Filter): PanelData | TabData | BoxData | undefined {
++function findInBox(box: BoxData | undefined, id: string | ((item: PanelData | TabData | BoxData) => boolean), filter: Filter): PanelData | TabData | BoxData | undefined {
+   let result: PanelData | TabData | BoxData | undefined;
+-  if ((filter | Filter.Box) && box?.id === id) {
++  if ((filter | Filter.Box) && compareFindId(box, id)) {
+     return box;
+   }
+   if (!box?.children) {
+@@ -133,7 +137,7 @@ export enum Filter {
+ }
+ 
+ 
+-export function find(layout: LayoutData, id: string, filter: Filter = Filter.AnyTabPanel): PanelData | TabData | BoxData | undefined {
++export function find(layout: LayoutData, id: string | ((item: PanelData | TabData | BoxData) => boolean), filter: Filter = Filter.AnyTabPanel): PanelData | TabData | BoxData | undefined {
+   let result: PanelData | TabData | BoxData | undefined;
+ 
+   if (filter & Filter.Docked) {
+diff --git a/node_modules/rc-dock/src/DockData.ts b/node_modules/rc-dock/src/DockData.ts
+index b71c201..7dd9cb9 100644
+--- a/node_modules/rc-dock/src/DockData.ts
++++ b/node_modules/rc-dock/src/DockData.ts
+@@ -369,7 +369,7 @@ export interface DockContext {
+   /**
+    * Find PanelData or TabData by id
+    */
+-  find(id: string, filter?: Filter): PanelData | TabData | BoxData | undefined;
++  find(id: string | ((item: PanelData | TabData | BoxData) => boolean), filter?: Filter): PanelData | TabData | BoxData | undefined;
+ 
+   /**
+    * Update a tab with new TabData
+diff --git a/node_modules/rc-dock/src/DockLayout.tsx b/node_modules/rc-dock/src/DockLayout.tsx
+index fcaea36..472c6b6 100644
+--- a/node_modules/rc-dock/src/DockLayout.tsx
++++ b/node_modules/rc-dock/src/DockLayout.tsx
+@@ -277,7 +277,7 @@ export class DockLayout extends DockPortalManager implements DockContext {
+   }
+ 
+   /** @inheritDoc */
+-  find(id: string, filter?: Algorithm.Filter): PanelData | TabData | BoxData | undefined {
++  find(id: string | ((item: PanelData | TabData | BoxData) => boolean), filter?: Algorithm.Filter): PanelData | TabData | BoxData | undefined {
+     return Algorithm.find(this.getLayout(), id, filter);
+   }
+ 
diff --git a/src/@types/rc-dock.d.ts b/src/@types/rc-dock.d.ts
deleted file mode 100644
index ab7f44668a..0000000000
--- a/src/@types/rc-dock.d.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { BoxData, DropDirection, PanelData, TabData } from 'rc-dock';
-import * as Algorithm from 'rc-dock/lib/Algorithm';
-
-declare module 'rc-dock' {
-  export interface FloatSize {
-    width: number;
-    height: number;
-  }
-
-  export interface FloatPosition extends FloatSize {
-    left: number;
-    top: number;
-  }
-
-  type LayoutSize = FloatSize;
-
-  export default class DockLayout {
-    dockMove(
-      source: TabData | PanelData,
-      target: string | TabData | PanelData | BoxData | null,
-      direction: DropDirection,
-      floatPosition?: FloatPosition,
-    ): void;
-    find(id: string, filter?: Algorithm.Filter): PanelData | TabData | BoxData | undefined;
-    getLayoutSize(): LayoutSize;
-  }
-}
diff --git a/src/main/main.ts b/src/main/main.ts
index aa74f287a0..5c262f1afd 100644
--- a/src/main/main.ts
+++ b/src/main/main.ts
@@ -35,12 +35,12 @@ async function main() {
 
   // The extension host service relies on the network service.
   // Extensions inside the extension host might rely on the .NET data provider and each other
-  // Some extensions inside the extension host rely on the renderer to accept 'addWebView' commands.
+  // Some extensions inside the extension host rely on the renderer to accept 'getWebView' commands.
   // The renderer relies on the extension host, so something has to break the dependency loop.
-  // For now, the dependency loop is broken by retrying 'addWebView' in a loop for a while.
+  // For now, the dependency loop is broken by retrying 'getWebView' in a loop for a while.
   extensionHostService.start();
 
-  // TODO (maybe): Wait for signal from the extension host process that it is ready (except 'addWebView')
+  // TODO (maybe): Wait for signal from the extension host process that it is ready (except 'getWebView')
   // We could then wait for the renderer to be ready and signal the extension host
 
   // Extension host test
diff --git a/src/renderer/components/docking/error-tab.component.tsx b/src/renderer/components/docking/error-tab.component.tsx
index 1eb670d552..aebafe2f41 100644
--- a/src/renderer/components/docking/error-tab.component.tsx
+++ b/src/renderer/components/docking/error-tab.component.tsx
@@ -1,6 +1,7 @@
 import { TabInfo } from '@shared/data/web-view.model';
+import { newGuid } from '@shared/utils/util';
 
-function ErrorTab({ errorMessage }: { errorMessage: string }) {
+export default function ErrorTab({ errorMessage }: { errorMessage: string }) {
   return (
     <>
       <div>
@@ -14,13 +15,13 @@ function ErrorTab({ errorMessage }: { errorMessage: string }) {
 /**
  * Creates a new error message tab with the specified error message
  */
-const createErrorTab = (errorMessage: string): TabInfo => {
+export const createErrorTab = (errorMessage: string): TabInfo => {
   return {
-    title: 'Error',
+    id: newGuid(),
+    tabType: 'error',
+    tabTitle: 'Error',
     content: <ErrorTab errorMessage={errorMessage} />,
     minWidth: 150,
     minHeight: 150,
   };
 };
-
-export default createErrorTab;
diff --git a/src/renderer/components/docking/paranext-dock-layout.component.test.ts b/src/renderer/components/docking/paranext-dock-layout.component.test.ts
index f0f2e37683..fca1873190 100644
--- a/src/renderer/components/docking/paranext-dock-layout.component.test.ts
+++ b/src/renderer/components/docking/paranext-dock-layout.component.test.ts
@@ -3,12 +3,7 @@ jest.mock('../../../shared/services/logger.service');
 
 import DockLayout, { FloatPosition } from 'rc-dock';
 import { anything, instance, mock, verify, when } from 'ts-mockito';
-import {
-  AddWebViewEvent,
-  FloatLayout,
-  SavedTabInfo,
-  WebViewProps,
-} from '@shared/data/web-view.model';
+import { FloatLayout, Layout, SavedTabInfo, WebViewProps } from '@shared/data/web-view.model';
 import { addWebViewToDock, getFloatPosition, loadTab } from './paranext-dock-layout.component';
 
 describe('Dock Layout Component', () => {
@@ -69,30 +64,29 @@ describe('Dock Layout Component', () => {
 
   describe('loadTab()', () => {
     it('should throw when no id', () => {
-      const savedTabInfo: SavedTabInfo = {};
+      const savedTabInfoNoId = {} as SavedTabInfo;
 
-      expect(() => loadTab(savedTabInfo)).toThrow();
+      expect(() => loadTab(savedTabInfoNoId)).toThrow();
     });
   });
 
   describe('addWebViewToDock()', () => {
     it('should throw when no id', () => {
       const dockLayout = instance(mockDockLayout);
-      const event: AddWebViewEvent = { webView: {} as WebViewProps, layout: { type: 'tab' } };
+      const webView = {} as WebViewProps;
+      const layout: Layout = { type: 'tab' };
 
-      expect(() => addWebViewToDock(event, dockLayout)).toThrow();
+      expect(() => addWebViewToDock(webView, layout, dockLayout)).toThrow();
     });
 
     it('should throw on unknown layout type', () => {
       // Ensure this is an add (rather than an update).
       when(mockDockLayout.find(anything())).thenReturn(undefined);
       const dockLayout = instance(mockDockLayout);
-      const event: AddWebViewEvent = {
-        webView: { id: 'myId', content: '' },
-        layout: { type: 'wacked' } as unknown as FloatLayout,
-      };
+      const webView: WebViewProps = { id: 'myId', webViewType: 'test', content: '' };
+      const layout = { type: 'wacked' } as unknown as FloatLayout;
 
-      expect(() => addWebViewToDock(event, dockLayout)).toThrow();
+      expect(() => addWebViewToDock(webView, layout, dockLayout)).toThrow();
 
       verify(mockDockLayout.find(anything())).once();
       verify(mockDockLayout.updateTab(anything(), anything())).never();
@@ -103,12 +97,10 @@ describe('Dock Layout Component', () => {
       // Ensure this is an add (rather than an update).
       when(mockDockLayout.find(anything())).thenReturn(undefined);
       const dockLayout = instance(mockDockLayout);
-      const event: AddWebViewEvent = {
-        webView: { id: 'myId', content: '' },
-        layout: { type: 'panel', direction: 'top', targetTabId: 'unknownTabId' },
-      };
+      const webView: WebViewProps = { id: 'myId', webViewType: 'test', content: '' };
+      const layout: Layout = { type: 'panel', direction: 'top', targetTabId: 'unknownTabId' };
 
-      expect(() => addWebViewToDock(event, dockLayout)).toThrow();
+      expect(() => addWebViewToDock(webView, layout, dockLayout)).toThrow();
 
       verify(mockDockLayout.find(anything())).called();
       verify(mockDockLayout.updateTab(anything(), anything())).never();
diff --git a/src/renderer/components/docking/paranext-dock-layout.component.tsx b/src/renderer/components/docking/paranext-dock-layout.component.tsx
index 9e1e484a19..17c9719ed4 100644
--- a/src/renderer/components/docking/paranext-dock-layout.component.tsx
+++ b/src/renderer/components/docking/paranext-dock-layout.component.tsx
@@ -1,42 +1,52 @@
 import 'rc-dock/dist/rc-dock.css';
 import './paranext-dock-layout.component.css';
-import { useRef, useCallback } from 'react';
+import { useRef, useEffect } from 'react';
 import DockLayout, {
   BoxData,
   FloatPosition,
-  LayoutBase,
-  LayoutData,
   LayoutSize,
   PanelData,
   TabData,
   TabGroup,
 } from 'rc-dock';
-import createErrorTab from '@renderer/components/docking/error-tab.component';
+import { createErrorTab } from '@renderer/components/docking/error-tab.component';
 import ParanextPanel from '@renderer/components/docking/paranext-panel.component';
 import ParanextTabTitle from '@renderer/components/docking/paranext-tab-title.component';
-import createWebViewPanel from '@renderer/components/web-view.component';
-import useEvent from '@renderer/hooks/papi-hooks/use-event.hook';
-import createAboutPanel from '@renderer/testing/about-panel.component';
-import createButtonsPanel from '@renderer/testing/test-buttons-panel.component';
+import {
+  loadWebViewTab,
+  TAB_TYPE_WEBVIEW,
+  saveWebViewTab,
+} from '@renderer/components/web-view.component';
+import { loadAboutTab, TAB_TYPE_ABOUT } from '@renderer/testing/about-panel.component';
+import { loadButtonsTab, TAB_TYPE_BUTTONS } from '@renderer/testing/test-buttons-panel.component';
 import testLayout, { FIRST_TAB_ID } from '@renderer/testing/test-layout.data';
-import createTabPanel from '@renderer/testing/test-panel.component';
-import createQuickVerseHeresyPanel from '@renderer/testing/test-quick-verse-heresy-panel.component';
+import { loadTestTab, TAB_TYPE_TEST } from '@renderer/testing/test-panel.component';
+import {
+  loadQuickVerseHeresyTab,
+  TAB_TYPE_QUICK_VERSE_HERESY,
+} from '@renderer/testing/test-quick-verse-heresy-panel.component';
 import {
-  AddWebViewEvent,
   FloatLayout,
   SavedTabInfo,
-  TYPE_WEBVIEW,
-  TabCreator,
+  TabLoader,
   TabInfo,
+  TabSaver,
+  Layout,
+  WebViewProps,
 } from '@shared/data/web-view.model';
 import LogError from '@shared/log-error.model';
-import papi from '@shared/services/papi.service';
-import { serializeTabId, deserializeTabId } from '@shared/utils/papi-util';
+import {
+  OnLayoutChangeRCDock,
+  registerDockLayout,
+  saveTabInfoBase,
+} from '@shared/services/web-view.service';
+import { getErrorMessage } from '@shared/utils/util';
 
 type TabType = string;
 
+type RCDockTabInfo = TabData & TabInfo;
+
 const DOCK_FLOAT_OFFSET = 28;
-const DOCK_LAYOUT_KEY = 'dock-saved-layout';
 // NOTE: 'card' is a built-in style. We can likely remove it when we create a full theme for
 // Paranext.
 const TAB_GROUP = 'card paranext';
@@ -50,82 +60,83 @@ const groups: { [key: string]: TabGroup } = {
     // newWindow: true, // Allow floating windows to show in a native window
   },
 };
-const savedLayout: LayoutData = getStorageValue(DOCK_LAYOUT_KEY, testLayout as LayoutData);
-
-// TODO: Build this mapping from extensions so extensions can create their own panels
-const tabTypeCreationMap = new Map<TabType, TabCreator>([
-  ['about', createAboutPanel],
-  ['buttons', createButtonsPanel],
-  ['quick-verse-heresy', createQuickVerseHeresyPanel],
-  ['tab', createTabPanel],
-  [TYPE_WEBVIEW, createWebViewPanel],
+
+// #region utility functions that deal with loading, saving, and adding webviews. This code should
+// really be in `web-view.service.ts`, but that file cannot currently import renderer code as it is
+// a shared file.
+// TODO: please move these utility functions with #203
+
+/** tab loader functions for each Paranext tab type */
+const tabLoaderMap = new Map<TabType, TabLoader>([
+  [TAB_TYPE_ABOUT, loadAboutTab],
+  [TAB_TYPE_BUTTONS, loadButtonsTab],
+  [TAB_TYPE_QUICK_VERSE_HERESY, loadQuickVerseHeresyTab],
+  [TAB_TYPE_TEST, loadTestTab],
+  [TAB_TYPE_WEBVIEW, loadWebViewTab],
 ]);
 
+/** tab saver functions for each Paranext tab type that wants to override the default */
+const tabSaverMap = new Map<TabType, TabSaver>([[TAB_TYPE_WEBVIEW, saveWebViewTab]]);
+
 let previousTabId: string = FIRST_TAB_ID;
 let floatPosition: FloatPosition = { left: 0, top: 0, width: 0, height: 0 };
 
-function getTabDataFromSavedInfo(tabInfo: SavedTabInfo): TabInfo {
-  let tabCreator: TabCreator | undefined;
-  if (tabInfo.id) {
-    const { type } = deserializeTabId(tabInfo.id);
-    tabCreator = tabTypeCreationMap.get(type);
-  }
-  if (!tabCreator) return createErrorTab(`No handler for the tab type '${tabInfo.id}'`);
+/**
+ * Loads tab data from the specified saved tab information by running the tab loader provided by the
+ * component file that registered this tab type
+ * @param savedTabInfo Data that is to be used to create the new tab (comes from rc-dock)
+ * @returns tab that holds all info needed to make an actual tab in the dock layout
+ */
+function loadSavedTabInfo(savedTabInfo: SavedTabInfo): TabInfo {
+  const tabLoader = tabLoaderMap.get(savedTabInfo.tabType);
+  if (!tabLoader) return createErrorTab(`No tab loader for tabType '${savedTabInfo.tabType}'`);
 
   // Call the creation method to let the extension method create the tab
   try {
-    return tabCreator(tabInfo);
+    return tabLoader(savedTabInfo);
   } catch (e) {
     // If the tab couldn't be created, replace it with an error tab
-    if (e instanceof Error) return createErrorTab(e.message);
-    return createErrorTab(String(e));
+    return createErrorTab(getErrorMessage(e));
   }
 }
 
 /**
- * Creates tab data from the specified saved tab information by calling back to the
- * extension that registered the creation of the tab type
+ * Loads tab data from the specified saved tab information into an actual dock layout tab
  * @param savedTabInfo Data that is to be used to create the new tab (comes from rc-dock)
+ * @returns live dock layout tab ready to used
  */
-export function loadTab(savedTabInfo: SavedTabInfo): TabData & SavedTabInfo {
+export function loadTab(savedTabInfo: SavedTabInfo): RCDockTabInfo {
   if (!savedTabInfo.id) throw new LogError('loadTab: "id" is missing.');
 
-  const { id } = savedTabInfo;
-  const newTabData = getTabDataFromSavedInfo(savedTabInfo);
+  // Load the tab from the saved tab info
+  const tabInfo = loadSavedTabInfo(savedTabInfo);
 
-  // Translate the data from the extension to be in the form needed by rc-dock
+  // Translate the data from the loaded tab to be in the form needed by rc-dock
   return {
-    id,
-    data: savedTabInfo.data,
-    title: <ParanextTabTitle text={newTabData.title} />,
-    content: <ParanextPanel>{newTabData.content}</ParanextPanel>,
-    minWidth: newTabData.minWidth,
-    minHeight: newTabData.minHeight,
+    ...tabInfo,
+    title: <ParanextTabTitle text={tabInfo.tabTitle} />,
+    content: <ParanextPanel>{tabInfo.content}</ParanextPanel>,
     group: TAB_GROUP,
     closable: true,
   };
 }
 
 /**
- * When rc-dock detects a changed layout, save it.
- *
- * TODO: We could filter whether we need to save based on the `direction` argument. - IJH 2023-05-1
- * @param newLayout the changed layout to save.
+ * Converts the tab data into saved tab information by running the tab saver provided by the
+ * component file that registered this tab type
+ * @param dockTabInfo the tab data to save
+ * @returns saved tab info ready to be saved into the layout
  */
-function onLayoutChange(newLayout: LayoutBase): void {
-  localStorage.setItem(DOCK_LAYOUT_KEY, JSON.stringify(newLayout));
-}
+function saveTab(dockTabInfo: RCDockTabInfo): SavedTabInfo {
+  // Remove the rc-dock properties that are not also in SavedTabInfo
+  // We don't need to use the other properties, but we need to remove them
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const { parent, group, closable, title, ...strippedTabInfo } = dockTabInfo;
+  const tabInfo: TabInfo = strippedTabInfo;
 
-/**
- * Safely load a value from local storage.
- * @param key of the value.
- * @param defaultValue to return if the key is not found.
- * @returns the value of the key fetched from local storage, or the default value if not found.
- */
-function getStorageValue<T>(key: string, defaultValue: T): T {
-  const saved = localStorage.getItem(key);
-  const initial = saved ? JSON.parse(saved) : undefined;
-  return initial || defaultValue;
+  const tabSaver = tabSaverMap.get(tabInfo.tabType);
+
+  return tabSaver ? tabSaver(tabInfo) : saveTabInfoBase(tabInfo);
 }
 
 /**
@@ -170,9 +181,16 @@ export function getFloatPosition(
   return { left, top, width, height };
 }
 
-export function addWebViewToDock({ webView, layout }: AddWebViewEvent, dockLayout: DockLayout) {
-  const tabId = serializeTabId(TYPE_WEBVIEW, webView.id);
-  const tab = loadTab({ id: tabId, data: webView });
+/**
+ * Function to call to add or update a webview in the layout
+ * @param webView web view to add or update
+ * @param layout information about where to put a new webview
+ * @param dockLayout The rc-dock dock layout React component ref. Used to perform operations on the
+ * layout
+ */
+export function addWebViewToDock(webView: WebViewProps, layout: Layout, dockLayout: DockLayout) {
+  const tabId = webView.id;
+  const tab = loadTab({ id: tabId, tabType: TAB_TYPE_WEBVIEW, data: webView });
   let targetTab = dockLayout.find(tabId);
 
   // Update existing WebView
@@ -215,27 +233,47 @@ export function addWebViewToDock({ webView, layout }: AddWebViewEvent, dockLayou
   }
 }
 
+// #endregion
+
 export default function ParanextDockLayout() {
   // This ref will always be defined
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   const dockLayoutRef = useRef<DockLayout>(null!);
 
-  useEvent(
-    papi.webViews.onDidAddWebView,
-    useCallback((event: AddWebViewEvent) => {
-      const dockLayout = dockLayoutRef.current;
-      addWebViewToDock(event, dockLayout);
-    }, []),
-  );
+  /**
+   * onLayoutChange function from `web-view.service.ts` once this docklayout is registered.
+   *
+   * TODO: Strange pattern that we are setting a ref to a service function. Investigate changing
+   * this pattern in some way. Maybe just export `onLayoutChange`?
+   */
+  const onLayoutChangeRef = useRef<OnLayoutChangeRCDock | undefined>();
+
+  useEffect(() => {
+    // Register with `web-view.service.ts` so it can perform operations on us
+    const unsub = registerDockLayout({
+      dockLayout: dockLayoutRef.current,
+      onLayoutChangeRef,
+      addWebViewToDock: (webView: WebViewProps, layout: Layout) =>
+        addWebViewToDock(webView, layout, dockLayoutRef.current),
+      testLayout,
+    });
+    return () => {
+      unsub();
+    };
+    // Is there any situation where dockLayoutRef will change? We need to add to dependencies if so
+  }, []);
 
   return (
     <DockLayout
       ref={dockLayoutRef}
       groups={groups}
-      defaultLayout={savedLayout}
+      defaultLayout={{ dockbox: { mode: 'horizontal', children: [] } }}
       dropMode="edge"
       loadTab={loadTab}
-      onLayoutChange={onLayoutChange}
+      saveTab={saveTab}
+      onLayoutChange={(...args) => {
+        if (onLayoutChangeRef.current) onLayoutChangeRef.current(...args);
+      }}
     />
   );
 }
diff --git a/src/renderer/components/web-view.component.test.ts b/src/renderer/components/web-view.component.test.ts
index 17ee64a922..8db57a339f 100644
--- a/src/renderer/components/web-view.component.test.ts
+++ b/src/renderer/components/web-view.component.test.ts
@@ -7,6 +7,7 @@ describe('WebView Component', () => {
       const title = 'MyTitle';
       const props: WebViewProps = {
         id: '',
+        webViewType: '',
         content: '',
         contentType: WebViewContentType.HTML,
         title,
@@ -14,23 +15,26 @@ describe('WebView Component', () => {
       expect(getTitle(props)).toEqual(title);
     });
 
-    it('can get title when title is undefined', () => {
-      const id = 'my-webview';
-      const title = `${id} ${WebViewContentType.HTML}`;
+    it('can get title when title is undefined but webViewType exists', () => {
+      const webViewType = 'my-webview';
+      const title = `${webViewType} Web View`;
       const props: WebViewProps = {
-        id,
+        id: '',
+        webViewType,
         content: '',
         contentType: WebViewContentType.HTML,
       };
       expect(getTitle(props)).toEqual(title);
     });
 
-    it('can get title when title is undefined and ID is empty', () => {
-      const title = `${WebViewContentType.HTML} Web View`;
+    it('can get title when title is undefined and webViewType is empty but contentType exists', () => {
+      const contentType = WebViewContentType.HTML;
+      const title = `${contentType} Web View`;
       const props: WebViewProps = {
         id: '',
+        webViewType: '',
         content: '',
-        contentType: WebViewContentType.HTML,
+        contentType,
       };
       expect(getTitle(props)).toEqual(title);
     });
diff --git a/src/renderer/components/web-view.component.tsx b/src/renderer/components/web-view.component.tsx
index 8ecae23c3b..4bf5adc9b9 100644
--- a/src/renderer/components/web-view.component.tsx
+++ b/src/renderer/components/web-view.component.tsx
@@ -3,16 +3,23 @@ import {
   SavedTabInfo,
   TabInfo,
   WebViewContentType,
+  WebViewDefinition,
+  SavedWebViewDefinition,
   WebViewProps,
 } from '@shared/data/web-view.model';
-import { deserializeTabId } from '@shared/utils/papi-util';
+import {
+  getWebView,
+  saveTabInfoBase,
+  convertWebViewDefinitionToSaved,
+} from '@shared/services/web-view.service';
+
+export const TAB_TYPE_WEBVIEW = 'webView';
 
-export function getTitle({ id, title, contentType }: WebViewProps): string {
-  const defaultTitle = id ? `${id} ${contentType}` : `${contentType} Web View`;
-  return title || defaultTitle;
+export function getTitle({ webViewType, title, contentType }: Partial<WebViewProps>): string {
+  return title || `${webViewType || contentType} Web View`;
 }
 
-export function WebView({ id, content, title, contentType }: WebViewProps) {
+export default function WebView({ webViewType, content, title, contentType }: WebViewProps) {
   // This ref will always be defined
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   const iframeRef = useRef<HTMLIFrameElement>(null!);
@@ -26,7 +33,7 @@ export function WebView({ id, content, title, contentType }: WebViewProps) {
   return (
     <iframe
       ref={iframeRef}
-      title={getTitle({ id, content, title, contentType })}
+      title={getTitle({ webViewType, title, contentType })}
       // TODO: csp?
       // TODO: credentialless?
       // TODO: referrerpolicy?
@@ -39,31 +46,65 @@ export function WebView({ id, content, title, contentType }: WebViewProps) {
       // allow-scripts so the iframe can actually do things
       // allow-pointer-lock so the iframe can lock the pointer as desired
       // Note: Mozilla's iframe page 'allow-same-origin' and 'allow-scripts' warns that listing both of these
-      // allows the child scripts to remove this sandbox attribute from the iframe. However, it seems that this
-      // is done by accessing window.parent or window.top, which is removed from the iframe with the injected
-      // scripts in WebViewService. We will probably want to stay vigilant on security in this area.
+      // allows the child scripts to remove this sandbox attribute from the iframe. This means the
+      // sandboxing will do nothing for a determined hacker. We must distrust the whole renderer due
+      // to this issue. We will probably want to stay vigilant on security in this area.
       sandbox="allow-same-origin allow-scripts allow-pointer-lock"
       srcDoc={content}
     />
   );
 }
 
-export default function createWebViewPanel(tabInfo: SavedTabInfo): TabInfo {
-  if (!tabInfo.id) throw new Error('"id" is missing.');
+/**
+ * Tell the web view service to load the web view with the provided saved definition
+ * @param data web view definition to load
+ */
+async function retrieveWebViewContent(data: SavedWebViewDefinition): Promise<void> {
+  const loadedId = await getWebView(data.webViewType, undefined, {
+    existingId: data.id,
+    createNewIfNotFound: false,
+  });
+  if (loadedId !== data.id)
+    throw new Error(
+      `WebView with type ${data.webViewType} and id ${data.id} loaded into id ${loadedId}!`,
+    );
+}
+
+export function loadWebViewTab(savedTabInfo: SavedTabInfo): TabInfo {
+  if (!savedTabInfo.id) throw new Error('"id" is missing.');
 
   let data: WebViewProps;
-  if (tabInfo.data) {
+  if (savedTabInfo.data) {
     // We need to make sure that the data is of the correct type
-    data = tabInfo.data as WebViewProps;
+    data = savedTabInfo.data as WebViewProps;
+
+    if (savedTabInfo.id !== data.id) throw new Error('"id" does not match webView id.');
+    if (!data.webViewType) throw new Error('WebView does not have a webViewType. Cannot restore');
+
+    // If the webview is saved aka doesn't have content, tell the web view service to load the web
+    // view. It will asynchronously go get the content and re-run this function
+    if (!data.content && data.content !== '') retrieveWebViewContent(data);
   } else {
     // placeholder data
-    const { typeId } = deserializeTabId(tabInfo.id);
-    data = { id: typeId, title: typeId, content: '', contentType: WebViewContentType.HTML };
+    data = {
+      id: savedTabInfo.id,
+      webViewType: 'Unknown',
+      title: 'Unknown',
+      content: '',
+      contentType: WebViewContentType.HTML,
+    };
   }
 
-  const title = data.title ?? 'Unknown';
   return {
-    title: `${title}`,
+    ...savedTabInfo,
+    tabTitle: data.title ?? 'Unknown',
     content: <WebView {...data} />,
   };
 }
+
+export function saveWebViewTab(tabInfo: TabInfo): SavedTabInfo {
+  return {
+    ...saveTabInfoBase(tabInfo),
+    data: convertWebViewDefinitionToSaved(tabInfo.data as WebViewDefinition),
+  };
+}
diff --git a/src/renderer/index.tsx b/src/renderer/index.tsx
index 8b878d55d3..0886e42af9 100644
--- a/src/renderer/index.tsx
+++ b/src/renderer/index.tsx
@@ -4,6 +4,7 @@ import * as networkService from '@shared/services/network.service';
 import * as commandService from '@shared/services/command.service';
 import * as webViewService from '@shared/services/web-view.service';
 import logger from '@shared/services/logger.service';
+import webViewProviderService from '@shared/services/web-view-provider.service';
 import App from './app.component';
 
 logger.info('Starting renderer');
@@ -11,6 +12,7 @@ logger.info('Starting renderer');
 // App-wide service setup
 networkService.initialize();
 commandService.initialize();
+webViewProviderService.initialize();
 webViewService.initialize();
 
 const container = document.getElementById('root');
diff --git a/src/renderer/testing/about-panel.component.tsx b/src/renderer/testing/about-panel.component.tsx
index 5be6fd33e8..5914d42792 100644
--- a/src/renderer/testing/about-panel.component.tsx
+++ b/src/renderer/testing/about-panel.component.tsx
@@ -1,7 +1,9 @@
 import icon from '@assets/icon.png';
-import { TabInfo } from '@shared/data/web-view.model';
+import { SavedTabInfo, TabInfo } from '@shared/data/web-view.model';
 
-function AboutPanel() {
+export const TAB_TYPE_ABOUT = 'about';
+
+export default function AboutPanel() {
   return (
     <div className="about-panel">
       <div className="hello">
@@ -14,9 +16,10 @@ function AboutPanel() {
   );
 }
 
-export default function createAboutPanel(): TabInfo {
+export function loadAboutTab(savedTabInfo: SavedTabInfo): TabInfo {
   return {
-    title: 'About',
+    ...savedTabInfo,
+    tabTitle: 'About',
     content: <AboutPanel />,
     minWidth: 230,
     minHeight: 230,
diff --git a/src/renderer/testing/test-buttons-panel.component.tsx b/src/renderer/testing/test-buttons-panel.component.tsx
index 833b052589..c618353c09 100644
--- a/src/renderer/testing/test-buttons-panel.component.tsx
+++ b/src/renderer/testing/test-buttons-panel.component.tsx
@@ -1,16 +1,18 @@
 import './test-buttons-panel.component.css';
 import { Button, TextField } from 'papi-components';
 import { useCallback, useMemo, useState } from 'react';
-import papi from '@shared/services/papi.service';
 import * as networkService from '@shared/services/network.service';
+import * as commandService from '@shared/services/command.service';
 import { debounce, getErrorMessage, isString } from '@shared/utils/util';
 import logger from '@shared/services/logger.service';
-import { TabInfo } from '@shared/data/web-view.model';
+import { SavedTabInfo, TabInfo } from '@shared/data/web-view.model';
 import useEvent from '@renderer/hooks/papi-hooks/use-event.hook';
 import useData from '@renderer/hooks/papi-hooks/use-data.hook';
 import useDataProvider from '@renderer/hooks/papi-hooks/use-data-provider.hook';
 import IDataProvider from '@shared/models/data-provider.interface';
 
+export const TAB_TYPE_BUTTONS = 'buttons';
+
 const testBase: (message: string) => Promise<string> =
   networkService.createRequestFunction('electronAPI.env.test');
 
@@ -21,42 +23,42 @@ const test = async () => {
   return result;
 };
 
-const addOne = async (num: number) => papi.commands.sendCommand<[number], number>('addOne', num);
+const addOne = async (num: number) => commandService.sendCommand<[number], number>('addOne', num);
 
-const echo: (message: string) => Promise<string> = papi.commands.createSendCommandFunction<
+const echo: (message: string) => Promise<string> = commandService.createSendCommandFunction<
   [string],
   string
 >('echo');
 
-const echoRenderer = papi.commands.createSendCommandFunction<[string], string>('echoRenderer');
+const echoRenderer = commandService.createSendCommandFunction<[string], string>('echoRenderer');
 
-const echoExtensionHost = papi.commands.createSendCommandFunction<[string], string>(
+const echoExtensionHost = commandService.createSendCommandFunction<[string], string>(
   'echoExtensionHost',
 );
 
-const echoSomeoneRenderer = papi.commands.createSendCommandFunction<[string], string>(
+const echoSomeoneRenderer = commandService.createSendCommandFunction<[string], string>(
   'hello-someone.echo-someone-renderer',
 );
 
-const addThree = papi.commands.createSendCommandFunction<[number, number, number], number>(
+const addThree = commandService.createSendCommandFunction<[number, number, number], number>(
   'addThree',
 );
 
-const addMany = papi.commands.createSendCommandFunction<number[], number>('addMany');
+const addMany = commandService.createSendCommandFunction<number[], number>('addMany');
 
-const helloWorld = papi.commands.createSendCommandFunction<[], string>('hello-world.hello-world');
+const helloWorld = commandService.createSendCommandFunction<[], string>('hello-world.hello-world');
 
-const throwErrorHelloWorld = papi.commands.createSendCommandFunction<[string], string>(
+const throwErrorHelloWorld = commandService.createSendCommandFunction<[string], string>(
   'hello-world.hello-exception',
 );
 
-const helloSomeone = papi.commands.createSendCommandFunction<[string], string>(
+const helloSomeone = commandService.createSendCommandFunction<[string], string>(
   'hello-someone.hello-someone',
 );
 
-const throwError = papi.commands.createSendCommandFunction<[string], string>('throwError');
+const throwError = commandService.createSendCommandFunction<[string], string>('throwError');
 
-const throwErrorExtensionHost = papi.commands.createSendCommandFunction<[string], string>(
+const throwErrorExtensionHost = commandService.createSendCommandFunction<[string], string>(
   'throwErrorExtensionHost',
 );
 
@@ -93,7 +95,7 @@ const executeMany = async <T,>(fn: () => Promise<T>) => {
   }
 };
 
-function TestButtonsPanel() {
+export default function TestButtonsPanel() {
   const [promiseReturn, setPromiseReturn] = useState('Click a button.');
   const updatePromiseReturn = useCallback(
     (state: unknown) => setPromiseReturn(isString(state) ? state : JSON.stringify(state)),
@@ -119,7 +121,7 @@ function TestButtonsPanel() {
   );
 
   useEvent(
-    papi.network.onDidClientConnect,
+    networkService.onDidClientConnect,
     useCallback(
       ({ clientId, didReconnect }) => {
         const result = `Client with id ${clientId} ${didReconnect ? 're' : ''}connected!`;
@@ -373,9 +375,10 @@ function TestButtonsPanel() {
   );
 }
 
-export default function createButtonsPanel(): TabInfo {
+export function loadButtonsTab(savedTabInfo: SavedTabInfo): TabInfo {
   return {
-    title: 'Test Buttons',
+    ...savedTabInfo,
+    tabTitle: 'Test Buttons',
     content: <TestButtonsPanel />,
   };
 }
diff --git a/src/renderer/testing/test-layout.data.ts b/src/renderer/testing/test-layout.data.ts
index aba5d293ad..c93d7c0075 100644
--- a/src/renderer/testing/test-layout.data.ts
+++ b/src/renderer/testing/test-layout.data.ts
@@ -1,13 +1,11 @@
+import { SavedTabInfo } from '@shared/data/web-view.model';
 import { LayoutBase } from 'rc-dock';
-import { serializeTabId } from '@shared/utils/papi-util';
+import { TAB_TYPE_ABOUT } from '@renderer/testing/about-panel.component';
+import { TAB_TYPE_BUTTONS } from '@renderer/testing/test-buttons-panel.component';
+import { TAB_TYPE_QUICK_VERSE_HERESY } from '@renderer/testing/test-quick-verse-heresy-panel.component';
+import { TAB_TYPE_TEST } from '@renderer/testing/test-panel.component';
 
-const ABOUT_TAB_ID = serializeTabId('about', 'About');
-const TEST_TAB_TWO_ID = serializeTabId('tab', 'Test Tab Two');
-const TEST_TAB_ONE_ID = serializeTabId('tab', 'Test Tab One');
-const TEST_BUTTONS_TAB_ID = serializeTabId('buttons', 'Test Buttons');
-const TEST_QUICK_VERSE_TAB_ID = serializeTabId('quick-verse-heresy', 'Test Quick Verse Heresy');
-
-export const FIRST_TAB_ID = ABOUT_TAB_ID;
+export const FIRST_TAB_ID = 'About';
 
 const testLayout: LayoutBase = {
   dockbox: {
@@ -18,12 +16,16 @@ const testLayout: LayoutBase = {
         size: 250,
         children: [
           {
-            tabs: [{ id: ABOUT_TAB_ID }, { id: TEST_TAB_TWO_ID }, { id: TEST_TAB_ONE_ID }],
+            tabs: [
+              { id: 'About', tabType: TAB_TYPE_ABOUT },
+              { id: 'Test Tab Two', tabType: TAB_TYPE_TEST },
+              { id: 'Test Tab One', tabType: TAB_TYPE_TEST },
+            ] as SavedTabInfo[],
           },
         ],
       },
       {
-        tabs: [{ id: TEST_BUTTONS_TAB_ID }],
+        tabs: [{ id: 'Test Buttons', tabType: TAB_TYPE_BUTTONS }] as SavedTabInfo[],
       },
     ],
   },
@@ -31,7 +33,9 @@ const testLayout: LayoutBase = {
     mode: 'float',
     children: [
       {
-        tabs: [{ id: TEST_QUICK_VERSE_TAB_ID }],
+        tabs: [
+          { id: 'Test Quick Verse Heresy', tabType: TAB_TYPE_QUICK_VERSE_HERESY },
+        ] as SavedTabInfo[],
         x: 300,
         y: 170,
         w: 320,
diff --git a/src/renderer/testing/test-panel.component.tsx b/src/renderer/testing/test-panel.component.tsx
index 8667d32ccc..4dcf70260c 100644
--- a/src/renderer/testing/test-panel.component.tsx
+++ b/src/renderer/testing/test-panel.component.tsx
@@ -1,18 +1,19 @@
 import { SavedTabInfo, TabInfo } from '@shared/data/web-view.model';
-import { deserializeTabId } from '@shared/utils/papi-util';
 
-function TestPanel({ content }: { content: string }) {
+export const TAB_TYPE_TEST = 'tab';
+
+export default function TestPanel({ content }: { content: string }) {
   return <div className="test-panel">{content}</div>;
 }
 
-export default function createTabPanel(tabInfo: SavedTabInfo): TabInfo {
-  if (!tabInfo.id) throw new Error('Tab creation "id" is missing');
+export function loadTestTab(savedTabInfo: SavedTabInfo): TabInfo {
+  if (!savedTabInfo.id) throw new Error('Tab creation "id" is missing');
 
-  const { typeId } = deserializeTabId(tabInfo.id);
-  const title = typeId || 'Unknown';
-  const content = typeId ? `Content for ${title}` : 'Unknown';
+  const tabTitle = savedTabInfo.id || 'Unknown';
+  const content = savedTabInfo.id ? `Content for ${tabTitle}` : 'Unknown';
   return {
-    title,
+    ...savedTabInfo,
+    tabTitle,
     content: <TestPanel content={content} />,
   };
 }
diff --git a/src/renderer/testing/test-quick-verse-heresy-panel.component.tsx b/src/renderer/testing/test-quick-verse-heresy-panel.component.tsx
index 4a4ecebdc3..3a5edfdf2d 100644
--- a/src/renderer/testing/test-quick-verse-heresy-panel.component.tsx
+++ b/src/renderer/testing/test-quick-verse-heresy-panel.component.tsx
@@ -1,13 +1,15 @@
 import './test-buttons-panel.component.css';
 import useData from '@renderer/hooks/papi-hooks/use-data.hook';
 import useDataProvider from '@renderer/hooks/papi-hooks/use-data-provider.hook';
-import { TabInfo } from '@shared/data/web-view.model';
+import { SavedTabInfo, TabInfo } from '@shared/data/web-view.model';
 import { debounce } from '@shared/utils/util';
 import { useState, useMemo, useCallback } from 'react';
 import { QuickVerseDataProvider } from '@extensions/quick-verse/quick-verse';
 import { TextField } from 'papi-components';
 
-function TestQuickVerseHeresyPanel() {
+export const TAB_TYPE_QUICK_VERSE_HERESY = 'quick-verse-heresy';
+
+export function TestQuickVerseHeresyPanel() {
   const [verseRef, setVerseRef] = useState<string>('John 11:35');
   // Displayed verse ref while debouncing the actual verse ref
   const [verseRefIntermediate, setVerseRefIntermediate] = useState<string>(verseRef);
@@ -63,9 +65,10 @@ function TestQuickVerseHeresyPanel() {
   );
 }
 
-export default function createQuickVerseHeresyPanel(): TabInfo {
+export function loadQuickVerseHeresyTab(savedTabInfo: SavedTabInfo): TabInfo {
   return {
-    title: 'Quick Verse Heresy',
+    ...savedTabInfo,
+    tabTitle: 'Quick Verse Heresy',
     content: <TestQuickVerseHeresyPanel />,
   };
 }
diff --git a/src/shared/data/web-view.model.ts b/src/shared/data/web-view.model.ts
index ab3d69e5d0..d54005cb98 100644
--- a/src/shared/data/web-view.model.ts
+++ b/src/shared/data/web-view.model.ts
@@ -1,31 +1,40 @@
 import { ReactNode } from 'react';
 
-export type WebViewProps = Omit<WebViewContents, 'componentName'>;
-
 /**
- * Information used to recreate a tab
+ * Saved information used to recreate a tab.
+ *
+ * {@link TabLoader} loads this into {@link TabInfo}
+ * {@link TabSaver} saves {@link TabInfo} into this
  */
 export type SavedTabInfo = {
   /**
-   * Tab ID - must be unique
+   * Tab ID - a unique identifier that identifies this tab. If this tab is a WebView, this id will
+   * match the WebViewDefinition.id
+   */
+  id: string;
+  /**
+   * Type of tab - indicates what kind of built-in tab this info represents
    */
-  id?: string;
+  tabType: string;
   /**
-   * Data needed to recreate the tab during load
+   * Data needed to load the tab
    */
   data?: unknown;
 };
 
 /**
- * Information needed to create a tab inside of Paranext
+ * Information that Paranext uses to create a tab in the dock layout.
+ *
+ * {@link TabLoader} loads {@link SavedTabInfo} into this
+ * {@link TabSaver} saves this into {@link SavedTabInfo}
  */
-export type TabInfo = {
+export type TabInfo = SavedTabInfo & {
   /**
    * Text to show on the title bar of the tab
    */
-  title: string;
+  tabTitle: string;
   /**
-   * Content to show inside the tab
+   * Content to show inside the tab.
    */
   content: ReactNode;
   /**
@@ -39,38 +48,87 @@ export type TabInfo = {
 };
 
 /**
+ * Function that takes a {@link SavedTabInfo} and creates a Paranext tab out of it. Each type of tab
+ * must provide a {@link TabLoader}.
+ *
  * For now all tab creators must do their own data type verification
  */
-export type TabCreator = (tabData: SavedTabInfo) => TabInfo;
+export type TabLoader = (savedTabInfo: SavedTabInfo) => TabInfo;
+
+/**
+ * Function that takes a Paranext tab and creates a saved tab out of it. Each type of tab can
+ * provide a {@link TabSaver}. If they do not provide one, the properties added by `TabInfo` are
+ * stripped from TabInfo by `saveTabInfoBase` before saving (so it is just a {@link SavedTabInfo}).
+ */
+export type TabSaver = (tabInfo: TabInfo) => SavedTabInfo;
 
+/** The type of code that defines a webview's content */
 export enum WebViewContentType {
+  /**
+   * This webview is a React webview. It must specify its component by setting it to
+   * `globalThis.webViewComponent`
+   */
   React = 'react',
+  /** This webview is a raw HTML/JS/CSS webview. */
   HTML = 'html',
 }
 
+/** What type a WebView is. Each WebView definition must have a unique type. */
+export type WebViewType = string;
+
+/** Id for a specific WebView. Each WebView has a unique id */
+export type WebViewId = string;
+
 /** Base WebView properties that all WebViews share */
-type WebViewContentsBase = { id: string; content: string; title?: string };
+type WebViewDefinitionBase = {
+  /** What type of WebView this is. Unique to all other WebView definitions */
+  webViewType: WebViewType;
+  /** Unique id among webviews specific to this webview instance. */
+  id: WebViewId;
+  /** The code for the WebView that papi puts into an iframe */
+  content: string;
+  /** Name of the tab for the WebView */
+  title?: string;
+};
 
 /** WebView representation using React */
-export type WebViewContentsReact = WebViewContentsBase & {
+export type WebViewDefinitionReact = WebViewDefinitionBase & {
+  /** Indicates this WebView uses React */
   contentType?: WebViewContentType.React;
+  /** String of styles to be loaded into the iframe for this WebView */
   styles?: string;
 };
 
 /** WebView representation using HTML */
-export type WebViewContentsHtml = WebViewContentsBase & {
+export type WebViewDefinitionHtml = WebViewDefinitionBase & {
+  /** Indicates this WebView uses HTML */
   contentType: WebViewContentType.HTML;
 };
 
-/** WebView definition created by extensions to show web content */
-export type WebViewContents = WebViewContentsReact | WebViewContentsHtml;
+/** Properties defining a type of WebView created by extensions to show web content */
+export type WebViewDefinition = WebViewDefinitionReact | WebViewDefinitionHtml;
 
-export const TYPE_WEBVIEW = 'webView';
+/**
+ * Saved WebView information that does not contain the actual content of the WebView. Saved into
+ * layouts. Could have as little as the type and id. WebView providers load these into actual
+ * {@link WebViewDefinition}s and verify any existing properties on the WebViews.
+ */
+export type SavedWebViewDefinition =
+  | (
+      | Partial<Omit<WebViewDefinitionReact, 'content' | 'styles'>>
+      | Partial<Omit<WebViewDefinitionHtml, 'content'>>
+    ) &
+      Pick<WebViewDefinitionBase, 'id' | 'webViewType'>;
 
+/** Props that are passed to the web view component */
+export type WebViewProps = WebViewDefinition;
+
+/** Information about a tab in a panel */
 interface TabLayout {
   type: 'tab';
 }
 
+/** Information about a floating window */
 export interface FloatLayout {
   type: 'float';
   floatSize?: { width: number; height: number };
@@ -89,6 +147,7 @@ export type PanelDirection =
   | 'active'
   | 'update';
 
+/** Information about a panel */
 interface PanelLayout {
   type: 'panel';
   direction?: PanelDirection;
@@ -96,10 +155,36 @@ interface PanelLayout {
   targetTabId?: string;
 }
 
+/** Information about how a Paranext tab fits into the dock layout */
 export type Layout = TabLayout | FloatLayout | PanelLayout;
 
-/** Event emitted when webViews are added */
+/** Event emitted when webViews are created */
 export type AddWebViewEvent = {
-  webView: WebViewProps;
+  webView: SavedWebViewDefinition;
   layout: Layout;
 };
+
+/** Options that affect what `webViews.getWebView` does */
+export type GetWebViewOptions = {
+  /**
+   * If provided and if a web view with this id exists, requests from the web view provider an
+   * existing WebView with this id if one exists. The web view provider can deny the request if it
+   * chooses to do so.
+   *
+   * Alternatively, set this to '?' to attempt to find any existing web view with the specified
+   * webViewType.
+   *
+   * Note: setting `existingId` to `undefined` counts as providing in this case (providing is tested
+   * with `'existingId' in options`, not just testing if `existingId` is truthy). Not providing an
+   * `existingId` at all is the only way to specify we are not looking for an existing webView
+   */
+  existingId?: string | '?' | undefined;
+  /**
+   * Whether to create a webview with a new id and a webview with id `existingId` was not found.
+   * Only relevant if `existingId` is provided. If `existingId` is not provided, this property is
+   * ignored.
+   *
+   * Defaults to true
+   */
+  createNewIfNotFound?: boolean;
+};
diff --git a/src/shared/models/web-view-provider.model.ts b/src/shared/models/web-view-provider.model.ts
new file mode 100644
index 0000000000..22deff7e29
--- /dev/null
+++ b/src/shared/models/web-view-provider.model.ts
@@ -0,0 +1,35 @@
+import {
+  GetWebViewOptions,
+  WebViewDefinition,
+  SavedWebViewDefinition,
+} from '@shared/data/web-view.model';
+import {
+  DisposableNetworkObject,
+  NetworkObject,
+  NetworkableObject,
+} from '@shared/models/network-object.model';
+import { CanHaveOnDidDispose } from '@shared/models/disposal.model';
+
+// What the developer registers
+export interface IWebViewProvider extends NetworkableObject {
+  /**
+   * @param savedWebView filled out if an existing webview is being called for (matched by id).
+   * Just id if this is a new request or if the web view with the existing id was not found
+   * @param getWebViewOptions
+   */
+  getWebView(
+    savedWebView: SavedWebViewDefinition,
+    getWebViewOptions: GetWebViewOptions,
+  ): Promise<WebViewDefinition | undefined>;
+}
+
+// What the papi gives on get. Basically a layer over NetworkObject
+export interface WebViewProvider
+  extends NetworkObject<NetworkableObject>,
+    CanHaveOnDidDispose<IWebViewProvider> {}
+
+// What the papi returns on register. Basically a layer over DisposableNetworkObject
+export interface DisposableWebViewProvider
+  extends DisposableNetworkObject<NetworkableObject>,
+    // Need to omit dispose here because it is optional on WebViewProvider but is required on DisposableNetworkObject
+    Omit<WebViewProvider, 'dispose'> {}
diff --git a/src/shared/services/data-provider.service.ts b/src/shared/services/data-provider.service.ts
index f3865d15f0..5574699806 100644
--- a/src/shared/services/data-provider.service.ts
+++ b/src/shared/services/data-provider.service.ts
@@ -16,7 +16,7 @@ import { deepEqual, serializeRequestType } from '@shared/utils/papi-util';
 import AsyncVariable from '@shared/utils/async-variable';
 import { NetworkObject } from '@shared/models/network-object.model';
 import networkObjectService from '@shared/services/network-object.service';
-import logger from './logger.service';
+import logger from '@shared/services/logger.service';
 
 /** Suffix on network objects that indicates that the network object is a data provider */
 const DATA_PROVIDER_LABEL = 'data';
@@ -56,9 +56,10 @@ const initialize = () => {
   return initializePromise;
 };
 
-/** Indicate if we are aware of an existing data provider with the given name. If a data provider
- *  with the given name is someone else on the network, this function won't tell you about it
- *  unless something else in the existing process is subscribed to it.
+/**
+ * Indicate if we are aware of an existing data provider with the given name. If a data provider
+ * with the given name is somewhere else on the network, this function won't tell you about it
+ * unless something else in the existing process is subscribed to it.
  */
 function hasKnown(providerName: string): boolean {
   return networkObjectService.hasKnown(getDataProviderObjectId(providerName));
@@ -237,7 +238,7 @@ function buildDataProvider<TSelector, TGetData, TSetData>(
  *
  * WARNING: registering a dataProviderEngine mutates the provided object.
  * Its `notifyUpdate` and `set` methods are layered over to facilitate data provider subscriptions.
- * @returns information about the data provider including control over disposing of it.
+ * @returns the data provider including control over disposing of it.
  *  Note that this data provider is a new object distinct from the data provider engine passed in.
  * @type `TSelector` - the type of selector used to get some data from this provider.
  *  A selector is an object a caller provides to the data provider to tell the provider what subset of data it wants.
@@ -250,11 +251,8 @@ async function registerEngine<TSelector, TGetData, TSetData>(
 ): Promise<IDisposableDataProvider<TSelector, TGetData, TSetData>> {
   await initialize();
 
-  // There is a potential networking sync issue here. We check for a data provider, then we create a network event, then we create a network object.
-  // If someone else registers an engine with the same data provider name at the same time, the two registrations could get intermixed and mess stuff up
-  // TODO: fix this split network request issue. Just try to register the network object. If it succeeds, continue. If it fails, give up.
   if (hasKnown(providerName))
-    throw new Error(`Data provider with type ${providerName} is already registered`);
+    throw new Error(`Data provider with name ${providerName} is already registered`);
 
   // Validate that the data provider engine has what it needs
   if (!dataProviderEngine.get || typeof dataProviderEngine.get !== 'function')
@@ -285,10 +283,8 @@ async function registerEngine<TSelector, TGetData, TSetData>(
   );
 
   // Set up the data provider to be a network object so other processes can use it
-  const disposableDataProvider = (await networkObjectService.set(
-    dataProviderObjectId,
-    dataProviderInternal,
-  )) as IDisposableDataProvider<TSelector, TGetData, TSetData>;
+  const disposableDataProvider: IDisposableDataProvider<TSelector, TGetData, TSetData> =
+    await networkObjectService.set(dataProviderObjectId, dataProviderInternal);
 
   // Get the local network object proxy for the data provider so the provider can't be disposed by extensions
   const dataProvider = await networkObjectService.get<IDataProvider<TSelector, TGetData, TSetData>>(
diff --git a/src/shared/services/network-object.service.ts b/src/shared/services/network-object.service.ts
index 11568b4710..01799def85 100644
--- a/src/shared/services/network-object.service.ts
+++ b/src/shared/services/network-object.service.ts
@@ -349,7 +349,9 @@ const get = async <T extends object>(
  * `onDidDispose` property on it. If the object already contained a `dispose` function, a new
  * `dispose` function will be set that calls the existing function (amongst other things). If the
  * object did not already define a `dispose` function, one will be added.
- * @returns INetworkObjectDisposer wrapping the object to share
+ *
+ * WARNING: setting a network object mutates the provided object.
+ * @returns `objectToShare` modified to be a network object
  */
 
 const set = async <T extends NetworkableObject>(
diff --git a/src/shared/services/papi.service.ts b/src/shared/services/papi.service.ts
index ce472c1b13..6769ce785a 100644
--- a/src/shared/services/papi.service.ts
+++ b/src/shared/services/papi.service.ts
@@ -10,6 +10,7 @@ import * as papiUtil from '@shared/utils/papi-util';
 // We need the WebViewService here to include on the papi, but WebViewService passes papi into WebViews
 // eslint-disable-next-line import/no-cycle
 import * as webViewService from '@shared/services/web-view.service';
+import type { PapiWebViewService } from '@shared/services/web-view.service';
 import PapiEventEmitter from '@shared/models/papi-event-emitter.model';
 import logger from '@shared/services/logger.service';
 import { isExtensionHost, isRenderer } from '@shared/utils/internal-util';
@@ -38,7 +39,10 @@ const papi = {
   // Services/modules
   commands: commandService,
   util: papiUtil,
-  webViews: webViewService,
+  // TODO: This is force-hiding the functions we don't want papi users to see, but it does not
+  // prevent them from using them. Fix this maybe with #172.
+  // See `papiWebViewService` in `web-view.service.ts` for more info
+  webViews: webViewService as PapiWebViewService,
   react: {
     context: papiContext,
     hooks: papiHooks,
diff --git a/src/shared/services/web-view-provider.service.ts b/src/shared/services/web-view-provider.service.ts
new file mode 100644
index 0000000000..9bbdcd6c76
--- /dev/null
+++ b/src/shared/services/web-view-provider.service.ts
@@ -0,0 +1,124 @@
+/**
+ * Handles registering web view providers and serving web views around the papi.
+ * Exposed on the papi.
+ */
+
+import {
+  DisposableWebViewProvider,
+  IWebViewProvider,
+  WebViewProvider,
+} from '@shared/models/web-view-provider.model';
+import networkObjectService from '@shared/services/network-object.service';
+import * as networkService from '@shared/services/network.service';
+import logger from '@shared/services/logger.service';
+
+/** Suffix on network objects that indicates that the network object is a data provider */
+const WEB_VIEW_PROVIDER_LABEL = 'webViewProvider';
+
+/** Gets the id for the web view network object with the given name */
+const getWebViewProviderObjectId = (webViewType: string) =>
+  `${webViewType}-${WEB_VIEW_PROVIDER_LABEL}`;
+
+/** Whether this service has finished setting up */
+let isInitialized = false;
+
+/** Promise that resolves when this service is finished initializing */
+let initializePromise: Promise<void> | undefined;
+
+/** Sets up the service. Only runs once and always returns the same promise after that */
+const initialize = () => {
+  if (initializePromise) return initializePromise;
+
+  initializePromise = (async (): Promise<void> => {
+    if (isInitialized) return;
+
+    // TODO: Might be best to make a singleton or something
+    await networkService.initialize();
+
+    isInitialized = true;
+  })();
+
+  return initializePromise;
+};
+
+/**
+ * Indicate if we are aware of an existing web view provider with the given type. If a web view
+ * provider with the given type is somewhere else on the network, this function won't tell you about
+ * it unless something else in the existing process is subscribed to it.
+ * @param webViewType type of webView to check for
+ */
+function hasKnown(webViewType: string): boolean {
+  return networkObjectService.hasKnown(getWebViewProviderObjectId(webViewType));
+}
+
+/**
+ * Register a web view provider to serve webViews for a specified type of webViews
+ *
+ * @param webViewType type of web view to provide
+ * @param webViewProvider object to register as a webView provider including control over disposing
+ * of it.
+ *
+ * WARNING: setting a webView provider mutates the provided object.
+ * @returns `webViewProvider` modified to be a network object
+ */
+async function register(
+  webViewType: string,
+  webViewProvider: IWebViewProvider,
+): Promise<DisposableWebViewProvider> {
+  await initialize();
+
+  if (hasKnown(webViewType))
+    throw new Error(`WebView provider for WebView type ${webViewType} is already registered`);
+
+  // Validate that the WebView provider has what it needs
+  if (!webViewProvider.getWebView || typeof webViewProvider.getWebView !== 'function')
+    throw new Error(`WebView provider does not have a getWebView function`);
+
+  // We are good to go! Create the WebView provider
+
+  // Get the object id for this web view provider name
+  const webViewProviderObjectId = getWebViewProviderObjectId(webViewType);
+
+  // Set up the WebView provider to be a network object so other processes can use it
+  const disposableWebViewProvider: DisposableWebViewProvider = await networkObjectService.set(
+    webViewProviderObjectId,
+    webViewProvider,
+  );
+
+  return disposableWebViewProvider;
+}
+
+/**
+ * Get a web view provider that has previously been set up
+ * @param webViewType type of webview provider to get
+ * @returns web view provider with the given name if one exists, undefined otherwise
+ */
+async function get(webViewType: string): Promise<WebViewProvider | undefined> {
+  await initialize();
+
+  // Get the object id for this web view provider name
+  const webViewProviderObjectId = getWebViewProviderObjectId(webViewType);
+
+  const webViewProvider = await networkObjectService.get<WebViewProvider>(webViewProviderObjectId);
+
+  if (!webViewProvider) {
+    logger.info(`No WebView provider found for WebView type ${webViewType}`);
+    return undefined;
+  }
+
+  return webViewProvider;
+}
+
+const webViewProviderService = {
+  initialize,
+  hasKnown,
+  register,
+  get,
+};
+
+// TODO: refactor? Put all provider service stuff in webview service?
+export const papiWebViewProviderService = {
+  register,
+};
+
+export default webViewProviderService;
diff --git a/src/shared/services/web-view.service.ts b/src/shared/services/web-view.service.ts
index 09e2d4988d..f78e5a9bcb 100644
--- a/src/shared/services/web-view.service.ts
+++ b/src/shared/services/web-view.service.ts
@@ -6,34 +6,78 @@
 import cloneDeep from 'lodash/cloneDeep';
 import { isRenderer } from '@shared/utils/internal-util';
 import {
+  Unsubscriber,
   aggregateUnsubscriberAsyncs,
-  CommandHandler,
   getModuleSimilarApiMessage,
   serializeRequestType,
 } from '@shared/utils/papi-util';
-import * as commandService from '@shared/services/command.service';
-import { getErrorMessage, newNonce, wait } from '@shared/utils/util';
+import { getErrorMessage, newGuid, newNonce, wait } from '@shared/utils/util';
 // We need the papi here to pass it into WebViews. Don't use it anywhere else in this file
 // eslint-disable-next-line import/no-cycle
 import papi from '@shared/services/papi.service';
-import React from 'react';
+import React, { MutableRefObject } from 'react';
 import { createRoot } from 'react-dom/client';
 import { createNetworkEventEmitter } from '@shared/services/network.service';
 import {
   AddWebViewEvent,
   Layout,
   PanelDirection,
-  WebViewContents,
-  WebViewContentsReact,
+  SavedTabInfo,
+  TabInfo,
+  WebViewDefinitionReact,
   WebViewContentType,
   WebViewProps,
+  WebViewType,
+  WebViewId,
+  GetWebViewOptions,
+  WebViewDefinition,
+  SavedWebViewDefinition,
 } from '@shared/data/web-view.model';
+import * as networkService from '@shared/services/network.service';
+import webViewProviderService from '@shared/services/web-view-provider.service';
+import { DockLayout, DropDirection, LayoutBase } from 'rc-dock';
+import AsyncVariable from '@shared/utils/async-variable';
+
+/** rc-dock's onLayoutChange prop made asynchronous - resolves */
+export type OnLayoutChangeRCDock = (
+  newLayout: LayoutBase,
+  currentTabId?: string,
+  direction?: DropDirection,
+) => Promise<void>;
+
+/** Properties related to the dock layout provided by `paranext-dock-layout.component.tsx` */
+export type PapiDockLayout = {
+  /** The rc-dock dock layout React element ref. Used to perform operations on the layout */
+  dockLayout: DockLayout;
+  /**
+   * A ref to a function that runs when the layout changes. We set this ref to our
+   * {@link onLayoutChange} function
+   */
+  onLayoutChangeRef: MutableRefObject<OnLayoutChangeRCDock | undefined>;
+  /** Function to call to add or update a webview in the layout */
+  addWebViewToDock: (webView: WebViewProps, layout: Layout) => void;
+  /**
+   * The layout to use as the default layout if the dockLayout doesn't have a layout loaded.
+   *
+   * TODO: This should be removed and the `testLayout` imported directly in this file once this
+   * service is refactored to split the code between processes. The only reason this is passed from
+   * `paranext-dock-layout.component.tsx` is that we cannot import `testLayout` here since this
+   * service is currently all shared code. Refactor should happen in #203
+   */
+  testLayout: LayoutBase;
+};
 
 /** Prefix on requests that indicates that the request is related to webView operations */
 const CATEGORY_WEB_VIEW = 'webView';
 const DEFAULT_FLOAT_SIZE = { width: 300, height: 150 };
 const DEFAULT_PANEL_DIRECTION: PanelDirection = 'right';
 
+/** Name for request to get a web view */
+const GET_WEB_VIEW_REQUEST = 'getWebView';
+
+/** localstorage key for saving and loading the dock layout */
+const DOCK_LAYOUT_KEY = 'dock-saved-layout';
+
 /** Whether this service has finished setting up */
 let isInitialized = false;
 
@@ -47,6 +91,16 @@ const onDidAddWebViewEmitter = createNetworkEventEmitter<AddWebViewEvent>(
 /** Event that emits with webView info when a webView is added */
 export const onDidAddWebView = onDidAddWebViewEmitter.event;
 
+/**
+ * Variable that will hold the rc-dock dock layout along with a couple other props. This is
+ * populated by `paranext-dock-layout.component.tsx` registering its dock layout with this service,
+ * allowing this service to manage layouts and such.
+ *
+ * WARNING: YOU CANNOT USE THIS VARIABLE IN ANYTHING BUT THE RENDERER. Also please do not save this
+ * variable out anywhere because it can change, invalidating the old one (see `registerDockLayout`)
+ */
+let papiDockLayoutVar = createDockLayoutAsyncVar();
+
 // #region Renderer-only stuff
 
 /**
@@ -78,6 +132,9 @@ const webViewRequire = (module: string) => {
 
 // #endregion
 
+// #region functions related to the dock layout
+
+/** Set up defaults for webview layout instructions */
 function layoutDefaults(layout: Layout): Layout {
   const layoutDefaulted = cloneDeep(layout);
   switch (layoutDefaulted.type) {
@@ -95,51 +152,263 @@ function layoutDefaults(layout: Layout): Layout {
 }
 
 /**
- * Adds a WebView and runs all event handlers who are listening to this event
- * @param webView full html document to set as the webview iframe contents. Can be shortened to just a string
- * @returns promise that resolves nothing if we successfully handled the webView
+ * Basic `saveTabInfo` that simply strips the properties added by {@link TabInfo} off of the object
+ * and returns it as a {@link SavedTabInfo}. Runs as the {@link TabSaver} by default if the tab type
+ * does not have a specific `TabSaver`
+ */
+export function saveTabInfoBase(tabInfo: TabInfo): SavedTabInfo {
+  // We don't need to use the other properties, but we need to remove them
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const { tabTitle, content, minWidth, minHeight, ...savedTabInfo } = tabInfo;
+  return savedTabInfo;
+}
+
+/**
+ * Converts web view definition used in an actual docking tab into saveable web view information by
+ * stripping out the members we don't want to save
+ * @param webViewDefinition web view to save
+ * @returns saveable web view information based on `webViewDefinition`
+ */
+export function convertWebViewDefinitionToSaved(
+  webViewDefinition: WebViewDefinition,
+): SavedWebViewDefinition {
+  const webViewDefinitionCloned: Omit<WebViewDefinition, 'content'> &
+    Partial<Pick<WebViewDefinition, 'content'>> &
+    Partial<Pick<WebViewDefinitionReact, 'styles'>> = { ...webViewDefinition };
+  // We don't want to keep the webView content so the web view provider can provide it again when
+  // deserializing
+  delete webViewDefinitionCloned.content;
+  delete webViewDefinitionCloned.styles;
+  return webViewDefinitionCloned;
+}
+
+/** Create a new dock layout promise variable */
+function createDockLayoutAsyncVar(): AsyncVariable<PapiDockLayout> {
+  return new AsyncVariable<PapiDockLayout>(
+    'web-view.service.paranextDockLayout',
+    // Use default timeout on renderer, but never timeout anywhere else because we will not be
+    // resolving this. One of the serious pains of not having #203
+    isRenderer() ? undefined : -1,
+  );
+}
+
+/**
+ * When rc-dock detects a changed layout, save it. This function is given to the registered
+ * papiDockLayout to run when the dock layout changes.
+ *
+ * TODO: We could filter whether we need to save based on the `direction` argument. - IJH 2023-05-1
+ * @param newLayout the changed layout to save.
+ */
+const onLayoutChange: OnLayoutChangeRCDock = async (newLayout) => {
+  return saveLayout(newLayout);
+};
+
+/**
+ * Safely load a value from local storage.
+ * @param key of the value.
+ * @param defaultValue to return if the key is not found.
+ * @returns the value of the key fetched from local storage, or the default value if not found.
+ */
+function getStorageValue<T>(key: string, defaultValue: T): T {
+  const saved = localStorage.getItem(key);
+  const initial = saved ? JSON.parse(saved) : undefined;
+  return initial || defaultValue;
+}
+
+/**
+ * Persists the current dock layout information.
+ * @param layout layout to persist
+ */
+async function saveLayout(layout: LayoutBase): Promise<void> {
+  const currentLayout = layout;
+  localStorage.setItem(DOCK_LAYOUT_KEY, JSON.stringify(currentLayout));
+}
+
+/**
+ * Loads layout information into the dock layout.
+ * @param layout If this parameter is provided, loads that layout information. If not provided, gets
+ * the persisted layout information and loads it into the dock layout.
+ */
+async function loadLayout(layout?: LayoutBase): Promise<void> {
+  const dockLayoutVar = await papiDockLayoutVar.promise;
+  const layoutToLoad = layout || getStorageValue(DOCK_LAYOUT_KEY, dockLayoutVar.testLayout);
+
+  dockLayoutVar.dockLayout.loadLayout(layoutToLoad);
+  if (layout) {
+    // A layout was provided, meaning this is a layout change. Since `dockLayout.loadLayout` doesn't
+    // run `onLayoutChange`, we run it manually
+    await onLayoutChange(layoutToLoad);
+  }
+}
+
+/**
+ * Register a dock layout React element to be used by this service to perform layout-related
+ * operations
+ * @param dockLayout dock layout element to register along with other important properties
+ * @returns function used to unregister this dock layout
  */
-export const addWebView = async (
-  webView: WebViewContents,
+export function registerDockLayout(dockLayout: PapiDockLayout): Unsubscriber {
+  // Save the current async var so we know if it changed before we unsubscribed
+  const currentPapiDockLayoutVar = papiDockLayoutVar;
+
+  // Set the dock layout as the promise var. Throws if already resolved
+  papiDockLayoutVar.resolveToValue(dockLayout, true);
+
+  // TODO: Strange pattern that we are setting a ref to a service function. Investigate changing
+  // this pattern in some way. Maybe just export `onLayoutChange`?
+  dockLayout.onLayoutChangeRef.current = onLayoutChange;
+
+  // Will we ever need to await this? For now, seems like it unnecessarily complicates registering
+  // because making this function async would probably be annoying in React
+  loadLayout();
+
+  // Return an unsubscriber to unregister this dock layout. The primary situation in which I see
+  // this happening is when you change something on the renderer that causes a live hot reload
+  return () => {
+    // Somehow this is not the registered dock layout anymore
+    if (papiDockLayoutVar !== currentPapiDockLayoutVar)
+      throw new Error('Tried to unregister an old dock layout');
+
+    // Create a new async var to empty out the dock layout
+    // TODO: Would this create any problems...? I guess only if we save dockLayoutVar somewhere else
+    papiDockLayoutVar = createDockLayoutAsyncVar();
+
+    return true;
+  };
+}
+
+// #endregion
+
+/** Set up defaults for options for getting a web view */
+function getWebViewOptionsDefaults(options: GetWebViewOptions): GetWebViewOptions {
+  const optionsDefaulted = cloneDeep(options);
+  if ('existingId' in optionsDefaulted && !('createNewIfNotFound' in optionsDefaulted))
+    optionsDefaulted.createNewIfNotFound = true;
+
+  return optionsDefaulted;
+}
+
+/**
+ * Creates a new web view or gets an existing one depending on if you request an existing one and
+ * if the web view provider decides to give that existing one to you (it is up to the provider).
+ *
+ * @param webViewType type of WebView to create
+ * @param layout information about where you want the web view to go. Defaults to adding as a tab
+ * @param options options that affect what this function does. For example, you can provide an
+ * existing web view id to request an existing web view with that id.
+ *
+ * @returns promise that resolves to the id of the webview we got.
+ */
+export const getWebView = async (
+  webViewType: WebViewType,
   layout: Layout = { type: 'tab' },
-): Promise<void> => {
+  options: GetWebViewOptions = {},
+): Promise<WebViewId | undefined> => {
+  const optionsDefaulted = getWebViewOptionsDefaults(options);
+  // ENHANCEMENT: If they aren't looking for an existingId, we could get the webview without
+  // searching for an existing webview and send it to the renderer, skipping the part where we send
+  // to the renderer, then search for an existing webview, then get the webview
+
+  // Create the webview
   if (!isRenderer()) {
     // HACK: Quick fix for https://github.com/paranext/paranext-core/issues/52
-    // Try to run addWebView several times until the renderer is up
+    // Try to run getWebView several times until the renderer is up
     // Once we implement a way to track dependencies across processes, this can go away
-    // Note that commands turn into requests, and requests are retried, so there is another loop
+    // Note that requests are retried, so there is another loop
     // within this loop deeper down.
     for (let attemptsRemaining = 5; attemptsRemaining > 0; attemptsRemaining--) {
-      let success = true;
       try {
         // eslint-disable-next-line no-await-in-loop
-        await commandService.sendCommand<[WebViewContents, Layout], void>(
-          'addWebView',
-          webView,
+        return await networkService.request<
+          [WebViewType, Layout, GetWebViewOptions],
+          WebViewId | undefined
+        >(
+          serializeRequestType(CATEGORY_WEB_VIEW, GET_WEB_VIEW_REQUEST),
+          webViewType,
           layout,
+          optionsDefaulted,
         );
       } catch (error) {
-        success = false;
         // If we are out of tries or the error returned is not that the renderer is down, stop
         // trying to resend and just throw
         if (
           attemptsRemaining === 1 ||
           getErrorMessage(error) !==
             `No handler was found to process the request of type ${serializeRequestType(
-              'command',
-              'addWebView',
+              CATEGORY_WEB_VIEW,
+              GET_WEB_VIEW_REQUEST,
             )}`
         )
           throw error;
         // eslint-disable-next-line no-await-in-loop
         await wait(1000);
       }
+    }
+    throw new Error(`getWebView failed, but you should have seen a different error than this!`);
+  }
 
-      if (success) return;
+  // Get the webview definition from the webview provider
+  const webViewProvider = await webViewProviderService.get(webViewType);
+
+  if (!webViewProvider)
+    throw new Error(`Cannot find Web View Provider for webview type ${webViewType}`);
+
+  // Find existing webView if one exists
+  /** Either the existing webview with the specified id or a placeholder webview if one was not found */
+  let existingSavedWebView: SavedWebViewDefinition | undefined;
+  /** Whether we found an existing web view to ask the provider for */
+  let didFindExistingWebView = false;
+  // Look for existing webview
+  if (optionsDefaulted.existingId) {
+    const existingWebView = (await papiDockLayoutVar.promise).dockLayout.find(
+      optionsDefaulted.existingId === '?'
+        ? // If they provided '?', that means look for any webview with a matching webViewType
+          (item) => {
+            // This is not a webview
+            if (!('data' in item)) return false;
+
+            // Find any webview with the specified webViewType
+            return (item.data as WebViewDefinition).webViewType === webViewType;
+          }
+        : // If they provided any other string, look for a webview with that id
+          optionsDefaulted.existingId,
+    ) as TabInfo | undefined;
+    if (existingWebView) {
+      // We found the webview! Save it to send to the web view provider
+      existingSavedWebView = convertWebViewDefinitionToSaved(
+        existingWebView.data as WebViewDefinition,
+      );
+      didFindExistingWebView = true;
     }
-    throw new Error(`addWebView failed, but you should have seen a different error than this!`);
   }
 
+  // We didn't find an existing web view with the id
+  if (!existingSavedWebView) {
+    // If we are not looking to create a new webview, then don't.
+    if ('existingId' in optionsDefaulted && !optionsDefaulted.createNewIfNotFound) return undefined;
+    // If we want to create a new webview, set a placeholder with a new id
+    existingSavedWebView = { webViewType, id: newGuid() };
+  }
+
+  // Create the new webview or load if it already existed
+  const webView = await webViewProvider.getWebView(existingSavedWebView, optionsDefaulted);
+
+  // The web view provider didn't want to create this web view
+  if (!webView) return undefined;
+
+  /**
+   * The web view we are getting is new. Either the webview provider gave us a new webview instead
+   * of the existing one or there wasn't an existing one in the first place
+   */
+  // See if the provider gave us a new web view
+  // Meaning we got a web view from the provider (which is already the case since we are here)
+  // And we didn't find an existing one so the one we got must be new
+  // or the web view id we asked the provider for is not the one it gave us and it already exists
+  const webViewIsNew =
+    !didFindExistingWebView ||
+    (existingSavedWebView.id !== webView.id &&
+      (await papiDockLayoutVar.promise).dockLayout.find(webView.id));
+
   // WebView.contentType is assumed to be React by default. Extensions can specify otherwise
   const contentType = webView.contentType ? webView.contentType : WebViewContentType.React;
 
@@ -174,7 +443,7 @@ export const addWebView = async (
       specificSrcPolicy = "'unsafe-inline'";
       break;
     default: {
-      const reactWebView = webView as WebViewContentsReact;
+      const reactWebView = webView as WebViewDefinitionReact;
 
       // Add the component as a script
       // WARNING: DO NOT add anything between the closing of the script tag and the insertion of
@@ -274,13 +543,22 @@ export const addWebView = async (
     content: webViewContent,
   };
   const updatedLayout = layoutDefaults(layout);
-  // Inform web view consumers we added a web view
-  onDidAddWebViewEmitter.emit({ webView: updatedWebView, layout: updatedLayout });
+
+  (await papiDockLayoutVar.promise).addWebViewToDock(updatedWebView, updatedLayout);
+
+  // Inform web view consumers we added a new web view
+  if (webViewIsNew)
+    onDidAddWebViewEmitter.emit({
+      webView: convertWebViewDefinitionToSaved(updatedWebView),
+      layout: updatedLayout,
+    });
+
+  return webView.id;
 };
 
 /** Commands that this process will handle if it is the renderer. Registered automatically at initialization */
-const rendererCommandFunctions: { [commandName: string]: CommandHandler } = {
-  addWebView,
+const rendererRequestHandlers = {
+  [serializeRequestType(CATEGORY_WEB_VIEW, GET_WEB_VIEW_REQUEST)]: getWebView,
 };
 
 /** Sets up the WebViewService. Runs only once */
@@ -292,20 +570,20 @@ export const initialize = () => {
 
     // Set up subscriptions that the service needs to work
 
-    // Register built-in commands
+    // Register built-in requests
     if (isRenderer()) {
       // TODO: make a registerRequestHandlers function that we use here and in NetworkService.initialize?
-      const unsubPromises = Object.entries(rendererCommandFunctions).map(([commandName, handler]) =>
-        commandService.registerCommand(commandName, handler),
+      const unsubPromises = Object.entries(rendererRequestHandlers).map(([requestType, handler]) =>
+        networkService.registerRequestHandler(requestType, handler),
       );
 
-      // Wait to successfully register all commands
-      const unsubscribeCommands = aggregateUnsubscriberAsyncs(await Promise.all(unsubPromises));
+      // Wait to successfully register all requests
+      const unsubscribeRequests = aggregateUnsubscriberAsyncs(await Promise.all(unsubPromises));
 
-      // On closing, try to remove command listeners
+      // On closing, try to remove request listeners
       // TODO: should do this on the server when the connection closes or when the server exits as well
       window.addEventListener('beforeunload', async () => {
-        await unsubscribeCommands();
+        await unsubscribeRequests();
       });
     }
 
@@ -315,9 +593,20 @@ export const initialize = () => {
   return initializePromise;
 };
 
+// Pulled out registering web view providers because it feels better to have these services split
+// up internally but combined externally.
+// TODO: once we fix the dependency loop mentioned below on `papiWebViewService`, we can remove this
+// line since we don't need to export the registration twice.
+export const registerWebViewProvider = webViewProviderService.register;
+
 /** All the exports in this service that are to be exposed on the PAPI */
+// TODO: This doesn't actually work - causes a dependency loop if used in papi.service.ts. We may
+// fix this when we split papi into frontend and backend in #172
 export const papiWebViewService = {
   onDidAddWebView,
-  addWebView,
+  getWebView,
   initialize,
+  registerWebViewProvider,
 };
+
+export type PapiWebViewService = typeof papiWebViewService;
diff --git a/src/shared/utils/papi-util.ts b/src/shared/utils/papi-util.ts
index 3eb033a062..017e99524e 100644
--- a/src/shared/utils/papi-util.ts
+++ b/src/shared/utils/papi-util.ts
@@ -155,34 +155,6 @@ export function deserializeRequestType(requestType: string): RequestType {
   return { category, directive };
 }
 
-/** Parts of a Dock Tab ID */
-export interface TabIdParts {
-  /** Type of the tab */
-  type: string;
-  /** ID of the particular tab type */
-  typeId: string;
-}
-
-/**
- * Create a tab ID.
- * @param type Type of the tab.
- * @param typeId ID of the particular tab type.
- * @returns a tab ID
- */
-export function serializeTabId(type: string, typeId: string): string {
-  return serializeRequestType(type, typeId);
-}
-
-/**
- * Split the tab ID into its parts.
- * @param id Tab ID.
- * @returns The two parts of the tab ID
- */
-export function deserializeTabId(id: string): TabIdParts {
-  const { category: type, directive: typeId } = deserializeRequestType(id);
-  return { type, typeId };
-}
-
 /**
  * HTML Encodes the provided string.
  * Thanks to ChatGPT