diff --git a/public/embed-container-demo.html b/public/embed-container-demo.html
new file mode 100644
index 000000000..ab5373d09
--- /dev/null
+++ b/public/embed-container-demo.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <title>ZenUML</title>
+    <link rel="stylesheet"
+          href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.1/styles/default.min.css" crossOrigin="anonymous">
+    <script src="https://cdn.jsdelivr.net/npm/codemirror@5.65.1/lib/codemirror.min.js"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.1/codemirror.min.css" crossOrigin="anonymous" integrity="sha512-uf06llspW44/LZpHzHT6qBOIVODjWtv4MxCricRxkzvopAlSWnTf6hpZTFxuuZcuNE9CBQhqE0Seu1CoRk84nQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <script src="https://cdn.tailwindcss.com"></script>
+  </head>
+  <body>
+    <script>
+      // window.addEventListener('message', (e) => {
+      //   if (!e.data || typeof e.data !== 'string') return;
+      //   const data = JSON.parse(e.data);
+      //   const iframe = document.getElementsByTagName('iframe')[0];
+      //   if (data && data.event === 'resize') {
+      //     iframe.style.height = data.rect.height + 'px';
+      //     iframe.style.width = data.rect.width + 'px';
+      //   }
+      // })
+    </script>
+
+    <div class="m-1 grid grid-cols-6" id="diagram1">
+      <div class="col-span-2">
+        <textarea id="text" class="col-span-1 m-1 border-2" cols="30" rows="200" oninput="updateCode(this.value)"></textarea>
+      </div>
+      <div class="col-span-4">
+        <iframe src="embed.html" style="border: none">
+
+        </iframe>
+      </div>
+    </div>
+    <script>
+      var editor = CodeMirror.fromTextArea(document.getElementById("text"), {
+        lineNumbers: true
+      });
+      editor.on("change", function(cm) {
+        // get the first iframe
+        const iframe = document.getElementsByTagName('iframe')[0];
+        iframe.contentWindow.postMessage(JSON.stringify({action: 'load',
+           code: cm.getValue()}), '*');
+      });
+    </script>
+
+  </body>
+</html>
diff --git a/public/embed.html b/public/embed.html
new file mode 100644
index 000000000..0589cdc80
--- /dev/null
+++ b/public/embed.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <title>ZenUML</title>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but ZenUML doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <script>
+      function updateCode(c) {
+        document.getElementsByClassName('sequence-diagram')[0].__vue__.$store.state.code = c
+      }
+      window.addEventListener('message', (e) => {
+        if (!e.data) return;
+        console.log('e.data', e.data);
+        // return if typeof e.data is not string
+        if(typeof e.data !== 'string') return;
+
+        const data = JSON.parse(e.data);
+        if (data.action !== 'load') return;
+        const code = data && data.code;
+        updateCode(code);
+        setTimeout(() => {
+          // get the first element with class .zenuml
+          const zenuml = document.getElementsByClassName('zenuml')[0];
+          // window.parent.postMessage(JSON.stringify({event: 'resize', rect: zenuml.getBoundingClientRect()}), '*');
+          window.parent.document.getElementsByTagName('iframe')[0].style.height = zenuml.getBoundingClientRect().height + 'px';
+          window.parent.document.getElementsByTagName('iframe')[0].style.width = zenuml.getBoundingClientRect().width + 'px';
+        }, 2000);
+      }, false);
+      document.addEventListener("DOMContentLoaded", function() {
+        updateCode('A.method');
+        setTimeout(() => {
+          // get the first element with class .zenuml
+          const zenuml = document.getElementsByClassName('zenuml')[0];
+          window.parent.postMessage(JSON.stringify({event: 'resize', rect: zenuml.getBoundingClientRect()}), '*');
+        }, 500);
+      }, false);
+    </script>
+
+
+    <div id="diagram" class="diagram">
+      diagram
+    </div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>
diff --git a/src/components/lifeline/LifeLineLayer.vue b/src/components/lifeline/LifeLineLayer.vue
index 67be77dcd..6bf3b58ca 100644
--- a/src/components/lifeline/LifeLineLayer.vue
+++ b/src/components/lifeline/LifeLineLayer.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="life-line-layer absolute h-full" :style="{'min-width': '400px'}">
+  <div class="life-line-layer absolute h-full" :style="{'min-width': '200px'}">
     <life-line
       v-if="starterOnTheLeft"
       :entity="starterParticipant"
diff --git a/vue.config.js b/vue.config.js
index 4ffbbd7a9..4d05dced4 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -5,6 +5,11 @@ module.exports = {
       template: 'public/index.html',
       filename: 'index.html'
     },
+    embed: {
+      entry: 'src/main.ts',
+      template: 'public/embed.html',
+      filename: 'embed.html'
+    },
     smoke: {
       entry: 'src/main.ts',
       template: 'public/smoke.html',
