diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index d644288b8b..e71ebb2ce0 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -36,6 +36,7 @@
 				"@zerodevx/svelte-toast": "^0.8.1",
 				"autoprefixer": "^10.4.13",
 				"cssnano": "^5.1.14",
+				"d3-dag": "^0.11.5",
 				"eslint": "^8.26.0",
 				"eslint-config-prettier": "^8.3.0",
 				"eslint-plugin-svelte3": "^4.0.0",
@@ -58,6 +59,7 @@
 				"svelte-preprocess": "^4.9.8",
 				"svelte-splitpanes": "^0.7.3",
 				"svelte2tsx": "^0.5.20",
+				"svelvet": "^4.0.3",
 				"tailwindcss": "^3.2.2",
 				"tslib": "^2.4.1",
 				"typescript": "^4.8.4"
@@ -1646,14 +1648,7 @@
 				"yaml": "^1.10.2"
 			},
 			"engines": {
-				"node": "^10 || ^12 || >=14.0"
-			},
-			"funding": {
-				"type": "opencollective",
-				"url": "https://opencollective.com/cssnano"
-			},
-			"peerDependencies": {
-				"postcss": "^8.2.15"
+				"node": ">=12"
 			}
 		},
 		"node_modules/cssnano-preset-default": {
@@ -1693,10 +1688,7 @@
 				"postcss-unique-selectors": "^5.1.1"
 			},
 			"engines": {
-				"node": "^10 || ^12 || >=14.0"
-			},
-			"peerDependencies": {
-				"postcss": "^8.2.15"
+				"node": ">=12"
 			}
 		},
 		"node_modules/cssnano-utils": {
@@ -1723,6 +1715,135 @@
 				"node": ">=8.0.0"
 			}
 		},
+		"node_modules/d3-array": {
+			"version": "3.2.0",
+			"resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.0.tgz",
+			"integrity": "sha512-3yXFQo0oG3QCxbF06rMPFyGRMGJNS7NvsV1+2joOjbBE+9xvWQ8+GcMJAjRCzw06zQ3/arXeJgbPYcjUCuC+3g==",
+			"dev": true,
+			"dependencies": {
+				"internmap": "1 - 2"
+			},
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/d3-color": {
+			"version": "3.1.0",
+			"resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
+			"integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==",
+			"dev": true,
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/d3-dag": {
+			"version": "0.11.5",
+			"resolved": "https://registry.npmjs.org/d3-dag/-/d3-dag-0.11.5.tgz",
+			"integrity": "sha512-sNHvYqjzDlvV2fyEkoOCSuLs2GeWliIg7pJcAiKXgtUSxl0kIX0C2q1J8JzzA9CQWptKxYtzxFCXiKptTW8qsQ==",
+			"dev": true,
+			"dependencies": {
+				"d3-array": "^3.1.6",
+				"fastpriorityqueue": "0.7.2",
+				"javascript-lp-solver": "0.4.24",
+				"quadprog": "^1.6.1"
+			}
+		},
+		"node_modules/d3-dispatch": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-3.0.1.tgz",
+			"integrity": "sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg==",
+			"dev": true,
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/d3-drag": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/d3-drag/-/d3-drag-3.0.0.tgz",
+			"integrity": "sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==",
+			"dev": true,
+			"dependencies": {
+				"d3-dispatch": "1 - 3",
+				"d3-selection": "3"
+			},
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/d3-ease": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz",
+			"integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==",
+			"dev": true,
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/d3-interpolate": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
+			"integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
+			"dev": true,
+			"dependencies": {
+				"d3-color": "1 - 3"
+			},
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/d3-selection": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz",
+			"integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==",
+			"dev": true,
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/d3-timer": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz",
+			"integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==",
+			"dev": true,
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/d3-transition": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-3.0.1.tgz",
+			"integrity": "sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==",
+			"dev": true,
+			"dependencies": {
+				"d3-color": "1 - 3",
+				"d3-dispatch": "1 - 3",
+				"d3-ease": "1 - 3",
+				"d3-interpolate": "1 - 3",
+				"d3-timer": "1 - 3"
+			},
+			"engines": {
+				"node": ">=12"
+			},
+			"peerDependencies": {
+				"d3-selection": "2 - 3"
+			}
+		},
+		"node_modules/d3-zoom": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/d3-zoom/-/d3-zoom-3.0.0.tgz",
+			"integrity": "sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==",
+			"dev": true,
+			"dependencies": {
+				"d3-dispatch": "1 - 3",
+				"d3-drag": "2 - 3",
+				"d3-interpolate": "1 - 3",
+				"d3-selection": "2 - 3",
+				"d3-transition": "2 - 3"
+			},
+			"engines": {
+				"node": ">=12"
+			}
+		},
 		"node_modules/date-fns": {
 			"version": "2.29.3",
 			"resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.29.3.tgz",
@@ -2711,6 +2832,12 @@
 				"node": ">= 4.9.1"
 			}
 		},
+		"node_modules/fastpriorityqueue": {
+			"version": "0.7.2",
+			"resolved": "https://registry.npmjs.org/fastpriorityqueue/-/fastpriorityqueue-0.7.2.tgz",
+			"integrity": "sha512-5DtIKh6vtOmEGkYdEPNNb+mxeYCnBiKbK3s4gq52l6cX8I5QaTDWWw0Wx/iYo80fVOblSycHu1/iJeqeNxG8Jw==",
+			"dev": true
+		},
 		"node_modules/fastq": {
 			"version": "1.13.0",
 			"resolved": "https://registry.npmjs.org/fastq/-/fastq-1.13.0.tgz",
@@ -3172,6 +3299,15 @@
 			"integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==",
 			"dev": true
 		},
+		"node_modules/internmap": {
+			"version": "2.0.3",
+			"resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz",
+			"integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==",
+			"dev": true,
+			"engines": {
+				"node": ">=12"
+			}
+		},
 		"node_modules/is-arrayish": {
 			"version": "0.2.1",
 			"resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
@@ -3332,6 +3468,12 @@
 			"integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
 			"dev": true
 		},
+		"node_modules/javascript-lp-solver": {
+			"version": "0.4.24",
+			"resolved": "https://registry.npmjs.org/javascript-lp-solver/-/javascript-lp-solver-0.4.24.tgz",
+			"integrity": "sha512-5edoDKnMrt/u3M6GnZKDDIPxOyFOg+WrwDv8mjNiMC2DePhy2H9/FFQgf4ggywaXT1utvkxusJcjQUER72cZmA==",
+			"dev": true
+		},
 		"node_modules/js-sdsl": {
 			"version": "4.1.4",
 			"resolved": "https://registry.npmjs.org/js-sdsl/-/js-sdsl-4.1.4.tgz",
@@ -4779,6 +4921,15 @@
 				"node": ">=6"
 			}
 		},
+		"node_modules/quadprog": {
+			"version": "1.6.1",
+			"resolved": "https://registry.npmjs.org/quadprog/-/quadprog-1.6.1.tgz",
+			"integrity": "sha512-fN5Jkcjlln/b3pJkseDKREf89JkKIyu6cKIVXisgL6ocKPQ0yTp9n6NZUAq3otEPPw78WZMG9K0o9WsfKyMWJw==",
+			"dev": true,
+			"engines": {
+				"node": ">=8.x"
+			}
+		},
 		"node_modules/queue-microtask": {
 			"version": "1.2.3",
 			"resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -5915,6 +6066,15 @@
 				"typescript": "^4.1.2"
 			}
 		},
+		"node_modules/svelvet": {
+			"version": "4.0.3",
+			"resolved": "https://registry.npmjs.org/svelvet/-/svelvet-4.0.3.tgz",
+			"integrity": "sha512-eNE0l50G+p26gHdAiWlqopqBBTgIWv3LYYvRB/EHbieQmNRqObu6VIxnIcjp8MRWRrl82p6qyer54gxH4fY3qA==",
+			"dev": true,
+			"dependencies": {
+				"d3-zoom": "^3.0.0"
+			}
+		},
 		"node_modules/svg-tags": {
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/svg-tags/-/svg-tags-1.0.0.tgz",
@@ -7818,6 +7978,102 @@
 				"css-tree": "^1.1.2"
 			}
 		},
+		"d3-array": {
+			"version": "3.2.0",
+			"resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.0.tgz",
+			"integrity": "sha512-3yXFQo0oG3QCxbF06rMPFyGRMGJNS7NvsV1+2joOjbBE+9xvWQ8+GcMJAjRCzw06zQ3/arXeJgbPYcjUCuC+3g==",
+			"dev": true,
+			"requires": {
+				"internmap": "1 - 2"
+			}
+		},
+		"d3-color": {
+			"version": "3.1.0",
+			"resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
+			"integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==",
+			"dev": true
+		},
+		"d3-dag": {
+			"version": "0.11.5",
+			"resolved": "https://registry.npmjs.org/d3-dag/-/d3-dag-0.11.5.tgz",
+			"integrity": "sha512-sNHvYqjzDlvV2fyEkoOCSuLs2GeWliIg7pJcAiKXgtUSxl0kIX0C2q1J8JzzA9CQWptKxYtzxFCXiKptTW8qsQ==",
+			"dev": true,
+			"requires": {
+				"d3-array": "^3.1.6",
+				"fastpriorityqueue": "0.7.2",
+				"javascript-lp-solver": "0.4.24",
+				"quadprog": "^1.6.1"
+			}
+		},
+		"d3-dispatch": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-3.0.1.tgz",
+			"integrity": "sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg==",
+			"dev": true
+		},
+		"d3-drag": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/d3-drag/-/d3-drag-3.0.0.tgz",
+			"integrity": "sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==",
+			"dev": true,
+			"requires": {
+				"d3-dispatch": "1 - 3",
+				"d3-selection": "3"
+			}
+		},
+		"d3-ease": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz",
+			"integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==",
+			"dev": true
+		},
+		"d3-interpolate": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
+			"integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
+			"dev": true,
+			"requires": {
+				"d3-color": "1 - 3"
+			}
+		},
+		"d3-selection": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz",
+			"integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==",
+			"dev": true
+		},
+		"d3-timer": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz",
+			"integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==",
+			"dev": true
+		},
+		"d3-transition": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-3.0.1.tgz",
+			"integrity": "sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==",
+			"dev": true,
+			"requires": {
+				"d3-color": "1 - 3",
+				"d3-dispatch": "1 - 3",
+				"d3-ease": "1 - 3",
+				"d3-interpolate": "1 - 3",
+				"d3-timer": "1 - 3"
+			}
+		},
+		"d3-zoom": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/d3-zoom/-/d3-zoom-3.0.0.tgz",
+			"integrity": "sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==",
+			"dev": true,
+			"requires": {
+				"d3-dispatch": "1 - 3",
+				"d3-drag": "2 - 3",
+				"d3-interpolate": "1 - 3",
+				"d3-selection": "2 - 3",
+				"d3-transition": "2 - 3"
+			}
+		},
 		"date-fns": {
 			"version": "2.29.3",
 			"resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.29.3.tgz",
@@ -8476,6 +8732,12 @@
 			"dev": true,
 			"peer": true
 		},
