diff --git a/web/modules/editor/editor.go b/web/modules/editor/editor.go
index 20b67a6..7070665 100644
--- a/web/modules/editor/editor.go
+++ b/web/modules/editor/editor.go
@@ -2,7 +2,10 @@ package editor
 
 import (
 	"encoding/json"
+	"fmt"
 	"github.com/PiotrFerenc/mash2/api/types"
+	"github.com/PiotrFerenc/mash2/internal/configuration"
+	"github.com/PiotrFerenc/mash2/internal/executor"
 	"github.com/labstack/echo/v4"
 	"net/http"
 )
@@ -13,14 +16,36 @@ func CreateEditorHandler() func(c echo.Context) error {
 		if err != nil {
 			return err
 		}
-
+		initActions, err := initActions()
+		if err != nil {
+			return err
+		}
 		data := map[string]interface{}{
 			"Title":       "Edytor",
 			"InitCommand": string(initCommand),
+			"Actions":     initActions,
 		}
 		return c.Render(http.StatusOK, "edytor.html", data)
 	}
 }
+func initActions() (map[string]string, error) {
+	actions := executor.CreateActionMap(&configuration.Config{})
+	result := make(map[string]string, len(actions))
+
+	for name, _ := range actions {
+		jsonString, err := json.MarshalIndent(types.Task{
+			Sequence: 0,
+			Action:   name,
+			Name:     fmt.Sprintf("my-%s", name),
+		}, "", "	")
+		if err != nil {
+			return nil, err
+		}
+		result[name] = string(jsonString)
+
+	}
+	return result, nil
+}
 
 func initCommand() ([]byte, error) {
 	initCommand := types.Pipeline{
diff --git a/web/public/views/edytor.html b/web/public/views/edytor.html
index 4e5d693..578adf0 100644
--- a/web/public/views/edytor.html
+++ b/web/public/views/edytor.html
@@ -21,16 +21,24 @@
         </div>
         <div class="col-6">
 <pre id="mermaid">
-            graph TD
-            asd[Client qwe] -->|tcp_123| B
-            B(Load Balancer)
-            B --> C[Server1]
-            B -->|tcp_456| D[Server2]
+
     </pre>
 
         </div>
     </div>
 </div>
+<script type="module">
+    import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
+
+    mermaid.initialize({startOnLoad: false});
+    window.drawDiagram = async function () {
+        let element = document.querySelector('#mermaid');
+        const graphDefinition = 'graph TB\na-->b';
+        const {svg} = await mermaid.render('graphDiv', graphDefinition);
+        element.innerHTML = svg;
+    };
+
+</script>
 <script>
     const initialPipeline = '{{.InitCommand}}'
 
@@ -47,32 +55,43 @@
                     endColumn: word.endColumn
                 };
 
-                const suggestions = [
-                    {
-                        label: 'myKeyword1',
-                        kind: monaco.languages.CompletionItemKind.Keyword,
-                        insertText: '"myKeyword1"',
-                        range: range
-                    },
+                const suggestions = [];
+
+                {{range $action, $json := .Actions}}
+                suggestions.push(
                     {
-                        label: 'myKeyword2',
+                        label: '{{$action}}',
                         kind: monaco.languages.CompletionItemKind.Keyword,
-                        insertText: '"myKeyword2"',
+                        insertText: '{{$json}}',
                         range: range
                     }
-                ];
+                )
+                {{end}}
+
                 return {suggestions: suggestions};
             }
         });
 
-        monaco.editor.create(document.getElementById('container'), {
+        let editor = monaco.editor.create(document.getElementById('container'), {
             value: initialPipeline,
             language: 'json'
         });
 
+        (async () => {
+            await drawDiagram();
+        })();
+
+        editor.onDidChangeModelContent(function (e) {
+            (async () => {
+                await drawDiagram();
+            })();
+            let code = editor.getValue();
+            let js = JSON.parse(code)
+            console.log(js.Tasks)
+        });
+
     });
 </script>
 {{template "scripts" .}}
-
 </body>
 </html>