diff --git a/src/index.js b/src/index.js
index 36b6df6..d2955b0 100644
--- a/src/index.js
+++ b/src/index.js
@@ -29,3 +29,5 @@ editor.addEventListener('editor-content-changed', (e) => {
 	const document = e.detail.content;
 	previewPane.document = document;
 });
+// now that everything is wired up make the editor spit put the content for a first render
+document.dispatchEvent(new CustomEvent('request-document'));
diff --git a/src/ui/elements/editor-element.js b/src/ui/elements/editor-element.js
index 5e4294e..3e8947c 100644
--- a/src/ui/elements/editor-element.js
+++ b/src/ui/elements/editor-element.js
@@ -44,9 +44,13 @@ export class EditorElement extends LitElement {
 		editor.onDidChangeModelContent(() => {
 			const content = editor.getValue();
 			storeDataContractYaml(content);
-			this.dispatchEvent(new CustomEvent('editor-content-changed', { detail:  { content } }));
+			this.dispatchEvent(new CustomEvent('editor-content-changed', { detail: { content } }));
 		});
 
+		document.addEventListener('request-document', () => {
+			this.dispatchEvent(new CustomEvent('editor-content-changed', { detail: { content: editor.getValue() }}));
+		})
+
 		// set up to detect editor errors and emit them
 		monaco.editor.onDidChangeMarkers((resource) => {
 			const markers = monaco.editor.getModelMarkers({resource});
@@ -59,7 +63,7 @@ export class EditorElement extends LitElement {
             column: marker.startColumn
         }))
 
-			this.dispatchEvent(new CustomEvent('editor-errors', { detail:  { validationErrors } }));
+			this.dispatchEvent(new CustomEvent('editor-errors', { detail: { validationErrors } }));
     });
 
 
@@ -68,9 +72,6 @@ export class EditorElement extends LitElement {
 			editor.layout();
 		});
 		resizeObserver.observe(this.editor);
-
-		// emit current content for a first render
-		this.dispatchEvent(new CustomEvent('editor-content-changed', { detail:  { content: editor.getValue() } }));
 	}
 }
 customElements.define("dce-editor", EditorElement);