+		"fastpriorityqueue": {
+			"version": "0.7.2",
+			"resolved": "https://registry.npmjs.org/fastpriorityqueue/-/fastpriorityqueue-0.7.2.tgz",
+			"integrity": "sha512-5DtIKh6vtOmEGkYdEPNNb+mxeYCnBiKbK3s4gq52l6cX8I5QaTDWWw0Wx/iYo80fVOblSycHu1/iJeqeNxG8Jw==",
+			"dev": true
+		},
 		"fastq": {
 			"version": "1.13.0",
 			"resolved": "https://registry.npmjs.org/fastq/-/fastq-1.13.0.tgz",
@@ -8815,6 +9077,12 @@
 			"integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==",
 			"dev": true
 		},
+		"internmap": {
+			"version": "2.0.3",
+			"resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz",
+			"integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==",
+			"dev": true
+		},
 		"is-arrayish": {
 			"version": "0.2.1",
 			"resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
@@ -8924,6 +9192,12 @@
 			"integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
 			"dev": true
 		},
+		"javascript-lp-solver": {
+			"version": "0.4.24",
+			"resolved": "https://registry.npmjs.org/javascript-lp-solver/-/javascript-lp-solver-0.4.24.tgz",
+			"integrity": "sha512-5edoDKnMrt/u3M6GnZKDDIPxOyFOg+WrwDv8mjNiMC2DePhy2H9/FFQgf4ggywaXT1utvkxusJcjQUER72cZmA==",
+			"dev": true
+		},
 		"js-sdsl": {
 			"version": "4.1.4",
 			"resolved": "https://registry.npmjs.org/js-sdsl/-/js-sdsl-4.1.4.tgz",
@@ -9934,6 +10208,12 @@
 			"integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==",
 			"dev": true
 		},
+		"quadprog": {
+			"version": "1.6.1",
+			"resolved": "https://registry.npmjs.org/quadprog/-/quadprog-1.6.1.tgz",
+			"integrity": "sha512-fN5Jkcjlln/b3pJkseDKREf89JkKIyu6cKIVXisgL6ocKPQ0yTp9n6NZUAq3otEPPw78WZMG9K0o9WsfKyMWJw==",
+			"dev": true
+		},
 		"queue-microtask": {
 			"version": "1.2.3",
 			"resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -10766,6 +11046,15 @@
 				"pascal-case": "^3.1.1"
 			}
 		},
+		"svelvet": {
+			"version": "4.0.3",
+			"resolved": "https://registry.npmjs.org/svelvet/-/svelvet-4.0.3.tgz",
+			"integrity": "sha512-eNE0l50G+p26gHdAiWlqopqBBTgIWv3LYYvRB/EHbieQmNRqObu6VIxnIcjp8MRWRrl82p6qyer54gxH4fY3qA==",
+			"dev": true,
+			"requires": {
+				"d3-zoom": "^3.0.0"
+			}
+		},
 		"svg-tags": {
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/svg-tags/-/svg-tags-1.0.0.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 9eef600df7..fad81a18a1 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -26,6 +26,7 @@
 		"@zerodevx/svelte-toast": "^0.8.1",
 		"autoprefixer": "^10.4.13",
 		"cssnano": "^5.1.14",
+		"d3-dag": "^0.11.5",
 		"eslint": "^8.26.0",
 		"eslint-config-prettier": "^8.3.0",
 		"eslint-plugin-svelte3": "^4.0.0",
@@ -48,6 +49,7 @@
 		"svelte-preprocess": "^4.9.8",
 		"svelte-splitpanes": "^0.7.3",
 		"svelte2tsx": "^0.5.20",
+		"svelvet": "^4.0.3",
 		"tailwindcss": "^3.2.2",
 		"tslib": "^2.4.1",
 		"typescript": "^4.8.4"
diff --git a/frontend/src/app.css b/frontend/src/app.css
index 851fbb5e64..11f2cd00b9 100644
--- a/frontend/src/app.css
+++ b/frontend/src/app.css
@@ -10,13 +10,24 @@
 		font-weight: 100 900;
 		font-display: swap;
 	}
+
 	.splitpanes--vertical > .splitpanes__pane {
 		transition: none !important;
 	}
+
 	.splitpanes--horizontal > .splitpanes__pane {
 		transition: none !important;
 	}
+
 	.monaco-workbench > .notifications-toasts.visible {
 		display: none !important;
 	}
 }
+
+@layer components {
+	/* Flow graph viewer -> Svelvet library internal class overwrite */
+	.Node {
+		display: flex !important;
+		cursor: pointer !important;
+	}
+}
diff --git a/frontend/src/lib/common.ts b/frontend/src/lib/common.ts
index 340535824b..f1503a9d2c 100644
--- a/frontend/src/lib/common.ts
+++ b/frontend/src/lib/common.ts
@@ -2,6 +2,8 @@ export type OwnerKind = 'group' | 'user'
 
 export type ActionKind = 'Create' | 'Update' | 'Delete' | 'Execute'
 
