diff --git a/src/ui/src/builder/BuilderSettingsHandlers.vue b/src/ui/src/builder/BuilderSettingsHandlers.vue
index 19a637a3d..463fe156d 100644
--- a/src/ui/src/builder/BuilderSettingsHandlers.vue
+++ b/src/ui/src/builder/BuilderSettingsHandlers.vue
@@ -186,7 +186,13 @@ const recognisedEvents: ComputedRef<WriterComponentDefinition["events"]> =
 	});
 
 const userFunctions = computed(() => wf.getUserFunctions());
-const pageKeys = computed(() => wf.getPageKeys());
+const pageKeys = computed(() => {
+	const pages = wf.getComponents("root");
+	const pageKeys = pages
+		.map((page) => page.content["key"])
+		.filter((pageKey) => Boolean(pageKey));
+	return pageKeys;
+});
 
 const isHandlerInvalid = (eventType: string) => {
 	const handlerFunctionName = component.value.handlers?.[eventType];
diff --git a/src/ui/src/builder/BuilderSidebarTree.vue b/src/ui/src/builder/BuilderSidebarTree.vue
index 97ddac982..cdc0e67a8 100644
--- a/src/ui/src/builder/BuilderSidebarTree.vue
+++ b/src/ui/src/builder/BuilderSidebarTree.vue
@@ -47,11 +47,15 @@
 				></BuilderTreeBranch>
 			</div>
 		</div>
-		<div class="addPage">
-			<button @click="addPage">
+		<div class="add">
+			<button v-if="rootType == 'root'" @click="addPage">
 				<i class="material-symbols-outlined"> add </i>
 				Add Page
 			</button>
+			<button v-if="rootType == 'workflows_root'" @click="addWorkflow">
+				<i class="material-symbols-outlined"> add </i>
+				Add Workflow
+			</button>
 		</div>
 	</div>
 </template>
@@ -73,8 +77,17 @@ const { createAndInsertComponent, goToComponentParentPage } =
 
 const searchQuery: Ref<string> = ref(null);
 const matchIndex: Ref<number> = ref(-1);
+const rootType = computed(() => {
+	let targetType = "root";
+	if (ssbm.getMode() == "workflows") {
+		targetType = "workflows_root";
+	}
+	return targetType;
+});
 const rootComponents = computed(() => {
-	return wf.getComponents(null, { sortedByPosition: true });
+	return wf
+		.getComponents(null, { sortedByPosition: true })
+		.filter((c) => c.type == rootType.value);
 });
 
 function determineMatch(component: Component, query: string): boolean {
@@ -152,6 +165,16 @@ async function addPage() {
 	await nextTick();
 	ssbm.setSelection(pageId);
 }
+
+async function addWorkflow() {
+	const pageId = createAndInsertComponent(
+		"workflows_workflow",
+		"workflows_root",
+	);
+	wf.setActivePageId(pageId);
+	await nextTick();
+	ssbm.setSelection(pageId);
+}
 </script>
 
 <style scoped>
@@ -172,7 +195,7 @@ async function addPage() {
 	padding: 0 12px 12px 12px;
 }
 
-.addPage {
+.add {
 	margin-top: auto;
 	padding: 0 16px 16px 16px;
 }
diff --git a/src/ui/src/builder/builderManager.ts b/src/ui/src/builder/builderManager.ts
index b96893e80..71cbe97f0 100644
--- a/src/ui/src/builder/builderManager.ts
+++ b/src/ui/src/builder/builderManager.ts
@@ -100,7 +100,7 @@ export function generateBuilderManager() {
 				`.ComponentRenderer [data-writer-id="${componentId}"]`,
 			);
 			resolvedInstancePath =
-				componentFirstElement.dataset.writerInstancePath;
+				componentFirstElement?.dataset.writerInstancePath;
 		}
 
 		state.value.selection = {
diff --git a/src/ui/src/builder/useComponentActions.ts b/src/ui/src/builder/useComponentActions.ts
index d1141e386..86a39c425 100644
--- a/src/ui/src/builder/useComponentActions.ts
+++ b/src/ui/src/builder/useComponentActions.ts
@@ -142,7 +142,7 @@ export function useComponentActions(wf: Core, ssbm: BuilderManager) {
 			parentId,
 			content: initContent,
 			handlers: {},
-			position: position ?? getNextInsertionPosition(parentId, type)
+			position: position ?? getNextInsertionPosition(parentId, type),
 		};
 
 		return component;
@@ -806,7 +806,8 @@ export function useComponentActions(wf: Core, ssbm: BuilderManager) {
 	): Component["id"] {
 		const component = wf.getComponentById(componentId);
 		if (!component || component.type == "root") return null;
-		if (component.type == "page") return componentId;
+		if (component.type == "page" || component.type == "workflows_workflow")
+			return componentId;
 		return getContainingPageId(component.parentId);
 	}
 
diff --git a/src/ui/src/components/core/root/CoreRoot.vue b/src/ui/src/components/core/root/CoreRoot.vue
index 1fb4c2cb7..8e3573694 100644
--- a/src/ui/src/components/core/root/CoreRoot.vue
+++ b/src/ui/src/components/core/root/CoreRoot.vue
@@ -3,7 +3,7 @@
 		<template v-for="(vnode, index) in getChildrenVNodes()" :key="index">
 			<component
 				:is="vnode"
-				v-if="vnode.key === `${activePageId}:0`"
+				v-if="vnode.key === `${displayedPageId}:0`"
 			></component>
 		</template>
 	</div>
@@ -12,7 +12,6 @@
 <script lang="ts">
 import { FieldType } from "@/writerTypes";
 import * as sharedStyleFields from "@/renderer/sharedStyleFields";
-import { nextTick } from "vue";
 import { useEvaluator } from "@/renderer/useEvaluator";
 
 const ssHashChangeStub = `
@@ -67,17 +66,28 @@ export default {
 };
 </script>
 <script setup lang="ts">
-import { computed, inject, ref, Ref, watch, onBeforeMount } from "vue";
+import {
+	computed,
+	inject,
+	ref,
+	Ref,
+	watch,
+	nextTick,
+	onBeforeMount,
+} from "vue";
 import injectionKeys from "@/injectionKeys";
+import { changePageInHash, getParsedHash } from "@/core/navigation";
 
-const importedModulesSpecifiers: Record<string, string> = {};
 const wf = inject(injectionKeys.core);
 const ssbm = inject(injectionKeys.builderManager);
 const getChildrenVNodes = inject(injectionKeys.getChildrenVNodes);
 const rootEl: Ref<HTMLElement> = ref(null);
 const { isComponentVisible } = useEvaluator(wf);
 
-const getFirstPageId = () => {
+const displayedPageId = computed(() => {
+	const activePageId = wf.getActivePageId();
+	if (activePageId && wf.isChildOf("root", activePageId)) return activePageId;
+
 	const pageComponents = wf.getComponents("root", {
 		includeBMC: true,
 		includeCMC: true,
@@ -87,93 +97,8 @@ const getFirstPageId = () => {
 	const visiblePages = pageComponents.filter((c) => isComponentVisible(c.id));
 	if (visiblePages.length == 0) return null;
 	return visiblePages[0].id;
-};
-
-const hashRegex = /^((?<pageKey>[^/]*))?(\/(?<routeVars>.*))?$/;
-const routeVarRegex = /^(?<key>[^=]+)=(?<value>.*)$/;
-const activePageId = computed(() => wf.getActivePageId() ?? getFirstPageId());
-
-watch(activePageId, (newPageId) => {
-	const page = wf.getComponentById(newPageId);
-	const pageKey = page.content?.["key"];
-	if (ssbm && ssbm.getSelectedId() !== newPageId) {
-		ssbm.setSelection(null);
-	}
-	nextTick().then(() => {
-		window.scrollTo(0, 0);
-		const rendererEl = document.querySelector(".ComponentRenderer");
-		rendererEl.parentElement.scrollTo(0, 0);
-	});
-	changePageInHash(pageKey);
 });
 
-type ParsedHash = {
-	pageKey?: string;
-	routeVars: Record<string, string>;
-};
-
-function getParsedHash(): ParsedHash {
-	const docHash = document.location.hash.substring(1);
-	const hashMatchGroups = docHash.match(hashRegex)?.groups;
-	let pageKey: string;
-	let routeVars: Record<string, string> = {};
-
-	if (!hashMatchGroups) return { pageKey, routeVars };
-
-	pageKey = hashMatchGroups?.pageKey
-		? decodeURIComponent(hashMatchGroups.pageKey)
-		: undefined;
-
-	const routeVarsSegments = hashMatchGroups.routeVars?.split("&") ?? [];
-	routeVarsSegments.forEach((routeVarSegment) => {
-		const matchGroups = routeVarSegment.match(routeVarRegex)?.groups;
-		if (!matchGroups) return;
-		const { key, value } = matchGroups;
-		const decodedKey = decodeURIComponent(key);
-		const decodedValue = decodeURIComponent(value);
-		routeVars[decodedKey] = decodedValue;
-	});
-
-	return { pageKey, routeVars };
-}
-
-function setHash(parsedHash: ParsedHash) {
-	const { pageKey, routeVars } = parsedHash;
-
-	let hash = "";
-	if (pageKey) {
-		hash += `${encodeURIComponent(pageKey)}`;
-	}
-	if (Object.keys(routeVars).length > 0) {
-		hash += "/";
-		hash += Object.entries(routeVars)
-			.map(([key, value]) => {
-				// Vars set to null are excluded from the hash
-
-				if (value === null) return null;
-				return `${encodeURIComponent(key)}=${encodeURIComponent(
-					value,
-				)}`;
-			})
-			.filter((segment) => segment)
-			.join("&");
-	}
-	document.location.hash = hash;
-}
-
-function changePageInHash(targetPageKey: string) {
-	const parsedHash = getParsedHash();
-	parsedHash.pageKey = targetPageKey;
-	setHash(parsedHash);
-}
-
-function changeRouteVarsInHash(targetRouteVars: Record<string, string>) {
-	const parsedHash = getParsedHash();
-	const routeVars = parsedHash?.routeVars ?? {};
-	parsedHash.routeVars = { ...routeVars, ...targetRouteVars };
-	setHash(parsedHash);
-}
-
 function handleHashChange() {
 	const parsedHash = getParsedHash();
 	const event = new CustomEvent("wf-hashchange", {
@@ -186,126 +111,22 @@ function handleHashChange() {
 	wf.setActivePageFromKey(parsedHash.pageKey);
 }
 
-async function importStylesheet(stylesheetKey: string, path: string) {
-	const existingEl = document.querySelector(
-		`[data-writer-stylesheet-key="${stylesheetKey}"]`,
-	);
-	existingEl?.remove();
-	const el = document.createElement("link");
-	el.dataset.writerStylesheetKey = stylesheetKey;
-	el.setAttribute("href", path);
-	el.setAttribute("rel", "stylesheet");
-	document.head.appendChild(el);
-}
-
-async function importScript(scriptKey: string, path: string) {
-	const existingEl = document.querySelector(
-		`[data-writer-script-key="${scriptKey}"]`,
-	);
-	existingEl?.remove();
-	const el = document.createElement("script");
-	el.dataset.writerScriptKey = scriptKey;
-	el.src = path;
-	el.setAttribute("rel", "modulepreload");
-	document.head.appendChild(el);
-}
-
-async function importModule(moduleKey: string, specifier: string) {
-	importedModulesSpecifiers[moduleKey] = specifier;
-	await import(/* @vite-ignore */ specifier);
-}
-
-async function handleFunctionCall(
-	moduleKey: string,
-	functionName: string,
-	args: any[],
-) {
-	const specifier = importedModulesSpecifiers[moduleKey];
-	const m = await import(/* @vite-ignore */ specifier);
-
-	if (!m) {
-		// eslint-disable-next-line no-console
-		console.warn(
-			`The module with key "${moduleKey}" cannot be found. Please check that it has been imported.`,
-		);
-		return;
+watch(displayedPageId, (newPageId) => {
+	const page = wf.getComponentById(newPageId);
+	const pageKey = page.content?.["key"];
+	if (ssbm && ssbm.getSelectedId() !== newPageId) {
+		ssbm.setSelection(null);
 	}
-	m[functionName](...args);
-}
-
-type FileDownloadMailItemPayload = {
-	data: string;
-	fileName: string;
-};
-
-function addMailSubscriptions() {
-	wf.addMailSubscription(
-		"fileDownload",
-		(mailItem: FileDownloadMailItemPayload) => {
-			const el = document.createElement("a");
-			el.href = mailItem.data;
-			el.download = mailItem.fileName;
-			el.click();
-		},
-	);
-	wf.addMailSubscription("openUrl", (url: string) => {
-		const el = document.createElement("a");
-		el.href = url;
-		el.target = "_blank";
-		el.rel = "noopener noreferrer";
-		el.click();
-	});
-	wf.addMailSubscription("pageChange", (pageKey: string) => {
-		changePageInHash(pageKey);
+	nextTick().then(() => {
+		window.scrollTo(0, 0);
+		document
+			.querySelector(".ComponentRenderer")
+			?.parentElement?.scrollTo(0, 0);
 	});
-	wf.addMailSubscription(
-		"routeVarsChange",
-		(routeVars: Record<string, string>) => {
-			changeRouteVarsInHash(routeVars);
-		},
-	);
-	wf.addMailSubscription(
-		"importStylesheet",
-		({ stylesheetKey, path }: { stylesheetKey: string; path: string }) => {
-			importStylesheet(stylesheetKey, path);
-		},
-	);
-	wf.addMailSubscription(
-		"importScript",
-		({ scriptKey, path }: { scriptKey: string; path: string }) => {
-			importScript(scriptKey, path);
-		},
-	);
-	wf.addMailSubscription(
-		"importModule",
-		({
-			moduleKey,
-			specifier,
-		}: {
-			moduleKey: string;
-			specifier: string;
-		}) => {
-			importModule(moduleKey, specifier);
-		},
-	);
-	wf.addMailSubscription(
-		"functionCall",
-		({
-			moduleKey,
-			functionName,
-			args,
-		}: {
-			moduleKey: string;
-			functionName: string;
-			args: any[];
-		}) => {
-			handleFunctionCall(moduleKey, functionName, args);
-		},
-	);
-}
+	changePageInHash(pageKey);
+});
 
 onBeforeMount(() => {
-	addMailSubscriptions();
 	window.addEventListener("hashchange", () => {
 		handleHashChange();
 	});
diff --git a/src/ui/src/components/workflows/WorkflowsRoot.vue b/src/ui/src/components/workflows/WorkflowsRoot.vue
new file mode 100644
index 000000000..6d9f0d4b9
--- /dev/null
+++ b/src/ui/src/components/workflows/WorkflowsRoot.vue
@@ -0,0 +1,81 @@
+<template>
+	<div ref="rootEl" class="WorkflowsRoot" data-writer-container>
+		<template v-for="(vnode, index) in getChildrenVNodes()" :key="index">
+			<component
+				:is="vnode"
+				v-if="vnode.key === `${displayedWorkflowId}:0`"
+			></component>
+		</template>
+	</div>
+</template>
+
+<script lang="ts">
+import { FieldType } from "@/writerTypes";
+import { nextTick } from "vue";
+import { useEvaluator } from "@/renderer/useEvaluator";
+
+const description =
+	"The root component of the application, which serves as the starting point of the component hierarchy.";
+
+export default {
+	writer: {
+		name: "Workflows Root",
+		toolkit: "workflows",
+		category: "Root",
+		description,
+		allowedChildrenTypes: ["workflows_workflow"],
+		fields: {},
+	},
+};
+</script>
+<script setup lang="ts">
+import { computed, inject, ref, Ref } from "vue";
+import injectionKeys from "@/injectionKeys";
+
+const wf = inject(injectionKeys.core);
+const ssbm = inject(injectionKeys.builderManager);
+const getChildrenVNodes = inject(injectionKeys.getChildrenVNodes);
+const rootEl: Ref<HTMLElement> = ref(null);
+
+const displayedWorkflowId = computed(() => {
+	const activePageId = wf.getActivePageId();
+	if (activePageId && wf.isChildOf("workflows_root", activePageId))
+		return activePageId;
+
+	const pageComponents = wf.getComponents("workflows_root", {
+		includeBMC: true,
+		includeCMC: true,
+		sortedByPosition: true,
+	});
+	if (pageComponents.length == 0) return null;
+	return pageComponents[0].id;
+});
+
+// watch(activePageId, (newPageId) => {
+// 	const page = wf.getComponentById(newPageId);
+// 	const pageKey = page.content?.["key"];
+// 	if (ssbm && ssbm.getSelectedId() !== newPageId) {
+// 		ssbm.setSelection(null);
+// 	}
+// 	nextTick().then(() => {
+// 		window.scrollTo(0, 0);
+// 		const rendererEl = document.querySelector(".ComponentRenderer");
+// 		rendererEl.parentElement.scrollTo(0, 0);
+// 	});
+// });
+</script>
+
+<style scoped>
+@import "@/renderer/sharedStyles.css";
+
+.WorkflowsRoot {
+	background: var(--emptinessColor);
+	min-height: 100%;
+	display: flex;
+	width: 100%;
+}
+
+.WorkflowsRoot.selected {
+	background-color: var(--emptinessColor);
+}
+</style>
diff --git a/src/ui/src/components/workflows/WorkflowsWorkflow.vue b/src/ui/src/components/workflows/WorkflowsWorkflow.vue
new file mode 100644
index 000000000..69b130c0f
--- /dev/null
+++ b/src/ui/src/components/workflows/WorkflowsWorkflow.vue
@@ -0,0 +1,285 @@
+<template>
+	<div
+		ref="rootEl"
+		class="WorkflowsWorkflow"
+		@dragover="handleDragover"
+		@drop="handleDrop"
+		@drag="handleDrag"
+		@dragstart="handleDragstart"
+	>
+		<svg width="100%" height="100%">
+			<WorkflowArrow
+				v-for="(arrow, arrowId) in arrows"
+				:key="arrowId"
+				:arrow="arrow"
+				@click="handleArrowClick"
+			></WorkflowArrow>
+		</svg>
+		<template v-for="component in children" :key="component.id">
+			<component
+				:is="renderProxiedComponent(component.id)"
+				:data-writer-unselectable="isUnselectable"
+				:style="{
+					top: `${component.y - renderOffset.y}px`,
+					left: `${component.x - renderOffset.x}px`,
+				}"
+				@drag="(ev: DragEvent) => handleNodeDrag(ev, component.id)"
+				@dragstart="(ev: DragEvent) => handleNodeDragStart(ev)"
+				@dragend="handleNodeDragend"
+				@click="(ev: MouseEvent) => handleNodeClick(ev, component.id)"
+				@out-select="
+					(outId: string) => handleNodeOutSelect(component.id, outId)
+				"
+			></component>
+		</template>
+	</div>
+</template>
+
+<script lang="ts">
+import { type Component, FieldType } from "@/writerTypes";
+import WorkflowArrow from "./base/WorkflowArrow.vue";
+import { watch } from "vue";
+
+const description =
+	"A container component representing a single workflow within the application.";
+
+export default {
+	writer: {
+		name: "Workflow",
+		toolkit: "workflows",
+		category: "Root",
+		description,
+		allowedChildrenTypes: ["*"],
+		allowedParentTypes: ["workflows_root"],
+		fields: {
+			key: {
+				name: "Workflow key",
+				desc: "Unique identifier. It's needed to enable navigation to this Workflow.",
+				type: FieldType.IdKey,
+			},
+		},
+		previewField: "key",
+	},
+};
+</script>
+<script setup lang="ts">
+import { Ref, computed, inject, onMounted, ref } from "vue";
+import { useComponentActions } from "@/builder/useComponentActions";
+import { useDragDropComponent } from "@/builder/useDragDropComponent";
+import injectionKeys from "@/injectionKeys";
+const renderProxiedComponent = inject(injectionKeys.renderProxiedComponent);
+
+const rootEl: Ref<HTMLElement | null> = ref(null);
+const fields = inject(injectionKeys.evaluatedFields);
+const wf = inject(injectionKeys.core);
+const wfbm = inject(injectionKeys.builderManager);
+const arrows = ref([]);
+const renderOffset = ref({ x: 0, y: 0 });
+let clickOffset = { x: 0, y: 0 };
+
+const workflowComponentId = inject(injectionKeys.componentId);
+
+const children = computed(() =>
+	wf.getComponents(workflowComponentId, { sortedByPosition: true }),
+);
+
+const { createAndInsertComponent } = useComponentActions(wf, wfbm);
+const { getComponentInfoFromDrag } = useDragDropComponent(wf);
+
+const activeNodeOut: Ref<{
+	fromComponentId: string;
+	outId: string;
+} | null> = ref(null);
+
+function refreshArrows() {
+	const a = [];
+	const canvasCBR = rootEl.value?.getBoundingClientRect();
+	if (!canvasCBR) {
+		return;
+	}
+	const nodes = wf.getComponents(workflowComponentId);
+
+	nodes
+		.filter((node) => node.outs?.length > 0)
+		.forEach((node) => {
+			const fromNodeId = node.id;
+			node.outs.forEach((out) => {
+				const fromEl = document.querySelector(
+					`[data-writer-id="${fromNodeId}"] [data-writer-socket-id="${out.outId}"]`,
+				);
+				const toEl = document.querySelector(
+					`[data-writer-id="${out.toNodeId}"]`,
+				);
+				if (!fromEl || !toEl) return;
+				const fromCBR = fromEl.getBoundingClientRect();
+				const toCBR = toEl.getBoundingClientRect();
+				a.push({
+					x1: fromCBR.x - canvasCBR.x + fromCBR.width / 2,
+					y1: fromCBR.y - canvasCBR.y + fromCBR.height / 2,
+					x2: toCBR.x - canvasCBR.x,
+					y2: toCBR.y - canvasCBR.y + toCBR.height / 2,
+					color: getComputedStyle(fromEl).backgroundColor,
+				});
+			});
+		});
+	arrows.value = a;
+}
+
+const isUnselectable = computed(() => {
+	if (activeNodeOut.value === null) return null;
+	return true;
+});
+
+function handleNodeOutSelect(componentId: Component["id"], outId: string) {
+	activeNodeOut.value = {
+		fromComponentId: componentId,
+		outId,
+	};
+}
+
+function getEmptyDragImage() {
+	var img = new Image();
+	img.src =
+		"data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=";
+	return img;
+}
+
+function handleDragstart(ev: DragEvent) {
+	ev.dataTransfer.setDragImage(getEmptyDragImage(), 0, 0);
+	clickOffset = getAdjustedCoordinates(ev);
+}
+
+function handleDrag(ev: DragEvent) {
+	ev.preventDefault();
+	const { x, y } = getAdjustedCoordinates(ev);
+	if (x < 0 || y < 0) return;
+	renderOffset.value.x = Math.max(
+		0,
+		renderOffset.value.x - (x - clickOffset.x),
+	);
+	renderOffset.value.y = Math.max(
+		0,
+		renderOffset.value.y - (y - clickOffset.y),
+	);
+	refreshArrows();
+}
+
+function handleDragover(ev: DragEvent) {
+	ev.preventDefault();
+	ev.stopPropagation();
+}
+
+function getAdjustedCoordinates(ev: DragEvent) {
+	const canvasCBR = rootEl.value.getBoundingClientRect();
+	const x = ev.pageX - canvasCBR.x + renderOffset.value.x;
+	const y = ev.pageY - canvasCBR.y + renderOffset.value.y;
+	return { x, y };
+}
+
+function handleDrop(ev: DragEvent) {
+	ev.preventDefault();
+	ev.stopPropagation();
+	const dropInfo = getComponentInfoFromDrag(ev);
+
+	if (!dropInfo) return;
+	const { draggedType, draggedId } = dropInfo;
+	if (draggedId) return;
+
+	const { x, y } = getAdjustedCoordinates(ev);
+	if (x < 0 || y < 0) return;
+
+	createNode(draggedType, x, y);
+}
+
+function handleArrowClick() {}
+
+function handleNodeDragStart(ev: DragEvent) {
+	ev.stopPropagation();
+	ev.dataTransfer.setDragImage(getEmptyDragImage(), 0, 0);
+	clickOffset = {
+		x: ev.offsetX,
+		y: ev.offsetY,
+	};
+}
+
+function handleNodeDrag(ev: DragEvent, componentId: Component["id"]) {
+	ev.preventDefault();
+	ev.stopPropagation();
+	const { x, y } = getAdjustedCoordinates(ev);
+	if (x < 0 || y < 0) return;
+
+	const component = wf.getComponentById(componentId);
+	component.x = x - clickOffset.x;
+	component.y = y - clickOffset.y;
+	refreshArrows();
+}
+
+function handleNodeDragend(ev: DragEvent) {
+	ev.preventDefault();
+}
+
+function handleNodeClick(ev: MouseEvent, componentId: Component["id"]) {
+	if (!activeNodeOut.value) return;
+	if (activeNodeOut.value.fromComponentId == componentId) return;
+
+	const component = wf.getComponentById(activeNodeOut.value.fromComponentId);
+
+	component.outs = [
+		...(component.outs ?? []),
+		{
+			toNodeId: componentId,
+			outId: activeNodeOut.value.outId,
+		},
+	];
+
+	activeNodeOut.value = null;
+	refreshArrows();
+}
+
+function createNode(type: string, x: number, y: number) {
+	const componentId = createAndInsertComponent(type, workflowComponentId);
+	const component = wf.getComponentById(componentId);
+	component.x = x;
+	component.y = y;
+}
+
+watch(children, async (postChildren, preChildren) => {
+	// Remove references when a node is deleted
+
+	const preIds = preChildren.map((c) => c.id);
+	const postIds = postChildren.map((c) => c.id);
+	const removedIds = preIds.filter((cId) => !postIds.includes(cId));
+	removedIds.forEach((removedId) => {
+		postChildren.forEach((c) => {
+			if (!c.outs || c.outs.length == 0) return;
+			c.outs = c.outs.filter((out) => out.toNodeId !== removedId);
+		});
+	});
+	refreshArrows();
+	await wf.sendComponentUpdate();
+});
+
+onMounted(() => {
+	refreshArrows();
+});
+</script>
+
+<style scoped>
+@import "@/renderer/sharedStyles.css";
+
+.WorkflowsWorkflow {
+	display: flex;
+	width: 100%;
+	min-height: 100%;
+	background: var(--builderSubtleSeparatorColor);
+	flex: 1 0 auto;
+	flex-direction: row;
+	align-items: stretch;
+	position: relative;
+	overflow: hidden;
+}
+
+.component.WorkflowsWorkflow.selected {
+	background: var(--builderSubtleSeparatorColor);
+}
+</style>
diff --git a/src/ui/src/components/workflows/abstract/WorkflowsNode.vue b/src/ui/src/components/workflows/abstract/WorkflowsNode.vue
index 66076d502..04dac5d4f 100644
--- a/src/ui/src/components/workflows/abstract/WorkflowsNode.vue
+++ b/src/ui/src/components/workflows/abstract/WorkflowsNode.vue
@@ -3,7 +3,33 @@
 </docs>
 
 <template>
-	<div></div>
+	<div class="WorkflowsNode">
+		<div class="title">
+			<i class="material-symbols-outlined">settings</i>
+			{{ def.name }}
+		</div>
+		<div v-if="false" class="main">
+			<div></div>
+		</div>
+		<div class="outputs">
+			<div
+				v-for="(out, outId) in { ...dynamicOuts, ...staticOuts }"
+				:key="outId"
+				class="output"
+			>
+				{{ out.name }}
+				<div
+					class="ball"
+					:class="out.style"
+					:data-writer-socket-id="outId"
+					:data-writer-unselectable="true"
+					@click.capture="
+						(ev: DragEvent) => handleOutClick(ev, outId)
+					"
+				></div>
+			</div>
+		</div>
+	</div>
 </template>
 
 <script lang="ts">
@@ -12,21 +38,142 @@ import { FieldCategory, FieldType } from "@/writerTypes";
 export default {
 	writer: {
 		name: "Node",
+		description: "A Workflows node.",
 		toolkit: "workflows",
 		category: "Other",
-		fields: {
-			text: {
-				name: "Text",
-				init: "Button Text",
-				type: FieldType.Text,
-			},
-		},
+		fields: {},
 		previewField: "text",
 	},
 };
 </script>
 <script setup lang="ts">
-import { ComponentPublicInstance, inject, ref } from "vue";
+import { computed, inject } from "vue";
+import { Component } from "@/writerTypes";
+import injectionKeys from "@/injectionKeys";
+
+const wf = inject(injectionKeys.core);
+const componentId = inject(injectionKeys.componentId);
+const fields = inject(injectionKeys.evaluatedFields);
+
+const def = computed(() => {
+	const component = wf.getComponentById(componentId);
+	return wf?.getComponentDefinition(component.type);
+});
+
+const staticOuts = computed(() => {
+	const processedOuts = {};
+	Object.entries(def.value.outs).forEach(([outId, out]) => {
+		if (outId === "$dynamic") return;
+		processedOuts[outId] = out;
+	});
+	return processedOuts;
+});
+
+const dynamicOuts = computed(() => {
+	const processedOuts = {};
+	Object.entries(def.value.outs).forEach(([outId, out]) => {
+		if (outId !== "$dynamic") return;
+		const dynamicField = out.field;
+		const dynamicKeys = Object.keys(fields[dynamicField].value ?? {});
+		dynamicKeys.forEach((key) => {
+			processedOuts[`${outId}_${key}`] = {
+				name: key,
+				description: "Dynamically created",
+				style: "dynamic",
+			};
+		});
+	});
+	return processedOuts;
+});
+
+const emit = defineEmits(["outSelect"]);
+
+function handleOutClick(ev: DragEvent, outId: string) {
+	ev.stopPropagation();
+	emit("outSelect", outId);
+}
 </script>
 
-<style scoped></style>
+<style scoped>
+.WorkflowsNode {
+	background: var(--builderBackgroundColor);
+	border-radius: 12px;
+	width: 240px;
+	position: absolute;
+	box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.03);
+}
+
+.title {
+	display: flex;
+	gap: 12px;
+	padding: 14px 16px 14px 16px;
+	border-radius: 12px 12px 0 0;
+	border-top: 1px solid var(--builderSeparatorColor);
+	border-left: 1px solid var(--builderSeparatorColor);
+	border-right: 1px solid var(--builderSeparatorColor);
+	align-items: center;
+	font-size: 12px;
+	font-style: normal;
+	font-weight: 500;
+	line-height: 12px;
+	letter-spacing: 1.3px;
+	text-transform: uppercase;
+}
+
+.title img {
+	width: 18px;
+}
+
+.title i {
+	font-size: 16px;
+}
+
+.main {
+	font-size: 14px;
+	padding: 12px 16px 12px 16px;
+	border-left: 1px solid var(--builderSeparatorColor);
+	border-right: 1px solid var(--builderSeparatorColor);
+}
+
+.outputs {
+	border: 1px solid var(--builderSeparatorColor);
+	border-radius: 0 0 12px 12px;
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+	padding: 12px 0 12px 16px;
+}
+
+.output {
+	display: flex;
+	gap: 8px;
+	align-items: center;
+	justify-content: right;
+	font-size: 10px;
+	font-style: normal;
+	font-weight: 500;
+	letter-spacing: 1.3px;
+	text-transform: uppercase;
+}
+
+.output .ball {
+	margin-right: -8px;
+	height: 16px;
+	width: 16px;
+	border-radius: 50%;
+	border: 1px solid var(--builderBackgroundColor);
+	cursor: pointer;
+}
+
+.output .ball.success {
+	background: var(--builderSuccessColor);
+}
+
+.output .ball.error {
+	background: var(--builderErrorColor);
+}
+
+.output .ball.dynamic {
+	background: #a95ef8;
+}
+</style>
diff --git a/src/ui/src/components/workflows/base/WorkflowArrow.vue b/src/ui/src/components/workflows/base/WorkflowArrow.vue
new file mode 100644
index 000000000..3d9c83f82
--- /dev/null
+++ b/src/ui/src/components/workflows/base/WorkflowArrow.vue
@@ -0,0 +1,84 @@
+<template>
+	<g tabindex="0" @click="handleClick">
+		<path :d="pathD" :style="{ stroke: props.arrow.color }"></path>
+		<path
+			:d="pathD"
+			:style="{
+				stroke: props.arrow.color,
+				strokeWidth: 12,
+				opacity: isSelected ? `0.2` : `0`,
+			}"
+		></path>
+	</g>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from "vue";
+
+const props = defineProps<{
+	arrow: {
+		x1: number;
+		y1: number;
+		x2: number;
+		y2: number;
+		color: string;
+	};
+}>();
+
+const isSelected = ref(false);
+
+function handleClick() {
+	isSelected.value = true;
+}
+
+const pathD = computed(() => {
+	const xDif = props.arrow.x2 - props.arrow.x1;
+	const yDif = props.arrow.y2 - props.arrow.y1;
+
+	const protrusionLength = 30;
+
+	const points = [
+		{ x: props.arrow.x1, y: props.arrow.y1 },
+		{ x: props.arrow.x1 + protrusionLength, y: props.arrow.y1 },
+		{
+			x: props.arrow.x1 + protrusionLength,
+			y: props.arrow.y1 + yDif * 0.25,
+		},
+		{ x: props.arrow.x1 + xDif * 0.5, y: props.arrow.y1 + yDif * 0.5 },
+		{
+			x: props.arrow.x2 - protrusionLength,
+			y: props.arrow.y1 + yDif * 0.75,
+		},
+		{ x: props.arrow.x2 - protrusionLength, y: props.arrow.y2 },
+		{ x: props.arrow.x2, y: props.arrow.y2 },
+	];
+
+	let s: string;
+
+	if (xDif > protrusionLength) {
+		s = `M ${points[0].x} ${points[0].y}`;
+		s += `C ${points[3].x} ${points[0].y}, ${points[3].x} ${points[6].y}, ${points[6].x} ${points[6].y}`;
+	} else {
+		s = `M ${points[0].x} ${points[0].y}`;
+		s += `C ${points[1].x} ${points[1].y}, ${points[2].x} ${points[2].y}, ${points[3].x} ${points[3].y}`;
+		s += `C ${points[4].x} ${points[4].y}, ${points[5].x} ${points[5].y}, ${points[6].x} ${points[6].y}`;
+	}
+
+	return s;
+});
+</script>
+
+<style scoped>
+@import "@/renderer/sharedStyles.css";
+
+.WorkflowsArrow {
+}
+
+g {
+	outline: none;
+}
+
+path {
+	fill: none;
+}
+</style>
diff --git a/src/ui/src/core/index.ts b/src/ui/src/core/index.ts
index fdda46bb0..72b9cefd2 100644
--- a/src/ui/src/core/index.ts
+++ b/src/ui/src/core/index.ts
@@ -558,14 +558,6 @@ export function generateCore() {
 		setActivePageId(matches[0].id);
 	}
 
-	function getPageKeys() {
-		const pages = getComponents("root");
-		const pageKeys = pages
-			.map((page) => page.content["key"])
-			.filter((pageKey) => !!pageKey);
-		return pageKeys;
-	}
-
 	function setActivePageId(componentId: Component["id"]) {
 		activePageId.value = componentId;
 	}
@@ -601,7 +593,6 @@ export function generateCore() {
 		getComponents,
 		setActivePageId,
 		getActivePageId,
-		getPageKeys,
 		setActivePageFromKey,
 		getComponentDefinition,
 		getSupportedComponentTypes,
diff --git a/src/ui/src/core/navigation.ts b/src/ui/src/core/navigation.ts
new file mode 100644
index 000000000..f74b01563
--- /dev/null
+++ b/src/ui/src/core/navigation.ts
@@ -0,0 +1,70 @@
+type ParsedHash = {
+	pageKey?: string;
+	routeVars: Map<string, string>; // Stored as Map to avoid injection e.g. prototype pollution
+};
+
+const hashRegex = /^((?<pageKey>[^/]*))?(\/(?<routeVars>.*))?$/;
+const routeVarRegex = /^(?<key>[^=]+)=(?<value>.*)$/;
+
+export function getParsedHash(): ParsedHash {
+	const docHash = document.location.hash.substring(1);
+	const hashMatchGroups = docHash.match(hashRegex)?.groups;
+	const routeVars: Map<string, string> = new Map();
+	const pageKey = hashMatchGroups?.pageKey
+		? decodeURIComponent(hashMatchGroups.pageKey)
+		: undefined;
+
+	if (!hashMatchGroups) return { pageKey, routeVars };
+
+	const routeVarsSegments = hashMatchGroups.routeVars?.split("&") ?? [];
+	routeVarsSegments.forEach((routeVarSegment) => {
+		const matchGroups = routeVarSegment.match(routeVarRegex)?.groups;
+		if (!matchGroups) return;
+		const { key, value } = matchGroups;
+		const decodedKey = decodeURIComponent(key);
+		const decodedValue = decodeURIComponent(value);
+		routeVars.set(decodedKey, decodedValue);
+	});
+
+	return { pageKey, routeVars };
+}
+
+function setHash(parsedHash: ParsedHash) {
+	const { pageKey, routeVars } = parsedHash;
+
+	let hash = "";
+	if (pageKey) {
+		hash += `${encodeURIComponent(pageKey)}`;
+	}
+
+	if (routeVars.keys.length > 0) {
+		hash += "/";
+		hash += Array.from(routeVars.entries())
+			.map(([key, value]) => {
+				// Vars set to null are excluded from the hash
+
+				if (value === null) return null;
+				return `${encodeURIComponent(key)}=${encodeURIComponent(
+					value,
+				)}`;
+			})
+			.filter((segment) => segment)
+			.join("&");
+	}
+	document.location.hash = hash;
+}
+
+export function changePageInHash(targetPageKey: string) {
+	const parsedHash = getParsedHash();
+	parsedHash.pageKey = targetPageKey;
+	setHash(parsedHash);
+}
+
+export function changeRouteVarsInHash(targetRouteVars: Record<string, string>) {
+	const parsedHash = getParsedHash();
+	const routeVars = parsedHash?.routeVars ?? {};
+	parsedHash.routeVars = new Map(
+		Object.entries({ ...routeVars, ...targetRouteVars }),
+	);
+	setHash(parsedHash);
+}
diff --git a/src/ui/src/core/templateMap.ts b/src/ui/src/core/templateMap.ts
index facc6330f..c7261ce97 100644
--- a/src/ui/src/core/templateMap.ts
+++ b/src/ui/src/core/templateMap.ts
@@ -64,7 +64,9 @@ import CoreMapbox from "../components/core/embed/CoreMapbox.vue";
 
 // WORKFLOWS
 
+import WorkflowsWorkflow from "../components/workflows/WorkflowsWorkflow.vue";
 import WorkflowsNode from "../components/workflows/abstract/WorkflowsNode.vue";
+import WorkflowsRoot from "@/components/workflows/WorkflowsRoot.vue";
 
 import { AbstractTemplate, WriterComponentDefinition } from "@/writerTypes";
 import { h } from "vue";
@@ -125,7 +127,9 @@ const templateMap = {
 	avatar: CoreAvatar,
 	annotatedtext: CoreAnnotatedText,
 	jsonviewer: CoreJsonViewer,
-	workflowsnode: WorkflowsNode,
+	workflows_root: WorkflowsRoot,
+	workflows_workflow: WorkflowsWorkflow,
+	workflows_node: WorkflowsNode,
 };
 
 const abstractTemplateMap: Record<string, AbstractTemplate> = {};
diff --git a/src/ui/src/renderer/ComponentProxy.vue b/src/ui/src/renderer/ComponentProxy.vue
index e781aeca5..326623405 100644
--- a/src/ui/src/renderer/ComponentProxy.vue
+++ b/src/ui/src/renderer/ComponentProxy.vue
@@ -51,12 +51,13 @@ export default {
 			() =>
 				isBeingEdited.value &&
 				!component.value.isCodeManaged &&
-				component.value.type !== "root",
+				component.value.type !== "root" &&
+				component.value.type !== "workflows_root",
 		);
 
 		const isParentSuitable = (parentId, childType) => {
 			const allowedTypes = !parentId
-				? ["root"]
+				? ["root", "workflows_root"]
 				: wf.getContainableTypes(parentId);
 			return allowedTypes.includes(childType);
 		};
diff --git a/src/ui/src/renderer/ComponentRenderer.vue b/src/ui/src/renderer/ComponentRenderer.vue
index 0b2d1e5a5..ce7f4bbef 100644
--- a/src/ui/src/renderer/ComponentRenderer.vue
+++ b/src/ui/src/renderer/ComponentRenderer.vue
@@ -9,10 +9,12 @@
 		<div class="loadingBar"></div>
 		<div class="rootComponentArea">
 			<ComponentProxy
-				v-if="rootComponent"
-				:component-id="rootComponent.id"
-				:instance-path="rootInstancePath"
-				:instance-data="rootInstanceData"
+				:key="activeRootId"
+				:component-id="activeRootId"
+				:instance-path="[
+					{ componentId: activeRootId, instanceNumber: 0 },
+				]"
+				:instance-data="[ref(null)]"
 			></ComponentProxy>
 			<slot></slot>
 		</div>
@@ -20,35 +22,38 @@
 </template>
 
 <script setup lang="ts">
-import { inject, ref, computed, watch } from "vue";
-import { Component, InstancePath } from "@/writerTypes";
+import { inject, ref, computed, watch, ComputedRef, onBeforeMount } from "vue";
+import { Component } from "@/writerTypes";
 import ComponentProxy from "./ComponentProxy.vue";
 import RendererNotifications from "./RendererNotifications.vue";
 import injectionKeys from "@/injectionKeys";
 import { useEvaluator } from "./useEvaluator";
+import { changePageInHash, changeRouteVarsInHash } from "@/core/navigation";
 
 const wf = inject(injectionKeys.core);
+const wfbm = inject(injectionKeys.builderManager);
 const templateEvaluator = useEvaluator(wf);
-const rootComponent: Component = wf.getComponentById("root");
+const importedModulesSpecifiers: Record<string, string> = {};
 
-if (!rootComponent) {
-	// eslint-disable-next-line no-console
-	console.error("No root component found.");
-}
+const activeRootId: ComputedRef<Component["id"]> = computed(() => {
+	if (!wfbm) return "root";
+	if (wfbm.getMode() == "workflows") return "workflows_root";
+	return "root";
+});
 
-const rootInstancePath: InstancePath = [
+const coreRootFields = templateEvaluator.getEvaluatedFields([
 	{ componentId: "root", instanceNumber: 0 },
-];
-const rootInstanceData = [ref(null)];
-const rootFields = templateEvaluator.getEvaluatedFields(rootInstancePath);
+]);
+
 const rootStyle = computed(() => {
 	return {
-		"--accentColor": rootFields.accentColor?.value,
-		"--emptinessColor": rootFields.emptinessColor?.value,
-		"--containerBackgroundColor": rootFields.parentIdBackgroundColor?.value,
-		"--primaryTextColor": rootFields.primaryTextColor?.value,
-		"--secondaryTextColor": rootFields.secondaryTextColor?.value,
-		"--separatorColor": rootFields.separatorColor?.value,
+		"--accentColor": coreRootFields.accentColor?.value,
+		"--emptinessColor": coreRootFields.emptinessColor?.value,
+		"--containerBackgroundColor":
+			coreRootFields.parentIdBackgroundColor?.value,
+		"--primaryTextColor": coreRootFields.primaryTextColor?.value,
+		"--secondaryTextColor": coreRootFields.secondaryTextColor?.value,
+		"--separatorColor": coreRootFields.separatorColor?.value,
 	};
 });
 
@@ -58,7 +63,7 @@ const isMessagePending = computed(() => {
 });
 
 watch(
-	() => rootFields.appName?.value,
+	() => coreRootFields.appName?.value,
 	(appName: string) => {
 		updateTitle(appName);
 	},
@@ -79,6 +84,128 @@ function updateTitle(appName: string) {
 	}
 	document.title = title;
 }
+
+async function importStylesheet(stylesheetKey: string, path: string) {
+	const existingEl = document.querySelector(
+		`[data-writer-stylesheet-key="${stylesheetKey}"]`,
+	);
+	existingEl?.remove();
+	const el = document.createElement("link");
+	el.dataset.writerStylesheetKey = stylesheetKey;
+	el.setAttribute("href", path);
+	el.setAttribute("rel", "stylesheet");
+	document.head.appendChild(el);
+}
+
+async function importScript(scriptKey: string, path: string) {
+	const existingEl = document.querySelector(
+		`[data-writer-script-key="${scriptKey}"]`,
+	);
+	existingEl?.remove();
+	const el = document.createElement("script");
+	el.dataset.writerScriptKey = scriptKey;
+	el.src = path;
+	el.setAttribute("rel", "modulepreload");
+	document.head.appendChild(el);
+}
+
+async function importModule(moduleKey: string, specifier: string) {
+	importedModulesSpecifiers[moduleKey] = specifier;
+	await import(/* @vite-ignore */ specifier);
+}
+
+async function handleFunctionCall(
+	moduleKey: string,
+	functionName: string,
+	args: any[],
+) {
+	const specifier = importedModulesSpecifiers[moduleKey];
+	const m = await import(/* @vite-ignore */ specifier);
+
+	if (!m) {
+		// eslint-disable-next-line no-console
+		console.warn(
+			`The module with key "${moduleKey}" cannot be found. Please check that it has been imported.`,
+		);
+		return;
+	}
+	m[functionName](...args);
+}
+
+type FileDownloadMailItemPayload = {
+	data: string;
+	fileName: string;
+};
+
+function addMailSubscriptions() {
+	wf.addMailSubscription(
+		"fileDownload",
+		(mailItem: FileDownloadMailItemPayload) => {
+			const el = document.createElement("a");
+			el.href = mailItem.data;
+			el.download = mailItem.fileName;
+			el.click();
+		},
+	);
+	wf.addMailSubscription("openUrl", (url: string) => {
+		const el = document.createElement("a");
+		el.href = url;
+		el.target = "_blank";
+		el.rel = "noopener noreferrer";
+		el.click();
+	});
+	wf.addMailSubscription("pageChange", (pageKey: string) => {
+		changePageInHash(pageKey);
+	});
+	wf.addMailSubscription(
+		"routeVarsChange",
+		(routeVars: Record<string, string>) => {
+			changeRouteVarsInHash(routeVars);
+		},
+	);
+	wf.addMailSubscription(
+		"importStylesheet",
+		({ stylesheetKey, path }: { stylesheetKey: string; path: string }) => {
+			importStylesheet(stylesheetKey, path);
+		},
+	);
+	wf.addMailSubscription(
+		"importScript",
+		({ scriptKey, path }: { scriptKey: string; path: string }) => {
+			importScript(scriptKey, path);
+		},
+	);
+	wf.addMailSubscription(
+		"importModule",
+		({
+			moduleKey,
+			specifier,
+		}: {
+			moduleKey: string;
+			specifier: string;
+		}) => {
+			importModule(moduleKey, specifier);
+		},
+	);
+	wf.addMailSubscription(
+		"functionCall",
+		({
+			moduleKey,
+			functionName,
+			args,
+		}: {
+			moduleKey: string;
+			functionName: string;
+			args: any[];
+		}) => {
+			handleFunctionCall(moduleKey, functionName, args);
+		},
+	);
+}
+
+onBeforeMount(() => {
+	addMailSubscriptions();
+});
 </script>
 
 <style scoped>
diff --git a/src/ui/src/writerTypes.ts b/src/ui/src/writerTypes.ts
index 0840be6c0..b611f6893 100644
--- a/src/ui/src/writerTypes.ts
+++ b/src/ui/src/writerTypes.ts
@@ -29,6 +29,12 @@ export type Component = {
 		eventType: string;
 		stateRef: string;
 	};
+	x?: number;
+	y?: number;
+	outs?: {
+		outId: string;
+		toNodeId: string;
+	}[];
 };
 
 /**
@@ -88,6 +94,9 @@ export type WriterComponentDefinition = {
 	>;
 	previewField?: string; // Which field to use for previewing in the Component Tree
 	positionless?: boolean; // Whether this type of component is positionless (like Sidebar)
+	outs?:
+		| Record<"$", { field: string }>
+		| Record<string, { name: string; description: string; style: string }>;
 };
 
 export type BuilderManager = ReturnType<typeof generateBuilderManager>;
diff --git a/src/writer/abstract.py b/src/writer/abstract.py
index b0ce57f98..2574b6967 100644
--- a/src/writer/abstract.py
+++ b/src/writer/abstract.py
@@ -13,4 +13,107 @@
 templates:Dict[str, AbstractTemplate]  = {}
 
 def register_abstract_template(type: str, abstract_template: AbstractTemplate):
-    templates[type] = abstract_template
\ No newline at end of file
+    templates[type] = abstract_template
+
+
+register_abstract_template("workflows_setstate", AbstractTemplate(
+    baseType="workflows_node",
+    writer={
+        "name": "Set state",
+        "description": "Set the value for a state element",
+        "category": "Content",
+        "allowedParentTypes": ["workflows_workflow"],
+        "fields": {
+            "element": {
+                "name": "State element",
+                "type": "Text",
+            },
+            "value": {
+                "name": "Value",
+                "type": "Text",
+            },
+        },
+        "outs": {
+            "success": {
+                "name": "Success",
+                "description": "If the function doesn't raise an Exception.",
+                "style": "success",
+            },
+            "error": {
+                "name": "Error",
+                "description": "If the function raises an Exception.",
+                "style": "error",
+            },
+        },
+    }
+))
+
+register_abstract_template("workflows_writercompletion", AbstractTemplate(
+    baseType="workflows_node",
+    writer={
+        "name": "Writer Completion",
+        "description": "Set the value for a state element",
+        "category": "Content",
+        "allowedParentTypes": ["workflows_workflow"],
+        "fields": {
+            "prompt": {
+                "name": "Prompt",
+                "type": "Text",
+            },
+            "tools": {
+                "name": "Tools",
+                "type": "Object"
+            }
+        },
+        "outs": {
+            "$tools": {
+                "field": "tools"
+            },
+            "success": {
+                "name": "Success",
+                "description": "If the function doesn't raise an Exception.",
+                "style": "success",
+            },
+            "error": {
+                "name": "Error",
+                "description": "If the function raises an Exception.",
+                "style": "error",
+            },
+        },
+    }
+))
+
+register_abstract_template("workflows_writerclassification", AbstractTemplate(
+    baseType="workflows_node",
+    writer={
+        "name": "Writer Classification",
+        "description": "Classify a text.",
+        "category": "Content",
+        "allowedParentTypes": ["workflows_workflow"],
+        "fields": {
+            "text": {
+                "name": "Text",
+                "type": "Text",
+            },
+            "categories": {
+                "name": "Categories",
+                "type": "Key-Value"
+            },
+            "additionalContext": {
+                "name": "Additional context",
+                "type": "Text",
+                "control": "Textarea"
+            },
+        },
+        "outs": {
+            "$dynamic": {
+                "field": "categories"
+            },
+            "error": {
+                "name": "Error",
+                "description": "If the function raises an Exception.",
+                "style": "error",
+            },
+        },
+    }
+))
\ No newline at end of file
diff --git a/src/writer/core.py b/src/writer/core.py
index c529bcf35..b5b194740 100644
--- a/src/writer/core.py
+++ b/src/writer/core.py
@@ -1401,39 +1401,47 @@ def __init__(self, session_state: WriterState, session_component_tree: core_ui.C
         self.wf = session_state
         self.ct = session_component_tree
 
-    def evaluate_field(self, instance_path: InstancePath, field_key: str, as_json=False, default_field_value="") -> Any:
+    def evaluate_field(self, instance_path: InstancePath, field_key: str, as_json=False, default_field_value="", base_context={}) -> Any:
         def replacer(matched):
             if matched.string[0] == "\\":  # Escaped @, don't evaluate
                 return matched.string
             expr = matched.group(1).strip()
-            expr_value = self.evaluate_expression(expr, instance_path)
+            expr_value = self.evaluate_expression(expr, instance_path, base_context)
 
-            serialised_value = None
             try:
-                serialised_value = state_serialiser.serialise(expr_value)
+                if as_json:
+                    serialised_value = state_serialiser.serialise(expr_value)
+                    return json.dumps(serialised_value)
+                return expr_value
             except BaseException:
                 raise ValueError(
                     f"""Couldn't serialise value of type "{ type(expr_value) }" when evaluating field "{ field_key }".""")
 
-            if as_json:
-                return json.dumps(serialised_value)
-            return str(serialised_value)
-
         component_id = instance_path[-1]["componentId"]
         component = self.ct.get_component(component_id)
         if component:
             field_value = component.content.get(field_key) or default_field_value
-            replaced = self.template_regex.sub(replacer, field_value)
+            replaced = None
+            full_match = self.template_regex.fullmatch(field_value)
+
+            if full_match is None:
+                print(f"Did not obtain full match for {field_key}")
+                replaced = self.template_regex.sub(lambda m: str(replacer(m)), field_value)
+            else:
+                print(f"Obtained full match for {field_key}")
+                replaced = replacer(full_match)
 
-            if as_json:
+            if (replaced is not None) and as_json:
                 return json.loads(replaced)
             else:
+                print(f"Returning {field_key} as {type(replaced)}")
                 return replaced
         else:
             raise ValueError(f"Couldn't acquire a component by ID '{component_id}'")
 
-    def get_context_data(self, instance_path: InstancePath) -> Dict[str, Any]:
-        context: Dict[str, Any] = {}
+
+    def get_context_data(self, instance_path: InstancePath, base_context={}) -> Dict[str, Any]:
+        context: Dict[str, Any] = base_context
         for i in range(len(instance_path)):
             path_item = instance_path[i]
             component_id = path_item["componentId"]
@@ -1520,28 +1528,29 @@ def parse_expression(self, expr: str, instance_path: Optional[InstancePath] = No
         return accessors
 
 
-    def evaluate_expression(self, expr: str, instance_path: Optional[InstancePath]) -> Any:
-        context_data = None
+    def evaluate_expression(self, expr: str, instance_path: Optional[InstancePath] = None, base_context = {}) -> Any:
+        context_data = base_context
+        result = None
         if instance_path:
-            context_data = self.get_context_data(instance_path)
+            context_data = self.get_context_data(instance_path, base_context)
         context_ref: Any = context_data
         state_ref: Any = self.wf.user_state.state
         accessors: List[str] = self.parse_expression(expr, instance_path)
+
         for accessor in accessors:
-            if isinstance(state_ref, (StateProxy, dict)):
+            if isinstance(state_ref, (StateProxy, dict)) and state_ref.get(accessor):
                 state_ref = state_ref.get(accessor)
-
-            if context_ref and isinstance(context_ref, dict):
+                result = state_ref
+            elif isinstance(state_ref, (list)) and state_ref[int(accessor)] is not None:
+                state_ref = state_ref[int(accessor)]
+                result = state_ref
+            elif isinstance(context_ref, dict) and context_ref.get(accessor):
                 context_ref = context_ref.get(accessor)
-
-        result = None
-        if context_ref:
-            result = context_ref
-        elif state_ref:
-            result = state_ref
+                result = context_ref
 
         if isinstance(result, StateProxy):
             return result.to_dict()
+
         return result
 
 
diff --git a/src/writer/core_ui.py b/src/writer/core_ui.py
index 62d235423..00d276e4d 100644
--- a/src/writer/core_ui.py
+++ b/src/writer/core_ui.py
@@ -53,6 +53,9 @@ class Component(BaseModel):
     handlers: Optional[Dict[str, str]] = None
     visible: Optional[VisibileFields] = None
     binding: Optional[Dict] = None
+    outs: Optional[Any] = None
+    x: Optional[int] = None
+    y: Optional[int] = None
 
     def to_dict(self) -> Dict:
         """