diff --git a/examples/embeddable_examples/common/index.ts b/examples/embeddable_examples/common/index.ts
new file mode 100644
index 0000000000000..0f1d72af49314
--- /dev/null
+++ b/examples/embeddable_examples/common/index.ts
@@ -0,0 +1,20 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+export { TodoSavedObjectAttributes } from './types';
diff --git a/examples/embeddable_examples/common/types.ts b/examples/embeddable_examples/common/types.ts
new file mode 100644
index 0000000000000..22fddd900e646
--- /dev/null
+++ b/examples/embeddable_examples/common/types.ts
@@ -0,0 +1,26 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { SavedObjectAttributes } from 'kibana/public';
+
+export interface TodoSavedObjectAttributes extends SavedObjectAttributes {
+  task: string;
+  icon?: string;
+  title?: string;
+}
diff --git a/examples/embeddable_examples/kibana.json b/examples/embeddable_examples/kibana.json
index c70bc7009ff51..c650d58efb883 100644
--- a/examples/embeddable_examples/kibana.json
+++ b/examples/embeddable_examples/kibana.json
@@ -3,8 +3,8 @@
   "version": "0.0.1",
   "kibanaVersion": "kibana",
   "configPath": ["embeddable_examples"],
-  "server": false,
+  "server": true,
   "ui": true,
-  "requiredPlugins": ["embeddable"],
+  "requiredPlugins": ["embeddable", "uiActions", "inspector"],
   "optionalPlugins": []
 }
diff --git a/examples/embeddable_examples/public/create_sample_data.ts b/examples/embeddable_examples/public/create_sample_data.ts
new file mode 100644
index 0000000000000..52185845d7bbe
--- /dev/null
+++ b/examples/embeddable_examples/public/create_sample_data.ts
@@ -0,0 +1,36 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { SavedObjectsClientContract } from 'kibana/public';
+import { TodoSavedObjectAttributes } from '../common';
+
+export async function createSampleData(client: SavedObjectsClientContract, overwrite = true) {
+  await client.create<TodoSavedObjectAttributes>(
+    'todo',
+    {
+      task: 'Take the garbage out',
+      title: 'Garbage',
+      icon: 'trash',
+    },
+    {
+      id: 'sample-todo-saved-object',
+      overwrite,
+    }
+  );
+}
diff --git a/examples/embeddable_examples/public/index.ts b/examples/embeddable_examples/public/index.ts
index 5fcd454b17a5c..c87d0e14ae522 100644
--- a/examples/embeddable_examples/public/index.ts
+++ b/examples/embeddable_examples/public/index.ts
@@ -17,7 +17,6 @@
  * under the License.
  */
 