+export type SupportedLanguage = 'deno' | 'python3' | 'go' | 'bash'
+
 export interface SchemaProperty {
 	type: string | undefined
 	description: string
@@ -10,7 +12,7 @@ export interface SchemaProperty {
 	enum?: string[]
 	contentEncoding?: 'base64' | 'binary'
 	format?: string
-	items?: { type?: 'string' | 'number' | 'bytes', contentEncoding?: 'base64' },
+	items?: { type?: 'string' | 'number' | 'bytes'; contentEncoding?: 'base64' }
 	properties?: { [name: string]: SchemaProperty }
 }
 
diff --git a/frontend/src/lib/components/FlowViewer.svelte b/frontend/src/lib/components/FlowViewer.svelte
index 1f2ee39f8a..cf472039d9 100644
--- a/frontend/src/lib/components/FlowViewer.svelte
+++ b/frontend/src/lib/components/FlowViewer.svelte
@@ -2,13 +2,16 @@
 	import Highlight from 'svelte-highlight'
 	import json from 'svelte-highlight/languages/json'
 	import { faClipboard } from '@fortawesome/free-solid-svg-icons'
-	import type { FlowValue } from '$lib/gen'
+	import type { FlowModule, FlowValue } from '$lib/gen'
 	import { Tab, Tabs, TabContent, Button } from './common'
 	import SchemaViewer from './SchemaViewer.svelte'
 	import FieldHeader from './FieldHeader.svelte'
 	import SvelteMarkdown from 'svelte-markdown'
-	import FlowModulesViewer from './FlowModulesViewer.svelte'
-	import { copyToClipboard } from '../utils'
+	import { copyToClipboard, scriptPathToHref } from '../utils'
+	import { FlowGraph } from './graph'
+	import HighlightCode from './HighlightCode.svelte'
+	import InputTransformsViewer from './InputTransformsViewer.svelte'
+	import IconedPath from './IconedPath.svelte'
 
 	export let flow: {
 		summary: string
@@ -28,6 +31,8 @@
 	export let tab: 'ui' | 'json' | 'schema' = 'ui'
 	export let noSummary = false
 
+	let stepDetail: FlowModule | undefined = undefined
+
 	let open: { [id: number]: boolean } = {}
 	if (initialOpen) {
 		open[initialOpen] = true
@@ -76,10 +81,78 @@
 				{:else}
 					<div class="text-gray-700 text-xs italic mb-4">No inputs</div>
 				{/if}
-				<FlowModulesViewer
-					modules={flow?.value?.modules}
-					failureModule={flow?.value?.failure_module}
-				/>
+				<div class="pr-40 flex flex-col">
+					<div class="mt-5 h-full w-full border border-gray-700">
+						<FlowGraph
+							modules={flow?.value?.modules}
+							failureModule={flow?.value?.failure_module}
+							on:click={(e) => (stepDetail = e.detail)}
+						/>
+					</div>
+					<div class="w-full border-l border-r border-b border-gray-700 min-h-[150px] p-2">
+						{#if stepDetail == undefined}
+							<span class="font-black text-lg w-full my-4">
+								<span>Click on a step to see its details</span>
+							</span>
+						{:else}
+							<div class="font-black text-lg w-full mb-2 "
+								>Step {stepDetail.id ?? ''}<span class="ml-2 font-normal"
+									>{stepDetail.summary || ''}</span
+								></div
+							>
+							{#if stepDetail.value.type == 'identity'}
+								<div> An identity step return as output its input </div>
+							{:else if stepDetail.value.type == 'rawscript'}
+								<div class="text-2xs mb-4">
+									<h3>Step Inputs</h3>
+									<InputTransformsViewer
+										inputTransforms={stepDetail?.value?.input_transforms ??
+											stepDetail?.input_transforms ??
+											{}}
+									/>
+								</div>
+
+								<h3>Code</h3>
+								<HighlightCode
+									language={stepDetail.value.language}
+									code={stepDetail.value.content}
+								/>
+							{:else if stepDetail.value.type == 'script'}
+								<div class="mb-4">
+									<a
+										rel="noreferrer"
+										target="_blank"
+										href={scriptPathToHref(stepDetail?.value?.path ?? '')}
+										class=""
+									>
+										<IconedPath path={stepDetail?.value?.path ?? ''} />
+									</a>
+								</div>
+								<div class="text-2xs mb-4">
+									<h3>Step Inputs</h3>
+									<InputTransformsViewer
+										inputTransforms={stepDetail?.value?.input_transforms ??
+											stepDetail?.input_transforms ??
+											{}}
+									/>
+								</div>
+								{#if stepDetail.value.path.startsWith('hub/')}
+									<div class="mt-6">
+										<h3>Code</h3>
+										<iframe
+											class="w-full h-full  text-sm"
+											title="embedded script from hub"
+											frameborder="0"
+											src="https://hub.windmill.dev/embed/script/{stepDetail.value?.path?.substring(
+												4
+											)}"
+										/>
+									</div>
+								{/if}
+							{/if}
+						{/if}
+					</div>
+				</div>
 			</div>
 		</TabContent>
 		<TabContent value="json">
diff --git a/frontend/src/lib/components/InputTransformsViewer.svelte b/frontend/src/lib/components/InputTransformsViewer.svelte
index ef5084381c..a945420ac0 100644
--- a/frontend/src/lib/components/InputTransformsViewer.svelte
+++ b/frontend/src/lib/components/InputTransformsViewer.svelte
@@ -3,6 +3,7 @@
 	import { Highlight } from 'svelte-highlight'
 	import ObjectViewer from './propertyPicker/ObjectViewer.svelte'
 	import typescript from 'svelte-highlight/languages/typescript'
+	import { cleanExpr } from './flows/utils'
 
 	export let inputTransforms: Record<string, InputTransform>
 </script>
@@ -14,7 +15,7 @@
 					json={val.value}
 				/>{:else}
 				<span class="text-xs">
-					<Highlight offsetTop={0} language={typescript} code={val.expr} />
+					<Highlight offsetTop={0} language={typescript} code={cleanExpr(val.expr)} />
 				</span>
 			{/if}
 		</li>
diff --git a/frontend/src/lib/components/common/actionRow/ActionRow.svelte b/frontend/src/lib/components/common/actionRow/ActionRow.svelte
index 5c6194cf2b..f92e416d15 100644
--- a/frontend/src/lib/components/common/actionRow/ActionRow.svelte
+++ b/frontend/src/lib/components/common/actionRow/ActionRow.svelte
@@ -4,15 +4,16 @@
 
 	$: wide = applyPageWidth ? 'max-w-6xl mx-auto px-4 sm:px-6 md:px-8' : ''
 
-	let scrollY: number
+	let scrollY = 0
 </script>
 
 <svelte:window bind:scrollY />
 
 <div
-	class={'bg-white py-3 w-full ' +
-		(stickToTop ? 'lg:sticky lg:top-0 ' + (scrollY >= 30 ? 'border-b ' : '') : '') +
-		$$props.class}
+	class={'bg-white py-3 ' +
+		(stickToTop ? 'lg:sticky lg:top-0 z-[500] border-b border-gray-200 border-opacity-0 duration-300 '
+			+ (scrollY >= 30 ? 'border-opacity-100 ' : '') : '')
+			+ ($$props.class || '')}
 >
 	<div class={'w-full flex flex-wrap justify-between items-center gap-4 ' + wide}>
 		<div class="flex flex-wrap items-center gap-2">
diff --git a/frontend/src/lib/components/common/languageIcons/Bash.svelte b/frontend/src/lib/components/common/languageIcons/Bash.svelte
new file mode 100644
index 0000000000..b4da143788
--- /dev/null
+++ b/frontend/src/lib/components/common/languageIcons/Bash.svelte
@@ -0,0 +1,18 @@
+<script>
+	export let width = 16
+	export let height = 16
+</script>
+
+<svg
+	{width}
+	{height}
+	{...$$restProps}
+	viewBox="0 0 16 16"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+>
+	<path d="M14.1478 3.56504L9.4137 0.752673C8.84829 0.415776 8.15106 0.415776 7.58566 0.752673L2.85152 3.56504C2.28612 3.899 1.9375 4.52007 1.9375 5.19093V10.8127C1.9375 11.4836 2.28612 12.1047 2.85152 12.4386L7.58566 15.2481C7.8669 15.415 8.18329 15.5 8.49968 15.5C8.81607 15.5 9.12953 15.415 9.4137 15.2481L14.1478 12.4386C14.7132 12.1017 15.0619 11.4836 15.0619 10.8127V5.19093C15.0619 4.52007 14.7132 3.899 14.1478 3.56504Z" fill="white"/>
+	<path d="M14.1478 3.5651L9.4137 0.752734C9.13246 0.58575 8.81607 0.500793 8.49968 0.500793C8.18329 0.500793 7.86983 0.58575 7.58566 0.752734L2.85152 3.5651C2.28612 3.89906 1.9375 4.52013 1.9375 5.19099V10.8128C1.9375 11.4837 2.28612 12.1047 2.85152 12.4387L7.58566 15.2481C7.8669 15.4151 8.18329 15.5001 8.49968 15.5001C8.81607 15.5001 9.12953 15.4151 9.4137 15.2481L14.1478 12.4387C14.7132 12.1018 15.0619 11.4837 15.0619 10.8128V5.19099C15.0619 4.52013 14.7132 3.89906 14.1478 3.5651ZM7.75265 14.961L3.0185 12.1516C2.55563 11.8762 2.26854 11.3635 2.26854 10.8128V5.19099C2.26854 4.64024 2.55563 4.12757 3.0185 3.85219L7.75265 1.04276C7.98115 0.908 8.23895 0.837691 8.49968 0.837691C8.76041 0.837691 9.02114 0.908 9.24671 1.04276L13.9809 3.85219C14.3705 4.08363 14.6341 4.48497 14.7074 4.93612C14.5492 4.60216 14.1976 4.50841 13.7846 4.75156L9.3053 7.51998C8.74576 7.84516 8.33562 8.21428 8.33562 8.88515V14.4044C8.33562 14.8087 8.49675 15.0694 8.74869 15.1456C8.66666 15.1602 8.58464 15.169 8.49968 15.169C8.23895 15.1661 7.97822 15.0958 7.75265 14.961Z" fill="#283037"/>
+	<path d="M12.9086 11.3547L11.728 12.0607C11.6958 12.0783 11.6724 12.0988 11.6724 12.1369V12.4445C11.6724 12.4826 11.6987 12.4972 11.728 12.4796L12.9262 11.7531C12.9584 11.7355 12.9614 11.7004 12.9614 11.6623V11.3899C12.9643 11.3518 12.9379 11.3371 12.9086 11.3547Z" fill="#4DA825"/>
+	<path d="M10.3983 8.75913C10.4364 8.73863 10.4686 8.76499 10.4686 8.81479L10.4715 9.222C10.6414 9.15462 10.7908 9.13704 10.9256 9.16634C10.9549 9.17513 10.9666 9.21321 10.9549 9.26008L10.8641 9.62042C10.8582 9.64678 10.8406 9.67608 10.8231 9.69366C10.8143 9.70245 10.8084 9.70831 10.7996 9.71123C10.7879 9.71709 10.7762 9.72002 10.7645 9.71709C10.7029 9.70245 10.5565 9.67022 10.328 9.7874C10.0877 9.91044 10.0028 10.1184 10.0057 10.2737C10.0086 10.4583 10.1024 10.5169 10.4305 10.5198C10.867 10.5256 11.0574 10.719 11.0604 11.1584C11.0662 11.592 10.8348 12.0549 10.4803 12.342L10.4891 12.7462C10.4891 12.796 10.4569 12.8517 10.4188 12.8693L10.1786 13.007C10.1405 13.0275 10.1082 13.004 10.1082 12.9542L10.1053 12.5558C9.90025 12.6408 9.69225 12.6613 9.56042 12.6086C9.53406 12.5998 9.52527 12.5617 9.53406 12.5207L9.62194 12.1545C9.6278 12.1252 9.64538 12.0959 9.66589 12.0783C9.67468 12.0724 9.68053 12.0666 9.68932 12.0607C9.70397 12.0549 9.71569 12.0519 9.72741 12.0578C9.87096 12.1047 10.0526 12.0842 10.2284 11.9933C10.451 11.8791 10.6004 11.6535 10.5975 11.425C10.5946 11.22 10.4832 11.135 10.2137 11.1321C9.87095 11.1321 9.5487 11.0647 9.54285 10.5579C9.53992 10.1419 9.7567 9.70831 10.0995 9.43293L10.0965 9.02572C10.0965 8.97592 10.1258 8.92026 10.1668 8.89975L10.3983 8.75913Z" fill="white"/>
+</svg>
diff --git a/frontend/src/lib/components/common/languageIcons/Go.svelte b/frontend/src/lib/components/common/languageIcons/Go.svelte
new file mode 100644
index 0000000000..3e1f4581d4
--- /dev/null
+++ b/frontend/src/lib/components/common/languageIcons/Go.svelte
@@ -0,0 +1,34 @@
+<script>
+	export let width = 16
+	export let height = 16
+</script>
+
+<svg
+	{width}
+	{height}
+	{...$$restProps}
+	viewBox="0 0 16 16"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+>
+	<path
+		d="M1.20743 6.82123C1.17627 6.82123 1.16848 6.80565 1.18406 6.78228L1.34764 6.57197C1.36322 6.5486 1.40217 6.53302 1.43333 6.53302H4.21424C4.2454 6.53302 4.25319 6.55639 4.23761 6.57976L4.10519 6.78228C4.08961 6.80565 4.05066 6.82902 4.02729 6.82902L1.20743 6.82123Z"
+		fill="#00ACD7"
+	/>
+	<path
+		d="M0.0311587 7.53787C0 7.53787 -0.00778968 7.52229 0.00778968 7.49892L0.171373 7.28861C0.186952 7.26524 0.225901 7.24966 0.257059 7.24966H3.80915C3.84031 7.24966 3.85589 7.27303 3.8481 7.2964L3.78578 7.48335C3.77799 7.5145 3.74684 7.53008 3.71568 7.53008L0.0311587 7.53787Z"
+		fill="#00ACD7"
+	/>
+	<path
+		d="M1.91641 8.25449C1.88525 8.25449 1.87746 8.23112 1.89304 8.20775L2.0021 8.01301C2.01768 7.98965 2.04884 7.96628 2.08 7.96628H3.63793C3.66909 7.96628 3.68467 7.98965 3.68467 8.0208L3.66909 8.20775C3.66909 8.23891 3.63793 8.26228 3.61456 8.26228L1.91641 8.25449Z"
+		fill="#00ACD7"
+	/>
+	<path
+		d="M10.002 6.68102C9.51124 6.80565 9.17629 6.89912 8.69333 7.02375C8.57648 7.05491 8.56869 7.0627 8.46742 6.94586C8.35058 6.81344 8.26489 6.72776 8.10131 6.64986C7.61056 6.40839 7.13539 6.47849 6.69138 6.7667C6.16168 7.10944 5.88904 7.61575 5.89683 8.24669C5.90462 8.86984 6.33305 9.38394 6.94844 9.46962C7.47814 9.53973 7.92215 9.35278 8.27268 8.95552C8.34279 8.86984 8.40511 8.77637 8.483 8.66732C8.20258 8.66732 7.85204 8.66732 6.9796 8.66732C6.81601 8.66732 6.77706 8.56605 6.83159 8.43363C6.93286 8.19216 7.11981 7.78711 7.22887 7.58459C7.25224 7.53785 7.30676 7.45996 7.42361 7.45996C7.82088 7.45996 9.28534 7.45996 10.2591 7.45996C10.2435 7.67027 10.2435 7.88059 10.2123 8.0909C10.1266 8.65174 9.91631 9.16584 9.57356 9.61762C9.0127 10.3576 8.28047 10.8172 7.3535 10.9418C6.59011 11.0431 5.88125 10.8951 5.25808 10.4277C4.68164 9.99151 4.35447 9.4151 4.26879 8.69847C4.16752 7.84943 4.41679 7.08607 4.93091 6.41618C5.48398 5.69177 6.21621 5.23219 7.11202 5.06861C7.84425 4.93619 8.54532 5.02188 9.17629 5.45029C9.58914 5.72292 9.88515 6.09681 10.0799 6.5486C10.1266 6.6187 10.0955 6.65765 10.002 6.68102Z"
+		fill="#00ACD7"
+	/>
+	<path
+		d="M12.5805 10.9886C11.8717 10.973 11.2251 10.7705 10.6798 10.3031C10.2202 9.90584 9.93202 9.39953 9.83855 8.79975C9.69833 7.91955 9.93981 7.14061 10.4695 6.44735C11.0382 5.69957 11.7236 5.3101 12.6506 5.14652C13.4452 5.00631 14.193 5.08421 14.8707 5.54378C15.4861 5.96441 15.8678 6.53304 15.969 7.28082C16.1014 8.33239 15.7977 9.18922 15.0732 9.92142C14.5591 10.4433 13.9281 10.7705 13.2037 10.9185C12.9934 10.9574 12.783 10.9652 12.5805 10.9886ZM14.4345 7.84165C14.4267 7.74039 14.4267 7.6625 14.4111 7.5846C14.2709 6.81345 13.562 6.37725 12.822 6.54861C12.0976 6.71219 11.6302 7.17177 11.4588 7.90397C11.3186 8.51154 11.6146 9.1269 12.1755 9.37617C12.6039 9.56311 13.0323 9.53974 13.4452 9.32943C14.0606 9.01006 14.3955 8.51154 14.4345 7.84165Z"
+		fill="#00ACD7"
+	/>
+</svg>
diff --git a/frontend/src/lib/components/common/languageIcons/LanguageIcon.svelte b/frontend/src/lib/components/common/languageIcons/LanguageIcon.svelte
new file mode 100644
index 0000000000..fd68173686
--- /dev/null
+++ b/frontend/src/lib/components/common/languageIcons/LanguageIcon.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import type { SupportedLanguage } from '$lib/common'
+	import type { SvelteComponent } from 'svelte'
+	import { BashIcon, GoIcon, PythonIcon, TypeScriptIcon } from './'
+
+	export let lang: SupportedLanguage
+	export let width = 16
+	export let height = 16
+	export let scale = 1
+	const langToComponent: Record<SupportedLanguage, typeof SvelteComponent> = {
+		go: GoIcon,
+		python3: PythonIcon,
+		deno: TypeScriptIcon,
+		bash: BashIcon
+	}
+</script>
+
+<svelte:component
+	this={langToComponent[lang]}
+	width={width * scale}
+	height={height * scale}
+	{...$$restProps}
+/>
diff --git a/frontend/src/lib/components/common/languageIcons/Python.svelte b/frontend/src/lib/components/common/languageIcons/Python.svelte
new file mode 100644
index 0000000000..1046682c58
--- /dev/null
+++ b/frontend/src/lib/components/common/languageIcons/Python.svelte
@@ -0,0 +1,51 @@
+<script>
+	export let width = 16
+	export let height = 16
+</script>
+
+<svg
+	{width}
+	{height}
+	{...$$restProps}
+	viewBox="0 0 17 16"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+>
+	<g clip-path="url(#clip0_128_281)">
+		<path
+			d="M8.4728 0C4.6952 0 4.65462 1.46633 4.65462 1.76815C4.65462 2.22604 4.65462 3.6 4.65462 3.6H8.54553V4.14996C8.54553 4.14996 4.49433 4.14996 3.10916 4.14996C1.95295 4.14996 0.5 4.85295 0.5 7.96814C0.5 10.8297 1.63338 11.9363 2.77724 11.9363C3.11687 11.9363 4.13636 11.9363 4.13636 11.9363C4.13636 11.9363 4.13636 10.5159 4.13636 10.0272C4.13636 9.22851 4.53215 7.74996 6.37724 7.74996C8.69142 7.74996 9.28211 7.74996 10.2363 7.74996C10.8039 7.74996 12.4044 7.50327 12.4044 5.65455C12.4044 3.69789 12.4044 3.05236 12.4044 2.13178C12.4046 1.67316 12.3262 0 8.4728 0ZM6.32735 1.23185C6.71455 1.23185 7.02742 1.54458 7.02742 1.93193C7.02742 2.31898 6.71455 2.632 6.32735 2.632C5.94015 2.632 5.62727 2.31913 5.62727 1.93193C5.62727 1.54458 5.94015 1.23185 6.32735 1.23185Z"
+			fill="url(#paint0_linear_128_281)"
+		/>
+		<path
+			d="M8.527 16C12.3029 16 12.3498 14.506 12.3498 14.2319C12.3498 13.774 12.3498 12.4 12.3498 12.4H8.45427V11.85C8.45427 11.85 12.5317 11.85 13.8906 11.85C15.0556 11.85 16.4998 11.1295 16.4998 8.03187C16.4998 4.63957 14.967 4.06372 14.2226 4.06372C13.8828 4.06372 12.8634 4.06372 12.8634 4.06372C12.8634 4.06372 12.8634 5.54968 12.8634 5.97281C12.8634 6.7715 12.4807 8.25005 10.6226 8.25005C8.30838 8.25005 7.78969 8.25005 6.76336 8.25005C6.19725 8.25005 4.59521 8.52583 4.59521 10.3455C4.59521 12.4509 4.59521 13.0022 4.59521 13.8682C4.59521 14.629 5.06009 16 8.527 16ZM10.6726 14.7682C10.2854 14.7682 9.97252 14.4553 9.97252 14.0681C9.97252 13.6809 10.2853 13.368 10.6726 13.368C11.0597 13.368 11.3727 13.6809 11.3727 14.0681C11.3727 14.4553 11.0597 14.7682 10.6726 14.7682Z"
+			fill="url(#paint1_linear_128_281)"
+		/>
+	</g>
+	<defs>
+		<linearGradient
+			id="paint0_linear_128_281"
+			x1="1.99942"
+			y1="1.42927"
+			x2="9.95251"
+			y2="9.40896"
+			gradientUnits="userSpaceOnUse"
+		>
+			<stop stop-color="#387EB8" />
+			<stop offset="1" stop-color="#366994" />
+		</linearGradient>
+		<linearGradient
+			id="paint1_linear_128_281"
+			x1="6.83245"
+			y1="6.52758"
+			x2="15.3593"
+			y2="14.6967"
+			gradientUnits="userSpaceOnUse"
+		>
+			<stop stop-color="#FFE052" />
+			<stop offset="1" stop-color="#FFC331" />
+		</linearGradient>
+		<clipPath id="clip0_128_281">
+			<rect width="16" height="16" fill="white" transform="translate(0.5)" />
+		</clipPath>
+	</defs>
+</svg>
diff --git a/frontend/src/lib/components/common/languageIcons/TypeScript.svelte b/frontend/src/lib/components/common/languageIcons/TypeScript.svelte
new file mode 100644
index 0000000000..11d7e679eb
--- /dev/null
+++ b/frontend/src/lib/components/common/languageIcons/TypeScript.svelte
@@ -0,0 +1,31 @@
+<script>
+	export let width = 16
+	export let height = 16
+</script>
+
+<svg
+	{width}
+	{height}
+	{...$$restProps}
+	viewBox="0 0 17 16"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+>
+	<g clip-path="url(#clip0_128_278)">
+		<path
+			d="M14.9375 0H2.0625C1.19956 0 0.5 0.699555 0.5 1.5625V14.4375C0.5 15.3004 1.19956 16 2.0625 16H14.9375C15.8004 16 16.5 15.3004 16.5 14.4375V1.5625C16.5 0.699555 15.8004 0 14.9375 0Z"
+			fill="#3178C6"
+		/>
+		<path
+			fill-rule="evenodd"
+			clip-rule="evenodd"
+			d="M10.4062 12.7187V14.2812C10.6594 14.4125 10.9688 14.5094 11.3125 14.575C11.6562 14.6406 12.0312 14.6719 12.4062 14.6719C12.7812 14.6719 13.125 14.6375 13.4688 14.5656C13.8125 14.4937 14.0938 14.375 14.3438 14.2219C14.5969 14.0562 14.8125 13.8469 14.9375 13.5656C15.0625 13.2844 15.1594 12.9719 15.1594 12.5656C15.1594 12.2812 15.1156 12.0344 15.0312 11.8156C14.9469 11.5969 14.825 11.4094 14.6562 11.2531C14.4969 11.0875 14.3125 10.9406 14.0938 10.8156C13.875 10.6906 13.625 10.5594 13.3438 10.4406C13.1375 10.3562 12.9688 10.275 12.7812 10.1937C12.6188 10.1125 12.4781 10.0312 12.375 9.94998C12.2594 9.86561 12.1719 9.77811 12.1094 9.68748C12.0469 9.59373 12.0156 9.49061 12.0156 9.37498C12.0156 9.26873 12.0434 9.17186 12.1 9.08436C12.1566 8.99686 12.2344 8.92498 12.3344 8.86248C12.4344 8.79998 12.5594 8.75311 12.7094 8.71873C12.8563 8.68436 13.0188 8.66873 13.2094 8.66873C13.3406 8.66873 13.4781 8.67842 13.6156 8.69811C13.7594 8.7178 13.9063 8.74811 14.0531 8.78873C14.2 8.82936 14.3438 8.87936 14.4906 8.94186C14.6281 9.00436 14.7563 9.07623 14.8656 9.15748V7.68873C14.6281 7.59811 14.3656 7.52936 14.0844 7.48561C13.8031 7.44186 13.4906 7.41998 13.1156 7.41998C12.7406 7.41998 12.3969 7.46061 12.0531 7.53873C11.7094 7.61686 11.4281 7.74186 11.1781 7.91373C10.925 8.08248 10.7406 8.28873 10.5844 8.56998C10.4375 8.83248 10.3656 9.13248 10.3656 9.50748C10.3656 9.97623 10.5 10.3825 10.7719 10.695C11.0406 11.0387 11.4594 11.2887 11.9906 11.5387C12.2063 11.6262 12.3969 11.7137 12.5844 11.7981C12.7719 11.8825 12.9281 11.97 13.0531 12.0606C13.1875 12.1512 13.2938 12.2512 13.3656 12.3575C13.4438 12.4637 13.4844 12.5887 13.4844 12.7325C13.4844 12.8325 13.46 12.9262 13.4125 13.0137C13.365 13.1012 13.2906 13.1762 13.1906 13.2387C13.0906 13.3012 12.9688 13.3512 12.8156 13.3887C12.6688 13.4231 12.5031 13.4419 12.2844 13.4419C11.9406 13.4419 11.5969 13.3825 11.2844 13.2637C10.9406 13.145 10.6281 12.9669 10.3469 12.7325L10.4062 12.7187ZM7.78125 8.87498H9.78125V7.59373H4.1875V8.87498H6.1875V14.5937H7.78125V8.87498Z"
+			fill="white"
+		/>
+	</g>
+	<defs>
+		<clipPath id="clip0_128_278">
+			<rect width="16" height="16" fill="white" transform="translate(0.5)" />
+		</clipPath>
+	</defs>
+</svg>
diff --git a/frontend/src/lib/components/common/languageIcons/index.ts b/frontend/src/lib/components/common/languageIcons/index.ts
new file mode 100644
index 0000000000..dc8f58a429
--- /dev/null
+++ b/frontend/src/lib/components/common/languageIcons/index.ts
@@ -0,0 +1,5 @@
+export { default as LanguageIcon } from './LanguageIcon.svelte'
+export { default as BashIcon } from './Bash.svelte'
+export { default as GoIcon } from './Go.svelte'
+export { default as PythonIcon } from './Python.svelte'
+export { default as TypeScriptIcon } from './TypeScript.svelte'
diff --git a/frontend/src/lib/components/flows/content/DynamicInputHelpBox.svelte b/frontend/src/lib/components/flows/content/DynamicInputHelpBox.svelte
index 0264126219..871149e0af 100644
--- a/frontend/src/lib/components/flows/content/DynamicInputHelpBox.svelte
+++ b/frontend/src/lib/components/flows/content/DynamicInputHelpBox.svelte
@@ -57,15 +57,9 @@ x + 2</code
 			functions:
 		</p>
 		<ul class="ml-4">
-			<li>
-				<b>previous_result</b>: the object containing the result of the previous step
-			</li>
+			<li><b>result.id</b>: the result of step at id 'id'</li>
 			<li><b>flow_input</b>: the object containing the flow input arguments</li>
 			<li><b>params</b>: the object containing the current step static values</li>
-			<li>
-				<b>step(n)</b>: the function returning the result of step number n. One can also use a
-				negative n. step(0) == result of the first step , step(-1) == previous_result
-			</li>
 			<li>
 				<b>variable(path)</b>: the function returning the variable (including secrets) at given path
 				as a string
diff --git a/frontend/src/lib/components/flows/content/FlowBranchesWrapper.svelte b/frontend/src/lib/components/flows/content/FlowBranchesWrapper.svelte
index c086a5af17..cfd98f4f37 100644
--- a/frontend/src/lib/components/flows/content/FlowBranchesWrapper.svelte
+++ b/frontend/src/lib/components/flows/content/FlowBranchesWrapper.svelte
@@ -84,7 +84,9 @@
 											Set branch {i} predicate</Button
 										>
 									</div>
-									<HighlightCode language="deno" code={branch.expr} />
+									<div class="w-full text-2xs">
+										<HighlightCode language="deno" code={branch.expr} />
+									</div>
 								</div>
 							{:else}
 								<div class="flex flex-row gap-x-2">
diff --git a/frontend/src/lib/components/flows/content/FlowSettings.svelte b/frontend/src/lib/components/flows/content/FlowSettings.svelte
index 71829deda9..1969932df8 100644
--- a/frontend/src/lib/components/flows/content/FlowSettings.svelte
+++ b/frontend/src/lib/components/flows/content/FlowSettings.svelte
@@ -11,83 +11,116 @@
 	import SvelteMarkdown from 'svelte-markdown'
 	import Toggle from '$lib/components/Toggle.svelte'
 	import { Alert } from '$lib/components/common'
+	import { FlowGraph } from '$lib/components/graph'
+	import { Pane, Splitpanes } from 'svelte-splitpanes'
 
 	export let initialPath: string
 
 	export let defaultTab = 'metadata'
 </script>
 
-<FlowCard title="Settings">
-	<Tabs selected={defaultTab}>
-		<Tab value="metadata">Metadata</Tab>
-		<Tab value="schedule">Schedule</Tab>
-		<Tab value="same-worker">Same Worker</Tab>
+<div class="h-full overflow-hidden">
+	<FlowCard title="Settings">
+		<div class="h-full flex-1">
+			<Splitpanes horizontal>
+				<Pane size={50} minSize={20}>
+					<div class="max-w-full w-full overflow-hidden h-full">
+						{#if $flowStore.value.modules}
+							<FlowGraph
+								modules={$flowStore.value.modules}
+								failureModule={$flowStore.value.failure_module}
+							/>
+						{/if}
+					</div>
+				</Pane>
+				<Pane size={50} minSize={20}>
+					<Tabs selected={defaultTab}>
+						<Tab value="metadata">Metadata</Tab>
+						<Tab value="schedule">Schedule</Tab>
+						<Tab value="same-worker">Same Worker</Tab>
 
-		<svelte:fragment slot="content">
-			<TabContent value="metadata" class="p-4">
-				<Path bind:path={$flowStore.path} {initialPath} namePlaceholder="my_flow" kind="flow" />
+						<svelte:fragment slot="content">
+							<TabContent value="metadata" class="p-4">
+								<Path
+									bind:path={$flowStore.path}
+									{initialPath}
+									namePlaceholder="my_flow"
+									kind="flow"
+								/>
 
-				<label class="block my-4">
-					<span class="text-gray-700 text-sm">Summary <Required required={false} /></span>
-					<input
-						type="text"
-						bind:value={$flowStore.summary}
-						placeholder="A very short summary of the flow displayed when the flow is listed"
-						rows="1"
-						id="flow-summary"
-					/>
-				</label>
+								<label class="block my-4">
+									<span class="text-gray-700 text-sm">Summary <Required required={false} /></span>
+									<input
+										type="text"
+										bind:value={$flowStore.summary}
+										placeholder="A very short summary of the flow displayed when the flow is listed"
+										rows="1"
+										id="flow-summary"
+									/>
+								</label>
 
-				<label class="block my-4" for="inp">
-					<span class="text-gray-700 text-sm">
-						Description
-						<Required required={false} detail="markdown" />
-						<textarea
-							type="text"
-							class="text-sm"
-							id="inp"
-							bind:value={$flowStore.description}
-							placeholder="A description to help users understand what this flow does and how to use it. Markdown accepted."
-							rows="3"
-						/>
-					</span>
-				</label>
+								<label class="block my-4" for="inp">
+									<span class="text-gray-700 text-sm">
+										Description
+										<Required required={false} detail="markdown" />
+										<textarea
+											type="text"
+											class="text-sm"
+											id="inp"
+											bind:value={$flowStore.description}
+											placeholder="A description to help users understand what this flow does and how to use it. Markdown accepted."
+											rows="3"
+										/>
+									</span>
+								</label>
 
-				<div>
-					<div class="font-bold pb-1 mt-4">Description preview</div>
-					{#if $flowStore.description}
-						<div class="prose max-h-48 mt-5 text-xs shadow-inner shadow-blue p-4 overflow-auto">
-							<SvelteMarkdown source={$flowStore.description} />
-						</div>
-					{:else}
-						<div class="text-sm text-gray-500"> Enter a description to see the preview </div>
-					{/if}
-				</div>
-			</TabContent>
-			<TabContent value="schedule" class="p-4">
-				<Alert type="info" title="Primary Schedule">
-					Flows can be triggered by any schedules, their webhooks or their UI but they only have
-					only one primary schedules with which they share the same path. The primary schedule can
-					be set here.
-				</Alert>
-				<div class="mt-4" />
-				<FlowSchedules />
-			</TabContent>
+								<div>
+									<div class="font-bold pb-1 mt-4">Description preview</div>
+									{#if $flowStore.description}
+										<div
+											class="prose max-h-48 mt-5 text-xs shadow-inner shadow-blue p-4 overflow-auto"
+										>
+											<SvelteMarkdown source={$flowStore.description} />
+										</div>
+									{:else}
+										<div class="text-sm text-gray-500">
+											Enter a description to see the preview
+										</div>
+									{/if}
+								</div>
+							</TabContent>
+							<TabContent value="schedule" class="p-4">
+								<Alert type="info" title="Primary Schedule">
+									Flows can be triggered by any schedules, their webhooks or their UI but they only
+									have only one primary schedules with which they share the same path. The primary
+									schedule can be set here.
+								</Alert>
+								<div class="mt-4" />
+								<FlowSchedules />
+							</TabContent>
 
-			<TabContent value="same-worker" class="p-4 flex flex-col">
-				<Alert type="info" title="Toggle Same Worker to have all steps be ran on the same worker">
-					Steps will be run one after the other on the same worker, and will share a folder at
-					`/shared` in which they can store heavier data and pass them to the next step. <br /><br
-					/>Beware that the `/shared` folder is not preserved across suspends and sleeps.
-				</Alert>
-				<span class="my-2 text-sm font-bold">Same Worker</span>
-				<Toggle
-					bind:checked={$flowStore.value.same_worker}
-					options={{
-						right: 'Same Worker'
-					}}
-				/>
-			</TabContent>
-		</svelte:fragment>
-	</Tabs>
-</FlowCard>
+							<TabContent value="same-worker" class="p-4 flex flex-col">
+								<Alert
+									type="info"
+									title="Toggle Same Worker to have all steps be ran on the same worker"
+								>
+									Steps will be run one after the other on the same worker, and will share a folder
+									at `/shared` in which they can store heavier data and pass them to the next step. <br
+									/><br />Beware that the `/shared` folder is not preserved across suspends and
+									sleeps.
+								</Alert>
+								<span class="my-2 text-sm font-bold">Same Worker</span>
+								<Toggle
+									bind:checked={$flowStore.value.same_worker}
+									options={{
+										right: 'Same Worker'
+									}}
+								/>
+							</TabContent>
+						</svelte:fragment>
+					</Tabs>
+				</Pane>
+			</Splitpanes>
+		</div>
+	</FlowCard>
+</div>
diff --git a/frontend/src/lib/components/flows/utils.ts b/frontend/src/lib/components/flows/utils.ts
index 6c12795cd7..7501a58d93 100644
--- a/frontend/src/lib/components/flows/utils.ts
+++ b/frontend/src/lib/components/flows/utils.ts
@@ -22,21 +22,12 @@ export function cleanInputs(flow: Flow | any): Flow {
 				mod.value.input_transforms = mod.input_transforms!
 				delete mod.input_transforms
 			}
-			Object.values(mod.input_transforms ?? {}).forEach((inp) => {
+			Object.values(mod.value.input_transforms ?? {}).forEach((inp) => {
 				// for now we use the value for dynamic expression when done in the static editor so we have to resort to this
 				if (inp.type == 'javascript') {
 					//@ts-ignore
 					inp.value = undefined
-					inp.expr = inp.expr
-						.split('\n')
-						.filter(
-							(x) =>
-								x != '' &&
-								!x.startsWith(
-									`import { results, flow_input, variable, resource, params } from 'windmill@`
-								)
-						)
-						.join('\n')
+					inp.expr = cleanExpr(inp.expr)
 				} else {
 					//@ts-ignore
 					inp.expr = undefined
@@ -48,6 +39,18 @@ export function cleanInputs(flow: Flow | any): Flow {
 	return newFlow
 }
 
+export function cleanExpr(expr: string): string {
+	return expr
+		.split('\n')
+		.filter(
+			(x) =>
+				x != '' &&
+				!x.startsWith(
+					`import `
+				)
+		)
+		.join('\n')
+}
 export function getTypeAsString(arg: any): string {
 	if (arg === null) {
 		return 'null'
diff --git a/frontend/src/lib/components/graph/FlowGraph.svelte b/frontend/src/lib/components/graph/FlowGraph.svelte
new file mode 100644
index 0000000000..2632df2999
--- /dev/null
+++ b/frontend/src/lib/components/graph/FlowGraph.svelte
@@ -0,0 +1,328 @@
+<script lang="ts">
+	import Svelvet, { type Edge } from 'svelvet'
+	import { sugiyama, dagStratify, decrossOpt, coordGreedy, coordCenter } from 'd3-dag'
+	import type { FlowModule, RawScript } from '../../gen'
+	import {
+		NODE,
+		createIdGenerator,
+		isNode,
+		isLoop,
+		isBranch,
+		type GraphItem,
+		type Node,
+		type Loop,
+		type Branch,
+		type NestedNodes,
+		type ModuleHost
+	} from '.'
+	import { truncate, truncateRev } from '$lib/utils'
+	import { createEventDispatcher } from 'svelte'
+	import { numberToChars } from '../flows/utils'
+
+	export let modules: FlowModule[] | undefined = []
+	export let failureModule: FlowModule | undefined = undefined
+
+	const idGenerator = createIdGenerator()
+	let nestedNodes: NestedNodes
+	let nodes: Node[] = []
+	let edges: Edge[] = []
+	let width: number, height: number
+
+	let dispatch = createEventDispatcher()
+
+	$: if (modules?.length) {
+		createGraph(modules, failureModule)
+	} else {
+		nodes = edges = []
+	}
+
+	function createGraph(modules: FlowModule[], failureModule?: FlowModule) {
+		nestedNodes = nodes = []
+
+		nestedNodes.push(createVirtualNode(getParentIds(), 'Flow start'))
+		modules.forEach((m) => {
+			const item = getConvertedFlowModule(m)
+			item && nestedNodes.push(item)
+		})
+		const endParentIds = getParentIds()
+		nestedNodes.push(createVirtualNode(getParentIds(), 'Flow end'))
+		if (failureModule) {
+			nestedNodes.push(createErrorHandler(endParentIds, failureModule))
+		}
+
+		const flatNodes = flattenNestedNodes(nestedNodes)
+		const layered = layoutNodes(flatNodes)
+		nodes = layered.nodes
+		width = layered.width
+		height = layered.height
+		edges = createEdges(nodes)
+	}
+
+	function getConvertedFlowModule(
+		module: FlowModule,
+		parent: NestedNodes | undefined = undefined,
+		edgeLabel: string | undefined = undefined
+	): GraphItem | undefined {
+		const type = module.value.type
+		const parentIds = getParentIds(parent)
+
+		if (type === 'rawscript') {
+			const lang = module.value.language
+			return flowModuleToNode(
+				parentIds,
+				module.id,
+				module.summary || 'Inline script',
+				'inline',
+				module,
+				lang,
+				edgeLabel
+			)
+		} else if (type === 'script') {
+			return flowModuleToNode(
+				parentIds,
+				module.id,
+				module.summary || module.value.path || 'Hub script',
+				module.value.path.startsWith('hub/') ? 'hub' : 'workspace',
+				module,
+				undefined,
+				edgeLabel
+			)
+		} else if (type === 'forloopflow') {
+			const expr = module.value.iterator['expr']
+			return flowModuleToLoop(module.value.modules, `For loop: ${truncate(expr, 10)}`, parent)
+		} else if (type === 'branchone') {
+			const branches = [module.value.default, ...module.value.branches.map((b) => b.modules)]
+			return flowModuleToBranch(
+				branches,
+				['Default', ...module.value.branches.map((x) => `If ${truncateRev(x.expr, 20)}`)],
+				parent
+			)
+		} else if (type === 'branchall') {
+			const branches = module.value.branches.map((b) => b.modules)
+			return flowModuleToBranch(branches, [], parent)
+		}
+		return flowModuleToNode(
+			parentIds,
+			module.id,
+			module.summary || 'Identity script',
+			'inline',
+			module,
+			undefined,
+			edgeLabel
+		)
+	}
+
+	function getParentIds(items: NestedNodes | undefined = undefined): string[] {
+		const item = items?.at(-1) || nestedNodes.at(-1)
+		if (!item) return []
+
+		if (isNode(item)) {
+			return ['' + item.id]
+		} else if (isLoop(item)) {
+			return getParentIds(item.items)
+		} else if (isBranch(item)) {
+			return item.items.map((i) => getParentIds(i)).flat()
+		}
+		return []
+	}
+
+	function flowModuleToNode(
+		parentIds: string[],
+		id: string,
+		title: string,
+		host: ModuleHost,
+		onClickDetail: any,
+		lang?: RawScript.language,
+		edgeLabel?: string
+	): Node {
+		const langImg: Record<RawScript.language, string> = {
+			deno: '/icons/ts-lang.svg',
+			go: '/icons/go-lang.svg',
+			python3: '/icons/python-lang.svg',
+			bash: '/icons/bash-lang.svg'
+		}
+		const hostImg: Record<ModuleHost, string> = {
+			hub: '/icons/hub-script.svg',
+			workspace: '/icons/inline-script.svg',
+			inline: ''
+		}
+		const wrapperWidth = lang ? 'w-[calc(100%-70px)]' : 'w-[calc(100%-50px)]'
+		const graphId = idGenerator.next().value
+		return {
+			id: graphId,
+			position: { x: -1, y: -1 },
+			data: {
+				html: `
+				<div class="w-full flex justify-between items-center px-1">
+					<div class="${wrapperWidth} text-left ellipsize text-2xs">
+						${title}
+					</div>
+					<div class="flex items-center">
+						${lang ? `<img src="${langImg[lang]}" class="grayscale">` : ''}
+						${host != 'inline' ? `<img src="${hostImg[host]}" class="grayscale">` : ''}
+						<span class="center-center font-semibold bg-indigo-100 text-indigo-800 rounded px-1 pb-[2px] ml-[2px]">
+							${id ?? numberToChars(graphId - 1)}
+						</span>
+					</div>
+				</div>
+			`
+			},
+			host,
+			width: NODE.width,
+			height: NODE.height,
+			bgColor: 'white',
+			parentIds,
+			clickCallback: (node) => {
+				dispatch('click', onClickDetail)
+			},
+			edgeLabel
+		}
+	}
+
+	function flowModuleToLoop(
+		modules: FlowModule[],
+		startLabel: string,
+		parent: NestedNodes | undefined = undefined
+	): Loop {
+		const loop: Loop = {
+			type: 'loop',
+			items: [createVirtualNode(getParentIds(parent), startLabel)]
+		}
+		modules.forEach((module) => {
+			const item = getConvertedFlowModule(module, loop.items)
+			item && loop.items.push(item)
+		})
+		loop.items.push(createVirtualNode(getParentIds(loop.items), 'Collection of the results'))
+		return loop
+	}
+
+	function flowModuleToBranch(
+		branches: FlowModule[][],
+		edgesLabel: string[],
+		parent: NestedNodes | undefined = undefined
+	): Branch {
+		const branch: Branch = {
+			type: 'branch',
+			items: []
+		}
+		branches.forEach((modules, i) => {
+			const items: NestedNodes = []
+			if (!modules.length) {
+				items.push(createVirtualNode(getParentIds(parent), 'Empty branch', edgesLabel[i]))
+			} else {
+				modules.forEach((module) => {
+					const item = getConvertedFlowModule(module, items.length ? items : parent, edgesLabel[i])
+					item && items.push(item)
+				})
+			}
+			items.length && branch.items.push(items)
+		})
+		return branch
+	}
+
+	function flattenNestedNodes(nestedNodes: NestedNodes, nodes: Node[] = []): Node[] {
+		const array = nodes
+		nestedNodes.forEach((node) => {
+			if (isNode(node)) {
+				array.push(node)
+			} else if (isLoop(node)) {
+				flattenNestedNodes(node.items, array)
+			} else if (isBranch(node)) {
+				node.items.forEach((item) => {
+					flattenNestedNodes(item, array)
+				})
+			}
+		})
+		return array
+	}
+
+	function layoutNodes(nodes: Node[]): { nodes: Node[]; width: number; height: number } {
+		if (!nodes.length) return { nodes: [], width: 0, height: 0 }
+		const stratify = dagStratify().id(({ id }: Node) => '' + id)
+		const dag = stratify(nodes)
+		const layout = sugiyama()
+			.decross(decrossOpt())
+			.coord(coordCenter())
+			.nodeSize(() => [NODE.width + NODE.gap.horizontal, NODE.height + NODE.gap.vertical])
+		const { width, height } = layout(dag)
+		return {
+			nodes: dag.descendants().map((des) => ({
+				...des.data,
+				id: +des.data.id,
+				position: { x: des.x ? des.x - NODE.width / 2 : 0, y: des.y || 0 }
+			})),
+			width: width,
+			height: height + NODE.height
+		}
+	}
+
+	function createEdges(nodes: Node[]): Edge[] {
+		const edges: Edge[] = []
+		nodes.forEach((node) => {
+			node.parentIds.forEach((pid, i) => {
+				edges.push({
+					id: `e-${pid}-${node.id}`,
+					source: +pid,
+					target: node.id,
+					labelBgColor: 'white',
+					arrow: true,
+					animate: false,
+					noHandle: false,
+					label: node.edgeLabel
+					// type: 'smoothstep'
+				})
+			})
+		})
+		return edges
+	}
+
+	function createVirtualNode(parentIds: string[], label: string, edgesLabel?: string): Node {
+		return {
+			id: idGenerator.next().value,
+			position: { x: -1, y: -1 },
+			data: {
+				html: `
+				<div class="w-full max-h-full text-center ellipsize-multi-line text-2xs [-webkit-line-clamp:2] px-1">
+					${label}
+				</div>
+			`
+			},
+			width: NODE.width,
+			height: NODE.height,
+			bgColor: '#d4e4ff',
+			parentIds
+		}
+	}
+
+	function createErrorHandler(parentIds: string[], module: FlowModule): Node {
+		return {
+			id: -1,
+			position: { x: -1, y: -1 },
+			data: {
+				html: `
+				<div class="w-full max-h-full text-center ellipsize-multi-line text-2xs [-webkit-line-clamp:2] px-1">
+					Error handler
+				</div>
+			`
+			},
+			width: NODE.width,
+			height: NODE.height,
+			bgColor: 'rgb(248 113 113)',
+			parentIds,
+			clickCallback: (node) => {
+				dispatch('click', module)
+			}
+		}
+	}
+</script>
+
+<div
+	on:scroll={() => console.log('X')}
+	bind:clientWidth={width}
+	bind:clientHeight={height}
+	class="w-full h-full overflow-hidden"
+>
+	{#if width && height}
+		<Svelvet {nodes} {edges} {width} {height} bgColor="rgb(249 250 251)" />
+	{/if}
+</div>
diff --git a/frontend/src/lib/components/graph/index.ts b/frontend/src/lib/components/graph/index.ts
new file mode 100644
index 0000000000..a1802f6a3c
--- /dev/null
+++ b/frontend/src/lib/components/graph/index.ts
@@ -0,0 +1,4 @@
+export { default as FlowGraph } from './FlowGraph.svelte'
+
+export * from './model'
+export * from './util'
diff --git a/frontend/src/lib/components/graph/model.ts b/frontend/src/lib/components/graph/model.ts
new file mode 100644
index 0000000000..3958f2083c
--- /dev/null
+++ b/frontend/src/lib/components/graph/model.ts
@@ -0,0 +1,31 @@
+import type { Node as SvelvetNode } from "svelvet"
+
+export type ModuleHost = 'workspace' | 'inline' | 'hub'
+
+export type Node = SvelvetNode & { parentIds: string[], edgeLabel?: string, host?: ModuleHost }
+
+export type Loop = {
+	type: 'loop',
+	items: NestedNodes
+}
+
+export type Branch = {
+	type: 'branch',
+	items: NestedNodes[]
+}
+
+export type GraphItem = Node | Loop | Branch
+
+export type NestedNodes = GraphItem[]
+
+export function isNode(item: GraphItem | NestedNodes | undefined): item is Node {
+	return typeof item?.['id'] === 'number'
+}
+
+export function isLoop(item: GraphItem | NestedNodes | undefined): item is Loop {
+	return item?.['type'] === 'loop'
+}
+
+export function isBranch(item: GraphItem | NestedNodes | undefined): item is Branch {
+	return item?.['type'] === 'branch'
+}
\ No newline at end of file
diff --git a/frontend/src/lib/components/graph/util.ts b/frontend/src/lib/components/graph/util.ts
new file mode 100644
index 0000000000..21c6e363ea
--- /dev/null
+++ b/frontend/src/lib/components/graph/util.ts
@@ -0,0 +1,15 @@
+export const NODE = {
+	width: 200,
+	height: 35,
+	gap: {
+		horizontal: 40,
+		vertical: 50
+	}
+}
+
+export function* createIdGenerator(): Generator<number, number, unknown> {
+	let id = 0
+	while (true) {
+		yield id++
+	}
+}
\ No newline at end of file
diff --git a/frontend/src/lib/utils.ts b/frontend/src/lib/utils.ts
index a9a4d6f471..56e2ca057a 100644
--- a/frontend/src/lib/utils.ts
+++ b/frontend/src/lib/utils.ts
@@ -3,7 +3,7 @@ import { goto } from '$app/navigation'
 import { FlowService, Script, ScriptService, type Flow, type FlowModule, type User } from '$lib/gen'
 import { toast } from '@zerodevx/svelte-toast'
 import { get } from 'svelte/store'
-import type { Schema } from './common'
+import type { Schema, SupportedLanguage } from './common'
 import { hubScripts, workspaceStore, type UserExt } from './stores'
 
 export function validateUsername(username: string): string {
@@ -429,7 +429,7 @@ export function scriptPathToHref(path: string): string {
 
 export async function getScriptByPath(path: string): Promise<{
 	content: string
-	language: 'deno' | 'python3' | 'go' | 'bash',
+	language: SupportedLanguage
 	schema: any
 }> {
 	if (path.startsWith('hub/')) {
diff --git a/frontend/src/routes/__layout@root.svelte b/frontend/src/routes/__layout@root.svelte
index 92b9782fdc..75c177bc39 100644
--- a/frontend/src/routes/__layout@root.svelte
+++ b/frontend/src/routes/__layout@root.svelte
@@ -171,8 +171,8 @@
 			</div>
 		</div>
 		<div class={classNames('w-full flex flex-col flex-1', isCollapsed ? 'md:pl-12' : 'md:pl-48')}>
-			<main>
-				<div class="w-full relative">
+			<main class="min-h-screen">
+				<div class="relative w-full h-full">
 					<div
 						class="py-2 px-2 sm:px-4 md:px-8 flex justify-between items-center shadow-sm max-w-6xl mx-auto md:hidden"
 					>
diff --git a/frontend/static/icons/bash-lang.svg b/frontend/static/icons/bash-lang.svg
new file mode 100644
index 0000000000..248c1ba1b4
--- /dev/null
+++ b/frontend/static/icons/bash-lang.svg
@@ -0,0 +1,12 @@
+<svg
+	width="20"
+	height="20"
+	viewBox="0 0 17 16"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+>
+	<path d="M14.1478 3.56504L9.4137 0.752673C8.84829 0.415776 8.15106 0.415776 7.58566 0.752673L2.85152 3.56504C2.28612 3.899 1.9375 4.52007 1.9375 5.19093V10.8127C1.9375 11.4836 2.28612 12.1047 2.85152 12.4386L7.58566 15.2481C7.8669 15.415 8.18329 15.5 8.49968 15.5C8.81607 15.5 9.12953 15.415 9.4137 15.2481L14.1478 12.4386C14.7132 12.1017 15.0619 11.4836 15.0619 10.8127V5.19093C15.0619 4.52007 14.7132 3.899 14.1478 3.56504Z" fill="white"/>
+	<path d="M14.1478 3.5651L9.4137 0.752734C9.13246 0.58575 8.81607 0.500793 8.49968 0.500793C8.18329 0.500793 7.86983 0.58575 7.58566 0.752734L2.85152 3.5651C2.28612 3.89906 1.9375 4.52013 1.9375 5.19099V10.8128C1.9375 11.4837 2.28612 12.1047 2.85152 12.4387L7.58566 15.2481C7.8669 15.4151 8.18329 15.5001 8.49968 15.5001C8.81607 15.5001 9.12953 15.4151 9.4137 15.2481L14.1478 12.4387C14.7132 12.1018 15.0619 11.4837 15.0619 10.8128V5.19099C15.0619 4.52013 14.7132 3.89906 14.1478 3.5651ZM7.75265 14.961L3.0185 12.1516C2.55563 11.8762 2.26854 11.3635 2.26854 10.8128V5.19099C2.26854 4.64024 2.55563 4.12757 3.0185 3.85219L7.75265 1.04276C7.98115 0.908 8.23895 0.837691 8.49968 0.837691C8.76041 0.837691 9.02114 0.908 9.24671 1.04276L13.9809 3.85219C14.3705 4.08363 14.6341 4.48497 14.7074 4.93612C14.5492 4.60216 14.1976 4.50841 13.7846 4.75156L9.3053 7.51998C8.74576 7.84516 8.33562 8.21428 8.33562 8.88515V14.4044C8.33562 14.8087 8.49675 15.0694 8.74869 15.1456C8.66666 15.1602 8.58464 15.169 8.49968 15.169C8.23895 15.1661 7.97822 15.0958 7.75265 14.961Z" fill="#283037"/>
+	<path d="M12.9086 11.3547L11.728 12.0607C11.6958 12.0783 11.6724 12.0988 11.6724 12.1369V12.4445C11.6724 12.4826 11.6987 12.4972 11.728 12.4796L12.9262 11.7531C12.9584 11.7355 12.9614 11.7004 12.9614 11.6623V11.3899C12.9643 11.3518 12.9379 11.3371 12.9086 11.3547Z" fill="#4DA825"/>
+	<path d="M10.3983 8.75913C10.4364 8.73863 10.4686 8.76499 10.4686 8.81479L10.4715 9.222C10.6414 9.15462 10.7908 9.13704 10.9256 9.16634C10.9549 9.17513 10.9666 9.21321 10.9549 9.26008L10.8641 9.62042C10.8582 9.64678 10.8406 9.67608 10.8231 9.69366C10.8143 9.70245 10.8084 9.70831 10.7996 9.71123C10.7879 9.71709 10.7762 9.72002 10.7645 9.71709C10.7029 9.70245 10.5565 9.67022 10.328 9.7874C10.0877 9.91044 10.0028 10.1184 10.0057 10.2737C10.0086 10.4583 10.1024 10.5169 10.4305 10.5198C10.867 10.5256 11.0574 10.719 11.0604 11.1584C11.0662 11.592 10.8348 12.0549 10.4803 12.342L10.4891 12.7462C10.4891 12.796 10.4569 12.8517 10.4188 12.8693L10.1786 13.007C10.1405 13.0275 10.1082 13.004 10.1082 12.9542L10.1053 12.5558C9.90025 12.6408 9.69225 12.6613 9.56042 12.6086C9.53406 12.5998 9.52527 12.5617 9.53406 12.5207L9.62194 12.1545C9.6278 12.1252 9.64538 12.0959 9.66589 12.0783C9.67468 12.0724 9.68053 12.0666 9.68932 12.0607C9.70397 12.0549 9.71569 12.0519 9.72741 12.0578C9.87096 12.1047 10.0526 12.0842 10.2284 11.9933C10.451 11.8791 10.6004 11.6535 10.5975 11.425C10.5946 11.22 10.4832 11.135 10.2137 11.1321C9.87095 11.1321 9.5487 11.0647 9.54285 10.5579C9.53992 10.1419 9.7567 9.70831 10.0995 9.43293L10.0965 9.02572C10.0965 8.97592 10.1258 8.92026 10.1668 8.89975L10.3983 8.75913Z" fill="white"/>
+</svg>
diff --git a/frontend/static/icons/go-lang.svg b/frontend/static/icons/go-lang.svg
new file mode 100644
index 0000000000..df8add0743
--- /dev/null
+++ b/frontend/static/icons/go-lang.svg
@@ -0,0 +1,10 @@
+<svg
+	width="20"
+	height="20"
+	viewBox="0 0 16 17"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+>
+	<path d="M7.83552 6.65512C7.16745 6.82479 6.71146 6.95203 6.05399 7.1217C5.89493 7.16411 5.88432 7.17472 5.74647 7.01566C5.5874 6.83539 5.47075 6.71875 5.24806 6.61271C4.57999 6.28398 3.93312 6.37942 3.32867 6.77177C2.60758 7.23834 2.23642 7.9276 2.24703 8.78652C2.25763 9.63484 2.84087 10.3347 3.67862 10.4513C4.39971 10.5468 5.00416 10.2923 5.48136 9.75148C5.5768 9.63484 5.66163 9.50759 5.76767 9.35914C5.38592 9.35914 4.90872 9.35914 3.72103 9.35914C3.49834 9.35914 3.44532 9.22129 3.51955 9.04102C3.65741 8.71229 3.91191 8.16089 4.06037 7.88518C4.09219 7.82156 4.16642 7.71552 4.32548 7.71552C4.8663 7.71552 6.85992 7.71552 8.18547 7.71552C8.16426 8.00183 8.16426 8.28814 8.12184 8.57444C8.00519 9.33793 7.71888 10.0378 7.25229 10.6528C6.48877 11.6602 5.49196 12.2858 4.23004 12.4555C3.19082 12.5933 2.22582 12.3919 1.37747 11.7556C0.592749 11.1618 0.147366 10.3771 0.0307184 9.40155C-0.107138 8.24572 0.232201 7.20653 0.932089 6.29459C1.685 5.30842 2.68181 4.68278 3.90131 4.4601C4.89812 4.27983 5.85251 4.39648 6.71146 4.9797C7.27349 5.35083 7.67646 5.85983 7.94157 6.47486C8.00519 6.57029 7.96278 6.62331 7.83552 6.65512Z" fill="#00ACD7"/>
+	<path d="M11.3457 12.5192C10.3807 12.498 9.50055 12.2223 8.75825 11.586C8.13259 11.0452 7.74023 10.356 7.61298 9.53945C7.4221 8.3412 7.75083 7.2808 8.47193 6.33705C9.24605 5.31907 10.1792 4.78887 11.4411 4.56619C12.5228 4.37531 13.5408 4.48135 14.4634 5.10699C15.3011 5.6796 15.8207 6.45369 15.9586 7.47167C16.1389 8.90321 15.7253 10.0696 14.7391 11.0664C14.0392 11.7769 13.1803 12.2223 12.1941 12.4237C11.9077 12.4767 11.6214 12.4874 11.3457 12.5192ZM13.8695 8.23516C13.8589 8.09731 13.8589 7.99127 13.8377 7.88523C13.6469 6.83544 12.6819 6.24161 11.6744 6.4749C10.6882 6.69758 10.052 7.32322 9.81868 8.31999C9.6278 9.1471 10.0308 9.98482 10.7943 10.3241C11.3775 10.5786 11.9608 10.5468 12.5228 10.2605C13.3605 9.82576 13.8165 9.1471 13.8695 8.23516Z" fill="#00ACD7"/>
+</svg>
\ No newline at end of file
diff --git a/frontend/static/icons/hub-script.svg b/frontend/static/icons/hub-script.svg
new file mode 100644
index 0000000000..cbd9254408
--- /dev/null
+++ b/frontend/static/icons/hub-script.svg
@@ -0,0 +1,32 @@
+<svg
+	width="20"
+	height="20"
+	viewBox="0 0 17 16"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+>
+	<path
+		d="M8.42363 1.20868L7.14426 3.33305L6.33301 4.6793H9.88863L11.123 2.6293L11.9793 1.20868H8.42363Z"
+		fill="#BCD4FC"
+	/>
+	<path
+		d="M14.2218 4.67929H11.663H6.33301L8.11113 7.75867H9.88488H14.288H15.9999L14.2218 4.67929Z"
+		fill="#3B82F6"
+	/>
+	<path
+		d="M8.55814 8.59932L7.27877 10.8156L4.61377 15.4312H8.16939L9.05627 13.8949L11.2581 10.0812L12.1138 8.59869L8.55814 8.59932Z"
+		fill="#3B82F6"
+	/>
+	<path
+		d="M7.60615 8.56681L6.32678 6.35056L3.66178 1.73431L1.88428 4.81431L2.77115 6.35056L4.97303 10.1637L5.82865 11.6462L7.60615 8.56681Z"
+		fill="#3B82F6"
+	/>
+	<path
+		d="M4.05062 8.5668L1.57187 8.52056L0 8.49118L1.7775 11.5706L4.17063 11.6149L5.82875 11.6456L4.05062 8.5668Z"
+		fill="#BCD4FC"
+	/>
+	<path
+		d="M10.3364 11.6787L11.5364 13.8487L12.2971 15.2243L14.0746 12.1449L12.9164 10.0506L12.1146 8.59869L10.3364 11.6787Z"
+		fill="#BCD4FC"
+	/>
+</svg>
diff --git a/frontend/static/icons/inline-script.svg b/frontend/static/icons/inline-script.svg
new file mode 100644
index 0000000000..2a7b4c51a7
--- /dev/null
+++ b/frontend/static/icons/inline-script.svg
@@ -0,0 +1,85 @@
+<svg
+	width="20"
+	height="20"
+	viewBox="0 0 17 16"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+>
+	<path
+		d="M12.4998 1.33331H4.49984C3.76346 1.33331 3.1665 1.93027 3.1665 2.66665V13.3333C3.1665 14.0697 3.76346 14.6666 4.49984 14.6666H12.4998C13.2362 14.6666 13.8332 14.0697 13.8332 13.3333V2.66665C13.8332 1.93027 13.2362 1.33331 12.4998 1.33331Z"
+		stroke="#595959"
+		stroke-width="1"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+	<path
+		d="M6.5 14.6667V12H10.5V14.6667"
+		stroke="#595959"
+		stroke-width="1"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+	<path
+		d="M5.8335 4H5.84183"
+		stroke="#595959"
+		stroke-width="1"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+	<path
+		d="M11.1665 4H11.1748"
+		stroke="#595959"
+		stroke-width="1"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+	<path
+		d="M8.5 4H8.50833"
+		stroke="#595959"
+		stroke-width="1"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+	<path
+		d="M8.5 6.66669H8.50833"
+		stroke="#595959"
+		stroke-width="1"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+	<path
+		d="M8.5 9.33331H8.50833"
+		stroke="#595959"
+		stroke-width="1"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+	<path
+		d="M11.1665 6.66669H11.1748"
+		stroke="#595959"
+		stroke-width="1"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+	<path
+		d="M11.1665 9.33331H11.1748"
+		stroke="#595959"
+		stroke-width="1"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+	<path
+		d="M5.8335 6.66669H5.84183"
+		stroke="#595959"
+		stroke-width="1"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+	<path
+		d="M5.8335 9.33331H5.84183"
+		stroke="#595959"
+		stroke-width="1"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+</svg>
diff --git a/frontend/static/icons/python-lang.svg b/frontend/static/icons/python-lang.svg
new file mode 100644
index 0000000000..aa36d85a42
--- /dev/null
+++ b/frontend/static/icons/python-lang.svg
@@ -0,0 +1,20 @@
+<svg
+	width="20"
+	height="20"
+	viewBox="0 0 17 16"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+>
+<path d="M8.47619 1C5.1708 1 5.13529 2.28304 5.13529 2.54713C5.13529 2.94778 5.13529 4.15 5.13529 4.15H8.53983V4.63122C8.53983 4.63122 4.99503 4.63122 3.78302 4.63122C2.77133 4.63122 1.5 5.24632 1.5 7.97212C1.5 10.476 2.49171 11.4442 3.49258 11.4442C3.78976 11.4442 4.68182 11.4442 4.68182 11.4442C4.68182 11.4442 4.68182 10.2014 4.68182 9.7738C4.68182 9.07494 5.02812 7.78121 6.64258 7.78121C8.66749 7.78121 9.18434 7.78121 10.0192 7.78121C10.5159 7.78121 11.9164 7.56536 11.9164 5.94772C11.9164 4.23565 11.9164 3.67082 11.9164 2.86531C11.9165 2.46402 11.8479 1 8.47619 1ZM6.59892 2.07787C6.93772 2.07787 7.21149 2.35151 7.21149 2.69044C7.21149 3.02911 6.93772 3.303 6.59892 3.303C6.26012 3.303 5.98636 3.02924 5.98636 2.69044C5.98636 2.35151 6.26012 2.07787 6.59892 2.07787Z" fill="url(#paint0_linear_128_281)"/>
+<path d="M8.5238 15C11.8277 15 11.8688 13.6928 11.8688 13.4528C11.8688 13.0522 11.8688 11.85 11.8688 11.85H8.46017V11.3688C8.46017 11.3688 12.0279 11.3688 13.217 11.3688C14.2363 11.3688 15.5 10.7382 15.5 8.02785C15.5 5.0596 14.1588 4.55573 13.5074 4.55573C13.2101 4.55573 12.3182 4.55573 12.3182 4.55573C12.3182 4.55573 12.3182 5.85594 12.3182 6.22618C12.3182 6.92503 11.9833 8.21876 10.3574 8.21876C8.33251 8.21876 7.87866 8.21876 6.98062 8.21876C6.48528 8.21876 5.0835 8.46007 5.0835 10.0522C5.0835 11.8945 5.0835 12.3769 5.0835 13.1347C5.0835 13.8003 5.49026 15 8.5238 15ZM10.4012 13.9221C10.0624 13.9221 9.78864 13.6483 9.78864 13.3095C9.78864 12.9707 10.0623 12.697 10.4012 12.697C10.7399 12.697 11.0138 12.9707 11.0138 13.3095C11.0138 13.6483 10.7399 13.9221 10.4012 13.9221Z" fill="url(#paint1_linear_128_281)"/>
+<defs>
+<linearGradient id="paint0_linear_128_281" x1="2.81199" y1="2.25061" x2="9.77094" y2="9.23283" gradientUnits="userSpaceOnUse">
+<stop stop-color="#387EB8"/>
+<stop offset="1" stop-color="#366994"/>
+</linearGradient>
+<linearGradient id="paint1_linear_128_281" x1="7.04108" y1="6.7116" x2="14.5021" y2="13.8596" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFE052"/>
+<stop offset="1" stop-color="#FFC331"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/frontend/static/icons/ts-lang.svg b/frontend/static/icons/ts-lang.svg
new file mode 100644
index 0000000000..3b3ec56618
--- /dev/null
+++ b/frontend/static/icons/ts-lang.svg
@@ -0,0 +1,10 @@
+<svg
+	width="20"
+	height="20"
+	viewBox="0 0 17 16"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+>
+<path d="M14.1328 1H2.86719C2.11211 1 1.5 1.61211 1.5 2.36719V13.6328C1.5 14.3879 2.11211 15 2.86719 15H14.1328C14.8879 15 15.5 14.3879 15.5 13.6328V2.36719C15.5 1.61211 14.8879 1 14.1328 1Z" fill="#3178C6"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.168 12.1289V13.4961C10.3895 13.6109 10.6602 13.6957 10.9609 13.7531C11.2617 13.8105 11.5898 13.8379 11.918 13.8379C12.2461 13.8379 12.5469 13.8078 12.8477 13.7449C13.1484 13.682 13.3945 13.5781 13.6133 13.4441C13.8348 13.2992 14.0234 13.116 14.1328 12.8699C14.2422 12.6238 14.327 12.3504 14.327 11.9949C14.327 11.7461 14.2887 11.5301 14.2148 11.3387C14.141 11.1473 14.0344 10.9832 13.8867 10.8465C13.7473 10.7016 13.5859 10.573 13.3945 10.4637C13.2031 10.3543 12.9844 10.2394 12.7383 10.1355C12.5578 10.0617 12.4102 9.99062 12.2461 9.91952C12.1039 9.84843 11.9809 9.77734 11.8906 9.70624C11.7895 9.63241 11.7129 9.55585 11.6582 9.47655C11.6035 9.39452 11.5762 9.30429 11.5762 9.20312C11.5762 9.11015 11.6005 9.02538 11.65 8.94882C11.6995 8.87226 11.7676 8.80937 11.8551 8.75468C11.9426 8.69999 12.052 8.65898 12.1832 8.6289C12.3117 8.59882 12.4539 8.58515 12.6207 8.58515C12.7355 8.58515 12.8559 8.59363 12.9762 8.61085C13.102 8.62808 13.2305 8.6546 13.359 8.69015C13.4875 8.7257 13.6133 8.76945 13.7418 8.82413C13.8621 8.87882 13.9742 8.94171 14.0699 9.01281V7.72765C13.8621 7.64835 13.6324 7.5882 13.3863 7.54991C13.1402 7.51163 12.8668 7.49249 12.5387 7.49249C12.2105 7.49249 11.9098 7.52804 11.609 7.5964C11.3082 7.66476 11.0621 7.77413 10.8434 7.92452C10.6219 8.07218 10.4605 8.25265 10.3238 8.49874C10.1953 8.72843 10.1324 8.99093 10.1324 9.31905C10.1324 9.72921 10.25 10.0847 10.4879 10.3581C10.723 10.6589 11.0895 10.8776 11.5543 11.0964C11.743 11.173 11.9098 11.2495 12.0738 11.3234C12.2379 11.3972 12.3746 11.4737 12.484 11.553C12.6016 11.6323 12.6945 11.7198 12.7574 11.8128C12.8258 11.9058 12.8613 12.0151 12.8613 12.1409C12.8613 12.2284 12.84 12.3105 12.7984 12.387C12.7569 12.4636 12.6918 12.5292 12.6043 12.5839C12.5168 12.6386 12.4102 12.6823 12.2762 12.7151C12.1477 12.7452 12.0027 12.7616 11.8113 12.7616C11.5105 12.7616 11.2098 12.7097 10.9363 12.6058C10.6355 12.5019 10.3621 12.346 10.116 12.1409L10.168 12.1289ZM7.87109 8.76562H9.62109V7.64452H4.72656V8.76562H6.47656V13.7695H7.87109V8.76562Z" fill="white"/>
+</svg>
diff --git a/frontend/tailwind.config.cjs b/frontend/tailwind.config.cjs
index 6b6ed0d69d..4b9e5698a8 100644
--- a/frontend/tailwind.config.cjs
+++ b/frontend/tailwind.config.cjs
@@ -139,7 +139,6 @@ const config = {
 		plugin(({ addBase, addComponents, addUtilities, theme }) => {
 			addBase({
 				'html': {
-					overflowY: 'auto',
 					fontFamily: theme('fontFamily.main'),
 					fontSize: theme('fontSize.base'),
 					fontWeight: theme('fontWeight.normal'),
@@ -279,7 +278,7 @@ const config = {
 					fontSize: theme('fontSize.2xs'),
 					color: theme('colors.gray.500'),
 					backgroundColor: theme('colors.gray.200'),
-          fontFamily: theme('fontFamily.mono'),
+					fontFamily: theme('fontFamily.mono'),
 				},
 				'.input-error': {
 					borderColor: `${theme('colors.red.500')} !important`
@@ -294,7 +293,7 @@ const config = {
 					animation: theme('animation.pulse'),
 					backgroundColor: theme('colors.blue.100'),
 					borderRadius: theme('borderRadius.DEFAULT'),
-        },
+				},
 				'.text-blue-gradient': {
 					color: 'transparent',
 					backgroundClip: 'text',
@@ -368,6 +367,15 @@ const config = {
 					whiteSpace: 'nowrap',
 					textOverflow: 'ellipsis',
 				},
+				/** Set the '-webkit-line-clamp' property to the desired number of lines.
+				 * 
+				 * Eg.: `class="ellipsize-multi-line [-webkit-line-clamp:3]"`
+				 */
+				'.ellipsize-multi-line': {
+					display: '-webkit-box',
+					'-webkit-box-orient': 'vertical',
+					overflow: 'hidden'
+				},
 				'.disabled': {
 					pointerEvents: 'none',
 					cursor: 'default',
@@ -380,7 +388,7 @@ const config = {
 						display: 'none',
 						width: '0px',
 					},
-				},
+				}
 			})
 		})
 	],