diff --git a/src/Umbraco.Web.UI.Client/src/mocks/App_Plugins/package-view.js b/src/Umbraco.Web.UI.Client/src/mocks/App_Plugins/package-view.js
new file mode 100644
index 0000000000..00dfd78079
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/mocks/App_Plugins/package-view.js
@@ -0,0 +1,32 @@
+const template = document.createElement('template');
+template.innerHTML = `
+	<umb-editor-layout role="aside">
+		<h1 slot="header">My package view</h1>
+
+		<uui-box>
+			<p>Example of vanilla JS section</p>
+		</uui-box>
+
+		<uui-action-bar slot="footer">
+			<uui-button look="primary" type="button">Close</uui-button>
+		</uui-action-bar>
+	</umb-editor-layout>
+`;
+
+export default class MyPackageViewCustom extends HTMLElement {
+
+	constructor() {
+		super();
+		this.attachShadow({ mode: 'open' });
+		this.shadowRoot.appendChild(template.content.cloneNode(true));
+
+		this.shadowRoot.querySelector('uui-button').addEventListener('click', this.onClick.bind(this));
+	}
+
+	onClick() {
+		console.log(this.modalHandler);
+		this.modalHandler.close();
+	}
+}
+
+customElements.define('my-package-view-custom', MyPackageViewCustom);