-import { PluginInitializer } from 'kibana/public';
 export {
   HELLO_WORLD_EMBEDDABLE,
   HelloWorldEmbeddable,
@@ -26,18 +25,15 @@ export {
 export { ListContainer, LIST_CONTAINER } from './list_container';
 export { TODO_EMBEDDABLE } from './todo';
 
-import {
-  EmbeddableExamplesPlugin,
-  EmbeddableExamplesSetupDependencies,
-  EmbeddableExamplesStartDependencies,
-} from './plugin';
+import { EmbeddableExamplesPlugin } from './plugin';
 
 export { SearchableListContainer, SEARCHABLE_LIST_CONTAINER } from './searchable_list_container';
-export { MULTI_TASK_TODO_EMBEDDABLE } from './multi_task_todo';
+export {
+  TODO_SO_EMBEDDABLE,
+  TodoSoEmbeddable,
+  TodoSoEmbeddableInput,
+  TodoSoEmbeddableOutput,
+} from './todo_saved_object';
 
-export const plugin: PluginInitializer<
-  void,
-  void,
-  EmbeddableExamplesSetupDependencies,
-  EmbeddableExamplesStartDependencies
-> = () => new EmbeddableExamplesPlugin();
+export { MULTI_TASK_TODO_EMBEDDABLE } from './multi_task_todo';
+export const plugin = () => new EmbeddableExamplesPlugin();
diff --git a/examples/embeddable_examples/public/list_container/embeddable_list_item.tsx b/examples/embeddable_examples/public/list_container/embeddable_list_item.tsx
index 2c80cef8a6364..ddf6d0df42b29 100644
--- a/examples/embeddable_examples/public/list_container/embeddable_list_item.tsx
+++ b/examples/embeddable_examples/public/list_container/embeddable_list_item.tsx
@@ -18,11 +18,27 @@
  */
 
 import React from 'react';
-import { EuiPanel, EuiLoadingSpinner, EuiFlexItem } from '@elastic/eui';
-import { IEmbeddable } from '../../../../src/plugins/embeddable/public';
+import { EuiLoadingSpinner, EuiFlexItem } from '@elastic/eui';
+import { CoreStart, IUiSettingsClient, SavedObjectsStart } from 'kibana/public';
+import { UiActionsStart } from '../../../../src/plugins/ui_actions/public';
+import { Start as InspectorStart } from '../../../../src/plugins/inspector/public';
+import { getSavedObjectFinder } from '../../../../src/plugins/saved_objects/public';
+import {
+  IEmbeddable,
+  EmbeddableStart,
+  EmbeddablePanel,
+} from '../../../../src/plugins/embeddable/public';
 
 interface Props {
   embeddable: IEmbeddable;
+  uiActionsApi: UiActionsStart;
+  getEmbeddableFactory: EmbeddableStart['getEmbeddableFactory'];
+  getAllEmbeddableFactories: EmbeddableStart['getEmbeddableFactories'];
+  overlays: CoreStart['overlays'];
+  notifications: CoreStart['notifications'];
+  inspector: InspectorStart;
+  savedObject: SavedObjectsStart;
+  uiSettingsClient: IUiSettingsClient;
 }
 
 export class EmbeddableListItem extends React.Component<Props> {
@@ -49,15 +65,33 @@ export class EmbeddableListItem extends React.Component<Props> {
   }
 
   public render() {
+    const {
+      embeddable,
+      uiActionsApi,
+      getAllEmbeddableFactories,
+      getEmbeddableFactory,
+      savedObject,
+      uiSettingsClient,
+      notifications,
+      inspector,
+      overlays,
+    } = this.props;
     return (
       <EuiFlexItem>
-        <EuiPanel>
-          {this.props.embeddable ? (
-            <div ref={this.embeddableRoot} />
-          ) : (
-            <EuiLoadingSpinner size="s" />
-          )}
-        </EuiPanel>
+        {embeddable ? (
+          <EmbeddablePanel
+            embeddable={embeddable}
+            getActions={uiActionsApi.getTriggerCompatibleActions}
+            getEmbeddableFactory={getEmbeddableFactory}
+            getAllEmbeddableFactories={getAllEmbeddableFactories}
+            overlays={overlays}
+            notifications={notifications}
+            inspector={inspector}
+            SavedObjectFinder={getSavedObjectFinder(savedObject, uiSettingsClient)}
+          />
+        ) : (
+          <EuiLoadingSpinner size="s" />
+        )}
       </EuiFlexItem>
     );
   }
diff --git a/examples/embeddable_examples/public/list_container/index.ts b/examples/embeddable_examples/public/list_container/index.ts
index 581739f6b5458..76418ea88ea45 100644
--- a/examples/embeddable_examples/public/list_container/index.ts
+++ b/examples/embeddable_examples/public/list_container/index.ts
@@ -17,5 +17,5 @@
  * under the License.
  */
 
-export { ListContainer, LIST_CONTAINER } from './list_container';
-export { ListContainerFactory } from './list_container_factory';
+export * from './list_container';
+export * from './list_container_factory';
diff --git a/examples/embeddable_examples/public/list_container/list_container.tsx b/examples/embeddable_examples/public/list_container/list_container.tsx
index bbbd0d6e32304..913401a58ef88 100644
--- a/examples/embeddable_examples/public/list_container/list_container.tsx
+++ b/examples/embeddable_examples/public/list_container/list_container.tsx
@@ -18,12 +18,9 @@
  */
 import React from 'react';
 import ReactDOM from 'react-dom';
-import {
-  Container,
-  ContainerInput,
-  EmbeddableStart,
-} from '../../../../src/plugins/embeddable/public';
+import { Container, ContainerInput } from '../../../../src/plugins/embeddable/public';
 import { ListContainerComponent } from './list_container_component';
+import { StartServices } from './list_container_factory';
 
 export const LIST_CONTAINER = 'LIST_CONTAINER';
 
@@ -31,11 +28,8 @@ export class ListContainer extends Container<{}, ContainerInput> {
   public readonly type = LIST_CONTAINER;
   private node?: HTMLElement;
 
-  constructor(
-    input: ContainerInput,
-    getEmbeddableFactory: EmbeddableStart['getEmbeddableFactory']
-  ) {
-    super(input, { embeddableLoaded: {} }, getEmbeddableFactory);
+  constructor(input: ContainerInput, private services: StartServices) {
+    super(input, { embeddableLoaded: {} }, services.getEmbeddableFactory);
   }
 
   // This container has no input itself.
@@ -48,7 +42,7 @@ export class ListContainer extends Container<{}, ContainerInput> {
     if (this.node) {
       ReactDOM.unmountComponentAtNode(this.node);
     }
-    ReactDOM.render(<ListContainerComponent embeddable={this} />, node);
+    ReactDOM.render(<ListContainerComponent embeddable={this} services={this.services} />, node);
   }
 
   public destroy() {
diff --git a/examples/embeddable_examples/public/list_container/list_container_component.tsx b/examples/embeddable_examples/public/list_container/list_container_component.tsx
index f6e04933ee897..124a62203a784 100644
--- a/examples/embeddable_examples/public/list_container/list_container_component.tsx
+++ b/examples/embeddable_examples/public/list_container/list_container_component.tsx
@@ -26,28 +26,34 @@ import {
   ContainerOutput,
 } from '../../../../src/plugins/embeddable/public';
 import { EmbeddableListItem } from './embeddable_list_item';
+import { StartServices } from './list_container_factory';
 
 interface Props {
   embeddable: IContainer;
   input: ContainerInput;
   output: ContainerOutput;
+  services: StartServices;
 }
 
-function renderList(embeddable: IContainer, panels: ContainerInput['panels']) {
+function renderList(
+  embeddable: IContainer,
+  panels: ContainerInput['panels'],
+  services: StartServices
+) {
   let number = 0;
   const list = Object.values(panels).map(panel => {
     const child = embeddable.getChild(panel.explicitInput.id);
     number++;
     return (
       <EuiPanel key={number.toString()}>
-        <EuiFlexGroup>
+        <EuiFlexGroup gutterSize="none">
           <EuiFlexItem grow={false}>
             <EuiText>
               <h3>{number}</h3>
             </EuiText>
           </EuiFlexItem>
           <EuiFlexItem>
-            <EmbeddableListItem embeddable={child} />
+            <EmbeddableListItem embeddable={child} {...services} />
           </EuiFlexItem>
         </EuiFlexGroup>
       </EuiPanel>
@@ -61,7 +67,7 @@ export function ListContainerComponentInner(props: Props) {
     <div>
       <h2 data-test-subj="listContainerTitle">{props.embeddable.getTitle()}</h2>
       <EuiSpacer size="l" />
-      {renderList(props.embeddable, props.input.panels)}
+      {renderList(props.embeddable, props.input.panels, props.services)}
     </div>
   );
 }
@@ -71,4 +77,9 @@ export function ListContainerComponentInner(props: Props) {
 // anything on input or output state changes.  If you don't want that to happen (for example
 // if you expect something on input or output state to change frequently that your react
 // component does not care about, then you should probably hook this up manually).
-export const ListContainerComponent = withEmbeddableSubscription(ListContainerComponentInner);
+export const ListContainerComponent = withEmbeddableSubscription<
+  ContainerInput,
+  ContainerOutput,
+  IContainer,
+  { services: StartServices }
+>(ListContainerComponentInner);
diff --git a/examples/embeddable_examples/public/list_container/list_container_factory.ts b/examples/embeddable_examples/public/list_container/list_container_factory.ts
index 247cf48b41bde..5aa4eeae1c056 100644
--- a/examples/embeddable_examples/public/list_container/list_container_factory.ts
+++ b/examples/embeddable_examples/public/list_container/list_container_factory.ts
@@ -18,6 +18,9 @@
  */
 
 import { i18n } from '@kbn/i18n';
+import { UiActionsStart } from 'src/plugins/ui_actions/public';
+import { OverlayStart, CoreStart, SavedObjectsStart, IUiSettingsClient } from 'kibana/public';
+import { Start as InspectorStart } from 'src/plugins/inspector/public';
 import {
   EmbeddableFactory,
   ContainerInput,
@@ -25,8 +28,15 @@ import {
 } from '../../../../src/plugins/embeddable/public';
 import { LIST_CONTAINER, ListContainer } from './list_container';
 
-interface StartServices {
+export interface StartServices {
+  getAllEmbeddableFactories: EmbeddableStart['getEmbeddableFactories'];
   getEmbeddableFactory: EmbeddableStart['getEmbeddableFactory'];
+  uiActionsApi: UiActionsStart;
+  overlays: OverlayStart;
+  notifications: CoreStart['notifications'];
+  inspector: InspectorStart;
+  savedObject: SavedObjectsStart;
+  uiSettingsClient: IUiSettingsClient;
 }
 
 export class ListContainerFactory extends EmbeddableFactory {
@@ -42,8 +52,8 @@ export class ListContainerFactory extends EmbeddableFactory {
   }
 
   public async create(initialInput: ContainerInput) {
-    const { getEmbeddableFactory } = await this.getStartServices();
-    return new ListContainer(initialInput, getEmbeddableFactory);
+    const services = await this.getStartServices();
+    return new ListContainer(initialInput, services);
   }
 
   public getDisplayName() {
diff --git a/examples/embeddable_examples/public/multi_task_todo/multi_task_todo_component.tsx b/examples/embeddable_examples/public/multi_task_todo/multi_task_todo_component.tsx
index e33dfab0eaf4a..683016b66052e 100644
--- a/examples/embeddable_examples/public/multi_task_todo/multi_task_todo_component.tsx
+++ b/examples/embeddable_examples/public/multi_task_todo/multi_task_todo_component.tsx
@@ -89,6 +89,8 @@ export function MultiTaskTodoEmbeddableComponentInner({
   );
 }
 
-export const MultiTaskTodoEmbeddableComponent = withEmbeddableSubscription(
-  MultiTaskTodoEmbeddableComponentInner
-);
+export const MultiTaskTodoEmbeddableComponent = withEmbeddableSubscription<
+  MultiTaskTodoInput,
+  MultiTaskTodoOutput,
+  MultiTaskTodoEmbeddable
+>(MultiTaskTodoEmbeddableComponentInner);
diff --git a/examples/embeddable_examples/public/plugin.ts b/examples/embeddable_examples/public/plugin.ts
index 5c202d96ceb1a..403ed35b90a42 100644
--- a/examples/embeddable_examples/public/plugin.ts
+++ b/examples/embeddable_examples/public/plugin.ts
@@ -17,28 +17,69 @@
  * under the License.
  */
 
-import { EmbeddableSetup, EmbeddableStart } from '../../../src/plugins/embeddable/public';
+import { UiActionsStart } from 'src/plugins/ui_actions/public';
+import { Start as InspectorStart } from 'src/plugins/inspector/public';
+import {
+  EmbeddableSetup,
+  EmbeddableStart,
+  EmbeddableOutput,
+  CONTEXT_MENU_TRIGGER,
+} from '../../../src/plugins/embeddable/public';
 import { Plugin, CoreSetup, CoreStart } from '../../../src/core/public';
 import { HelloWorldEmbeddableFactory, HELLO_WORLD_EMBEDDABLE } from './hello_world';
+import {
+  TODO_SO_EMBEDDABLE,
+  TodoSoEmbeddableFactory,
+  TodoSoEmbeddableInput,
+  createEditTodoAction,
+  TodoSoEmbeddable,
+  EDIT_TODO_ACTION,
+} from './todo_saved_object';
 import { TODO_EMBEDDABLE, TodoEmbeddableFactory, TodoInput, TodoOutput } from './todo';
-import { MULTI_TASK_TODO_EMBEDDABLE, MultiTaskTodoEmbeddableFactory } from './multi_task_todo';
+
+import {
+  MULTI_TASK_TODO_EMBEDDABLE,
+  MultiTaskTodoEmbeddableFactory,
+  MultiTaskTodoInput,
+  MultiTaskTodoOutput,
+} from './multi_task_todo';
 import {
   SEARCHABLE_LIST_CONTAINER,
   SearchableListContainerFactory,
 } from './searchable_list_container';
 import { LIST_CONTAINER, ListContainerFactory } from './list_container';
+import { createSampleData } from './create_sample_data';
+import { StartServices } from './list_container/list_container_factory';
 
 export interface EmbeddableExamplesSetupDependencies {
   embeddable: EmbeddableSetup;
+  uiActions: UiActionsStart;
 }
 
 export interface EmbeddableExamplesStartDependencies {
   embeddable: EmbeddableStart;
+  uiActions: UiActionsStart;
+  inspector: InspectorStart;
+}
+
+export interface EmbeddableExamplesStart {
+  createSampleData: (overwrite: boolean) => Promise<void>;
+}
+
+declare module '../../../src/plugins/ui_actions/public' {
+  export interface ActionContextMapping {
+    [EDIT_TODO_ACTION]: { embeddable: TodoSoEmbeddable };
+  }
 }
 
 export class EmbeddableExamplesPlugin
   implements
-    Plugin<void, void, EmbeddableExamplesSetupDependencies, EmbeddableExamplesStartDependencies> {
+    Plugin<
+      void,
+      EmbeddableExamplesStart,
+      EmbeddableExamplesSetupDependencies,
+      EmbeddableExamplesStartDependencies
+    > {
   public setup(
     core: CoreSetup<EmbeddableExamplesStartDependencies>,
     deps: EmbeddableExamplesSetupDependencies
@@ -48,37 +89,78 @@ export class EmbeddableExamplesPlugin
       new HelloWorldEmbeddableFactory()
     );
 
-    deps.embeddable.registerEmbeddableFactory(
+    deps.embeddable.registerEmbeddableFactory<MultiTaskTodoInput, MultiTaskTodoOutput>(
       MULTI_TASK_TODO_EMBEDDABLE,
       new MultiTaskTodoEmbeddableFactory()
     );
 
-    // These are registered in the start method because `getEmbeddableFactory `
-    // is only available in start. We could reconsider this I think and make it
-    // available in both.
+    deps.embeddable.registerEmbeddableFactory<TodoInput, TodoOutput>(
+      TODO_EMBEDDABLE,
+      new TodoEmbeddableFactory(async () => ({
+        openModal: (await core.getStartServices())[0].overlays.openModal,
+      }))
+    );
+
     deps.embeddable.registerEmbeddableFactory(
       SEARCHABLE_LIST_CONTAINER,
       new SearchableListContainerFactory(async () => ({
         getEmbeddableFactory: (await core.getStartServices())[1].embeddable.getEmbeddableFactory,
+        getAllEmbeddableFactories: (await core.getStartServices())[1].embeddable
+          .getEmbeddableFactories,
+        uiActionsApi: (await core.getStartServices())[1].uiActions,
+        inspector: (await core.getStartServices())[1].inspector,
+        uiSettingsClient: (await core.getStartServices())[0].uiSettings,
+        notifications: (await core.getStartServices())[0].notifications,
+        overlays: (await core.getStartServices())[0].overlays,
+        savedObject: (await core.getStartServices())[0].savedObjects,
       }))
     );
 
     deps.embeddable.registerEmbeddableFactory(
       LIST_CONTAINER,
-      new ListContainerFactory(async () => ({
-        getEmbeddableFactory: (await core.getStartServices())[1].embeddable.getEmbeddableFactory,
-      }))
+      new ListContainerFactory(
+        async (): Promise<StartServices> => ({
+          getEmbeddableFactory: (await core.getStartServices())[1].embeddable.getEmbeddableFactory,
+          getAllEmbeddableFactories: (await core.getStartServices())[1].embeddable
+            .getEmbeddableFactories,
+          uiActionsApi: (await core.getStartServices())[1].uiActions,
+          inspector: (await core.getStartServices())[1].inspector,
+          uiSettingsClient: (await core.getStartServices())[0].uiSettings,
+          notifications: (await core.getStartServices())[0].notifications,
+          overlays: (await core.getStartServices())[0].overlays,
+          savedObject: (await core.getStartServices())[0].savedObjects,
+        })
+      )
     );
 
-    deps.embeddable.registerEmbeddableFactory<TodoInput, TodoOutput>(
-      TODO_EMBEDDABLE,
-      new TodoEmbeddableFactory(async () => ({
+    /**
+     * This embeddable is a version of the Todo embeddable, but one that is backed, optionally,
+     * off a saved object.
+     */
+    deps.embeddable.registerEmbeddableFactory<TodoSoEmbeddableInput, EmbeddableOutput>(
+      TODO_SO_EMBEDDABLE,
+      new TodoSoEmbeddableFactory(async () => ({
         openModal: (await core.getStartServices())[0].overlays.openModal,
+        savedObjectsClient: (await core.getStartServices())[0].savedObjects.client,
+        getEmbeddableFactory: (await core.getStartServices())[1].embeddable.getEmbeddableFactory,
       }))
     );
+
+    const editTodoAction = createEditTodoAction(async () => ({
+      openModal: (await core.getStartServices())[0].overlays.openModal,
+      savedObjectsClient: (await core.getStartServices())[0].savedObjects.client,
+      getEmbeddableFactory: (await core.getStartServices())[1].embeddable.getEmbeddableFactory,
+    }));
+    deps.uiActions.registerAction(editTodoAction);
+    deps.uiActions.attachAction(CONTEXT_MENU_TRIGGER, editTodoAction);
   }
 
-  public start(core: CoreStart, deps: EmbeddableExamplesStartDependencies) {}
+  public start(core: CoreStart, deps: EmbeddableExamplesStartDependencies) {
+    return {
+      createSampleData: (overwrite: boolean) =>
+        createSampleData(core.savedObjects.client, overwrite),
+    };
+  }
 
   public stop() {}
 }
diff --git a/examples/embeddable_examples/public/searchable_list_container/searchable_list_container.tsx b/examples/embeddable_examples/public/searchable_list_container/searchable_list_container.tsx
index 06462937c768d..67f58f63e92a2 100644
--- a/examples/embeddable_examples/public/searchable_list_container/searchable_list_container.tsx
+++ b/examples/embeddable_examples/public/searchable_list_container/searchable_list_container.tsx
@@ -21,10 +21,10 @@ import ReactDOM from 'react-dom';
 import {
   Container,
   ContainerInput,
-  EmbeddableStart,
   EmbeddableInput,
 } from '../../../../src/plugins/embeddable/public';
 import { SearchableListContainerComponent } from './searchable_list_container_component';
+import { StartServices } from './searchable_list_container_factory';
 
 export const SEARCHABLE_LIST_CONTAINER = 'SEARCHABLE_LIST_CONTAINER';
 
@@ -40,11 +40,8 @@ export class SearchableListContainer extends Container<ChildInput, SearchableCon
   public readonly type = SEARCHABLE_LIST_CONTAINER;
   private node?: HTMLElement;
 
-  constructor(
-    input: SearchableContainerInput,
-    getEmbeddableFactory: EmbeddableStart['getEmbeddableFactory']
-  ) {
-    super(input, { embeddableLoaded: {} }, getEmbeddableFactory);
+  constructor(input: SearchableContainerInput, private services: StartServices) {
+    super(input, { embeddableLoaded: {} }, services.getEmbeddableFactory);
   }
 
   // TODO: add a more advanced example here where inherited child input is derived from container
@@ -53,6 +50,7 @@ export class SearchableListContainer extends Container<ChildInput, SearchableCon
     return {
       id,
       search: this.getInput().search,
+      viewMode: this.getInput().viewMode,
     };
   }
 
@@ -61,7 +59,10 @@ export class SearchableListContainer extends Container<ChildInput, SearchableCon
       ReactDOM.unmountComponentAtNode(this.node);
     }
     this.node = node;
-    ReactDOM.render(<SearchableListContainerComponent embeddable={this} />, node);
+    ReactDOM.render(
+      <SearchableListContainerComponent embeddable={this} services={this.services} />,
+      node
+    );
   }
 
   public destroy() {
diff --git a/examples/embeddable_examples/public/searchable_list_container/searchable_list_container_component.tsx b/examples/embeddable_examples/public/searchable_list_container/searchable_list_container_component.tsx
index b79f86e2a0192..0fc2b05aa61b4 100644
--- a/examples/embeddable_examples/public/searchable_list_container/searchable_list_container_component.tsx
+++ b/examples/embeddable_examples/public/searchable_list_container/searchable_list_container_component.tsx
@@ -37,11 +37,13 @@ import {
 } from '../../../../src/plugins/embeddable/public';
 import { EmbeddableListItem } from '../list_container/embeddable_list_item';
 import { SearchableListContainer, SearchableContainerInput } from './searchable_list_container';
+import { StartServices } from './searchable_list_container_factory';
 
 interface Props {
   embeddable: SearchableListContainer;
   input: SearchableContainerInput;
   output: ContainerOutput;
+  services: StartServices;
 }
 
 interface State {
@@ -160,7 +162,7 @@ export class SearchableListContainerComponentInner extends Component<Props, Stat
       id++;
       return embeddable ? (
         <EuiPanel key={embeddable.id}>
-          <EuiFlexGroup>
+          <EuiFlexGroup gutterSize="none">
             <EuiFlexItem grow={false}>
               <EuiCheckbox
                 data-test-subj={`todoCheckBox-${embeddable.id}`}
@@ -171,7 +173,7 @@ export class SearchableListContainerComponentInner extends Component<Props, Stat
               />
             </EuiFlexItem>
             <EuiFlexItem>
-              <EmbeddableListItem embeddable={embeddable} />
+              <EmbeddableListItem embeddable={embeddable} {...this.props.services} />
             </EuiFlexItem>
           </EuiFlexGroup>
         </EuiPanel>
@@ -183,6 +185,9 @@ export class SearchableListContainerComponentInner extends Component<Props, Stat
   }
 }
 
-export const SearchableListContainerComponent = withEmbeddableSubscription(
-  SearchableListContainerComponentInner
-);
+export const SearchableListContainerComponent = withEmbeddableSubscription<
+  SearchableContainerInput,
+  ContainerOutput,
+  SearchableListContainer,
+  { services: StartServices }
+>(SearchableListContainerComponentInner);
diff --git a/examples/embeddable_examples/public/searchable_list_container/searchable_list_container_factory.ts b/examples/embeddable_examples/public/searchable_list_container/searchable_list_container_factory.ts
index 79859cc015a80..bf7ea3ef2932f 100644
--- a/examples/embeddable_examples/public/searchable_list_container/searchable_list_container_factory.ts
+++ b/examples/embeddable_examples/public/searchable_list_container/searchable_list_container_factory.ts
@@ -18,6 +18,9 @@
  */
 
 import { i18n } from '@kbn/i18n';
+import { UiActionsStart } from 'src/plugins/ui_actions/public';
+import { OverlayStart, CoreStart, SavedObjectsStart, IUiSettingsClient } from 'kibana/public';
+import { Start as InspectorStart } from 'src/plugins/inspector/public';
 import { EmbeddableFactory, EmbeddableStart } from '../../../../src/plugins/embeddable/public';
 import {
   SEARCHABLE_LIST_CONTAINER,
@@ -25,8 +28,15 @@ import {
   SearchableContainerInput,
 } from './searchable_list_container';
 
-interface StartServices {
+export interface StartServices {
+  getAllEmbeddableFactories: EmbeddableStart['getEmbeddableFactories'];
   getEmbeddableFactory: EmbeddableStart['getEmbeddableFactory'];
+  uiActionsApi: UiActionsStart;
+  overlays: OverlayStart;
+  notifications: CoreStart['notifications'];
+  inspector: InspectorStart;
+  savedObject: SavedObjectsStart;
+  uiSettingsClient: IUiSettingsClient;
 }
 
 export class SearchableListContainerFactory extends EmbeddableFactory {
@@ -42,8 +52,8 @@ export class SearchableListContainerFactory extends EmbeddableFactory {
   }
 
   public async create(initialInput: SearchableContainerInput) {
-    const { getEmbeddableFactory } = await this.getStartServices();
-    return new SearchableListContainer(initialInput, getEmbeddableFactory);
+    const services = await this.getStartServices();
+    return new SearchableListContainer(initialInput, services);
   }
 
   public getDisplayName() {
diff --git a/examples/embeddable_examples/public/todo/todo_component.tsx b/examples/embeddable_examples/public/todo/todo_component.tsx
index fbebfc98627b5..fa84c317f6026 100644
--- a/examples/embeddable_examples/public/todo/todo_component.tsx
+++ b/examples/embeddable_examples/public/todo/todo_component.tsx
@@ -27,7 +27,7 @@ import {
   withEmbeddableSubscription,
   EmbeddableOutput,
 } from '../../../../src/plugins/embeddable/public';
-import { TodoEmbeddable, TodoInput } from './todo_embeddable';
+import { TodoEmbeddable, TodoInput, TodoOutput } from './todo_embeddable';
 
 interface Props {
   embeddable: TodoEmbeddable;
@@ -51,7 +51,7 @@ function wrapSearchTerms(task: string, search?: string) {
 
 export function TodoEmbeddableComponentInner({ input: { icon, title, task, search } }: Props) {
   return (
-    <EuiFlexGroup>
+    <EuiFlexGroup gutterSize="none">
       <EuiFlexItem grow={false}>
         {icon ? <EuiIcon type={icon} size="l" /> : <EuiAvatar name={title || task} size="l" />}
       </EuiFlexItem>
@@ -71,4 +71,9 @@ export function TodoEmbeddableComponentInner({ input: { icon, title, task, searc
   );
 }
 
-export const TodoEmbeddableComponent = withEmbeddableSubscription(TodoEmbeddableComponentInner);
+export const TodoEmbeddableComponent = withEmbeddableSubscription<
+  TodoInput,
+  TodoOutput,
+  TodoEmbeddable,
+  {}
+>(TodoEmbeddableComponentInner);
diff --git a/examples/embeddable_examples/public/todo_saved_object/create_edit_todo_component.tsx b/examples/embeddable_examples/public/todo_saved_object/create_edit_todo_component.tsx
new file mode 100644
index 0000000000000..29839dc2f0f80
--- /dev/null
+++ b/examples/embeddable_examples/public/todo_saved_object/create_edit_todo_component.tsx
@@ -0,0 +1,83 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import React, { useState } from 'react';
+import { EuiModalBody } from '@elastic/eui';
+import { EuiFieldText } from '@elastic/eui';
+import { EuiButton } from '@elastic/eui';
+import { EuiModalFooter } from '@elastic/eui';
+import { TodoSavedObjectAttributes } from 'examples/embeddable_examples/common';
+import { EuiModalHeader } from '@elastic/eui';
+import { EuiFormRow } from '@elastic/eui';
+
+export function CreateEditTodoComponent({
+  savedObjectId,
+  attributes,
+  onSave,
+}: {
+  savedObjectId?: string;
+  attributes?: TodoSavedObjectAttributes;
+  onSave: (attributes: TodoSavedObjectAttributes, saveToLibrary: boolean) => void;
+}) {
+  const [task, setTask] = useState(attributes?.task ?? '');
+  const [title, setTitle] = useState(attributes?.title ?? '');
+  return (
+    <EuiModalBody>
+      <EuiModalHeader>
+        <h1>{`${savedObjectId ? 'Create new ' : 'Edit '} todo item`}</h1>
+      </EuiModalHeader>
+      <EuiModalBody>
+        <EuiFormRow label="Title">
+          <EuiFieldText
+            data-test-subj="titleInputField"
+            value={title}
+            placeholder="Enter title here"
+            onChange={e => setTitle(e.target.value)}
+          />
+        </EuiFormRow>
+
+        <EuiFormRow label="Task">
+          <EuiFieldText
+            data-test-subj="taskInputField"
+            value={task}
+            placeholder="Enter task here"
+            onChange={e => setTask(e.target.value)}
+          />
+        </EuiFormRow>
+      </EuiModalBody>
+      <EuiModalFooter>
+        {savedObjectId === undefined ? (
+          <EuiButton
+            data-test-subj="saveTodoEmbeddableByValue"
+            disabled={task === ''}
+            onClick={() => onSave({ task, title }, false)}
+          >
+            Save
+          </EuiButton>
+        ) : null}
+        <EuiButton
+          data-test-subj="saveTodoEmbeddableByRef"
+          disabled={task === ''}
+          onClick={() => onSave({ task, title }, true)}
+        >
+          {savedObjectId ? 'Update library item' : 'Save to library'}
+        </EuiButton>
+      </EuiModalFooter>
+    </EuiModalBody>
+  );
+}
diff --git a/examples/embeddable_examples/public/todo_saved_object/edit_todo_action.tsx b/examples/embeddable_examples/public/todo_saved_object/edit_todo_action.tsx
new file mode 100644
index 0000000000000..328440a7fe104
--- /dev/null
+++ b/examples/embeddable_examples/public/todo_saved_object/edit_todo_action.tsx
@@ -0,0 +1,83 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import React from 'react';
+import { OverlayStart, SavedObjectsClientContract } from 'kibana/public';
+import { TodoSavedObjectAttributes } from 'examples/embeddable_examples/common';
+import { i18n } from '@kbn/i18n';
+import { createAction } from '../../../../src/plugins/ui_actions/public';
+import { toMountPoint } from '../../../../src/plugins/kibana_react/public';
+import { ViewMode } from '../../../../src/plugins/embeddable/public';
+import { CreateEditTodoComponent } from './create_edit_todo_component';
+import { TodoSoEmbeddable, TODO_SO_EMBEDDABLE } from './todo_so_embeddable';
+
+interface StartServices {
+  openModal: OverlayStart['openModal'];
+  savedObjectsClient: SavedObjectsClientContract;
+}
+
+interface ActionContext {
+  embeddable: TodoSoEmbeddable;
+}
+
+export const EDIT_TODO_ACTION = 'EDIT_TODO_ACTION';
+
+export const createEditTodoAction = (getStartServices: () => Promise<StartServices>) =>
+  createAction({
+    getDisplayName: () =>
+      i18n.translate('embeddableExamples.todo.edit', { defaultMessage: 'Edit' }),
+    type: EDIT_TODO_ACTION,
+    isCompatible: async ({ embeddable }: ActionContext) => {
+      return (
+        embeddable.type === TODO_SO_EMBEDDABLE && embeddable.getInput().viewMode === ViewMode.EDIT
+      );
+    },
+    execute: async ({ embeddable }: ActionContext) => {
+      const { openModal, savedObjectsClient } = await getStartServices();
+      const onSave = async (attributes: TodoSavedObjectAttributes, includeInLibrary: boolean) => {
+        if (includeInLibrary) {
+          if (embeddable.getInput().savedObjectId) {
+            await savedObjectsClient.update(
+              'todo',
+              embeddable.getInput().savedObjectId!,
+              attributes
+            );
+            embeddable.updateInput({ attributes: undefined });
+            embeddable.reload();
+          } else {
+            const savedItem = await savedObjectsClient.create('todo', attributes);
+            embeddable.updateInput({ savedObjectId: savedItem.id });
+          }
+        } else {
+          embeddable.updateInput({ attributes });
+        }
+      };
+      const overlay = openModal(
+        toMountPoint(
+          <CreateEditTodoComponent
+            savedObjectId={embeddable.getInput().savedObjectId}
+            attributes={embeddable.getInput().attributes ?? embeddable.getOutput().savedAttributes}
+            onSave={(attributes: TodoSavedObjectAttributes, includeInLibrary: boolean) => {
+              overlay.close();
+              onSave(attributes, includeInLibrary);
+            }}
+          />
+        )
+      );
+    },
+  });
diff --git a/examples/embeddable_examples/public/todo_saved_object/index.ts b/examples/embeddable_examples/public/todo_saved_object/index.ts
new file mode 100644
index 0000000000000..5911e92b8f857
--- /dev/null
+++ b/examples/embeddable_examples/public/todo_saved_object/index.ts
@@ -0,0 +1,22 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+export * from './todo_so_embeddable';
+export * from './todo_so_embeddable_factory';
+export * from './edit_todo_action';
diff --git a/examples/embeddable_examples/public/todo_saved_object/todo_so_component.tsx b/examples/embeddable_examples/public/todo_saved_object/todo_so_component.tsx
new file mode 100644
index 0000000000000..18f75b630aab4
--- /dev/null
+++ b/examples/embeddable_examples/public/todo_saved_object/todo_so_component.tsx
@@ -0,0 +1,93 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import React from 'react';
+import { EuiFlexItem, EuiFlexGroup } from '@elastic/eui';
+
+import { EuiText } from '@elastic/eui';
+import { EuiAvatar } from '@elastic/eui';
+import { EuiIcon } from '@elastic/eui';
+import { EuiFlexGrid } from '@elastic/eui';
+import {
+  withEmbeddableSubscription,
+  EmbeddableOutput,
+} from '../../../../src/plugins/embeddable/public';
+import {
+  TodoSoEmbeddable,
+  TodoSoEmbeddableInput,
+  getTask,
+  getTitle,
+  getIcon,
+  TodoSoEmbeddableOutput,
+} from './todo_so_embeddable';
+
+interface Props {
+  embeddable: TodoSoEmbeddable;
+  input: TodoSoEmbeddableInput;
+  output: EmbeddableOutput;
+}
+
+function wrapSearchTerms(task?: string, search?: string) {
+  if (!search || !task) return task;
+  const parts = task.split(new RegExp(`(${search})`, 'g'));
+  return parts.map((part, i) =>
+    part === search ? (
+      <span key={i} style={{ backgroundColor: 'yellow' }}>
+        {part}
+      </span>
+    ) : (
+      part
+    )
+  );
+}
+
+export function TodoSoEmbeddableComponentInner({ input: { search }, embeddable }: Props) {
+  const task = getTask(embeddable);
+  const title = getTitle(embeddable);
+  const icon = getIcon(embeddable);
+  return (
+    <EuiFlexGroup gutterSize="none">
+      <EuiFlexItem grow={false}>
+        {icon ? (
+          <EuiIcon type={icon ?? ''} size="l" />
+        ) : (
+          <EuiAvatar name={title ?? task ?? ''} size="l" />
+        )}
+      </EuiFlexItem>
+      <EuiFlexItem>
+        <EuiFlexGrid columns={1} gutterSize="none">
+          <EuiFlexItem>
+            <EuiText data-test-subj="todoSoEmbeddableTitle">
+              <h3>{wrapSearchTerms(title || '', search)}</h3>
+            </EuiText>
+          </EuiFlexItem>
+          <EuiFlexItem>
+            <EuiText data-test-subj="todoSoEmbeddableTask">{wrapSearchTerms(task, search)}</EuiText>
+          </EuiFlexItem>
+        </EuiFlexGrid>
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+}
+
+export const TodoSoEmbeddableComponent = withEmbeddableSubscription<
+  TodoSoEmbeddableInput,
+  TodoSoEmbeddableOutput,
+  TodoSoEmbeddable,
+  {}
+>(TodoSoEmbeddableComponentInner);
diff --git a/examples/embeddable_examples/public/todo_saved_object/todo_so_embeddable.tsx b/examples/embeddable_examples/public/todo_saved_object/todo_so_embeddable.tsx
new file mode 100644
index 0000000000000..4db6a3d93b27a
--- /dev/null
+++ b/examples/embeddable_examples/public/todo_saved_object/todo_so_embeddable.tsx
@@ -0,0 +1,145 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Subscription } from 'rxjs';
+import * as Rx from 'rxjs';
+import { SavedObjectsClientContract } from 'kibana/public';
+import { TodoSavedObjectAttributes } from '../../common';
+import {
+  Embeddable,
+  IContainer,
+  EmbeddableOutput,
+  SavedObjectEmbeddableInput,
+} from '../../../../src/plugins/embeddable/public';
+import { TodoSoEmbeddableComponent } from './todo_so_component';
+
+// Notice this is not the same value as the 'todo' saved object type. Many of our
+// cases in prod today use the same value, but this is unnecessary.
+export const TODO_SO_EMBEDDABLE = 'TODO_SO_EMBEDDABLE';
+
+export function getTitle(note: TodoSoEmbeddable): string | undefined {
+  const title = note.getInput().attributes?.title;
+  const savedTitle = note.getOutput().savedAttributes?.title;
+
+  return title || savedTitle;
+}
+
+export function getTask(note: TodoSoEmbeddable): string | undefined {
+  const unsavedTask = note.getInput().attributes?.task;
+  const savedTask = note.getOutput().savedAttributes?.task;
+
+  return unsavedTask || savedTask;
+}
+
+export function getIcon(note: TodoSoEmbeddable): string | undefined {
+  const icon = note.getInput().attributes?.icon;
+  const savedIcon = note.getOutput().savedAttributes?.icon;
+
+  return icon || savedIcon;
+}
+
+export interface TodoSoEmbeddableInput extends SavedObjectEmbeddableInput {
+  search?: string;
+  attributes?: TodoSavedObjectAttributes;
+}
+
+export interface TodoSoEmbeddableOutput extends EmbeddableOutput {
+  hasMatch: boolean;
+  savedAttributes?: TodoSavedObjectAttributes;
+}
+
+function getHasMatch(todo: TodoSoEmbeddable): boolean {
+  const task = getTask(todo);
+  const title = getTitle(todo);
+  const { search } = todo.getInput();
+  if (!search) return true;
+  if (!task) return false;
+  return todo.getInput().search ? Boolean(task?.match(search) || title?.match(search)) : true;
+}
+
+/**
+ * This is an example of an embeddable that can optionally be backed by a saved object.
+ */
+
+export class TodoSoEmbeddable extends Embeddable<TodoSoEmbeddableInput, TodoSoEmbeddableOutput> {
+  public readonly type = TODO_SO_EMBEDDABLE;
+  private subscription: Subscription;
+  private node?: HTMLElement;
+  private savedObjectsClient: SavedObjectsClientContract;
+  private savedObjectId?: string;
+
+  constructor(
+    initialInput: TodoSoEmbeddableInput,
+    {
+      parent,
+      savedObjectsClient,
+    }: {
+      parent?: IContainer;
+      savedObjectsClient: SavedObjectsClientContract;
+    }
+  ) {
+    super(initialInput, { hasMatch: false, defaultTitle: initialInput.attributes?.title }, parent);
+    this.savedObjectsClient = savedObjectsClient;
+
+    this.subscription = Rx.merge(this.getOutput$(), this.getInput$()).subscribe(async () => {
+      const { savedObjectId } = this.getInput();
+      if (this.savedObjectId !== savedObjectId) {
+        this.savedObjectId = savedObjectId;
+        if (savedObjectId !== undefined) {
+          this.reload();
+        }
+      }
+    });
+  }
+
+  public render(node: HTMLElement) {
+    this.node = node;
+    if (this.node) {
+      ReactDOM.unmountComponentAtNode(this.node);
+    }
+    ReactDOM.render(<TodoSoEmbeddableComponent embeddable={this} />, node);
+  }
+
+  public async reload() {
+    if (this.savedObjectId !== undefined) {
+      const savedObject = await this.savedObjectsClient.get<TodoSavedObjectAttributes>(
+        'todo',
+        this.savedObjectId
+      );
+      this.updateOutput({
+        hasMatch: getHasMatch(this),
+        savedAttributes: savedObject.attributes,
+        defaultTitle: savedObject.attributes.title,
+        title: this.input.hidePanelTitles ? '' : savedObject.attributes.title,
+      });
+      if (this.node) {
+        this.render(this.node);
+      }
+    }
+  }
+
+  public destroy() {
+    super.destroy();
+    this.subscription.unsubscribe();
+    if (this.node) {
+      ReactDOM.unmountComponentAtNode(this.node);
+    }
+  }
+}
diff --git a/examples/embeddable_examples/public/todo_saved_object/todo_so_embeddable_factory.tsx b/examples/embeddable_examples/public/todo_saved_object/todo_so_embeddable_factory.tsx
new file mode 100644
index 0000000000000..1661d3eb6df4d
--- /dev/null
+++ b/examples/embeddable_examples/public/todo_saved_object/todo_so_embeddable_factory.tsx
@@ -0,0 +1,157 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React from 'react';
+import { i18n } from '@kbn/i18n';
+import { SavedObjectsClientContract, OverlayStart } from 'kibana/public';
+import { TodoSavedObjectAttributes } from '../../common';
+import { toMountPoint } from '../../../../src/plugins/kibana_react/public';
+import {
+  IContainer,
+  SavedObjectEmbeddableFactory,
+  EmbeddableStart,
+  ErrorEmbeddable,
+} from '../../../../src/plugins/embeddable/public';
+import {
+  TodoSoEmbeddable,
+  TODO_SO_EMBEDDABLE,
+  TodoSoEmbeddableInput,
+  TodoSoEmbeddableOutput,
+} from './todo_so_embeddable';
+import { CreateEditTodoComponent } from './create_edit_todo_component';
+
+interface StartServices {
+  getEmbeddableFactory: EmbeddableStart['getEmbeddableFactory'];
+  savedObjectsClient: SavedObjectsClientContract;
+  openModal: OverlayStart['openModal'];
+}
+
+export class TodoSoEmbeddableFactory extends SavedObjectEmbeddableFactory<
+  TodoSoEmbeddableInput,
+  TodoSoEmbeddableOutput,
+  TodoSoEmbeddable,
+  TodoSavedObjectAttributes
+> {
+  public readonly type = TODO_SO_EMBEDDABLE;
+
+  constructor(private getStartServices: () => Promise<StartServices>) {
+    super({
+      savedObjectMetaData: {
+        name: 'Todo',
+        includeFields: ['task'],
+        type: 'todo',
+        getIconForSavedObject: () => 'pencil',
+      },
+    });
+  }
+
+  public async isEditable() {
+    return true;
+  }
+
+  canSave = (todoEmbeddable: TodoSoEmbeddable) => {
+    const { attributes } = todoEmbeddable.getInput();
+    const { savedAttributes } = todoEmbeddable.getOutput();
+
+    if (!savedAttributes && attributes && attributes.task) return true;
+
+    if (savedAttributes && !_.isEqual(savedAttributes, attributes)) return true;
+
+    return false;
+  };
+
+  save = async (todoEmbeddable: TodoSoEmbeddable) => {
+    const { savedObjectsClient } = await this.getStartServices();
+    const { attributes, savedObjectId } = todoEmbeddable.getInput();
+    if (!todoEmbeddable.getInput().savedObjectId) {
+      return savedObjectsClient.create(this.savedObjectMetaData.type, {
+        ...attributes,
+      });
+    } else if (savedObjectId) {
+      return savedObjectsClient.update(this.savedObjectMetaData.type, savedObjectId, {
+        ...(todoEmbeddable.getOutput().savedAttributes ?? {}),
+        ...attributes,
+      });
+    }
+    throw new Error('something went wrong');
+  };
+
+  public createFromSavedObject = async (
+    savedObjectId: string,
+    input: Partial<TodoSoEmbeddableInput> & { id: string },
+    parent?: IContainer
+  ): Promise<TodoSoEmbeddable | ErrorEmbeddable> => {
+    const { savedObjectsClient } = await this.getStartServices();
+    const todoSavedObject = await savedObjectsClient.get<TodoSavedObjectAttributes>(
+      'todo',
+      savedObjectId
+    );
+    return this.create({ ...input, savedObjectId, attributes: todoSavedObject.attributes }, parent);
+  };
+
+  public async create(initialInput: TodoSoEmbeddableInput, parent?: IContainer) {
+    const { savedObjectsClient } = await this.getStartServices();
+    return new TodoSoEmbeddable(initialInput, {
+      parent,
+      savedObjectsClient,
+    });
+  }
+
+  public getDisplayName() {
+    return i18n.translate('embeddableExamples.todo.displayName', {
+      defaultMessage: 'Todo item (optionally backed by saved object)',
+    });
+  }
+
+  /**
+   * This function is used when dynamically creating a new embeddable to add to a
+   * container. Some input may be inherited from the container, but not all. This can be
+   * used to collect specific embeddable input that the container will not provide, like
+   * in this case, the task string.
+   */
+  public async getExplicitInput(): Promise<{
+    savedObjectId?: string;
+    attributes?: { task: string };
+  }> {
+    const { openModal, savedObjectsClient } = await this.getStartServices();
+    return new Promise<{
+      savedObjectId?: string;
+      attributes?: { task: string };
+    }>(resolve => {
+      const onSave = async (attributes: TodoSavedObjectAttributes, includeInLibrary: boolean) => {
+        if (includeInLibrary) {
+          const savedItem = await savedObjectsClient.create('todo', attributes);
+          resolve({ savedObjectId: savedItem.id });
+        } else {
+          resolve({ attributes });
+        }
+      };
+      const overlay = openModal(
+        toMountPoint(
+          <CreateEditTodoComponent
+            onSave={(attributes: TodoSavedObjectAttributes, includeInLibrary: boolean) => {
+              onSave(attributes, includeInLibrary);
+              overlay.close();
+            }}
+          />
+        )
+      );
+    });
+  }
+}
diff --git a/examples/embeddable_examples/server/index.ts b/examples/embeddable_examples/server/index.ts
new file mode 100644
index 0000000000000..9ddc3bc2cf715
--- /dev/null
+++ b/examples/embeddable_examples/server/index.ts
@@ -0,0 +1,24 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { PluginInitializer } from 'kibana/server';
+
+import { EmbeddableExamplesPlugin } from './plugin';
+
+export const plugin: PluginInitializer<void, void> = () => new EmbeddableExamplesPlugin();
diff --git a/examples/embeddable_examples/server/plugin.ts b/examples/embeddable_examples/server/plugin.ts
new file mode 100644
index 0000000000000..d956b834d0d3c
--- /dev/null
+++ b/examples/embeddable_examples/server/plugin.ts
@@ -0,0 +1,31 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { Plugin, CoreSetup, CoreStart } from 'kibana/server';
+import { todoSavedObject } from './todo_saved_object';
+
+export class EmbeddableExamplesPlugin implements Plugin {
+  public setup(core: CoreSetup) {
+    core.savedObjects.registerType(todoSavedObject);
+  }
+
+  public start(core: CoreStart) {}
+
+  public stop() {}
+}
diff --git a/examples/embeddable_examples/server/todo_saved_object.ts b/examples/embeddable_examples/server/todo_saved_object.ts
new file mode 100644
index 0000000000000..0f67c53cfa3e1
--- /dev/null
+++ b/examples/embeddable_examples/server/todo_saved_object.ts
@@ -0,0 +1,40 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { SavedObjectsType } from 'kibana/server';
+
+export const todoSavedObject: SavedObjectsType = {
+  name: 'todo',
+  hidden: false,
+  namespaceAgnostic: true,
+  mappings: {
+    properties: {
+      title: {
+        type: 'keyword',
+      },
+      task: {
+        type: 'text',
+      },
+      icon: {
+        type: 'keyword',
+      },
+    },
+  },
+  migrations: {},
+};
diff --git a/examples/embeddable_examples/tsconfig.json b/examples/embeddable_examples/tsconfig.json
index 091130487791b..7fa03739119b4 100644
--- a/examples/embeddable_examples/tsconfig.json
+++ b/examples/embeddable_examples/tsconfig.json
@@ -6,6 +6,7 @@
   },
   "include": [
     "index.ts",
+    "common/**/*.ts",
     "public/**/*.ts",
     "public/**/*.tsx",
     "server/**/*.ts",
diff --git a/examples/embeddable_explorer/public/app.tsx b/examples/embeddable_explorer/public/app.tsx
index 9c8568454855d..9da3f441c49e4 100644
--- a/examples/embeddable_explorer/public/app.tsx
+++ b/examples/embeddable_explorer/public/app.tsx
@@ -23,6 +23,7 @@ import { BrowserRouter as Router, Route, withRouter, RouteComponentProps } from
 
 import { EuiPage, EuiPageSideBar, EuiSideNav } from '@elastic/eui';
 
+import { EmbeddableExamplesStart } from 'examples/embeddable_examples/public/plugin';
 import { EmbeddableStart } from '../../../src/plugins/embeddable/public';
 import { UiActionsStart } from '../../../src/plugins/ui_actions/public';
 import { Start as InspectorStartContract } from '../../../src/plugins/inspector/public';
@@ -38,6 +39,7 @@ import { HelloWorldEmbeddableExample } from './hello_world_embeddable_example';
 import { TodoEmbeddableExample } from './todo_embeddable_example';
 import { ListContainerExample } from './list_container_example';
 import { EmbeddablePanelExample } from './embeddable_panel_example';
+import { SavedObjectEmbeddableExample } from './saved_object_embeddable_example';
 
 interface PageDef {
   title: string;
@@ -81,6 +83,7 @@ interface Props {
   inspector: InspectorStartContract;
   savedObject: SavedObjectsStart;
   uiSettingsClient: IUiSettingsClient;
+  createSampleData: EmbeddableExamplesStart['createSampleData'];
 }
 
 const EmbeddableExplorerApp = ({
@@ -93,6 +96,7 @@ const EmbeddableExplorerApp = ({
   overlays,
   uiActionsApi,
   notifications,
+  createSampleData,
 }: Props) => {
   const pages: PageDef[] = [
     {
@@ -130,6 +134,23 @@ const EmbeddableExplorerApp = ({
         />
       ),
     },
+    {
+      title: 'Embeddables backed by saved objects',
+      id: 'savedObjectSection',
+      component: (
+        <SavedObjectEmbeddableExample
+          uiActionsApi={uiActionsApi}
+          getAllEmbeddableFactories={embeddableApi.getEmbeddableFactories}
+          getEmbeddableFactory={embeddableApi.getEmbeddableFactory}
+          overlays={overlays}
+          uiSettingsClient={uiSettingsClient}
+          savedObject={savedObject}
+          notifications={notifications}
+          inspector={inspector}
+          createSampleData={createSampleData}
+        />
+      ),
+    },
   ];
 
   const routes = pages.map((page, i) => (
diff --git a/examples/embeddable_explorer/public/embeddable_panel_example.tsx b/examples/embeddable_explorer/public/embeddable_panel_example.tsx
index b26111bed7ff2..85bd597d5cee5 100644
--- a/examples/embeddable_explorer/public/embeddable_panel_example.tsx
+++ b/examples/embeddable_explorer/public/embeddable_panel_example.tsx
@@ -34,6 +34,7 @@ import {
   EmbeddablePanel,
   EmbeddableStart,
   IEmbeddable,
+  ViewMode,
 } from '../../../src/plugins/embeddable/public';
 import {
   HELLO_WORLD_EMBEDDABLE,
@@ -69,6 +70,7 @@ export function EmbeddablePanelExample({
   const searchableInput = {
     id: '1',
     title: 'My searchable todo list',
+    viewMode: ViewMode.EDIT,
     panels: {
       '1': {
         type: HELLO_WORLD_EMBEDDABLE,
diff --git a/examples/embeddable_explorer/public/plugin.tsx b/examples/embeddable_explorer/public/plugin.tsx
index 7c75b108d9912..fe6387e9cb11e 100644
--- a/examples/embeddable_explorer/public/plugin.tsx
+++ b/examples/embeddable_explorer/public/plugin.tsx
@@ -18,6 +18,7 @@
  */
 
 import { Plugin, CoreSetup, AppMountParameters } from 'kibana/public';
+import { EmbeddableExamplesStart } from 'examples/embeddable_examples/public/plugin';
 import { UiActionsService } from '../../../src/plugins/ui_actions/public';
 import { EmbeddableStart } from '../../../src/plugins/embeddable/public';
 import { Start as InspectorStart } from '../../../src/plugins/inspector/public';
@@ -26,6 +27,7 @@ interface StartDeps {
   uiActions: UiActionsService;
   embeddable: EmbeddableStart;
   inspector: InspectorStart;
+  embeddableExamples: EmbeddableExamplesStart;
 }
 
 export class EmbeddableExplorerPlugin implements Plugin<void, void, {}, StartDeps> {
@@ -47,6 +49,7 @@ export class EmbeddableExplorerPlugin implements Plugin<void, void, {}, StartDep
             savedObject: coreStart.savedObjects,
             overlays: coreStart.overlays,
             navigateToApp: coreStart.application.navigateToApp,
+            createSampleData: depsStart.embeddableExamples.createSampleData,
           },
           params.element
         );
diff --git a/examples/embeddable_explorer/public/saved_object_embeddable_example.tsx b/examples/embeddable_explorer/public/saved_object_embeddable_example.tsx
new file mode 100644
index 0000000000000..6a8ed7eedbe6d
--- /dev/null
+++ b/examples/embeddable_explorer/public/saved_object_embeddable_example.tsx
@@ -0,0 +1,221 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React, { useState, useRef, useEffect } from 'react';
+import {
+  EuiPageBody,
+  EuiPageContent,
+  EuiPageContentBody,
+  EuiPageHeader,
+  EuiPageHeaderSection,
+  EuiTitle,
+  EuiText,
+} from '@elastic/eui';
+import { EuiSpacer } from '@elastic/eui';
+import { OverlayStart, CoreStart, IUiSettingsClient, SavedObjectsStart } from 'kibana/public';
+import { EmbeddableExamplesStart } from 'examples/embeddable_examples/public/plugin';
+import { EuiButton } from '@elastic/eui';
+import { EuiLoadingSpinner } from '@elastic/eui';
+import { UiActionsStart } from '../../../src/plugins/ui_actions/public';
+import { Start as InspectorStart } from '../../../src/plugins/inspector/public';
+import { getSavedObjectFinder } from '../../../src/plugins/saved_objects/public';
+import {
+  EmbeddableStart,
+  ViewMode,
+  EmbeddablePanel,
+  IEmbeddable,
+} from '../../../src/plugins/embeddable/public';
+import {
+  TODO_SO_EMBEDDABLE,
+  TodoSoEmbeddableOutput,
+  TodoSoEmbeddable,
+  SEARCHABLE_LIST_CONTAINER,
+  TodoSoEmbeddableInput,
+} from '../../embeddable_examples/public';
+
+interface Props {
+  getAllEmbeddableFactories: EmbeddableStart['getEmbeddableFactories'];
+  getEmbeddableFactory: EmbeddableStart['getEmbeddableFactory'];
+  uiActionsApi: UiActionsStart;
+  overlays: OverlayStart;
+  notifications: CoreStart['notifications'];
+  inspector: InspectorStart;
+  savedObject: SavedObjectsStart;
+  uiSettingsClient: IUiSettingsClient;
+  createSampleData: EmbeddableExamplesStart['createSampleData'];
+}
+
+export function SavedObjectEmbeddableExample({
+  inspector,
+  notifications,
+  overlays,
+  getAllEmbeddableFactories,
+  getEmbeddableFactory,
+  uiActionsApi,
+  savedObject,
+  uiSettingsClient,
+  createSampleData,
+}: Props) {
+  const searchableInput = {
+    id: '1',
+    title: 'My searchable todo list',
+    viewMode: ViewMode.EDIT,
+    panels: {
+      '1': {
+        type: TODO_SO_EMBEDDABLE,
+        explicitInput: {
+          id: '1',
+          savedObjectId: 'sample-todo-saved-object',
+          title: 'Overridden panel title',
+        },
+      },
+      '2': {
+        type: TODO_SO_EMBEDDABLE,
+        explicitInput: {
+          id: '2',
+          attributes: {
+            task:
+              'Goes out on Wednesdays!  You can save me as a saved object if you like. Just click the edit action.',
+            icon: 'broom',
+            title: 'Take out the trash (By value example)',
+          },
+        },
+      },
+    },
+  };
+
+  const [container, setContainer] = useState<IEmbeddable | undefined>(undefined);
+  const [embeddable, setEmbeddable] = useState<IEmbeddable | undefined>(undefined);
+  const [loading, setLoading] = useState<boolean>(false);
+
+  const ref = useRef(false);
+
+  useEffect(() => {
+    ref.current = true;
+    if (!container) {
+      const factory = getEmbeddableFactory(SEARCHABLE_LIST_CONTAINER);
+      const promise = factory?.create(searchableInput);
+      if (promise) {
+        promise.then(e => {
+          if (ref.current) {
+            setContainer(e);
+          }
+        });
+      }
+    }
+
+    if (!embeddable) {
+      const factory = getEmbeddableFactory<
+        TodoSoEmbeddableInput,
+        TodoSoEmbeddableOutput,
+        TodoSoEmbeddable
+      >(TODO_SO_EMBEDDABLE);
+      const promise = factory?.create({
+        savedObjectId: 'sample-todo-saved-object',
+        id: '123',
+        title: 'Garbage',
+      });
+      if (promise) {
+        promise.then(e => {
+          if (ref.current) {
+            setEmbeddable(e);
+          }
+        });
+      }
+    }
+    return () => {
+      ref.current = false;
+    };
+  });
+
+  const onCreateSampleDataClick = async () => {
+    setLoading(true);
+    await createSampleData(true);
+    if (embeddable) embeddable.reload();
+    if (container) container.reload();
+    setLoading(false);
+  };
+
+  return (
+    <EuiPageBody>
+      <EuiPageHeader>
+        <EuiPageHeaderSection>
+          <EuiTitle size="l">
+            <h1>Saved object embeddable example</h1>
+          </EuiTitle>
+        </EuiPageHeaderSection>
+      </EuiPageHeader>
+      <EuiPageContent>
+        <EuiPageContentBody>
+          <EuiText>
+            <EuiButton data-test-subj="reset-sample-data" onClick={onCreateSampleDataClick}>
+              {loading ? <EuiLoadingSpinner /> : 'Reset sample data'}
+            </EuiButton>
+            <p>
+              This example showcases an embeddable that is backed by a saved object. Click the
+              context meny and click Edit todo item to see how to edit and update the saved object.
+              Refreshing the page after editing this embeddable will preserve your edits.
+            </p>
+          </EuiText>
+
+          <EuiSpacer />
+          {embeddable ? (
+            <EmbeddablePanel
+              embeddable={embeddable}
+              getActions={uiActionsApi.getTriggerCompatibleActions}
+              getEmbeddableFactory={getEmbeddableFactory}
+              getAllEmbeddableFactories={getAllEmbeddableFactories}
+              overlays={overlays}
+              notifications={notifications}
+              inspector={inspector}
+              SavedObjectFinder={getSavedObjectFinder(savedObject, uiSettingsClient)}
+            />
+          ) : (
+            <EuiText>Loading...</EuiText>
+          )}
+          <EuiSpacer />
+          <EuiText>
+            <p>
+              This next example showcases another embeddable that is backed by a saved object, and
+              one that has children that can optionally be backed by a saved object. The first child
+              is linked to a saved object. The second child has input that does not include a saved
+              object id, so it is by value. Click the context menu and you can see how to turn the
+              by value version into a saved object.
+            </p>
+          </EuiText>
+          <EuiSpacer />
+          {container ? (
+            <EmbeddablePanel
+              embeddable={container}
+              getActions={uiActionsApi.getTriggerCompatibleActions}
+              getEmbeddableFactory={getEmbeddableFactory}
+              getAllEmbeddableFactories={getAllEmbeddableFactories}
+              overlays={overlays}
+              notifications={notifications}
+              inspector={inspector}
+              SavedObjectFinder={getSavedObjectFinder(savedObject, uiSettingsClient)}
+            />
+          ) : (
+            <EuiText>Loading...</EuiText>
+          )}
+        </EuiPageContentBody>
+      </EuiPageContent>
+    </EuiPageBody>
+  );
+}
diff --git a/examples/embeddable_explorer/public/todo_embeddable_example.tsx b/examples/embeddable_explorer/public/todo_embeddable_example.tsx
index ce92301236c2b..f09c45e578bef 100644
--- a/examples/embeddable_explorer/public/todo_embeddable_example.tsx
+++ b/examples/embeddable_explorer/public/todo_embeddable_example.tsx
@@ -113,7 +113,8 @@ export class TodoEmbeddableExample extends React.Component<Props, State> {
                 <code>
                   const &#123; task, title, icon &#125; = this.state;
                   <br />
-                  this.embeddable.updateInput(&#123; task, title, icon &#125;);
+                  this.embeddable.updateInput(&#123; attributes: &#123; task, title, icon &#125;
+                  &#125;);
                 </code>
               </pre>
               <p>
diff --git a/src/legacy/core_plugins/kibana/public/dashboard/np_ready/dashboard_app_controller.tsx b/src/legacy/core_plugins/kibana/public/dashboard/np_ready/dashboard_app_controller.tsx
index a39266ecd8db3..02e8738672a62 100644
--- a/src/legacy/core_plugins/kibana/public/dashboard/np_ready/dashboard_app_controller.tsx
+++ b/src/legacy/core_plugins/kibana/public/dashboard/np_ready/dashboard_app_controller.tsx
@@ -58,6 +58,7 @@ import {
   isErrorEmbeddable,
   openAddPanelFlyout,
   ViewMode,
+  SavedObjectEmbeddableInput,
 } from '../../../../../../plugins/embeddable/public';
 import { NavAction, SavedDashboardPanel } from './types';
 
@@ -374,7 +375,7 @@ export class DashboardAppController {
           if ($routeParams[DashboardConstants.ADD_EMBEDDABLE_TYPE]) {
             const type = $routeParams[DashboardConstants.ADD_EMBEDDABLE_TYPE];
             const id = $routeParams[DashboardConstants.ADD_EMBEDDABLE_ID];
-            container.addSavedObjectEmbeddable(type, id);
+            container.addNewEmbeddable<SavedObjectEmbeddableInput>(type, { savedObjectId: id });
             removeQueryParam(history, DashboardConstants.ADD_EMBEDDABLE_TYPE);
             removeQueryParam(history, DashboardConstants.ADD_EMBEDDABLE_ID);
           }
diff --git a/src/legacy/core_plugins/kibana/public/dashboard/np_ready/lib/embeddable_saved_object_converters.test.ts b/src/legacy/core_plugins/kibana/public/dashboard/np_ready/lib/embeddable_saved_object_converters.test.ts
index d3c3dc46c7057..1f8027f067307 100644
--- a/src/legacy/core_plugins/kibana/public/dashboard/np_ready/lib/embeddable_saved_object_converters.test.ts
+++ b/src/legacy/core_plugins/kibana/public/dashboard/np_ready/lib/embeddable_saved_object_converters.test.ts
@@ -24,12 +24,14 @@ import {
 } from './embeddable_saved_object_converters';
 import { SavedDashboardPanel } from '../types';
 import { DashboardPanelState } from 'src/plugins/dashboard/public';
-import { EmbeddableInput } from 'src/plugins/embeddable/public';
+import { EmbeddableInput, SavedObjectEmbeddableInput } from 'src/plugins/embeddable/public';
 
 interface CustomInput extends EmbeddableInput {
   something: string;
 }
 
+type CustomSavedObjectInput = CustomInput & SavedObjectEmbeddableInput;
+
 test('convertSavedDashboardPanelToPanelState', () => {
   const savedDashboardPanel: SavedDashboardPanel = {
     type: 'search',
@@ -59,8 +61,8 @@ test('convertSavedDashboardPanelToPanelState', () => {
     explicitInput: {
       something: 'hi!',
       id: '123',
+      savedObjectId: 'savedObjectId',
     },
-    savedObjectId: 'savedObjectId',
     type: 'search',
   });
 });
@@ -87,7 +89,7 @@ test('convertSavedDashboardPanelToPanelState does not include undefined id', ()
 });
 
 test('convertPanelStateToSavedDashboardPanel', () => {
-  const dashboardPanel: DashboardPanelState<CustomInput> = {
+  const dashboardPanel: DashboardPanelState<CustomSavedObjectInput> = {
     gridData: {
       x: 0,
       y: 0,
@@ -95,10 +97,10 @@ test('convertPanelStateToSavedDashboardPanel', () => {
       w: 15,
       i: '123',
     },
-    savedObjectId: 'savedObjectId',
     explicitInput: {
       something: 'hi!',
       id: '123',
+      savedObjectId: 'savedObjectId',
     },
     type: 'search',
   };
diff --git a/src/legacy/core_plugins/kibana/public/dashboard/np_ready/lib/embeddable_saved_object_converters.ts b/src/legacy/core_plugins/kibana/public/dashboard/np_ready/lib/embeddable_saved_object_converters.ts
index 500ee7e28daa6..7d9be9a830cdd 100644
--- a/src/legacy/core_plugins/kibana/public/dashboard/np_ready/lib/embeddable_saved_object_converters.ts
+++ b/src/legacy/core_plugins/kibana/public/dashboard/np_ready/lib/embeddable_saved_object_converters.ts
@@ -17,6 +17,7 @@
  * under the License.
  */
 import { omit } from 'lodash';
+import { SavedObjectEmbeddableInput } from '../../../../../../../plugins/embeddable/public';
 import { DashboardPanelState } from '../../../../../../../plugins/dashboard/public';
 import { SavedDashboardPanel } from '../types';
 
@@ -26,9 +27,9 @@ export function convertSavedDashboardPanelToPanelState(
   return {
     type: savedDashboardPanel.type,
     gridData: savedDashboardPanel.gridData,
-    ...(savedDashboardPanel.id !== undefined && { savedObjectId: savedDashboardPanel.id }),
     explicitInput: {
       id: savedDashboardPanel.panelIndex,
+      ...(savedDashboardPanel.id !== undefined && { savedObjectId: savedDashboardPanel.id }),
       ...(savedDashboardPanel.title !== undefined && { title: savedDashboardPanel.title }),
       ...savedDashboardPanel.embeddableConfig,
     },
@@ -42,13 +43,14 @@ export function convertPanelStateToSavedDashboardPanel(
   const customTitle: string | undefined = panelState.explicitInput.title
     ? (panelState.explicitInput.title as string)
     : undefined;
+  const savedObjectId = (panelState.explicitInput as SavedObjectEmbeddableInput).savedObjectId;
   return {
     version,
     type: panelState.type,
     gridData: panelState.gridData,
     panelIndex: panelState.explicitInput.id,
-    embeddableConfig: omit(panelState.explicitInput, 'id'),
+    embeddableConfig: omit(panelState.explicitInput, ['id', 'savedObjectId']),
     ...(customTitle && { title: customTitle }),
-    ...(panelState.savedObjectId !== undefined && { id: panelState.savedObjectId }),
+    ...(savedObjectId !== undefined && { id: savedObjectId }),
   };
 }
diff --git a/src/plugins/dashboard/public/actions/replace_panel_flyout.tsx b/src/plugins/dashboard/public/actions/replace_panel_flyout.tsx
index a1cd865f771d4..1d3129018c9ff 100644
--- a/src/plugins/dashboard/public/actions/replace_panel_flyout.tsx
+++ b/src/plugins/dashboard/public/actions/replace_panel_flyout.tsx
@@ -20,7 +20,10 @@
 import { i18n } from '@kbn/i18n';
 import React from 'react';
 import { EuiFlyout, EuiFlyoutBody, EuiFlyoutHeader, EuiTitle } from '@elastic/eui';
-import { EmbeddableStart } from '../../../../../src/plugins/embeddable/public';
+import {
+  EmbeddableStart,
+  SavedObjectEmbeddableInput,
+} from '../../../../../src/plugins/embeddable/public';
 import { DashboardPanelState } from '../embeddable';
 import { NotificationsStart, Toast } from '../../../../core/public';
 import { IContainer, IEmbeddable, EmbeddableInput, EmbeddableOutput } from '../embeddable_plugin';
@@ -61,7 +64,7 @@ export class ReplacePanelFlyout extends React.Component<Props> {
     });
   };
 
-  public onReplacePanel = async (id: string, type: string, name: string) => {
+  public onReplacePanel = async (savedObjectId: string, type: string, name: string) => {
     const originalPanels = this.props.container.getInput().panels;
     const filteredPanels = { ...originalPanels };
 
@@ -71,7 +74,9 @@ export class ReplacePanelFlyout extends React.Component<Props> {
     const nny = (filteredPanels[this.props.panelToRemove.id] as DashboardPanelState).gridData.y;
 
     // add the new view
-    const newObj = await this.props.container.addSavedObjectEmbeddable(type, id);
+    const newObj = await this.props.container.addNewEmbeddable<SavedObjectEmbeddableInput>(type, {
+      savedObjectId,
+    });
 
     const finalPanels = _.cloneDeep(this.props.container.getInput().panels);
     (finalPanels[newObj.id] as DashboardPanelState).gridData.w = nnw;
diff --git a/src/plugins/dashboard/public/bwc/types.ts b/src/plugins/dashboard/public/bwc/types.ts
index e9b9d392e9b7d..a911723ea6bea 100644
--- a/src/plugins/dashboard/public/bwc/types.ts
+++ b/src/plugins/dashboard/public/bwc/types.ts
@@ -82,6 +82,11 @@ export type DashboardDocPre700 = DocPre700<DashboardAttributesTo720>;
 // embedded in the panels. The reason this is stored at the top level is so the references can be uniformly
 // updated across all saved object types that have references.
 
+/**
+ * This should always represent the latest dashboard panel shape, after all possible migrations.
+ */
+export type RawSavedDashboardPanel = RawSavedDashboardPanel730ToLatest;
+
 // Starting in 7.3 we introduced the possibility of embeddables existing without an id
 // parameter.  If there was no id, then type remains on the panel.  So it either will have a name,
 // or a type property.
diff --git a/src/plugins/dashboard/public/embeddable/types.ts b/src/plugins/dashboard/public/embeddable/types.ts
index 480d03552ca68..520fb88a6039f 100644
--- a/src/plugins/dashboard/public/embeddable/types.ts
+++ b/src/plugins/dashboard/public/embeddable/types.ts
@@ -16,6 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+import { SavedObjectEmbeddableInput } from 'src/plugins/embeddable/public';
 import { PanelState, EmbeddableInput } from '../embeddable_plugin';
 export type PanelId = string;
 export type SavedObjectId = string;
@@ -28,7 +29,8 @@ export interface GridData {
   i: string;
 }
 
-export interface DashboardPanelState<TEmbeddableInput extends EmbeddableInput = EmbeddableInput>
-  extends PanelState<TEmbeddableInput> {
+export interface DashboardPanelState<
+  TEmbeddableInput extends EmbeddableInput | SavedObjectEmbeddableInput = SavedObjectEmbeddableInput
+> extends PanelState<TEmbeddableInput> {
   readonly gridData: GridData;
 }
diff --git a/src/plugins/dashboard/public/plugin.tsx b/src/plugins/dashboard/public/plugin.tsx
index df3c312c7ae1b..f86b4cc6b2149 100644
--- a/src/plugins/dashboard/public/plugin.tsx
+++ b/src/plugins/dashboard/public/plugin.tsx
@@ -152,6 +152,7 @@ export class DashboardEmbeddableContainerPublicPlugin
       indexPatterns,
       chrome: core.chrome,
       overlays: core.overlays,
+      embeddable: plugins.embeddable,
     });
     return {
       getSavedDashboardLoader: () => savedDashboardLoader,
diff --git a/src/plugins/dashboard/public/saved_dashboards/saved_dashboards.ts b/src/plugins/dashboard/public/saved_dashboards/saved_dashboards.ts
index 2a1e64fa88a02..8a952c20c09fb 100644
--- a/src/plugins/dashboard/public/saved_dashboards/saved_dashboards.ts
+++ b/src/plugins/dashboard/public/saved_dashboards/saved_dashboards.ts
@@ -18,21 +18,23 @@
  */
 
 import { SavedObjectsClientContract, ChromeStart, OverlayStart } from 'kibana/public';
+import { EmbeddableStart } from 'src/plugins/embeddable/public';
 import { IndexPatternsContract } from '../../../../plugins/data/public';
 import { SavedObjectLoader } from '../../../../plugins/saved_objects/public';
 import { createSavedDashboardClass } from './saved_dashboard';
 
-interface Services {
+export interface CreateSavedDashboardServices {
   savedObjectsClient: SavedObjectsClientContract;
   indexPatterns: IndexPatternsContract;
   chrome: ChromeStart;
   overlays: OverlayStart;
+  embeddable: EmbeddableStart;
 }
 
 /**
  * @param services
  */
-export function createSavedDashboardLoader(services: Services) {
+export function createSavedDashboardLoader(services: CreateSavedDashboardServices) {
   const SavedDashboard = createSavedDashboardClass(services);
   return new SavedObjectLoader(SavedDashboard, services.savedObjectsClient, services.chrome);
 }
diff --git a/src/plugins/dashboard/public/saved_dashboards/types.ts b/src/plugins/dashboard/public/saved_dashboards/types.ts
new file mode 100644
index 0000000000000..9c37bb3a8431b
--- /dev/null
+++ b/src/plugins/dashboard/public/saved_dashboards/types.ts
@@ -0,0 +1,131 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { ViewMode } from 'src/plugins/embeddable/public';
+import {
+  RawSavedDashboardPanelTo60,
+  RawSavedDashboardPanel610,
+  RawSavedDashboardPanel620,
+  RawSavedDashboardPanel630,
+  RawSavedDashboardPanel640To720,
+  RawSavedDashboardPanel730ToLatest,
+} from '../bwc';
+import { Query, Filter } from '../../../../plugins/data/public';
+
+export type NavAction = (anchorElement?: any) => void;
+
+/**
+ * This should always represent the latest dashboard panel shape, after all possible migrations.
+ */
+export type SavedDashboardPanel = SavedDashboardPanel730ToLatest;
+
+// id becomes optional starting in 7.3.0
+export type SavedDashboardPanel730ToLatest = Pick<
+  RawSavedDashboardPanel730ToLatest,
+  Exclude<keyof RawSavedDashboardPanel730ToLatest, 'name'>
+> & {
+  readonly id?: string;
+  readonly type: string;
+};
+
+export type SavedDashboardPanel640To720 = Pick<
+  RawSavedDashboardPanel640To720,
+  Exclude<keyof RawSavedDashboardPanel640To720, 'name'>
+> & {
+  readonly id: string;
+  readonly type: string;
+};
+
+export type SavedDashboardPanel630 = Pick<
+  RawSavedDashboardPanel630,
+  Exclude<keyof RawSavedDashboardPanel620, 'name'>
+> & {
+  readonly id: string;
+  readonly type: string;
+};
+
+export type SavedDashboardPanel620 = Pick<
+  RawSavedDashboardPanel620,
+  Exclude<keyof RawSavedDashboardPanel620, 'name'>
+> & {
+  readonly id: string;
+  readonly type: string;
+};
+
+export type SavedDashboardPanel610 = Pick<
+  RawSavedDashboardPanel610,
+  Exclude<keyof RawSavedDashboardPanel610, 'name'>
+> & {
+  readonly id: string;
+  readonly type: string;
+};
+
+export type SavedDashboardPanelTo60 = Pick<
+  RawSavedDashboardPanelTo60,
+  Exclude<keyof RawSavedDashboardPanelTo60, 'name'>
+> & {
+  readonly id: string;
+  readonly type: string;
+};
+
+export interface DashboardAppState {
+  panels: SavedDashboardPanel[];
+  fullScreenMode: boolean;
+  title: string;
+  description: string;
+  timeRestore: boolean;
+  options: {
+    hidePanelTitles: boolean;
+    useMargins: boolean;
+  };
+  query: Query | string;
+  filters: Filter[];
+  viewMode: ViewMode;
+  savedQuery?: string;
+}
+
+export type DashboardAppStateDefaults = DashboardAppState & {
+  description?: string;
+};
+
+export interface DashboardAppStateTransitions {
+  set: (
+    state: DashboardAppState
+  ) => <T extends keyof DashboardAppState>(
+    prop: T,
+    value: DashboardAppState[T]
+  ) => DashboardAppState;
+  setOption: (
+    state: DashboardAppState
+  ) => <T extends keyof DashboardAppState['options']>(
+    prop: T,
+    value: DashboardAppState['options'][T]
+  ) => DashboardAppState;
+}
+
+export interface SavedDashboardPanelMap {
+  [key: string]: SavedDashboardPanel;
+}
+
+export interface StagedFilter {
+  field: string;
+  value: string;
+  operator: string;
+  index: string;
+}
diff --git a/src/plugins/embeddable/public/bootstrap.ts b/src/plugins/embeddable/public/bootstrap.ts
index c8c4f0b95c458..1b55f63d14f16 100644
--- a/src/plugins/embeddable/public/bootstrap.ts
+++ b/src/plugins/embeddable/public/bootstrap.ts
@@ -32,6 +32,7 @@ import {
   FilterActionContext,
   ACTION_APPLY_FILTER,
 } from './lib';
+import { EmbeddableStart } from './plugin';
 
 declare module '../../ui_actions/public' {
   export interface TriggerContextMapping {
@@ -53,7 +54,10 @@ declare module '../../ui_actions/public' {
  * This method initializes Embeddable plugin with initial set of
  * triggers and actions.
  */
-export const bootstrap = (uiActions: UiActionsSetup) => {
+export const bootstrap = (
+  uiActions: UiActionsSetup,
+  getEmbeddableFactory: EmbeddableStart['getEmbeddableFactory']
+) => {
   uiActions.registerTrigger(contextMenuTrigger);
   uiActions.registerTrigger(panelBadgeTrigger);
 
diff --git a/src/plugins/embeddable/public/index.ts b/src/plugins/embeddable/public/index.ts
index eca74af4ec253..192c3d290fab1 100644
--- a/src/plugins/embeddable/public/index.ts
+++ b/src/plugins/embeddable/public/index.ts
@@ -60,6 +60,9 @@ export {
   PropertySpec,
   ViewMode,
   withEmbeddableSubscription,
+  SavedObjectEmbeddableInput,
+  isSavedObjectEmbeddableFactory,
+  SavedObjectEmbeddableFactory,
 } from './lib';
 
 export function plugin(initializerContext: PluginInitializerContext) {
diff --git a/src/plugins/embeddable/public/lib/containers/container.ts b/src/plugins/embeddable/public/lib/containers/container.ts
index 4ab74e1883917..c1d80655bf22c 100644
--- a/src/plugins/embeddable/public/lib/containers/container.ts
+++ b/src/plugins/embeddable/public/lib/containers/container.ts
@@ -30,6 +30,7 @@ import {
 import { IContainer, ContainerInput, ContainerOutput, PanelState } from './i_container';
 import { PanelNotFoundError, EmbeddableFactoryNotFoundError } from '../errors';
 import { EmbeddableStart } from '../../plugin';
+import { isSavedObjectEmbeddableInput } from '../embeddables/saved_object_embeddable';
 
 const getKeys = <T extends {}>(o: T): Array<keyof T> => Object.keys(o) as Array<keyof T>;
 
@@ -98,17 +99,6 @@ export abstract class Container<
     return this.createAndSaveEmbeddable(type, panelState);
   }
 
-  public async addSavedObjectEmbeddable<
-    TEmbeddableInput extends EmbeddableInput = EmbeddableInput,
-    TEmbeddable extends IEmbeddable<TEmbeddableInput> = IEmbeddable<TEmbeddableInput>
-  >(type: string, savedObjectId: string): Promise<TEmbeddable | ErrorEmbeddable> {
-    const factory = this.getFactory(type) as EmbeddableFactory<TEmbeddableInput, any, TEmbeddable>;
-    const panelState = this.createNewPanelState(factory);
-    panelState.savedObjectId = savedObjectId;
-
-    return this.createAndSaveEmbeddable(type, panelState);
-  }
-
   public removeEmbeddable(embeddableId: string) {
     // Just a shortcut for removing the panel from input state, all internal state will get cleaned up naturally
     // by the listener.
@@ -298,15 +288,19 @@ export abstract class Container<
     } as Partial<TContainerOutput>);
     let embeddable: IEmbeddable | ErrorEmbeddable | undefined;
     const inputForChild = this.getInputForChild(panel.explicitInput.id);
+
     try {
       const factory = this.getFactory(panel.type);
       if (!factory) {
         throw new EmbeddableFactoryNotFoundError(panel.type);
       }
 
-      embeddable = panel.savedObjectId
-        ? await factory.createFromSavedObject(panel.savedObjectId, inputForChild, this)
-        : await factory.create(inputForChild, this);
+      // TODO: lets get rid of this distinction with factories, I don't think it will be needed
+      // anymore after this change.
+      embeddable =
+        isSavedObjectEmbeddableInput(inputForChild) && inputForChild.savedObjectId
+          ? await factory.createFromSavedObject(inputForChild.savedObjectId, inputForChild, this)
+          : await factory.create(inputForChild, this);
     } catch (e) {
       embeddable = new ErrorEmbeddable(e, { id: panel.explicitInput.id }, this);
     }
@@ -323,23 +317,6 @@ export abstract class Container<
         return;
       }
 
-      if (embeddable.getOutput().savedObjectId) {
-        this.updateInput({
-          panels: {
-            ...this.input.panels,
-            [panel.explicitInput.id]: {
-              ...this.input.panels[panel.explicitInput.id],
-              ...(embeddable.getOutput().savedObjectId
-                ? { savedObjectId: embeddable.getOutput().savedObjectId }
-                : undefined),
-              explicitInput: {
-                ...this.input.panels[panel.explicitInput.id].explicitInput,
-              },
-            },
-          },
-        } as Partial<TContainerInput>);
-      }
-
       this.children[embeddable.id] = embeddable;
       this.updateOutput({
         embeddableLoaded: {
diff --git a/src/plugins/embeddable/public/lib/containers/i_container.ts b/src/plugins/embeddable/public/lib/containers/i_container.ts
index 7da5f92ec92c1..7523d382953b1 100644
--- a/src/plugins/embeddable/public/lib/containers/i_container.ts
+++ b/src/plugins/embeddable/public/lib/containers/i_container.ts
@@ -26,8 +26,6 @@ import {
 } from '../embeddables';
 
 export interface PanelState<E extends { id: string } = { id: string }> {
-  savedObjectId?: string;
-
   // The type of embeddable in this panel. Will be used to find the factory in which to
   // load the embeddable.
   type: string;
@@ -35,7 +33,7 @@ export interface PanelState<E extends { id: string } = { id: string }> {
   // Stores input for this embeddable that is specific to this embeddable. Other parts of embeddable input
   // will be derived from the container's input. **Any state in here will override any state derived from
   // the container.**
-  explicitInput: Partial<E> & { id: string };
+  explicitInput: Partial<E> & { id: string } & { [key: string]: unknown };
 }
 
 export interface ContainerOutput extends EmbeddableOutput {
@@ -89,17 +87,6 @@ export interface IContainer<
    */
   removeEmbeddable(embeddableId: string): void;
 
-  /**
-   * Adds a new embeddable that is backed off of a saved object.
-   */
-  addSavedObjectEmbeddable<
-    EEI extends EmbeddableInput = EmbeddableInput,
-    E extends Embeddable<EEI> = Embeddable<EEI>
-  >(
-    type: string,
-    savedObjectId: string
-  ): Promise<E | ErrorEmbeddable>;
-
   /**
    * Adds a new embeddable to the container. `explicitInput` may partially specify the required embeddable input,
    * but the remainder must come from inherited container state.
diff --git a/src/plugins/embeddable/public/lib/embeddables/embeddable.tsx b/src/plugins/embeddable/public/lib/embeddables/embeddable.tsx
index eb10c16806640..d10f147c80e6a 100644
--- a/src/plugins/embeddable/public/lib/embeddables/embeddable.tsx
+++ b/src/plugins/embeddable/public/lib/embeddables/embeddable.tsx
@@ -25,7 +25,7 @@ import { ViewMode } from '../types';
 import { TriggerContextMapping } from '../ui_actions';
 import { EmbeddableActionStorage } from './embeddable_action_storage';
 
-function getPanelTitle(input: EmbeddableInput, output: EmbeddableOutput) {
+export function getPanelTitle(input: EmbeddableInput, output: EmbeddableOutput) {
   return input.hidePanelTitles ? '' : input.title === undefined ? output.defaultTitle : input.title;
 }
 
@@ -136,6 +136,16 @@ export abstract class Embeddable<
     }
   }
 
+  /**
+   * Implement replaceReferences if your Embeddable contains any references to saved objects (be sure
+   * also to propagate this call down to any nested Embeddable references, or other implementations that may have
+   * nested references, like expressions).  This supports functionality like "copy to space", when we want
+   * the copy to create copies of nested saved objects - we need to replace the ids.  It also supports saved object
+   * id migrations although that should be very rare.
+   * @param references
+   */
+  public replaceReferences(references: Array<{ oldId: string; type: string; newId: string }>) {}
+
   public render(domNode: HTMLElement | Element): void {
     if (this.destoyed) {
       throw new Error('Embeddable has been destroyed');
diff --git a/src/plugins/embeddable/public/lib/embeddables/i_embeddable.ts b/src/plugins/embeddable/public/lib/embeddables/i_embeddable.ts
index 6345c34b0dda2..8e17122f5a200 100644
--- a/src/plugins/embeddable/public/lib/embeddables/i_embeddable.ts
+++ b/src/plugins/embeddable/public/lib/embeddables/i_embeddable.ts
@@ -26,6 +26,11 @@ import { TriggerContextMapping } from '../../../../ui_actions/public';
 export interface EmbeddableInput {
   viewMode?: ViewMode;
   title?: string;
+  /**
+   * Note this is not a saved object id. It is used to uniquely identify this
+   * Embeddable instance from others (e.g. inside a container).  It's possible to
+   * have two Embeddables where everything else is the same but the id.
+   */
   id: string;
   lastReloadRequestTime?: number;
   hidePanelTitles?: boolean;
@@ -44,6 +49,8 @@ export interface EmbeddableInput {
    * Whether this embeddable should not execute triggers.
    */
   disableTriggers?: boolean;
+
+  [key: string]: unknown;
 }
 
 export interface EmbeddableOutput {
@@ -52,6 +59,7 @@ export interface EmbeddableOutput {
   title?: string;
   editable?: boolean;
   savedObjectId?: string;
+  references?: Array<{ id: string; type: string }>;
 }
 
 export interface IEmbeddable<
diff --git a/src/plugins/embeddable/public/lib/embeddables/index.ts b/src/plugins/embeddable/public/lib/embeddables/index.ts
index 2175c3a59aa58..cd9257e2d1ecd 100644
--- a/src/plugins/embeddable/public/lib/embeddables/index.ts
+++ b/src/plugins/embeddable/public/lib/embeddables/index.ts
@@ -27,3 +27,5 @@ export { ErrorEmbeddable, isErrorEmbeddable } from './error_embeddable';
 export { withEmbeddableSubscription } from './with_subscription';
 export { EmbeddableFactoryRenderer } from './embeddable_factory_renderer';
 export { EmbeddableRoot } from './embeddable_root';
+export * from './saved_object_embeddable';
+export * from './saved_object_embeddable_factory';
diff --git a/src/plugins/embeddable/public/lib/embeddables/saved_object_embeddable.ts b/src/plugins/embeddable/public/lib/embeddables/saved_object_embeddable.ts
new file mode 100644
index 0000000000000..bcdae711c8514
--- /dev/null
+++ b/src/plugins/embeddable/public/lib/embeddables/saved_object_embeddable.ts
@@ -0,0 +1,35 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { EmbeddableInput, EmbeddableOutput } from '..';
+
+export interface SavedObjectEmbeddableInput extends EmbeddableInput {
+  /**
+   * Optional if a saved object embeddable isn't saved yet.
+   */
+  savedObjectId?: string;
+}
+
+export type SavedObjectEmbeddableOutput = EmbeddableOutput;
+
+export function isSavedObjectEmbeddableInput(
+  input: EmbeddableInput | SavedObjectEmbeddableInput
+): input is SavedObjectEmbeddableInput {
+  return (input as SavedObjectEmbeddableInput).savedObjectId !== undefined;
+}
diff --git a/src/plugins/embeddable/public/lib/embeddables/saved_object_embeddable_factory.ts b/src/plugins/embeddable/public/lib/embeddables/saved_object_embeddable_factory.ts
new file mode 100644
index 0000000000000..d5b2376d14aed
--- /dev/null
+++ b/src/plugins/embeddable/public/lib/embeddables/saved_object_embeddable_factory.ts
@@ -0,0 +1,52 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { SavedObjectAttributes, SimpleSavedObject } from 'kibana/public';
+import { SavedObjectMetaData } from 'src/plugins/saved_objects/public';
+import { SavedObjectEmbeddableInput, SavedObjectEmbeddableOutput } from './saved_object_embeddable';
+import { EmbeddableFactory } from './embeddable_factory';
+import { IEmbeddable } from './i_embeddable';
+
+// interface StartServices {
+//   getEmbeddableFactory: EmbeddableStart['getEmbeddableFactory'];
+//   savedObjectsClient: SavedObjectsClient;
+// }
+
+export function isSavedObjectEmbeddableFactory(
+  factory: EmbeddableFactory | SavedObjectEmbeddableFactory
+): factory is SavedObjectEmbeddableFactory {
+  return (factory as SavedObjectEmbeddableFactory).savedObjectMetaData !== undefined;
+}
+
+export abstract class SavedObjectEmbeddableFactory<
+  I extends SavedObjectEmbeddableInput = SavedObjectEmbeddableInput,
+  O extends SavedObjectEmbeddableOutput = SavedObjectEmbeddableOutput,
+  E extends IEmbeddable<I, O> = IEmbeddable<I, O>,
+  SA extends SavedObjectAttributes = SavedObjectAttributes
+> extends EmbeddableFactory<I, O, E, SA> {
+  public savedObjectMetaData: SavedObjectMetaData<SA>;
+
+  constructor({ savedObjectMetaData }: { savedObjectMetaData: SavedObjectMetaData<SA> }) {
+    super({ savedObjectMetaData });
+    this.savedObjectMetaData = savedObjectMetaData;
+  }
+
+  abstract canSave(embeddable: E): boolean;
+
+  abstract save(embeddable: E): Promise<SimpleSavedObject>;
+}
diff --git a/src/plugins/embeddable/public/lib/embeddables/with_subscription.tsx b/src/plugins/embeddable/public/lib/embeddables/with_subscription.tsx
index 47b8001961cf5..25bb51ef27060 100644
--- a/src/plugins/embeddable/public/lib/embeddables/with_subscription.tsx
+++ b/src/plugins/embeddable/public/lib/embeddables/with_subscription.tsx
@@ -23,18 +23,19 @@ import { IEmbeddable, EmbeddableInput, EmbeddableOutput } from './i_embeddable';
 export const withEmbeddableSubscription = <
   I extends EmbeddableInput,
   O extends EmbeddableOutput,
-  E extends IEmbeddable<I, O> = IEmbeddable<I, O>
+  E extends IEmbeddable<I, O> = IEmbeddable<I, O>,
+  P = {}
 >(
-  WrappedComponent: React.ComponentType<{ input: I; output: O; embeddable: E }>
-): React.ComponentType<{ embeddable: E }> =>
+  WrappedComponent: React.ComponentType<{ input: I; output: O; embeddable: E } & P>
+): React.ComponentType<{ embeddable: E } & P> =>
   class WithEmbeddableSubscription extends React.Component<
-    { embeddable: E },
+    { embeddable: E } & P,
     { input: I; output: O }
   > {
     private subscription?: Rx.Subscription;
     private mounted: boolean = false;
 
-    constructor(props: { embeddable: E }) {
+    constructor(props: { embeddable: E } & P) {
       super(props);
       this.state = {
         input: this.props.embeddable.getInput(),
@@ -71,6 +72,7 @@ export const withEmbeddableSubscription = <
           input={this.state.input}
           output={this.state.output}
           embeddable={this.props.embeddable}
+          {...this.props}
         />
       );
     }
diff --git a/src/plugins/embeddable/public/lib/panel/embeddable_panel.tsx b/src/plugins/embeddable/public/lib/panel/embeddable_panel.tsx
index b95060a73252f..f0be8d4c8a6da 100644
--- a/src/plugins/embeddable/public/lib/panel/embeddable_panel.tsx
+++ b/src/plugins/embeddable/public/lib/panel/embeddable_panel.tsx
@@ -19,7 +19,7 @@
 import { EuiContextMenuPanelDescriptor, EuiPanel, htmlIdGenerator } from '@elastic/eui';
 import classNames from 'classnames';
 import React from 'react';
-import { Subscription } from 'rxjs';
+import { Subscription, merge } from 'rxjs';
 import { buildContextMenuForActions, UiActionsService, Action } from '../ui_actions';
 import { CoreStart, OverlayStart } from '../../../../../core/public';
 import { toMountPoint } from '../../../../kibana_react/public';
@@ -57,6 +57,7 @@ interface State {
   hidePanelTitles: boolean;
   closeContextMenu: boolean;
   badges: Array<Action<EmbeddableContext>>;
+  displayTitle?: string;
 }
 
 export class EmbeddablePanel extends React.Component<Props, State> {
@@ -82,6 +83,7 @@ export class EmbeddablePanel extends React.Component<Props, State> {
       hidePanelTitles,
       closeContextMenu: false,
       badges: [],
+      displayTitle: embeddable.getTitle(),
     };
 
     this.embeddableRoot = React.createRef();
@@ -108,15 +110,20 @@ export class EmbeddablePanel extends React.Component<Props, State> {
     const { embeddable } = this.props;
     const { parent } = embeddable;
 
-    this.subscription = embeddable.getInput$().subscribe(async () => {
-      if (this.mounted) {
-        this.setState({
-          viewMode: embeddable.getInput().viewMode ? embeddable.getInput().viewMode : ViewMode.EDIT,
-        });
+    this.subscription = merge(embeddable.getOutput$(), embeddable.getInput$()).subscribe(
+      async () => {
+        if (this.mounted) {
+          this.setState({
+            viewMode: embeddable.getInput().viewMode
+              ? embeddable.getInput().viewMode
+              : ViewMode.EDIT,
+            displayTitle: embeddable.getTitle(),
+          });
 
-        this.refreshBadges();
+          this.refreshBadges();
+        }
       }
-    });
+    );
 
     if (parent) {
       this.parentSubscription = parent.getInput$().subscribe(async () => {
@@ -204,7 +211,6 @@ export class EmbeddablePanel extends React.Component<Props, State> {
     let actions = await this.props.getActions(CONTEXT_MENU_TRIGGER, {
       embeddable: this.props.embeddable,
     });
-
     const { disabledActions } = this.props.embeddable.getInput();
     if (disabledActions) {
       actions = actions.filter(action => disabledActions.indexOf(action.id) === -1);
diff --git a/src/plugins/embeddable/public/lib/panel/panel_header/panel_actions/add_panel/add_panel_flyout.tsx b/src/plugins/embeddable/public/lib/panel/panel_header/panel_actions/add_panel/add_panel_flyout.tsx
index 95eeb63710c32..ea615627f2b49 100644
--- a/src/plugins/embeddable/public/lib/panel/panel_header/panel_actions/add_panel/add_panel_flyout.tsx
+++ b/src/plugins/embeddable/public/lib/panel/panel_header/panel_actions/add_panel/add_panel_flyout.tsx
@@ -33,6 +33,7 @@ import { EmbeddableStart } from 'src/plugins/embeddable/public/plugin';
 import { IContainer } from '../../../../containers';
 import { EmbeddableFactoryNotFoundError } from '../../../../errors';
 import { SavedObjectFinderCreateNew } from './saved_object_finder_create_new';
+import { SavedObjectEmbeddableInput } from '../../../../embeddables';
 
 interface Props {
   onClose: () => void;
@@ -98,8 +99,18 @@ export class AddPanelFlyout extends React.Component<Props, State> {
     }
   };
 
-  public onAddPanel = async (id: string, type: string, name: string) => {
-    this.props.container.addSavedObjectEmbeddable(type, id);
+  public onAddPanel = async (savedObjectId: string, savedObjectType: string, name: string) => {
+    const factoryForSavedObjectType = [...this.props.getAllFactories()].find(
+      factory => factory.savedObjectMetaData && factory.savedObjectMetaData.type === savedObjectType
+    );
+    if (!factoryForSavedObjectType) {
+      throw new EmbeddableFactoryNotFoundError(savedObjectType);
+    }
+
+    this.props.container.addNewEmbeddable<SavedObjectEmbeddableInput>(
+      factoryForSavedObjectType.type,
+      { savedObjectId }
+    );
 
     this.showToast(name);
   };
@@ -121,15 +132,16 @@ export class AddPanelFlyout extends React.Component<Props, State> {
 
   public render() {
     const SavedObjectFinder = this.props.SavedObjectFinder;
+    const metaData = [...this.props.getAllFactories()]
+      .filter(
+        embeddableFactory =>
+          Boolean(embeddableFactory.savedObjectMetaData) && !embeddableFactory.isContainerType
+      )
+      .map(({ savedObjectMetaData }) => savedObjectMetaData as any);
     const savedObjectsFinder = (
       <SavedObjectFinder
         onChoose={this.onAddPanel}
-        savedObjectMetaData={[...this.props.getAllFactories()]
-          .filter(
-            embeddableFactory =>
-              Boolean(embeddableFactory.savedObjectMetaData) && !embeddableFactory.isContainerType
-          )
-          .map(({ savedObjectMetaData }) => savedObjectMetaData as any)}
+        savedObjectMetaData={metaData}
         showFilter={true}
         noItemsMessage={i18n.translate('embeddableApi.addPanel.noMatchingObjectsMessage', {
           defaultMessage: 'No matching objects found.',
diff --git a/src/plugins/embeddable/public/plugin.ts b/src/plugins/embeddable/public/plugin.ts
index 381665c359ffd..ad8f3b9cdf08c 100644
--- a/src/plugins/embeddable/public/plugin.ts
+++ b/src/plugins/embeddable/public/plugin.ts
@@ -20,7 +20,7 @@ import { UiActionsSetup } from 'src/plugins/ui_actions/public';
 import { PluginInitializerContext, CoreSetup, CoreStart, Plugin } from '../../../core/public';
 import { EmbeddableFactoryRegistry } from './types';
 import { bootstrap } from './bootstrap';
-import { EmbeddableFactory, EmbeddableInput, EmbeddableOutput } from './lib';
+import { EmbeddableFactory, EmbeddableInput, EmbeddableOutput, IEmbeddable } from './lib';
 
 export interface EmbeddableSetupDependencies {
   uiActions: UiActionsSetup;
@@ -35,10 +35,11 @@ export interface EmbeddableSetup {
 export interface EmbeddableStart {
   getEmbeddableFactory: <
     I extends EmbeddableInput = EmbeddableInput,
-    O extends EmbeddableOutput = EmbeddableOutput
+    O extends EmbeddableOutput = EmbeddableOutput,
+    E extends IEmbeddable<I, O> = IEmbeddable<I, O>
   >(
     embeddableFactoryId: string
-  ) => EmbeddableFactory<I, O> | undefined;
+  ) => EmbeddableFactory<I, O, E> | undefined;
   getEmbeddableFactories: () => IterableIterator<EmbeddableFactory>;
 }
 
@@ -48,7 +49,7 @@ export class EmbeddablePublicPlugin implements Plugin<EmbeddableSetup, Embeddabl
   constructor(initializerContext: PluginInitializerContext) {}
 
   public setup(core: CoreSetup, { uiActions }: EmbeddableSetupDependencies) {
-    bootstrap(uiActions);
+    bootstrap(uiActions, this.getEmbeddableFactory);
 
     return {
       registerEmbeddableFactory: this.registerEmbeddableFactory,
@@ -76,7 +77,8 @@ export class EmbeddablePublicPlugin implements Plugin<EmbeddableSetup, Embeddabl
 
   private getEmbeddableFactory = <
     I extends EmbeddableInput = EmbeddableInput,
-    O extends EmbeddableOutput = EmbeddableOutput
+    O extends EmbeddableOutput = EmbeddableOutput,
+    E extends IEmbeddable<I, O> = IEmbeddable<I, O>
   >(
     embeddableFactoryId: string
   ) => {
@@ -88,6 +90,6 @@ export class EmbeddablePublicPlugin implements Plugin<EmbeddableSetup, Embeddabl
       );
     }
 
-    return factory as EmbeddableFactory<I, O>;
+    return factory as EmbeddableFactory<I, O, E>;
   };
 }
diff --git a/src/plugins/embeddable/public/tests/container.test.ts b/src/plugins/embeddable/public/tests/container.test.ts
index 1ee52f4749135..f64a5c26b67c6 100644
--- a/src/plugins/embeddable/public/tests/container.test.ts
+++ b/src/plugins/embeddable/public/tests/container.test.ts
@@ -640,8 +640,7 @@ test('container stores ErrorEmbeddables when a saved object cannot be found', as
     panels: {
       '123': {
         type: 'vis',
-        explicitInput: { id: '123' },
-        savedObjectId: '456',
+        explicitInput: { id: '123', savedObjectId: '456' },
       },
     },
     viewMode: ViewMode.EDIT,
@@ -662,8 +661,7 @@ test('ErrorEmbeddables get updated when parent does', async done => {
     panels: {
       '123': {
         type: 'vis',
-        explicitInput: { id: '123' },
-        savedObjectId: '456',
+        explicitInput: { id: '123', savedObjectId: '456' },
       },
     },
     viewMode: ViewMode.EDIT,
diff --git a/src/plugins/ui_actions/public/service/ui_actions_service.ts b/src/plugins/ui_actions/public/service/ui_actions_service.ts
index f7718e63773f5..ec74a7ad051e4 100644
--- a/src/plugins/ui_actions/public/service/ui_actions_service.ts
+++ b/src/plugins/ui_actions/public/service/ui_actions_service.ts
@@ -103,7 +103,7 @@ export class UiActionsService {
     } else {
       const registeredAction = this.actions.get(action.id);
       if (registeredAction !== action) {
-        throw new Error(`A different action instance with this id is already registered.`);
+        throw new Error(`An action with the id ${action.id} is already registered.`);
       }
     }
 
diff --git a/test/examples/embeddables/adding_children.ts b/test/examples/embeddables/adding_children.ts
index 110b8ce573332..ddb1a06eebe64 100644
--- a/test/examples/embeddables/adding_children.ts
+++ b/test/examples/embeddables/adding_children.ts
@@ -23,9 +23,12 @@ import { PluginFunctionalProviderContext } from 'test/plugin_functional/services
 // eslint-disable-next-line import/no-default-export
 export default function({ getService }: PluginFunctionalProviderContext) {
   const testSubjects = getService('testSubjects');
+  const flyout = getService('flyout');
 
   describe('creating and adding children', () => {
     before(async () => {
+      await testSubjects.click('savedObjectSection');
+      await testSubjects.click('reset-sample-data');
       await testSubjects.click('embeddablePanelExamplae');
     });
 
@@ -39,5 +42,14 @@ export default function({ getService }: PluginFunctionalProviderContext) {
       const tasks = await testSubjects.getVisibleTextAll('todoEmbeddableTask');
       expect(tasks).to.eql(['Goes out on Wednesdays!', 'new task']);
     });
+
+    it('Can add a child backed off a saved object', async () => {
+      await testSubjects.click('embeddablePanelToggleMenuIcon');
+      await testSubjects.click('embeddablePanelAction-ACTION_ADD_PANEL');
+      await testSubjects.click('savedObjectTitleGarbage');
+      await flyout.ensureClosed('dashboardAddPanel');
+      const task = await testSubjects.getVisibleText('todoSoEmbeddableTask');
+      expect(task).to.eql('Take the garbage out');
+    });
   });
 }
diff --git a/test/examples/embeddables/index.ts b/test/examples/embeddables/index.ts
index 8ad0961fcc3b6..f3861cb0557ad 100644
--- a/test/examples/embeddables/index.ts
+++ b/test/examples/embeddables/index.ts
@@ -40,5 +40,6 @@ export default function({
     loadTestFile(require.resolve('./todo_embeddable'));
     loadTestFile(require.resolve('./list_container'));
     loadTestFile(require.resolve('./adding_children'));
+    loadTestFile(require.resolve('./saved_object_embeddable'));
   });
 }
diff --git a/test/examples/embeddables/saved_object_embeddable.ts b/test/examples/embeddables/saved_object_embeddable.ts
new file mode 100644
index 0000000000000..786c71eb55e64
--- /dev/null
+++ b/test/examples/embeddables/saved_object_embeddable.ts
@@ -0,0 +1,80 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import expect from '@kbn/expect';
+
+import { PluginFunctionalProviderContext } from 'test/plugin_functional/services';
+
+// eslint-disable-next-line import/no-default-export
+export default function({ getService }: PluginFunctionalProviderContext) {
+  const testSubjects = getService('testSubjects');
+  const browser = getService('browser');
+  const retry = getService('retry');
+  const dashboardPanelActions = getService('dashboardPanelActions');
+
+  describe('saved object embeddable', () => {
+    before(async () => {
+      await testSubjects.click('savedObjectSection');
+      await testSubjects.click('reset-sample-data');
+    });
+
+    it('renders', async () => {
+      await retry.try(async () => {
+        const texts = await testSubjects.getVisibleTextAll('todoSoEmbeddableTitle');
+        expect(texts).to.eql(['Garbage', 'Garbage', 'Take out the trash (By value example)']);
+      });
+    });
+
+    it('can be edited when backed by saved object ', async () => {
+      const header = await dashboardPanelActions.getPanelHeading('Garbage');
+      await dashboardPanelActions.openContextMenu(header);
+      await testSubjects.click('embeddablePanelAction-EDIT_TODO_ACTION');
+      await testSubjects.setValue('titleInputField', 'Trash');
+      await testSubjects.click('saveTodoEmbeddableByRef');
+
+      await retry.try(async () => {
+        const texts = await testSubjects.getVisibleTextAll('todoSoEmbeddableTitle');
+        expect(texts).to.eql(['Trash', 'Garbage', 'Take out the trash (By value example)']);
+      });
+    });
+
+    it('can be edited when not backed by saved object', async () => {
+      const header = await dashboardPanelActions.getPanelHeading(
+        'Take out the trash (By value example)'
+      );
+      await dashboardPanelActions.openContextMenu(header);
+      await testSubjects.click('embeddablePanelAction-EDIT_TODO_ACTION');
+      await testSubjects.setValue('titleInputField', 'Junk');
+      await testSubjects.click('saveTodoEmbeddableByValue');
+
+      await retry.try(async () => {
+        const texts = await testSubjects.getVisibleTextAll('todoSoEmbeddableTitle');
+        expect(texts).to.eql(['Trash', 'Garbage', 'Junk']);
+      });
+
+      const url = await browser.getCurrentUrl();
+      await browser.get(url.toString(), true);
+
+      await retry.try(async () => {
+        const texts2 = await testSubjects.getVisibleTextAll('todoSoEmbeddableTitle');
+        expect(texts2).to.eql(['Trash', 'Trash', 'Take out the trash (By value example)']);
+      });
+    });
+  });
+}
diff --git a/test/plugin_functional/plugins/kbn_tp_embeddable_explorer/public/np_ready/public/app/dashboard_input.ts b/test/plugin_functional/plugins/kbn_tp_embeddable_explorer/public/np_ready/public/app/dashboard_input.ts
index bb8951680be35..37ef8cad948cb 100644
--- a/test/plugin_functional/plugins/kbn_tp_embeddable_explorer/public/np_ready/public/app/dashboard_input.ts
+++ b/test/plugin_functional/plugins/kbn_tp_embeddable_explorer/public/np_ready/public/app/dashboard_input.ts
@@ -47,7 +47,7 @@ export const dashboardInput: DashboardContainerInput = {
       explicitInput: {
         id: '2',
         firstName: 'Sue',
-      } as any,
+      },
     },
     '822cd0f0-ce7c-419d-aeaa-1171cf452745': {
       gridData: {
@@ -60,8 +60,8 @@ export const dashboardInput: DashboardContainerInput = {
       type: 'visualization',
       explicitInput: {
         id: '822cd0f0-ce7c-419d-aeaa-1171cf452745',
+        savedObjectId: '3fe22200-3dcb-11e8-8660-4d65aa086b3c',
       },
-      savedObjectId: '3fe22200-3dcb-11e8-8660-4d65aa086b3c',
     },
     '66f0a265-7b06-4974-accd-d05f74f7aa82': {
       gridData: {
@@ -74,8 +74,8 @@ export const dashboardInput: DashboardContainerInput = {
       type: 'visualization',
       explicitInput: {
         id: '66f0a265-7b06-4974-accd-d05f74f7aa82',
+        savedObjectId: '4c0f47e0-3dcd-11e8-8660-4d65aa086b3c',
       },
-      savedObjectId: '4c0f47e0-3dcd-11e8-8660-4d65aa086b3c',
     },
     'b2861741-40b9-4dc8-b82b-080c6e29a551': {
       gridData: {
@@ -88,8 +88,8 @@ export const dashboardInput: DashboardContainerInput = {
       type: 'search',
       explicitInput: {
         id: 'b2861741-40b9-4dc8-b82b-080c6e29a551',
+        savedObjectId: 'be5accf0-3dca-11e8-8660-4d65aa086b3c',
       },
-      savedObjectId: 'be5accf0-3dca-11e8-8660-4d65aa086b3c',
     },
   },
   isFullScreenMode: false,