diff --git a/docs/framework/custom-components.mdx b/docs/framework/custom-components.mdx
index c8540d553..23152de51 100644
--- a/docs/framework/custom-components.mdx
+++ b/docs/framework/custom-components.mdx
@@ -2,13 +2,15 @@
 title: "Custom components"
 ---
 
-It's possible to extend Framework with custom component templates. 
+It's possible to extend Framework with custom component templates.
 
 They're developed using Vue 3 and TypeScript. Once transpiled, they can be used by copying them to the `extensions/` folder of any project.
 
-<Note> 
-Custom components behave exactly like built-in ones.
-They are just as performant, can contain other components, and offer the same the Builder experience. They only differ from built-in components in the way that they're bundled and imported.
+<Note>
+	Custom components behave exactly like built-in ones. They are just as
+	performant, can contain other components, and offer the same the Builder
+	experience. They only differ from built-in components in the way that they're
+	bundled and imported.
 </Note>
 
 ## Architecture
@@ -21,7 +23,7 @@ Extensions and custom templates are currently synonyms, but this might change in
 
 ![Custom Components - Architecture](/framework/images/custom-components.architecture.png)
 
-Dependencies are [provided](https://vuejs.org/api/composition-api-dependency-injection.html) using injection symbols and can be _injected_ to be used by the component template. These include `evaluatedFields`, which contain the current values of the editable fields. Injected dependencies are fully typed, making  development easier.
+Dependencies are [provided](https://vuejs.org/api/composition-api-dependency-injection.html) using injection symbols and can be _injected_ to be used by the component template. These include `evaluatedFields`, which contain the current values of the editable fields. Injected dependencies are fully typed, making development easier.
 
 [Rollup's external feature](https://rollupjs.org/configuration-options/#external), invoked via Vite, allows for extensions to be compiled without dependencies and link those during runtime. Therefore, extensions aren't bundled to be standalone, but rather to work as a piece of a puzzle.
 
@@ -35,7 +37,7 @@ Framework component templates are purely front-end. They are Vue 3 templates tha
 
 ### Simple example
 
-This example shows a template for _Bubble Message_, a simple demo component with one editable field, `text`.   
+This example shows a template for _Bubble Message_, a simple demo component with one editable field, `text`.
 
 ```js
 <template>
@@ -44,21 +46,21 @@ This example shows a template for _Bubble Message_, a simple demo component with
         <div class="message">
 
             <!-- Shows the current value of the field "text" -->
-            
+
             {{ fields.text.value }}
         </div>
 	</div>
 </template>
 
 <script lang="ts">
-export default {    
+export default {
     writer: {
 		name: "Bubble Message",
 		description: "Shows a message in the shape of a speech bubble.",
 		category: "Content",
-		
+
         // Fields will be editable via Framework Builder
-        
+
         fields: {
 			text: {
 				name: "Text",
@@ -73,7 +75,7 @@ export default {
 };
 </script>
 <script setup lang="ts">
-import { FieldType } from "../writerTypes";
+import { FieldType } from "@/writerTypes";
 import injectionKeys from "../injectionKeys";
 import { inject } from "vue";
 
@@ -99,38 +101,43 @@ The code above will make Bubble Message available in the Builder.
 ### Run a local server
 
 <Steps>
-  <Step title="Clone the Framework Repository">
-    To get started, clone the [Framework repository](https://github.com/writer/writer-framework) from GitHub.
-  </Step>
-  <Step title="Set Up the Development Environment">
-    To develop custom templates in a developer-friendly way, ensure you have a front-end development server with instant reload capabilities. The front-end code for Framework is located in the `ui` folder. With Node and npm installed on your system, run `npm install` to install dependencies. Then, start the server with support for custom component templates using `npm run custom.dev`.
-    ```sh
-    cd ui
-    npm install
-    # "custom.dev" links templates in "custom_components/"
-    # "dev" runs the server without them 
-    npm run custom.dev
-    ```
-  </Step>
-  <Step title="Start the Back-End Server">
-    The command `npm run custom.dev` starts a front-end server, which requires a back-end to function fully. Start Framework via command line, specifying the option `--port 5000`, to provide a back-end on that port. It's recommended to create a new app for testing the template you're developing.
-    ```sh
-    writer create customtester
-    writer edit customtester --port 5000
-    ```
-  </Step>
-  <Step title="Access Framework and Test Custom Component">
-    You should now be able to access Framework via the URL provided by Vite, e.g. `http://localhost:5174`. In the Builder's _Toolkit_, you should see the sample component, _Balloon Message_. Add it to your tester application.
-  </Step>
+	<Step title="Clone the Framework Repository">
+		To get started, clone the [Framework
+		repository](https://github.com/writer/writer-framework) from GitHub.
+	</Step>
+	<Step title="Set Up the Development Environment">
+		To develop custom templates in a developer-friendly way, ensure you have a
+		front-end development server with instant reload capabilities. The front-end
+		code for Framework is located in the `ui` folder. With Node and npm
+		installed on your system, run `npm install` to install dependencies. Then,
+		start the server with support for custom component templates using `npm run
+		custom.dev`. ```sh cd ui npm install # "custom.dev" links templates in
+		"custom_components/" # "dev" runs the server without them npm run custom.dev
+		```
+	</Step>
+	<Step title="Start the Back-End Server">
+		The command `npm run custom.dev` starts a front-end server, which requires a
+		back-end to function fully. Start Framework via command line, specifying the
+		option `--port 5000`, to provide a back-end on that port. It's recommended
+		to create a new app for testing the template you're developing. ```sh writer
+		create customtester writer edit customtester --port 5000 ```
+	</Step>
+	<Step title="Access Framework and Test Custom Component">
+		You should now be able to access Framework via the URL provided by Vite,
+		e.g. `http://localhost:5174`. In the Builder's _Toolkit_, you should see the
+		sample component, _Balloon Message_. Add it to your tester application.
+	</Step>
 </Steps>
 
-
 ### Create a new component
 
 <Tip>
-You can also have a look at the built-in component templates, since their syntax is equivalent. They can be found in the `ui/src/core_components/` folder.
+	You can also have a look at the built-in component templates, since their
+	syntax is equivalent. They can be found in the `ui/src/components/` folder.
 </Tip>
-Go to `ui/src/custom_components/` and open the Vue single-file components, i.e. the `.vue` files. These files contain comments that will help you get started. Try editing the provided templates, you should see changes reflected.
+Go to `ui/src/custom_components/` and open the Vue single-file components, i.e. the
+`.vue` files. These files contain comments that will help you get started. Try editing
+the provided templates, you should see changes reflected.
 
 You can get started by duplicating one of these examples. Make sure you add the new template to the entrypoint, as discussed below.
 
@@ -141,15 +148,15 @@ For custom component templates to be taken into account, they need to be accessi
 ```ts
 // Import the templates
 
-import BubbleMessage from './BubbleMessage.vue';
-import BubbleMessageAdvanced from './BubbleMessageAdvanced.vue';
+import BubbleMessage from "./BubbleMessage.vue";
+import BubbleMessageAdvanced from "./BubbleMessageAdvanced.vue";
 
 // Export an object with the ids and the templates as default
 
 export default {
-    "bubblemessage": BubbleMessage,
-    "bubblemessageadvanced": BubbleMessageAdvanced
-}
+	bubblemessage: BubbleMessage,
+	bubblemessageadvanced: BubbleMessageAdvanced,
+};
 ```
 
 A single or multiple templates can be specified. Take into account that they will all be exported, and later imported, together.
@@ -160,7 +167,7 @@ Execute `npm run custom.build`, this will generate the output `.js` and `.css` f
 
 ```sh
 # "build" builds the entire front-end
-# "custom.build" only builds the custom templates 
+# "custom.build" only builds the custom templates
 
 npm run custom.build
 ```
diff --git a/docs/tests/componentImages.spec.js b/docs/tests/componentImages.spec.js
index a42be3681..59b988184 100644
--- a/docs/tests/componentImages.spec.js
+++ b/docs/tests/componentImages.spec.js
@@ -3,6 +3,7 @@ const components = require('writer-ui/components.codegen.json');
 
 describe('Components docs', () => {
 	for (const component of components) {
+		if (component.toolkit && component.toolkit !== "core") return;
 		it(`${component.name} - should have an image`, () => {
 			expect(() => {
 				fs.accessSync(`./framework/public/components/${component.type}.png`);
diff --git a/pyproject.toml b/pyproject.toml
index 44fc02097..2839baf24 100644
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -4,7 +4,7 @@ build-backend = "poetry.core.masonry.api"
 
 [tool.poetry]
 name = "writer"
-version = "0.7.0"
+version = "0.7.2"
 description = "An open-source, Python framework for building feature-rich apps that are fully integrated with the Writer platform."
 authors = ["Writer, Inc."]
 readme = "README.md"
diff --git a/src/ui/src/builder/BuilderApp.vue b/src/ui/src/builder/BuilderApp.vue
index e98f5fea5..7bd2b21fc 100644
--- a/src/ui/src/builder/BuilderApp.vue
+++ b/src/ui/src/builder/BuilderApp.vue
@@ -128,7 +128,7 @@ import BuilderHeader from "./BuilderHeader.vue";
 import BuilderSettings from "./BuilderSettings.vue";
 import BuilderEditor from "./BuilderEditor.vue";
 import BuilderSidebar from "./BuilderSidebar.vue";
-import ComponentRenderer from "../renderer/ComponentRenderer.vue";
+import ComponentRenderer from "@/renderer/ComponentRenderer.vue";
 import BuilderComponentShortcuts from "./BuilderComponentShortcuts.vue";
 import injectionKeys from "../injectionKeys";
 import BuilderInstanceTracker from "./BuilderInstanceTracker.vue";
diff --git a/src/ui/src/builder/BuilderComponentShortcuts.vue b/src/ui/src/builder/BuilderComponentShortcuts.vue
index 29b72c2fb..e76c1ecd2 100644
--- a/src/ui/src/builder/BuilderComponentShortcuts.vue
+++ b/src/ui/src/builder/BuilderComponentShortcuts.vue
@@ -149,7 +149,7 @@
 <script setup lang="ts">
 import { computed, inject, onMounted, Ref, ref, toRefs, watch } from "vue";
 import { useComponentActions } from "./useComponentActions";
-import { Component, WriterComponentDefinition } from "../writerTypes";
+import { Component, WriterComponentDefinition } from "@/writerTypes";
 import injectionKeys from "../injectionKeys";
 import { isPlatformMac } from "../core/detectPlatform";
 
diff --git a/src/ui/src/builder/BuilderFieldsAlign.vue b/src/ui/src/builder/BuilderFieldsAlign.vue
index 09037d045..44b0dd2af 100644
--- a/src/ui/src/builder/BuilderFieldsAlign.vue
+++ b/src/ui/src/builder/BuilderFieldsAlign.vue
@@ -70,7 +70,7 @@ import {
 	ref,
 	toRefs,
 } from "vue";
-import { Component } from "../writerTypes";
+import { Component } from "@/writerTypes";
 import { useComponentActions } from "./useComponentActions";
 import injectionKeys from "../injectionKeys";
 import BuilderSelect from "./BuilderSelect.vue";
diff --git a/src/ui/src/builder/BuilderFieldsColor.vue b/src/ui/src/builder/BuilderFieldsColor.vue
index d1f0d12cd..4385bd6b7 100644
--- a/src/ui/src/builder/BuilderFieldsColor.vue
+++ b/src/ui/src/builder/BuilderFieldsColor.vue
@@ -70,7 +70,7 @@ import {
 	ref,
 	toRefs,
 } from "vue";
-import { Component } from "../writerTypes";
+import { Component } from "@/writerTypes";
 import { useComponentActions } from "./useComponentActions";
 import injectionKeys from "../injectionKeys";
 import BuilderTemplateInput from "./BuilderTemplateInput.vue";
diff --git a/src/ui/src/builder/BuilderFieldsKeyValue.vue b/src/ui/src/builder/BuilderFieldsKeyValue.vue
index 0c6441167..006002809 100644
--- a/src/ui/src/builder/BuilderFieldsKeyValue.vue
+++ b/src/ui/src/builder/BuilderFieldsKeyValue.vue
@@ -86,8 +86,8 @@ import {
 	watch,
 } from "vue";
 import injectionKeys from "../injectionKeys";
-import { useEvaluator } from "../renderer/useEvaluator";
-import type { InstancePath } from "../writerTypes";
+import { useEvaluator } from "@/renderer/useEvaluator";
+import type { InstancePath } from "@/writerTypes";
 import BuilderFieldsObject from "./BuilderFieldsObject.vue";
 import BuilderTemplateInput from "./BuilderTemplateInput.vue";
 import { useComponentActions } from "./useComponentActions";
diff --git a/src/ui/src/builder/BuilderFieldsObject.vue b/src/ui/src/builder/BuilderFieldsObject.vue
index c5cc569b7..3931b8e41 100644
--- a/src/ui/src/builder/BuilderFieldsObject.vue
+++ b/src/ui/src/builder/BuilderFieldsObject.vue
@@ -15,7 +15,7 @@
 
 <script setup lang="ts">
 import { toRefs, inject, computed } from "vue";
-import { Component } from "../writerTypes";
+import { Component } from "@/writerTypes";
 import { useComponentActions } from "./useComponentActions";
 import injectionKeys from "../injectionKeys";
 import BuilderTemplateInput from "./BuilderTemplateInput.vue";
diff --git a/src/ui/src/builder/BuilderFieldsPadding.vue b/src/ui/src/builder/BuilderFieldsPadding.vue
index e59a39935..9a0d7b2c5 100644
--- a/src/ui/src/builder/BuilderFieldsPadding.vue
+++ b/src/ui/src/builder/BuilderFieldsPadding.vue
@@ -139,7 +139,7 @@ import {
 	ref,
 	toRefs,
 } from "vue";
-import { Component } from "../writerTypes";
+import { Component } from "@/writerTypes";
 import { useComponentActions } from "./useComponentActions";
 import injectionKeys from "../injectionKeys";
 import BuilderSelect from "./BuilderSelect.vue";
diff --git a/src/ui/src/builder/BuilderFieldsShadow.vue b/src/ui/src/builder/BuilderFieldsShadow.vue
index 6c5dbac00..54be9f0ac 100644
--- a/src/ui/src/builder/BuilderFieldsShadow.vue
+++ b/src/ui/src/builder/BuilderFieldsShadow.vue
@@ -139,7 +139,7 @@ import {
 	ref,
 	toRefs,
 } from "vue";
-import { Component } from "../writerTypes";
+import { Component } from "@/writerTypes";
 import { useComponentActions } from "./useComponentActions";
 import injectionKeys from "../injectionKeys";
 import BuilderTemplateInput from "./BuilderTemplateInput.vue";
diff --git a/src/ui/src/builder/BuilderFieldsText.vue b/src/ui/src/builder/BuilderFieldsText.vue
index c77e9ca90..cee9043a6 100644
--- a/src/ui/src/builder/BuilderFieldsText.vue
+++ b/src/ui/src/builder/BuilderFieldsText.vue
@@ -8,6 +8,7 @@
 		>
 			<BuilderTemplateInput
 				class="content"
+				:input-id="inputId"
 				:value="component.content[fieldKey]"
 				:placeholder="templateField?.default"
 				:options="options"
@@ -19,6 +20,7 @@
 				multiline
 				variant="text"
 				class="content"
+				:input-id="inputId"
 				:value="component.content[fieldKey]"
 				:placeholder="templateField?.default"
 				@input="handleInput"
@@ -29,7 +31,7 @@
 
 <script setup lang="ts">
 import { toRefs, inject, computed } from "vue";
-import { Component, FieldControl } from "../writerTypes";
+import { Component, FieldControl } from "@/writerTypes";
 import { useComponentActions } from "./useComponentActions";
 import injectionKeys from "../injectionKeys";
 import BuilderTemplateInput from "./BuilderTemplateInput.vue";
@@ -50,6 +52,8 @@ const templateField = computed(() => {
 	return definition.fields[fieldKey.value];
 });
 
+const inputId = computed(() => `${props.componentId}-${props.fieldKey}`);
+
 const options = computed(() => {
 	const field = templateField.value;
 	if (field.options) {
@@ -57,7 +61,7 @@ const options = computed(() => {
 			? field.options(wf, componentId.value)
 			: field.options;
 	}
-	return [];
+	return {};
 });
 
 const handleInput = (ev: Event) => {
diff --git a/src/ui/src/builder/BuilderFieldsWidth.vue b/src/ui/src/builder/BuilderFieldsWidth.vue
index aa0f4d919..1c80e49e9 100644
--- a/src/ui/src/builder/BuilderFieldsWidth.vue
+++ b/src/ui/src/builder/BuilderFieldsWidth.vue
@@ -78,7 +78,7 @@ import {
 	ref,
 	toRefs,
 } from "vue";
-import { Component } from "../writerTypes";
+import { Component } from "@/writerTypes";
 import { useComponentActions } from "./useComponentActions";
 import injectionKeys from "../injectionKeys";
 import BuilderSelect from "./BuilderSelect.vue";
diff --git a/src/ui/src/builder/BuilderHeader.vue b/src/ui/src/builder/BuilderHeader.vue
index d2bae0061..8e3f90e4c 100644
--- a/src/ui/src/builder/BuilderHeader.vue
+++ b/src/ui/src/builder/BuilderHeader.vue
@@ -82,16 +82,27 @@ const animate = () => {
 };
 
 const syncHealthStatus = () => {
+	let s = "";
 	switch (wf.syncHealth.value) {
 		case "offline":
-			return "Offline. Not syncing.";
+			s += "Offline. Not syncing.";
+			break;
 		case "connected":
-			return "Online. Syncing...";
+			s += "Online. Syncing...";
+			break;
 		case "idle":
-			return "Sync not initialised.";
+			s += "Sync not initialised.";
+			break;
 		case "suspended":
-			return "Sync suspended.";
+			s += "Sync suspended.";
+			break;
 	}
+
+	if (wf.featureFlags.value.length > 0) {
+		s += ` Feature flags: ${wf.featureFlags.value.join(", ")}`;
+	}
+
+	return s;
 };
 
 function showStateExplorer() {
diff --git a/src/ui/src/builder/BuilderSettingsHandlers.vue b/src/ui/src/builder/BuilderSettingsHandlers.vue
index 948dcefa5..19a637a3d 100644
--- a/src/ui/src/builder/BuilderSettingsHandlers.vue
+++ b/src/ui/src/builder/BuilderSettingsHandlers.vue
@@ -162,7 +162,7 @@ import { computed, ComputedRef, inject, Ref, ref } from "vue";
 import { useComponentActions } from "./useComponentActions";
 import injectionKeys from "../injectionKeys";
 import BuilderModal, { ModalAction } from "./BuilderModal.vue";
-import { WriterComponentDefinition } from "../writerTypes";
+import { WriterComponentDefinition } from "@/writerTypes";
 
 const wf = inject(injectionKeys.core);
 const ssbm = inject(injectionKeys.builderManager);
diff --git a/src/ui/src/builder/BuilderSettingsProperties.vue b/src/ui/src/builder/BuilderSettingsProperties.vue
index 7dd4091c9..3564afb22 100644
--- a/src/ui/src/builder/BuilderSettingsProperties.vue
+++ b/src/ui/src/builder/BuilderSettingsProperties.vue
@@ -120,8 +120,8 @@
 <script setup lang="ts">
 import { computed, inject } from "vue";
 import injectionKeys from "../injectionKeys";
-import { parseInstancePathString } from "../renderer/instancePath";
-import { FieldCategory, FieldType, InstancePath } from "../writerTypes";
+import { parseInstancePathString } from "@/renderer/instancePath";
+import { FieldCategory, FieldType, InstancePath } from "@/writerTypes";
 import BuilderFieldsAlign from "./BuilderFieldsAlign.vue";
 import BuilderFieldsColor from "./BuilderFieldsColor.vue";
 import BuilderFieldsKeyValue from "./BuilderFieldsKeyValue.vue";
diff --git a/src/ui/src/builder/BuilderSidebarToolbar.vue b/src/ui/src/builder/BuilderSidebarToolbar.vue
index 1c369f994..b7176271b 100644
--- a/src/ui/src/builder/BuilderSidebarToolbar.vue
+++ b/src/ui/src/builder/BuilderSidebarToolbar.vue
@@ -67,7 +67,7 @@
 import { Ref, computed, inject, ref } from "vue";
 import { useDragDropComponent } from "./useDragDropComponent";
 import injectionKeys from "../injectionKeys";
-import { Component, WriterComponentDefinition } from "../writerTypes";
+import { Component, WriterComponentDefinition } from "@/writerTypes";
 import BuilderSidebarTitleSearch from "./BuilderSidebarTitleSearch.vue";
 
 const wf = inject(injectionKeys.core);
@@ -133,6 +133,9 @@ const definitionsByDisplayCategory = computed(() => {
 	types.map((type) => {
 		const definition = wf.getComponentDefinition(type);
 
+		const isToolkitMatch = (definition.toolkit ?? "core") == toolkit.value;
+		if (!isToolkitMatch) return;
+
 		const matchingSearch =
 			searchQuery.value === "" ||
 			definition.name
@@ -159,6 +162,13 @@ const definitionsByDisplayCategory = computed(() => {
 	return result;
 });
 
+const toolkit = computed(() => {
+	if (ssbm.getMode() == "workflows") {
+		return "workflows";
+	}
+	return "core";
+});
+
 const handleDragStart = (ev: DragEvent, type: Component["type"]) => {
 	ssbm.setSelection(null);
 	ev.dataTransfer.setData(`application/json;writer=${type},`, "{}");
diff --git a/src/ui/src/builder/BuilderSidebarTree.vue b/src/ui/src/builder/BuilderSidebarTree.vue
index c6678fe65..97ddac982 100644
--- a/src/ui/src/builder/BuilderSidebarTree.vue
+++ b/src/ui/src/builder/BuilderSidebarTree.vue
@@ -61,7 +61,7 @@ import { inject, computed, nextTick, ref, Ref, ComputedRef } from "vue";
 import { useComponentActions } from "./useComponentActions";
 import BuilderTreeBranch from "./BuilderTreeBranch.vue";
 import injectionKeys from "../injectionKeys";
-import { Component } from "../writerTypes";
+import { Component } from "@/writerTypes";
 import { watch } from "vue";
 import BuilderSidebarTitleSearch from "./BuilderSidebarTitleSearch.vue";
 
diff --git a/src/ui/src/builder/BuilderSwitcher.vue b/src/ui/src/builder/BuilderSwitcher.vue
index 6fef6fedc..345349e1a 100644
--- a/src/ui/src/builder/BuilderSwitcher.vue
+++ b/src/ui/src/builder/BuilderSwitcher.vue
@@ -14,6 +14,14 @@
 				logEntryCount
 			}}</span>
 		</div>
+		<div
+			v-if="isWorkflowsFeatureFlagged"
+			:class="{ active: activeId == 'workflows' }"
+			@click="selectOption('workflows')"
+		>
+			<i class="icon material-symbols-outlined"> linked_services </i>
+			Workflows
+		</div>
 		<div
 			:class="{ active: activeId == 'preview' }"
 			@click="selectOption('preview')"
@@ -27,11 +35,17 @@
 <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 isWorkflowsFeatureFlagged = computed(() =>
+	wf.featureFlags.value.includes("workflows"),
+);
+
 let selectedId: Ref<string> = ref(null);
 
-const selectOption = (optionId: "ui" | "code" | "preview") => {
+const selectOption = (optionId: "ui" | "code" | "preview" | "workflows") => {
 	selectedId.value = optionId;
 	ssbm.setMode(optionId);
 	if (ssbm.getMode() != "preview") return;
diff --git a/src/ui/src/builder/BuilderTreeBranch.vue b/src/ui/src/builder/BuilderTreeBranch.vue
index 4f68793fd..43111cd8a 100644
--- a/src/ui/src/builder/BuilderTreeBranch.vue
+++ b/src/ui/src/builder/BuilderTreeBranch.vue
@@ -86,10 +86,10 @@
 import { useComponentActions } from "./useComponentActions";
 import { useDragDropComponent } from "./useDragDropComponent";
 import { computed, inject, nextTick, Ref, ref, toRefs, watch } from "vue";
-import { Component } from "../writerTypes";
+import { Component } from "@/writerTypes";
 import injectionKeys from "../injectionKeys";
 import { onMounted } from "vue";
-import { useEvaluator } from "../renderer/useEvaluator";
+import { useEvaluator } from "@/renderer/useEvaluator";
 
 const wf = inject(injectionKeys.core);
 const ssbm = inject(injectionKeys.builderManager);
diff --git a/src/ui/src/builder/builderManager.ts b/src/ui/src/builder/builderManager.ts
index 2547872d0..b96893e80 100644
--- a/src/ui/src/builder/builderManager.ts
+++ b/src/ui/src/builder/builderManager.ts
@@ -1,5 +1,5 @@
 import { ref, Ref } from "vue";
-import { Component, ClipboardOperation } from "../writerTypes";
+import { Component, ClipboardOperation } from "@/writerTypes";
 
 export const CANDIDATE_CONFIRMATION_DELAY_MS = 1500;
 
@@ -44,7 +44,7 @@ export function generateBuilderManager() {
 	};
 
 	type State = {
-		mode: "ui" | "code" | "preview";
+		mode: "ui" | "code" | "workflows" | "preview";
 		selection: {
 			componentId: Component["id"];
 			instancePath: string;
diff --git a/src/ui/src/builder/useComponentActions.ts b/src/ui/src/builder/useComponentActions.ts
index 89b430373..d1141e386 100644
--- a/src/ui/src/builder/useComponentActions.ts
+++ b/src/ui/src/builder/useComponentActions.ts
@@ -5,7 +5,7 @@ import {
 	Component,
 	ClipboardOperation,
 	ComponentMap,
-} from "../writerTypes";
+} from "@/writerTypes";
 
 export function useComponentActions(wf: Core, ssbm: BuilderManager) {
 	function generateNewComponentId() {
diff --git a/src/ui/src/builder/useDragDropComponent.ts b/src/ui/src/builder/useDragDropComponent.ts
index 98ce47b64..a30b8bd38 100644
--- a/src/ui/src/builder/useDragDropComponent.ts
+++ b/src/ui/src/builder/useDragDropComponent.ts
@@ -1,5 +1,5 @@
 import { Ref, ref } from "vue";
-import { Core, Component } from "../writerTypes";
+import { Core, Component } from "@/writerTypes";
 import { CANDIDATE_CONFIRMATION_DELAY_MS } from "./builderManager";
 
 /*
diff --git a/src/ui/src/core_components/base/BaseCollapsible.vue b/src/ui/src/components/core/base/BaseCollapsible.vue
similarity index 100%
rename from src/ui/src/core_components/base/BaseCollapsible.vue
rename to src/ui/src/components/core/base/BaseCollapsible.vue
diff --git a/src/ui/src/core_components/base/BaseContainer.vue b/src/ui/src/components/core/base/BaseContainer.vue
similarity index 94%
rename from src/ui/src/core_components/base/BaseContainer.vue
rename to src/ui/src/components/core/base/BaseContainer.vue
index 98263958b..203656473 100644
--- a/src/ui/src/core_components/base/BaseContainer.vue
+++ b/src/ui/src/components/core/base/BaseContainer.vue
@@ -41,7 +41,7 @@ const rootStyle = computed(() => {
 </script>
 
 <style scoped>
-@import "../../renderer/sharedStyles.css";
+@import "@/renderer/sharedStyles.css";
 
 .BaseContainer {
 	display: flex;
diff --git a/src/ui/src/core_components/base/BaseControlBar.vue b/src/ui/src/components/core/base/BaseControlBar.vue
similarity index 96%
rename from src/ui/src/core_components/base/BaseControlBar.vue
rename to src/ui/src/components/core/base/BaseControlBar.vue
index 8dc567a15..6ce2da620 100644
--- a/src/ui/src/core_components/base/BaseControlBar.vue
+++ b/src/ui/src/components/core/base/BaseControlBar.vue
@@ -34,7 +34,7 @@ function copyToClipboard({ text = "" }: { text?: string }) {
 </script>
 
 <style scoped>
-@import "../../renderer/sharedStyles.css";
+@import "@/renderer/sharedStyles.css";
 
 .BaseControlBar {
 	margin: 10px 0;
diff --git a/src/ui/src/core_components/base/BaseEmptiness.vue b/src/ui/src/components/core/base/BaseEmptiness.vue
similarity index 91%
rename from src/ui/src/core_components/base/BaseEmptiness.vue
rename to src/ui/src/components/core/base/BaseEmptiness.vue
index f0577714b..a833f0855 100644
--- a/src/ui/src/core_components/base/BaseEmptiness.vue
+++ b/src/ui/src/components/core/base/BaseEmptiness.vue
@@ -13,7 +13,7 @@
 
 <script setup lang="ts">
 import { computed, inject } from "vue";
-import injectionKeys from "../../injectionKeys";
+import injectionKeys from "@/injectionKeys";
 
 const props = defineProps({
 	componentId: { type: String, required: true },
@@ -28,7 +28,7 @@ const definition = computed(() =>
 </script>
 
 <style scoped>
-@import "../../renderer/sharedStyles.css";
+@import "@/renderer/sharedStyles.css";
 
 .BaseEmptiness {
 	background: #e4e7ed;
diff --git a/src/ui/src/core_components/base/BaseInputColor.vue b/src/ui/src/components/core/base/BaseInputColor.vue
similarity index 96%
rename from src/ui/src/core_components/base/BaseInputColor.vue
rename to src/ui/src/components/core/base/BaseInputColor.vue
index 7a6ba7257..770314eef 100644
--- a/src/ui/src/core_components/base/BaseInputColor.vue
+++ b/src/ui/src/components/core/base/BaseInputColor.vue
@@ -15,7 +15,7 @@
 
 <script setup lang="ts">
 import { PropType, computed, inject, ref } from "vue";
-import injectionKeys from "../../injectionKeys";
+import injectionKeys from "@/injectionKeys";
 
 const props = defineProps({
 	value: { type: String, required: false, default: undefined },
diff --git a/src/ui/src/core_components/base/BaseInputRange.vue b/src/ui/src/components/core/base/BaseInputRange.vue
similarity index 100%
rename from src/ui/src/core_components/base/BaseInputRange.vue
rename to src/ui/src/components/core/base/BaseInputRange.vue
diff --git a/src/ui/src/core_components/base/BaseInputWrapper.vue b/src/ui/src/components/core/base/BaseInputWrapper.vue
similarity index 93%
rename from src/ui/src/core_components/base/BaseInputWrapper.vue
rename to src/ui/src/components/core/base/BaseInputWrapper.vue
index 9fcaf723f..1cb3b391b 100644
--- a/src/ui/src/core_components/base/BaseInputWrapper.vue
+++ b/src/ui/src/components/core/base/BaseInputWrapper.vue
@@ -17,7 +17,7 @@ const props = defineProps<{
 </script>
 
 <style scoped>
-@import "../../renderer/sharedStyles.css";
+@import "@/renderer/sharedStyles.css";
 
 .BaseInputWrapper {
 	display: flex;
diff --git a/src/ui/src/core_components/base/BaseJsonViewer.utils.ts b/src/ui/src/components/core/base/BaseJsonViewer.utils.ts
similarity index 100%
rename from src/ui/src/core_components/base/BaseJsonViewer.utils.ts
rename to src/ui/src/components/core/base/BaseJsonViewer.utils.ts
diff --git a/src/ui/src/core_components/base/BaseJsonViewer.vue b/src/ui/src/components/core/base/BaseJsonViewer.vue
similarity index 100%
rename from src/ui/src/core_components/base/BaseJsonViewer.vue
rename to src/ui/src/components/core/base/BaseJsonViewer.vue
diff --git a/src/ui/src/core_components/base/BaseJsonViewerChildrenCounter.vue b/src/ui/src/components/core/base/BaseJsonViewerChildrenCounter.vue
similarity index 100%
rename from src/ui/src/core_components/base/BaseJsonViewerChildrenCounter.vue
rename to src/ui/src/components/core/base/BaseJsonViewerChildrenCounter.vue
diff --git a/src/ui/src/core_components/base/BaseJsonViewerCollapsible.vue b/src/ui/src/components/core/base/BaseJsonViewerCollapsible.vue
similarity index 100%
rename from src/ui/src/core_components/base/BaseJsonViewerCollapsible.vue
rename to src/ui/src/components/core/base/BaseJsonViewerCollapsible.vue
diff --git a/src/ui/src/core_components/base/BaseJsonViewerObject.vue b/src/ui/src/components/core/base/BaseJsonViewerObject.vue
similarity index 100%
rename from src/ui/src/core_components/base/BaseJsonViewerObject.vue
rename to src/ui/src/components/core/base/BaseJsonViewerObject.vue
diff --git a/src/ui/src/core_components/base/BaseJsonViewerValue.vue b/src/ui/src/components/core/base/BaseJsonViewerValue.vue
similarity index 100%
rename from src/ui/src/core_components/base/BaseJsonViewerValue.vue
rename to src/ui/src/components/core/base/BaseJsonViewerValue.vue
diff --git a/src/ui/src/core_components/base/BaseMarkdown.vue b/src/ui/src/components/core/base/BaseMarkdown.vue
similarity index 100%
rename from src/ui/src/core_components/base/BaseMarkdown.vue
rename to src/ui/src/components/core/base/BaseMarkdown.vue
diff --git a/src/ui/src/core_components/base/BaseSelect.vue b/src/ui/src/components/core/base/BaseSelect.vue
similarity index 99%
rename from src/ui/src/core_components/base/BaseSelect.vue
rename to src/ui/src/components/core/base/BaseSelect.vue
index cd5c9e514..947545e5e 100644
--- a/src/ui/src/core_components/base/BaseSelect.vue
+++ b/src/ui/src/components/core/base/BaseSelect.vue
@@ -327,8 +327,8 @@ function highlightItem(offset: number) {
 </script>
 
 <style scoped>
-@import "../../renderer/sharedStyles.css";
-@import "../../renderer/colorTransformations.css";
+@import "@/renderer/sharedStyles.css";
+@import "@/renderer/colorTransformations.css";
 
 .BaseSelect {
 	width: 100%;
diff --git a/src/ui/src/core_components/content/CoreAnnotatedText.vue b/src/ui/src/components/core/content/CoreAnnotatedText.vue
similarity index 95%
rename from src/ui/src/core_components/content/CoreAnnotatedText.vue
rename to src/ui/src/components/core/content/CoreAnnotatedText.vue
index cd7b1f32c..1fe8c3115 100644
--- a/src/ui/src/core_components/content/CoreAnnotatedText.vue
+++ b/src/ui/src/components/core/content/CoreAnnotatedText.vue
@@ -26,7 +26,13 @@
 </template>
 
 <script lang="ts">
-import { cssClasses, primaryTextColor } from "../../renderer/sharedStyleFields";
+import {
+	buttonColor,
+	buttonTextColor,
+	cssClasses,
+	primaryTextColor,
+} from "@/renderer/sharedStyleFields";
+import BaseControlBar from "../base/BaseControlBar.vue";
 export default {
 	writer: {
 		name: "Annotated text",
@@ -75,6 +81,8 @@ export default {
 				default: "no",
 				category: FieldCategory.Style,
 			},
+			buttonColor,
+			buttonTextColor,
 			primaryTextColor,
 			cssClasses,
 		},
@@ -83,8 +91,8 @@ export default {
 };
 </script>
 <script setup lang="ts">
-import { FieldCategory, FieldType } from "../../writerTypes";
-import injectionKeys from "../../injectionKeys";
+import { FieldCategory, FieldType } from "@/writerTypes";
+import injectionKeys from "@/injectionKeys";
 import { computed, ComputedRef, inject } from "vue";
 import chroma, { Color } from "chroma-js";
 import BaseEmptiness from "../base/BaseEmptiness.vue";
diff --git a/src/ui/src/core_components/content/CoreAvatar.vue b/src/ui/src/components/core/content/CoreAvatar.vue
similarity index 93%
rename from src/ui/src/core_components/content/CoreAvatar.vue
rename to src/ui/src/components/core/content/CoreAvatar.vue
index ace56221b..9b3bfcbc1 100644
--- a/src/ui/src/core_components/content/CoreAvatar.vue
+++ b/src/ui/src/components/core/content/CoreAvatar.vue
@@ -24,14 +24,14 @@
 </template>
 
 <script lang="ts">
-import { FieldCategory, FieldType } from "../../writerTypes";
+import { FieldCategory, FieldType } from "@/writerTypes";
 import {
 	cssClasses,
 	primaryTextColor,
 	secondaryTextColor,
 	separatorColor,
-} from "../../renderer/sharedStyleFields";
-import { getClick } from "../../renderer/syntheticEvents";
+} from "@/renderer/sharedStyleFields";
+import { getClick } from "@/renderer/syntheticEvents";
 
 const clickHandlerStub = `
 def handle_avatar_click():
@@ -98,7 +98,7 @@ export default {
 </script>
 <script setup lang="ts">
 import { Ref, computed, inject, ref } from "vue";
-import injectionKeys from "../../injectionKeys";
+import injectionKeys from "@/injectionKeys";
 
 const rootEl: Ref<HTMLElement> = ref(null);
 const fields = inject(injectionKeys.evaluatedFields);
@@ -117,7 +117,7 @@ function handleClick(ev: MouseEvent) {
 </script>
 
 <style scoped>
-@import "../../renderer/sharedStyles.css";
+@import "@/renderer/sharedStyles.css";
 
 .CoreAvatar {
 	display: flex;
diff --git a/src/ui/src/core_components/content/CoreChatbot.vue b/src/ui/src/components/core/content/CoreChatbot.vue
similarity index 97%
rename from src/ui/src/core_components/content/CoreChatbot.vue
rename to src/ui/src/components/core/content/CoreChatbot.vue
index 277f47f7c..1642defb2 100644
--- a/src/ui/src/core_components/content/CoreChatbot.vue
+++ b/src/ui/src/components/core/content/CoreChatbot.vue
@@ -138,9 +138,9 @@ See the stubs for more details.
 </template>
 
 <script lang="ts">
-import LoadingSymbol from "../../renderer/LoadingSymbol.vue";
+import LoadingSymbol from "@/renderer/LoadingSymbol.vue";
 import BaseMarkdown from "../base/BaseMarkdown.vue";
-import { FieldCategory, FieldType } from "../../writerTypes";
+import { FieldCategory, FieldType } from "@/writerTypes";
 import {
 	accentColor,
 	buttonColor,
@@ -150,10 +150,10 @@ import {
 	primaryTextColor,
 	secondaryTextColor,
 	separatorColor,
-} from "../../renderer/sharedStyleFields";
+} from "@/renderer/sharedStyleFields";
 import prettyBytes from "pretty-bytes";
-import WdsTextareaInput from "../../wds/WdsTextareaInput.vue";
-import WdsControl from "../../wds/WdsControl.vue";
+import WdsTextareaInput from "@/wds/WdsTextareaInput.vue";
+import WdsControl from "@/wds/WdsControl.vue";
 
 const MAX_FILE_SIZE = 200 * 1024 * 1024;
 
@@ -347,7 +347,7 @@ import {
 	computed,
 	ComputedRef,
 } from "vue";
-import injectionKeys from "../../injectionKeys";
+import injectionKeys from "@/injectionKeys";
 
 type Action = {
 	subheading?: string;
@@ -527,8 +527,8 @@ onBeforeUnmount(() => {
 });
 </script>
 <style scoped>
-@import "../../renderer/sharedStyles.css";
-@import "../../renderer/colorTransformations.css";
+@import "@/renderer/sharedStyles.css";
+@import "@/renderer/colorTransformations.css";
 
 .CoreChatbot {
 	display: grid;
diff --git a/src/ui/src/core_components/content/CoreDataframe.vue b/src/ui/src/components/core/content/CoreDataframe.vue
similarity index 98%
rename from src/ui/src/core_components/content/CoreDataframe.vue
rename to src/ui/src/components/core/content/CoreDataframe.vue
index f4dcba5c3..cddbe3073 100644
--- a/src/ui/src/core_components/content/CoreDataframe.vue
+++ b/src/ui/src/components/core/content/CoreDataframe.vue
@@ -110,20 +110,20 @@
 
 <script lang="ts">
 import { Ref, computed, inject, ref } from "vue";
-import { FieldCategory, FieldType } from "../../writerTypes";
+import { FieldCategory, FieldType } from "@/writerTypes";
 import {
 	cssClasses,
 	primaryTextColor,
 	secondaryTextColor,
 	separatorColor,
-} from "../../renderer/sharedStyleFields";
+} from "@/renderer/sharedStyleFields";
 import { onMounted } from "vue";
 import { watch } from "vue";
 import { nextTick } from "vue";
 import { ComputedRef } from "vue";
 import { onUnmounted } from "vue";
-import WdsTextInput from "../../wds/WdsTextInput.vue";
-import WdsControl from "../../wds/WdsControl.vue";
+import WdsTextInput from "@/wds/WdsTextInput.vue";
+import WdsControl from "@/wds/WdsControl.vue";
 import BaseMarkdown from "../base/BaseMarkdown.vue";
 
 const description = "A component to display Pandas DataFrames.";
@@ -224,7 +224,7 @@ export default {
 };
 </script>
 <script setup lang="ts">
-import injectionKeys from "../../injectionKeys";
+import injectionKeys from "@/injectionKeys";
 import type * as aq from "arquero";
 import type { Table } from "apache-arrow";
 
@@ -539,8 +539,8 @@ onUnmounted(() => {
 </script>
 
 <style scoped>
-@import "../../renderer/sharedStyles.css";
-@import "../../renderer/colorTransformations.css";
+@import "@/renderer/sharedStyles.css";
+@import "@/renderer/colorTransformations.css";
 
 .CoreDataframe {
 	font-size: 0.8rem;
diff --git a/src/ui/src/core_components/content/CoreHeading.vue b/src/ui/src/components/core/content/CoreHeading.vue
similarity index 86%
rename from src/ui/src/core_components/content/CoreHeading.vue
rename to src/ui/src/components/core/content/CoreHeading.vue
index 642f00df0..f1059d2a2 100644
--- a/src/ui/src/core_components/content/CoreHeading.vue
+++ b/src/ui/src/components/core/content/CoreHeading.vue
@@ -12,8 +12,8 @@
 </template>
 
 <script lang="ts">
-import { FieldCategory, FieldType } from "../../writerTypes";
-import { cssClasses, primaryTextColor } from "../../renderer/sharedStyleFields";
+import { FieldCategory, FieldType } from "@/writerTypes";
+import { cssClasses, primaryTextColor } from "@/renderer/sharedStyleFields";
 
 const description =
 	"A text component used to display headings or titles in different sizes and styles.";
@@ -63,11 +63,11 @@ export default {
 </script>
 <script setup lang="ts">
 import { inject } from "vue";
-import injectionKeys from "../../injectionKeys";
+import injectionKeys from "@/injectionKeys";
 const fields = inject(injectionKeys.evaluatedFields);
 </script>
 <style scoped>
-@import "../../renderer/sharedStyles.css";
+@import "@/renderer/sharedStyles.css";
 
 .CoreHeading {
 	color: var(--primaryTextColor);
diff --git a/src/ui/src/core_components/content/CoreIcon.vue b/src/ui/src/components/core/content/CoreIcon.vue
similarity index 85%
rename from src/ui/src/core_components/content/CoreIcon.vue
rename to src/ui/src/components/core/content/CoreIcon.vue
index f380bd195..fab63f15f 100644
--- a/src/ui/src/core_components/content/CoreIcon.vue
+++ b/src/ui/src/components/core/content/CoreIcon.vue
@@ -17,8 +17,8 @@
 </template>
 
 <script lang="ts">
-import { FieldCategory, FieldType } from "../../writerTypes";
-import { cssClasses } from "../../renderer/sharedStyleFields";
+import { FieldCategory, FieldType } from "@/writerTypes";
+import { cssClasses } from "@/renderer/sharedStyleFields";
 
 export default {
 	writer: {
@@ -54,13 +54,13 @@ export default {
 
 <script setup lang="ts">
 import { inject } from "vue";
-import injectionKeys from "../../injectionKeys";
+import injectionKeys from "@/injectionKeys";
 
 const fields = inject(injectionKeys.evaluatedFields);
 </script>
 
 <style scoped>
-@import "../../renderer/sharedStyles.css";
+@import "@/renderer/sharedStyles.css";
 
 .icon {
 	display: flex;
diff --git a/src/ui/src/core_components/content/CoreImage.vue b/src/ui/src/components/core/content/CoreImage.vue
similarity index 95%
rename from src/ui/src/core_components/content/CoreImage.vue
rename to src/ui/src/components/core/content/CoreImage.vue
index a734e0c7a..c78d84739 100644
--- a/src/ui/src/core_components/content/CoreImage.vue
+++ b/src/ui/src/components/core/content/CoreImage.vue
@@ -30,12 +30,9 @@ You can also use packed files or bytes:
 </template>
 
 <script lang="ts">
-import { FieldCategory, FieldType } from "../../writerTypes";
-import {
-	cssClasses,
-	secondaryTextColor,
-} from "../../renderer/sharedStyleFields";
-import { getClick } from "../../renderer/syntheticEvents";
+import { FieldCategory, FieldType } from "@/writerTypes";
+import { cssClasses, secondaryTextColor } from "@/renderer/sharedStyleFields";
+import { getClick } from "@/renderer/syntheticEvents";
 
 const description = "A component to display images.";
 
@@ -93,7 +90,7 @@ export default {
 
 <script setup lang="ts">
 import { Ref, computed, inject, ref } from "vue";
-import injectionKeys from "../../injectionKeys";
+import injectionKeys from "@/injectionKeys";
 
 const rootEl: Ref<HTMLElement> = ref(null);
 const wf = inject(injectionKeys.core);
@@ -126,7 +123,7 @@ function handleClick(ev: MouseEvent) {
 </script>
 
 <style scoped>
-@import "../../renderer/sharedStyles.css";
+@import "@/renderer/sharedStyles.css";
 
 .CoreImage {
 	width: fit-content;
diff --git a/src/ui/src/core_components/content/CoreJsonViewer.vue b/src/ui/src/components/core/content/CoreJsonViewer.vue
similarity index 94%
rename from src/ui/src/core_components/content/CoreJsonViewer.vue
rename to src/ui/src/components/core/content/CoreJsonViewer.vue
index f44c9b3d6..cd059a2ae 100644
--- a/src/ui/src/core_components/content/CoreJsonViewer.vue
+++ b/src/ui/src/components/core/content/CoreJsonViewer.vue
@@ -15,12 +15,12 @@ import {
 	cssClasses,
 	secondaryTextColor,
 	separatorColor,
-} from "../../renderer/sharedStyleFields";
+} from "@/renderer/sharedStyleFields";
 import {
 	FieldCategory,
 	FieldType,
 	WriterComponentDefinition,
-} from "../../writerTypes";
+} from "@/writerTypes";
 
 const description = "A component to explore JSON data as a hierarchy.";
 
@@ -74,7 +74,7 @@ export default { writer: definition };
 
 <script setup lang="ts">
 import { computed, inject } from "vue";
-import injectionKeys from "../../injectionKeys";
+import injectionKeys from "@/injectionKeys";
 import type { JsonData } from "../base/BaseJsonViewer.vue";
 import BaseJsonViewer from "../base/BaseJsonViewer.vue";
 import BaseJsonViewerChildrenCounter from "../base/BaseJsonViewerChildrenCounter.vue";
diff --git a/src/ui/src/core_components/content/CoreLink.vue b/src/ui/src/components/core/content/CoreLink.vue
similarity index 90%
rename from src/ui/src/core_components/content/CoreLink.vue
rename to src/ui/src/components/core/content/CoreLink.vue
index 20dc2dcad..d35828d9f 100644
--- a/src/ui/src/core_components/content/CoreLink.vue
+++ b/src/ui/src/components/core/content/CoreLink.vue
@@ -11,9 +11,9 @@
 </template>
 
 <script lang="ts">
-import { FieldType, Core } from "../../writerTypes";
-import { cssClasses, primaryTextColor } from "../../renderer/sharedStyleFields";
-import injectionKeys from "../../injectionKeys";
+import { FieldType, Core } from "@/writerTypes";
+import { cssClasses, primaryTextColor } from "@/renderer/sharedStyleFields";
+import injectionKeys from "@/injectionKeys";
 export default {
 	writer: {
 		name: "Link",
diff --git a/src/ui/src/core_components/content/CoreMessage.vue b/src/ui/src/components/core/content/CoreMessage.vue
similarity index 92%
rename from src/ui/src/core_components/content/CoreMessage.vue
rename to src/ui/src/components/core/content/CoreMessage.vue
index 294b02f22..640a9e3eb 100644
--- a/src/ui/src/core_components/content/CoreMessage.vue
+++ b/src/ui/src/components/core/content/CoreMessage.vue
@@ -29,8 +29,8 @@ else:
 </template>
 
 <script lang="ts">
-import { cssClasses, primaryTextColor } from "../../renderer/sharedStyleFields";
-import { FieldCategory, FieldType } from "../../writerTypes";
+import { cssClasses, primaryTextColor } from "@/renderer/sharedStyleFields";
+import { FieldCategory, FieldType } from "@/writerTypes";
 
 const description =
 	"A component that displays a message in various styles, including success, error, warning, and informational.";
@@ -86,8 +86,8 @@ export default {
 
 <script setup lang="ts">
 import { computed, inject } from "vue";
-import injectionKeys from "../../injectionKeys";
-import LoadingSymbol from "../../renderer/LoadingSymbol.vue";
+import injectionKeys from "@/injectionKeys";
+import LoadingSymbol from "@/renderer/LoadingSymbol.vue";
 import BaseEmptiness from "../base/BaseEmptiness.vue";
 
 const componentId = inject(injectionKeys.componentId);
@@ -139,7 +139,7 @@ const rootStyle = computed(() => {
 });
 </script>
 <style scoped>
-@import "../../renderer/sharedStyles.css";
+@import "@/renderer/sharedStyles.css";
 
 .CoreMessage {
 	color: var(--primaryTextColor);
diff --git a/src/ui/src/core_components/content/CoreMetric.vue b/src/ui/src/components/core/content/CoreMetric.vue
similarity index 94%
rename from src/ui/src/core_components/content/CoreMetric.vue
rename to src/ui/src/components/core/content/CoreMetric.vue
index 46caf8a2b..3913dd2fa 100644
--- a/src/ui/src/core_components/content/CoreMetric.vue
+++ b/src/ui/src/components/core/content/CoreMetric.vue
@@ -10,12 +10,12 @@
 </template>
 
 <script lang="ts">
-import { FieldCategory, FieldType } from "../../writerTypes";
+import { FieldCategory, FieldType } from "@/writerTypes";
 import {
 	cssClasses,
 	primaryTextColor,
 	secondaryTextColor,
-} from "../../renderer/sharedStyleFields";
+} from "@/renderer/sharedStyleFields";
 
 const description =
 	"A component that prominently displays a metric value and associated information.";
@@ -75,7 +75,7 @@ export default {
 </script>
 <script setup lang="ts">
 import { computed, inject } from "vue";
-import injectionKeys from "../../injectionKeys";
+import injectionKeys from "@/injectionKeys";
 const fields = inject(injectionKeys.evaluatedFields);
 
 const sentiment = computed(() => {
@@ -112,7 +112,7 @@ const rootStyle = computed(() => {
 });
 </script>
 <style scoped>
-@import "../../renderer/sharedStyles.css";
+@import "@/renderer/sharedStyles.css";
 
 .CoreMetric {
 	color: var(--primaryTextColor);
diff --git a/src/ui/src/core_components/content/CorePlotlyGraph.vue b/src/ui/src/components/core/content/CorePlotlyGraph.vue
similarity index 95%
rename from src/ui/src/core_components/content/CorePlotlyGraph.vue
rename to src/ui/src/components/core/content/CorePlotlyGraph.vue
index 768d5b19c..690afd75b 100644
--- a/src/ui/src/core_components/content/CorePlotlyGraph.vue
+++ b/src/ui/src/components/core/content/CorePlotlyGraph.vue
@@ -10,8 +10,8 @@ For example, implement cross-filtering.
 </template>
 
 <script lang="ts">
-import { FieldType } from "../../writerTypes";
-import { cssClasses } from "../../renderer/sharedStyleFields";
+import { FieldType } from "@/writerTypes";
+import { cssClasses } from "@/renderer/sharedStyleFields";
 
 const description = "A component that displays Plotly graphs.";
 
@@ -56,7 +56,7 @@ export default {
 
 <script setup lang="ts">
 import { computed, inject, onMounted, Ref, ref, watch } from "vue";
-import injectionKeys from "../../injectionKeys";
+import injectionKeys from "@/injectionKeys";
 
 const rootEl: Ref<HTMLElement> = ref(null);
 const chartTargetEl: Ref<HTMLElement> = ref(null);
@@ -169,7 +169,7 @@ onMounted(async () => {
 </script>
 
 <style scoped>
-@import "../../renderer/sharedStyles.css";
+@import "@/renderer/sharedStyles.css";
 
 .CorePlotlyGraph {
 	position: relative;
diff --git a/src/ui/src/core_components/content/CoreTags.vue b/src/ui/src/components/core/content/CoreTags.vue
similarity index 94%
rename from src/ui/src/core_components/content/CoreTags.vue
rename to src/ui/src/components/core/content/CoreTags.vue
index 145e028d9..b09502ac2 100644
--- a/src/ui/src/core_components/content/CoreTags.vue
+++ b/src/ui/src/components/core/content/CoreTags.vue
@@ -24,8 +24,8 @@
 </template>
 
 <script lang="ts">
-import { FieldCategory, FieldType } from "../../writerTypes";
-import { cssClasses, primaryTextColor } from "../../renderer/sharedStyleFields";
+import { FieldCategory, FieldType } from "@/writerTypes";
+import { cssClasses, primaryTextColor } from "@/renderer/sharedStyleFields";
 
 const clickHandlerStub = `
 def handle_tag_click(state, payload):
@@ -85,7 +85,7 @@ export default {
 </script>
 <script setup lang="ts">
 import { Ref, computed, inject, ref } from "vue";
-import injectionKeys from "../../injectionKeys";
+import injectionKeys from "@/injectionKeys";
 import chroma from "chroma-js";
 
 const COLOR_STEPS = [
@@ -153,7 +153,7 @@ function handleTagClick(tagId: string) {
 </script>
 
 <style scoped>
-@import "../../renderer/sharedStyles.css";
+@import "@/renderer/sharedStyles.css";
 
 .CoreTags {
 	display: flex;
diff --git a/src/ui/src/core_components/content/CoreText.vue b/src/ui/src/components/core/content/CoreText.vue
similarity index 90%
rename from src/ui/src/core_components/content/CoreText.vue
rename to src/ui/src/components/core/content/CoreText.vue
index 4214221ed..ef50c4d95 100644
--- a/src/ui/src/core_components/content/CoreText.vue
+++ b/src/ui/src/components/core/content/CoreText.vue
@@ -22,9 +22,9 @@
 </template>
 
 <script lang="ts">
-import { cssClasses, primaryTextColor } from "../../renderer/sharedStyleFields";
-import { getClick } from "../../renderer/syntheticEvents";
-import { FieldCategory, FieldControl, FieldType } from "../../writerTypes";
+import { cssClasses, primaryTextColor } from "@/renderer/sharedStyleFields";
+import { getClick } from "@/renderer/syntheticEvents";
+import { FieldCategory, FieldControl, FieldType } from "@/writerTypes";
 
 const clickHandlerStub = `
 def click_handler(state):
@@ -85,7 +85,7 @@ export default {
 </script>
 <script setup lang="ts">
 import { Ref, computed, inject, ref } from "vue";
-import injectionKeys from "../../injectionKeys";
+import injectionKeys from "@/injectionKeys";
 import BaseEmptiness from "../base/BaseEmptiness.vue";
 import BaseMarkdown from "../base/BaseMarkdown.vue";
 
@@ -120,7 +120,7 @@ function handleClick(ev: MouseEvent) {
 </script>
 
 <style scoped>
-@import "../../renderer/sharedStyles.css";
+@import "@/renderer/sharedStyles.css";
 
 .CoreText {
 	color: var(--primaryTextColor);
diff --git a/src/ui/src/core_components/content/CoreVegaLiteChart.vue b/src/ui/src/components/core/content/CoreVegaLiteChart.vue
similarity index 91%
rename from src/ui/src/core_components/content/CoreVegaLiteChart.vue
rename to src/ui/src/components/core/content/CoreVegaLiteChart.vue
index e4f9dd1d6..1881c631b 100644
--- a/src/ui/src/core_components/content/CoreVegaLiteChart.vue
+++ b/src/ui/src/components/core/content/CoreVegaLiteChart.vue
@@ -15,8 +15,8 @@ Alternatively, you can work with Vega-Lite directly.
 </template>
 
 <script lang="ts">
-import { FieldType } from "../../writerTypes";
-import { cssClasses } from "../../renderer/sharedStyleFields";
+import { FieldType } from "@/writerTypes";
+import { cssClasses } from "@/renderer/sharedStyleFields";
 
 const description = "A component that displays Vega-Lite/Altair charts.";
 
@@ -58,7 +58,7 @@ export default {
 
 <script setup lang="ts">
 import { inject, onMounted, Ref, ref, watch } from "vue";
-import injectionKeys from "../../injectionKeys";
+import injectionKeys from "@/injectionKeys";
 
 const rootEl: Ref<HTMLElement> = ref(null);
 const chartTargetEl: Ref<HTMLElement> = ref(null);
@@ -88,7 +88,7 @@ onMounted(() => {
 </script>
 
 <style scoped>
-@import "../../renderer/sharedStyles.css";
+@import "@/renderer/sharedStyles.css";
 
 .CoreVegaLiteChart {
 	min-height: 1px;
diff --git a/src/ui/src/core_components/content/CoreVideoPlayer.vue b/src/ui/src/components/core/content/CoreVideoPlayer.vue
similarity index 93%
rename from src/ui/src/core_components/content/CoreVideoPlayer.vue
rename to src/ui/src/components/core/content/CoreVideoPlayer.vue
index 2430f6585..b8651c42c 100644
--- a/src/ui/src/core_components/content/CoreVideoPlayer.vue
+++ b/src/ui/src/components/core/content/CoreVideoPlayer.vue
@@ -24,8 +24,8 @@ Afterwards, you can reference the video using the syntax \`@{vid_f}\`.
 </template>
 
 <script lang="ts">
-import { FieldType } from "../../writerTypes";
-import { cssClasses } from "../../renderer/sharedStyleFields";
+import { FieldType } from "@/writerTypes";
+import { cssClasses } from "@/renderer/sharedStyleFields";
 
 const description =
 	"A video player component that can play various video formats.";
@@ -90,7 +90,7 @@ export default {
 
 <script setup lang="ts">
 import { inject } from "vue";
-import injectionKeys from "../../injectionKeys";
+import injectionKeys from "@/injectionKeys";
 
 const fields = inject(injectionKeys.evaluatedFields);
 </script>
diff --git a/src/ui/src/core_components/embed/CoreGoogleMaps.vue b/src/ui/src/components/core/embed/CoreGoogleMaps.vue
similarity index 96%
rename from src/ui/src/core_components/embed/CoreGoogleMaps.vue
rename to src/ui/src/components/core/embed/CoreGoogleMaps.vue
index c0abd9146..360022297 100644
--- a/src/ui/src/core_components/embed/CoreGoogleMaps.vue
+++ b/src/ui/src/components/core/embed/CoreGoogleMaps.vue
@@ -11,8 +11,8 @@
 
 <script lang="ts">
 /* global google */
-import { FieldType } from "../../writerTypes";
-import { cssClasses } from "../../renderer/sharedStyleFields";
+import { FieldType } from "@/writerTypes";
+import { cssClasses } from "@/renderer/sharedStyleFields";
 
 const description =
 	"A component to embed a Google Map. It can be used to display a map with markers.";
@@ -88,7 +88,7 @@ export default {
 
 <script setup lang="ts">
 import { Ref, inject, ref, onMounted, watch, computed } from "vue";
-import injectionKeys from "../../injectionKeys";
+import injectionKeys from "@/injectionKeys";
 
 const rootEl: Ref<HTMLElement> = ref(null);
 const mapEl: Ref<HTMLElement> = ref(null);
@@ -200,7 +200,7 @@ watch(fields.mapId, initMap);
 </script>
 
 <style scoped>
-@import "../../renderer/sharedStyles.css";
+@import "@/renderer/sharedStyles.css";
 
 .CoreGoogleMaps {
 	position: relative;
diff --git a/src/ui/src/core_components/embed/CoreIFrame.vue b/src/ui/src/components/core/embed/CoreIFrame.vue
similarity index 89%
rename from src/ui/src/core_components/embed/CoreIFrame.vue
rename to src/ui/src/components/core/embed/CoreIFrame.vue
index f09b08dcd..7c887ecee 100644
--- a/src/ui/src/core_components/embed/CoreIFrame.vue
+++ b/src/ui/src/components/core/embed/CoreIFrame.vue
@@ -14,8 +14,8 @@
 </template>
 
 <script lang="ts">
-import { FieldType } from "../../writerTypes";
-import { cssClasses, separatorColor } from "../../renderer/sharedStyleFields";
+import { FieldType } from "@/writerTypes";
+import { cssClasses, separatorColor } from "@/renderer/sharedStyleFields";
 
 const description = "A component to embed an external resource in an iframe.";
 
@@ -53,7 +53,7 @@ export default {
 
 <script setup lang="ts">
 import { Ref, inject, ref } from "vue";
-import injectionKeys from "../../injectionKeys";
+import injectionKeys from "@/injectionKeys";
 
 const rootEl: Ref<HTMLElement> = ref(null);
 const fields = inject(injectionKeys.evaluatedFields);
@@ -65,7 +65,7 @@ function handleLoad() {
 </script>
 
 <style scoped>
-@import "../../renderer/sharedStyles.css";
+@import "@/renderer/sharedStyles.css";
 
 .CoreIFrame {
 	position: relative;
diff --git a/src/ui/src/core_components/embed/CoreMapbox.vue b/src/ui/src/components/core/embed/CoreMapbox.vue
similarity index 96%
rename from src/ui/src/core_components/embed/CoreMapbox.vue
rename to src/ui/src/components/core/embed/CoreMapbox.vue
index d5125eb53..5f335bb11 100644
--- a/src/ui/src/core_components/embed/CoreMapbox.vue
+++ b/src/ui/src/components/core/embed/CoreMapbox.vue
@@ -10,8 +10,8 @@
 </template>
 
 <script lang="ts">
-import { FieldType } from "../../writerTypes";
-import { cssClasses } from "../../renderer/sharedStyleFields";
+import { FieldType } from "@/writerTypes";
+import { cssClasses } from "@/renderer/sharedStyleFields";
 
 const markersDefaultData = [
 	{ lat: 37.79322359164316, lng: -122.39999318828129, name: "Marker" },
@@ -85,7 +85,7 @@ export default {
 <script setup lang="ts">
 import "mapbox-gl/dist/mapbox-gl.css";
 import { inject, ref, watch, computed } from "vue";
-import injectionKeys from "../../injectionKeys";
+import injectionKeys from "@/injectionKeys";
 import type * as mapboxgl from "mapbox-gl";
 const fields = inject(injectionKeys.evaluatedFields);
 const rootEl = ref(null);
@@ -203,7 +203,7 @@ watch([mapEl, fields.accessToken], () => {
 </script>
 
 <style scoped>
-@import "../../renderer/sharedStyles.css";
+@import "@/renderer/sharedStyles.css";
 
 .CoreMapbox {
 	position: relative;
diff --git a/src/ui/src/core_components/embed/CorePDF.vue b/src/ui/src/components/core/embed/CorePDF.vue
similarity index 96%
rename from src/ui/src/core_components/embed/CorePDF.vue
rename to src/ui/src/components/core/embed/CorePDF.vue
index 98e40c1e8..608576e64 100644
--- a/src/ui/src/core_components/embed/CorePDF.vue
+++ b/src/ui/src/components/core/embed/CorePDF.vue
@@ -45,14 +45,14 @@
 </template>
 
 <script lang="ts">
-import { FieldType } from "../../writerTypes";
+import { FieldType } from "@/writerTypes";
 import {
 	cssClasses,
 	separatorColor,
 	primaryTextColor,
 	containerBackgroundColor,
-} from "../../renderer/sharedStyleFields";
-import WdsControl from "../../wds/WdsControl.vue";
+} from "@/renderer/sharedStyleFields";
+import WdsControl from "@/wds/WdsControl.vue";
 
 const description = "A component to embed PDF documents.";
 
@@ -105,7 +105,7 @@ export default {
 
 <script setup lang="ts">
 import { inject, ref, watch, computed, onMounted } from "vue";
-import injectionKeys from "../../injectionKeys";
+import injectionKeys from "@/injectionKeys";
 import "@tato30/vue-pdf/style.css";
 
 type MatchType = { str: string; page: number; index: number };
@@ -310,8 +310,8 @@ watch(fields.page, () => {
 </script>
 
 <style scoped>
-@import "../../renderer/sharedStyles.css";
-@import "../../renderer/colorTransformations.css";
+@import "@/renderer/sharedStyles.css";
+@import "@/renderer/colorTransformations.css";
 
 .CorePDF {
 	position: relative;
diff --git a/src/ui/src/core_components/input/CoreCheckboxInput.vue b/src/ui/src/components/core/input/CoreCheckboxInput.vue
similarity index 91%
rename from src/ui/src/core_components/input/CoreCheckboxInput.vue
rename to src/ui/src/components/core/input/CoreCheckboxInput.vue
index 2161b08d6..d2f8eb70c 100644
--- a/src/ui/src/core_components/input/CoreCheckboxInput.vue
+++ b/src/ui/src/components/core/input/CoreCheckboxInput.vue
@@ -38,12 +38,12 @@
 <script lang="ts">
 import { ComponentPublicInstance, inject } from "vue";
 import { ref } from "vue";
-import { FieldCategory, FieldType } from "../../writerTypes";
+import { FieldCategory, FieldType } from "@/writerTypes";
 import {
 	accentColor,
 	cssClasses,
 	primaryTextColor,
-} from "../../renderer/sharedStyleFields";
+} from "@/renderer/sharedStyleFields";
 import BaseInputWrapper from "../base/BaseInputWrapper.vue";
 
 const defaultOptions = { a: "Option A", b: "Option B" };
@@ -103,8 +103,8 @@ export default {
 </script>
 
 <script setup lang="ts">
-import injectionKeys from "../../injectionKeys";
-import { useFormValueBroker } from "../../renderer/useFormValueBroker";
+import injectionKeys from "@/injectionKeys";
+import { useFormValueBroker } from "@/renderer/useFormValueBroker";
 
 const fields = inject(injectionKeys.evaluatedFields);
 const rootInstance = ref<ComponentPublicInstance | null>(null);
@@ -133,8 +133,8 @@ function getCheckedKeys() {
 </script>
 
 <style scoped>
-@import "../../renderer/sharedStyles.css";
-@import "../../renderer/colorTransformations.css";
+@import "@/renderer/sharedStyles.css";
+@import "@/renderer/colorTransformations.css";
 
 .CoreCheckboxInput {
 	width: fit-content;
diff --git a/src/ui/src/core_components/input/CoreColorInput.vue b/src/ui/src/components/core/input/CoreColorInput.vue
similarity index 85%
rename from src/ui/src/core_components/input/CoreColorInput.vue
rename to src/ui/src/components/core/input/CoreColorInput.vue
index 0c37e598a..1b5785591 100644
--- a/src/ui/src/core_components/input/CoreColorInput.vue
+++ b/src/ui/src/components/core/input/CoreColorInput.vue
@@ -15,8 +15,8 @@
 
 <script lang="ts">
 import { ComponentPublicInstance } from "vue";
-import { cssClasses } from "../../renderer/sharedStyleFields";
-import { FieldType, WriterComponentDefinition } from "../../writerTypes";
+import { cssClasses } from "@/renderer/sharedStyleFields";
+import { FieldType, WriterComponentDefinition } from "@/writerTypes";
 import BaseInputColor from "../base/BaseInputColor.vue";
 import BaseInputWrapper from "../base/BaseInputWrapper.vue";
 
@@ -71,8 +71,8 @@ export default { writer: definition };
 </script>
 <script setup lang="ts">
 import { computed, inject, ref } from "vue";
-import injectionKeys from "../../injectionKeys";
-import { useFormValueBroker } from "../../renderer/useFormValueBroker";
+import injectionKeys from "@/injectionKeys";
+import { useFormValueBroker } from "@/renderer/useFormValueBroker";
 
 const fields = inject(injectionKeys.evaluatedFields);
 const rootInstance = ref<ComponentPublicInstance | null>(null);
@@ -91,8 +91,8 @@ const { formValue, handleInput } = useFormValueBroker<string>(
 </script>
 
 <style scoped>
-@import "../../renderer/sharedStyles.css";
-@import "../../renderer/colorTransformations.css";
+@import "@/renderer/sharedStyles.css";
+@import "@/renderer/colorTransformations.css";
 
 .CoreColorInput {
 	width: fit-content;
diff --git a/src/ui/src/core_components/input/CoreDateInput.vue b/src/ui/src/components/core/input/CoreDateInput.vue
similarity index 85%
rename from src/ui/src/core_components/input/CoreDateInput.vue
rename to src/ui/src/components/core/input/CoreDateInput.vue
index 6489b139e..45f23369a 100644
--- a/src/ui/src/core_components/input/CoreDateInput.vue
+++ b/src/ui/src/components/core/input/CoreDateInput.vue
@@ -19,8 +19,8 @@
 </template>
 
 <script lang="ts">
-import { FieldType } from "../../writerTypes";
-import { cssClasses } from "../../renderer/sharedStyleFields";
+import { FieldType } from "@/writerTypes";
+import { cssClasses } from "@/renderer/sharedStyleFields";
 import BaseInputWrapper from "../base/BaseInputWrapper.vue";
 import { ComponentPublicInstance } from "vue";
 
@@ -59,8 +59,8 @@ export default {
 </script>
 <script setup lang="ts">
 import { inject, ref } from "vue";
-import injectionKeys from "../../injectionKeys";
-import { useFormValueBroker } from "../../renderer/useFormValueBroker";
+import injectionKeys from "@/injectionKeys";
+import { useFormValueBroker } from "@/renderer/useFormValueBroker";
 
 const fields = inject(injectionKeys.evaluatedFields);
 const rootInstance = ref<ComponentPublicInstance | null>(null);
@@ -75,8 +75,8 @@ const { formValue, handleInput } = useFormValueBroker(
 </script>
 
 <style scoped>
-@import "../../renderer/sharedStyles.css";
-@import "../../renderer/colorTransformations.css";
+@import "@/renderer/sharedStyles.css";
+@import "@/renderer/colorTransformations.css";
 
 .CoreDateInput {
 	width: fit-content;
diff --git a/src/ui/src/core_components/input/CoreDropdownInput.vue b/src/ui/src/components/core/input/CoreDropdownInput.vue
similarity index 84%
rename from src/ui/src/core_components/input/CoreDropdownInput.vue
rename to src/ui/src/components/core/input/CoreDropdownInput.vue
index d77aac8e4..dd3ac51ba 100644
--- a/src/ui/src/core_components/input/CoreDropdownInput.vue
+++ b/src/ui/src/components/core/input/CoreDropdownInput.vue
@@ -28,10 +28,10 @@
 <script lang="ts">
 import { inject } from "vue";
 import { ref } from "vue";
-import { FieldType } from "../../writerTypes";
-import { cssClasses } from "../../renderer/sharedStyleFields";
+import { FieldType } from "@/writerTypes";
+import { cssClasses } from "@/renderer/sharedStyleFields";
 import BaseInputWrapper from "../base/BaseInputWrapper.vue";
-import WdsDropdownInput from "../../wds/WdsDropdownInput.vue";
+import WdsDropdownInput from "@/wds/WdsDropdownInput.vue";
 import { ComponentPublicInstance } from "vue";
 
 const description =
@@ -75,8 +75,8 @@ export default {
 </script>
 
 <script setup lang="ts">
-import injectionKeys from "../../injectionKeys";
-import { useFormValueBroker } from "../../renderer/useFormValueBroker";
+import injectionKeys from "@/injectionKeys";
+import { useFormValueBroker } from "@/renderer/useFormValueBroker";
 
 const fields = inject(injectionKeys.evaluatedFields);
 const rootInstance = ref<ComponentPublicInstance | null>(null);
@@ -91,8 +91,8 @@ const { formValue, handleInput } = useFormValueBroker(
 </script>
 
 <style scoped>
-@import "../../renderer/sharedStyles.css";
-@import "../../renderer/colorTransformations.css";
+@import "@/renderer/sharedStyles.css";
+@import "@/renderer/colorTransformations.css";
 
 .CoreDropdownInput {
 	width: fit-content;
diff --git a/src/ui/src/core_components/input/CoreFileInput.vue b/src/ui/src/components/core/input/CoreFileInput.vue
similarity index 92%
rename from src/ui/src/core_components/input/CoreFileInput.vue
rename to src/ui/src/components/core/input/CoreFileInput.vue
index 7308f9c92..f7f92bd7f 100644
--- a/src/ui/src/core_components/input/CoreFileInput.vue
+++ b/src/ui/src/components/core/input/CoreFileInput.vue
@@ -47,8 +47,8 @@
 
 <script lang="ts">
 import { ComponentPublicInstance } from "vue";
-import { cssClasses } from "../../renderer/sharedStyleFields";
-import { FieldType } from "../../writerTypes";
+import { cssClasses } from "@/renderer/sharedStyleFields";
+import { FieldType } from "@/writerTypes";
 import BaseInputWrapper from "../base/BaseInputWrapper.vue";
 
 const MAX_FILE_SIZE = 200 * 1024 * 1024;
@@ -104,10 +104,10 @@ export default {
 
 <script setup lang="ts">
 import { computed, inject, Ref, ref, watch } from "vue";
-import injectionKeys from "../../injectionKeys";
-import LoadingSymbol from "../../renderer/LoadingSymbol.vue";
-import { useFormValueBroker } from "../../renderer/useFormValueBroker";
-import WdsButton from "../../wds/WdsButton.vue";
+import injectionKeys from "@/injectionKeys";
+import LoadingSymbol from "@/renderer/LoadingSymbol.vue";
+import { useFormValueBroker } from "@/renderer/useFormValueBroker";
+import WdsButton from "@/wds/WdsButton.vue";
 
 type SavedFile = { name: string; type: string; data: unknown };
 
@@ -200,8 +200,8 @@ const emptyMessage = computed(() => `No ${fileLabel.value} selected`);
 </script>
 
 <style scoped>
-@import "../../renderer/sharedStyles.css";
-@import "../../renderer/colorTransformations.css";
+@import "@/renderer/sharedStyles.css";
+@import "@/renderer/colorTransformations.css";
 
 .CoreFileInput {
 	width: 100%;
diff --git a/src/ui/src/core_components/input/CoreMultiselectInput.vue b/src/ui/src/components/core/input/CoreMultiselectInput.vue
similarity index 92%
rename from src/ui/src/core_components/input/CoreMultiselectInput.vue
rename to src/ui/src/components/core/input/CoreMultiselectInput.vue
index d68ed6ed1..c5195b181 100644
--- a/src/ui/src/core_components/input/CoreMultiselectInput.vue
+++ b/src/ui/src/components/core/input/CoreMultiselectInput.vue
@@ -19,7 +19,7 @@
 <script lang="ts">
 import { computed, inject, Ref } from "vue";
 import { ref } from "vue";
-import { FieldCategory, FieldType } from "../../writerTypes";
+import { FieldCategory, FieldType } from "@/writerTypes";
 import {
 	accentColor,
 	containerBackgroundColor,
@@ -27,7 +27,7 @@ import {
 	primaryTextColor,
 	secondaryTextColor,
 	separatorColor,
-} from "../../renderer/sharedStyleFields";
+} from "@/renderer/sharedStyleFields";
 import BaseInputWrapper from "../base/BaseInputWrapper.vue";
 import { ComponentPublicInstance } from "vue";
 
@@ -99,8 +99,8 @@ export default {
 </script>
 
 <script setup lang="ts">
-import injectionKeys from "../../injectionKeys";
-import { useFormValueBroker } from "../../renderer/useFormValueBroker";
+import injectionKeys from "@/injectionKeys";
+import { useFormValueBroker } from "@/renderer/useFormValueBroker";
 import BaseSelect from "../base/BaseSelect.vue";
 
 const fields = inject(injectionKeys.evaluatedFields);
@@ -123,7 +123,7 @@ function handleChange(selectedOptions: string[]) {
 </script>
 
 <style scoped>
-@import "../../renderer/sharedStyles.css";
+@import "@/renderer/sharedStyles.css";
 
 .CoreMultiselectInput {
 	width: fit-content;
diff --git a/src/ui/src/core_components/input/CoreNumberInput.vue b/src/ui/src/components/core/input/CoreNumberInput.vue
similarity index 91%
rename from src/ui/src/core_components/input/CoreNumberInput.vue
rename to src/ui/src/components/core/input/CoreNumberInput.vue
index 8623f6c7e..1c8091f9c 100644
--- a/src/ui/src/core_components/input/CoreNumberInput.vue
+++ b/src/ui/src/components/core/input/CoreNumberInput.vue
@@ -31,8 +31,8 @@
 </template>
 
 <script lang="ts">
-import { FieldType } from "../../writerTypes";
-import { cssClasses } from "../../renderer/sharedStyleFields";
+import { FieldType } from "@/writerTypes";
+import { cssClasses } from "@/renderer/sharedStyleFields";
 import BaseInputWrapper from "../base/BaseInputWrapper.vue";
 import { ComponentPublicInstance } from "vue";
 
@@ -95,8 +95,8 @@ export default {
 
 <script setup lang="ts">
 import { inject, ref } from "vue";
-import injectionKeys from "../../injectionKeys";
-import { useFormValueBroker } from "../../renderer/useFormValueBroker";
+import injectionKeys from "@/injectionKeys";
+import { useFormValueBroker } from "@/renderer/useFormValueBroker";
 
 const fields = inject(injectionKeys.evaluatedFields);
 const rootInstance = ref<ComponentPublicInstance | null>(null);
@@ -141,8 +141,8 @@ function handleChangeEvent() {
 </script>
 
 <style scoped>
-@import "../../renderer/sharedStyles.css";
-@import "../../renderer/colorTransformations.css";
+@import "@/renderer/sharedStyles.css";
+@import "@/renderer/colorTransformations.css";
 
 .CoreNumberInput {
 	max-width: 70ch;
diff --git a/src/ui/src/core_components/input/CoreRadioInput.vue b/src/ui/src/components/core/input/CoreRadioInput.vue
similarity index 90%
rename from src/ui/src/core_components/input/CoreRadioInput.vue
rename to src/ui/src/components/core/input/CoreRadioInput.vue
index adfa50d33..c61816b1d 100644
--- a/src/ui/src/core_components/input/CoreRadioInput.vue
+++ b/src/ui/src/components/core/input/CoreRadioInput.vue
@@ -36,12 +36,12 @@
 <script lang="ts">
 import { inject } from "vue";
 import { ref } from "vue";
-import { FieldCategory, FieldType } from "../../writerTypes";
+import { FieldCategory, FieldType } from "@/writerTypes";
 import {
 	accentColor,
 	cssClasses,
 	primaryTextColor,
-} from "../../renderer/sharedStyleFields";
+} from "@/renderer/sharedStyleFields";
 import BaseInputWrapper from "../base/BaseInputWrapper.vue";
 import { ComponentPublicInstance } from "vue";
 
@@ -101,8 +101,8 @@ export default {
 </script>
 
 <script setup lang="ts">
-import injectionKeys from "../../injectionKeys";
-import { useFormValueBroker } from "../../renderer/useFormValueBroker";
+import injectionKeys from "@/injectionKeys";
+import { useFormValueBroker } from "@/renderer/useFormValueBroker";
 
 const fields = inject(injectionKeys.evaluatedFields);
 const flattenedInstancePath = inject(injectionKeys.flattenedInstancePath);
@@ -118,8 +118,8 @@ const { formValue, handleInput } = useFormValueBroker(
 </script>
 
 <style scoped>
-@import "../../renderer/sharedStyles.css";
-@import "../../renderer/colorTransformations.css";
+@import "@/renderer/sharedStyles.css";
+@import "@/renderer/colorTransformations.css";
 
 .CoreRadioInput {
 	width: fit-content;
diff --git a/src/ui/src/core_components/input/CoreRatingInput.vue b/src/ui/src/components/core/input/CoreRatingInput.vue
similarity index 96%
rename from src/ui/src/core_components/input/CoreRatingInput.vue
rename to src/ui/src/components/core/input/CoreRatingInput.vue
index 1c394c68f..47d5f58d8 100644
--- a/src/ui/src/core_components/input/CoreRatingInput.vue
+++ b/src/ui/src/components/core/input/CoreRatingInput.vue
@@ -50,12 +50,12 @@
 </template>
 
 <script lang="ts">
-import { FieldType } from "../../writerTypes";
+import { FieldType } from "@/writerTypes";
 import {
 	accentColor,
 	cssClasses,
 	primaryTextColor,
-} from "../../renderer/sharedStyleFields";
+} from "@/renderer/sharedStyleFields";
 import BaseInputWrapper from "../base/BaseInputWrapper.vue";
 import { ComponentPublicInstance } from "vue";
 
@@ -124,8 +124,8 @@ export default {
 
 <script setup lang="ts">
 import { Ref, computed, inject, ref } from "vue";
-import injectionKeys from "../../injectionKeys";
-import { useFormValueBroker } from "../../renderer/useFormValueBroker";
+import injectionKeys from "@/injectionKeys";
+import { useFormValueBroker } from "@/renderer/useFormValueBroker";
 
 const fields = inject(injectionKeys.evaluatedFields);
 const rootInstance = ref<ComponentPublicInstance | null>(null);
@@ -243,7 +243,7 @@ const feedbackRating = computed(() => {
 </script>
 
 <style scoped>
-@import "../../renderer/sharedStyles.css";
+@import "@/renderer/sharedStyles.css";
 
 .CoreRatingInput {
 	width: fit-content;
diff --git a/src/ui/src/core_components/input/CoreSelectInput.vue b/src/ui/src/components/core/input/CoreSelectInput.vue
similarity index 92%
rename from src/ui/src/core_components/input/CoreSelectInput.vue
rename to src/ui/src/components/core/input/CoreSelectInput.vue
index 2ce4eec5d..287da6c50 100644
--- a/src/ui/src/core_components/input/CoreSelectInput.vue
+++ b/src/ui/src/components/core/input/CoreSelectInput.vue
@@ -19,7 +19,7 @@
 <script lang="ts">
 import { computed, inject, Ref } from "vue";
 import { ref } from "vue";
-import { FieldCategory, FieldType } from "../../writerTypes";
+import { FieldCategory, FieldType } from "@/writerTypes";
 import {
 	accentColor,
 	containerBackgroundColor,
@@ -27,7 +27,7 @@ import {
 	primaryTextColor,
 	secondaryTextColor,
 	separatorColor,
-} from "../../renderer/sharedStyleFields";
+} from "@/renderer/sharedStyleFields";
 import BaseInputWrapper from "../base/BaseInputWrapper.vue";
 import { ComponentPublicInstance } from "vue";
 
@@ -96,8 +96,8 @@ export default {
 </script>
 
 <script setup lang="ts">
-import injectionKeys from "../../injectionKeys";
-import { useFormValueBroker } from "../../renderer/useFormValueBroker";
+import injectionKeys from "@/injectionKeys";
+import { useFormValueBroker } from "@/renderer/useFormValueBroker";
 import BaseSelect from "../base/BaseSelect.vue";
 
 const fields = inject(injectionKeys.evaluatedFields);
@@ -120,7 +120,7 @@ function handleChange(selectedOptions: string[]) {
 </script>
 
 <style scoped>
-@import "../../renderer/sharedStyles.css";
+@import "@/renderer/sharedStyles.css";
 
 .CoreSelectInput {
 	width: fit-content;
diff --git a/src/ui/src/core_components/input/CoreSliderInput.vue b/src/ui/src/components/core/input/CoreSliderInput.vue
similarity index 87%
rename from src/ui/src/core_components/input/CoreSliderInput.vue
rename to src/ui/src/components/core/input/CoreSliderInput.vue
index 34f0b78d1..0c2631eeb 100644
--- a/src/ui/src/core_components/input/CoreSliderInput.vue
+++ b/src/ui/src/components/core/input/CoreSliderInput.vue
@@ -17,8 +17,8 @@
 
 <script lang="ts">
 import { ComponentPublicInstance } from "vue";
-import { accentColor, cssClasses } from "../../renderer/sharedStyleFields";
-import { FieldCategory, FieldType } from "../../writerTypes";
+import { accentColor, cssClasses } from "@/renderer/sharedStyleFields";
+import { FieldCategory, FieldType } from "@/writerTypes";
 import BaseInputWrapper from "../base/BaseInputWrapper.vue";
 
 const description =
@@ -90,8 +90,8 @@ export default {
 
 <script setup lang="ts">
 import { inject, ref } from "vue";
-import injectionKeys from "../../injectionKeys";
-import { useFormValueBroker } from "../../renderer/useFormValueBroker";
+import injectionKeys from "@/injectionKeys";
+import { useFormValueBroker } from "@/renderer/useFormValueBroker";
 import BaseInputRange from "../base/BaseInputRange.vue";
 
 const fields = inject(injectionKeys.evaluatedFields);
@@ -107,8 +107,8 @@ const { formValue, handleInput } = useFormValueBroker<number>(
 </script>
 
 <style scoped>
-@import "../../renderer/sharedStyles.css";
-@import "../../renderer/colorTransformations.css";
+@import "@/renderer/sharedStyles.css";
+@import "@/renderer/colorTransformations.css";
 
 .CoreSliderInput {
 	width: 100%;
diff --git a/src/ui/src/core_components/input/CoreSwitchInput.vue b/src/ui/src/components/core/input/CoreSwitchInput.vue
similarity index 88%
rename from src/ui/src/core_components/input/CoreSwitchInput.vue
rename to src/ui/src/components/core/input/CoreSwitchInput.vue
index 64d1dfcc8..0ab7f23a6 100644
--- a/src/ui/src/core_components/input/CoreSwitchInput.vue
+++ b/src/ui/src/components/core/input/CoreSwitchInput.vue
@@ -22,13 +22,13 @@
 <script lang="ts">
 import { inject } from "vue";
 import { ref } from "vue";
-import { FieldType } from "../../writerTypes";
+import { FieldType } from "@/writerTypes";
 import {
 	accentColor,
 	primaryTextColor,
 	separatorColor,
 	cssClasses,
-} from "../../renderer/sharedStyleFields";
+} from "@/renderer/sharedStyleFields";
 import { onMounted } from "vue";
 import BaseInputWrapper from "../base/BaseInputWrapper.vue";
 import { ComponentPublicInstance } from "vue";
@@ -70,8 +70,8 @@ export default {
 </script>
 
 <script setup lang="ts">
-import injectionKeys from "../../injectionKeys";
-import { useFormValueBroker } from "../../renderer/useFormValueBroker";
+import injectionKeys from "@/injectionKeys";
+import { useFormValueBroker } from "@/renderer/useFormValueBroker";
 
 const fields = inject(injectionKeys.evaluatedFields);
 const rootInstance = ref<ComponentPublicInstance | null>(null);
@@ -95,8 +95,8 @@ onMounted(() => {
 </script>
 
 <style scoped>
-@import "../../renderer/sharedStyles.css";
-@import "../../renderer/colorTransformations.css";
+@import "@/renderer/sharedStyles.css";
+@import "@/renderer/colorTransformations.css";
 
 .CoreSwitchInput {
 }
diff --git a/src/ui/src/core_components/input/CoreTextInput.vue b/src/ui/src/components/core/input/CoreTextInput.vue
similarity index 87%
rename from src/ui/src/core_components/input/CoreTextInput.vue
rename to src/ui/src/components/core/input/CoreTextInput.vue
index c08174687..0d9b2fd34 100644
--- a/src/ui/src/core_components/input/CoreTextInput.vue
+++ b/src/ui/src/components/core/input/CoreTextInput.vue
@@ -28,8 +28,8 @@
 </template>
 
 <script lang="ts">
-import { FieldCategory, FieldType } from "../../writerTypes";
-import { accentColor, cssClasses } from "../../renderer/sharedStyleFields";
+import { FieldCategory, FieldType } from "@/writerTypes";
+import { accentColor, cssClasses } from "@/renderer/sharedStyleFields";
 import { ComponentPublicInstance } from "vue";
 
 const description =
@@ -87,8 +87,8 @@ export default {
 
 <script setup lang="ts">
 import { inject, ref } from "vue";
-import injectionKeys from "../../injectionKeys";
-import { useFormValueBroker } from "../../renderer/useFormValueBroker";
+import injectionKeys from "@/injectionKeys";
+import { useFormValueBroker } from "@/renderer/useFormValueBroker";
 import BaseInputWrapper from "../base/BaseInputWrapper.vue";
 
 const fields = inject(injectionKeys.evaluatedFields);
@@ -104,8 +104,8 @@ const { formValue, handleInput } = useFormValueBroker(
 </script>
 
 <style scoped>
-@import "../../renderer/sharedStyles.css";
-@import "../../renderer/colorTransformations.css";
+@import "@/renderer/sharedStyles.css";
+@import "@/renderer/colorTransformations.css";
 
 .CoreTextInput {
 	max-width: 70ch;
diff --git a/src/ui/src/core_components/input/CoreTextareaInput.vue b/src/ui/src/components/core/input/CoreTextareaInput.vue
similarity index 87%
rename from src/ui/src/core_components/input/CoreTextareaInput.vue
rename to src/ui/src/components/core/input/CoreTextareaInput.vue
index c6f3c42b9..99b2924f7 100644
--- a/src/ui/src/core_components/input/CoreTextareaInput.vue
+++ b/src/ui/src/components/core/input/CoreTextareaInput.vue
@@ -27,8 +27,8 @@
 </template>
 
 <script lang="ts">
-import { FieldControl, FieldType } from "../../writerTypes";
-import { cssClasses } from "../../renderer/sharedStyleFields";
+import { FieldControl, FieldType } from "@/writerTypes";
+import { cssClasses } from "@/renderer/sharedStyleFields";
 import BaseInputWrapper from "../base/BaseInputWrapper.vue";
 import { ComponentPublicInstance } from "vue";
 
@@ -83,8 +83,8 @@ export default {
 
 <script setup lang="ts">
 import { inject, ref } from "vue";
-import injectionKeys from "../../injectionKeys";
-import { useFormValueBroker } from "../../renderer/useFormValueBroker";
+import injectionKeys from "@/injectionKeys";
+import { useFormValueBroker } from "@/renderer/useFormValueBroker";
 
 const fields = inject(injectionKeys.evaluatedFields);
 const rootInstance = ref<ComponentPublicInstance | null>(null);
@@ -99,8 +99,8 @@ const { formValue, handleInput } = useFormValueBroker(
 </script>
 
 <style scoped>
-@import "../../renderer/sharedStyles.css";
-@import "../../renderer/colorTransformations.css";
+@import "@/renderer/sharedStyles.css";
+@import "@/renderer/colorTransformations.css";
 
 .CoreTextareaInput {
 	max-width: 70ch;
diff --git a/src/ui/src/core_components/input/CoreTimeInput.vue b/src/ui/src/components/core/input/CoreTimeInput.vue
similarity index 85%
rename from src/ui/src/core_components/input/CoreTimeInput.vue
rename to src/ui/src/components/core/input/CoreTimeInput.vue
index 5c433403f..cc8dc0f72 100644
--- a/src/ui/src/core_components/input/CoreTimeInput.vue
+++ b/src/ui/src/components/core/input/CoreTimeInput.vue
@@ -20,8 +20,8 @@
 
 <script lang="ts">
 import { ComponentPublicInstance } from "vue";
-import { cssClasses } from "../../renderer/sharedStyleFields";
-import { FieldType } from "../../writerTypes";
+import { cssClasses } from "@/renderer/sharedStyleFields";
+import { FieldType } from "@/writerTypes";
 import BaseInputWrapper from "../base/BaseInputWrapper.vue";
 
 const description =
@@ -59,8 +59,8 @@ export default {
 </script>
 <script setup lang="ts">
 import { inject, ref } from "vue";
-import injectionKeys from "../../injectionKeys";
-import { useFormValueBroker } from "../../renderer/useFormValueBroker";
+import injectionKeys from "@/injectionKeys";
+import { useFormValueBroker } from "@/renderer/useFormValueBroker";
 
 const fields = inject(injectionKeys.evaluatedFields);
 const rootInstance = ref<ComponentPublicInstance | null>(null);
@@ -75,8 +75,8 @@ const { formValue, handleInput } = useFormValueBroker(
 </script>
 
 <style scoped>
-@import "../../renderer/sharedStyles.css";
-@import "../../renderer/colorTransformations.css";
+@import "@/renderer/sharedStyles.css";
+@import "@/renderer/colorTransformations.css";
 
 .CoreTimeInput {
 	width: fit-content;
diff --git a/src/ui/src/core_components/layout/CoreColumn.vue b/src/ui/src/components/core/layout/CoreColumn.vue
similarity index 96%
rename from src/ui/src/core_components/layout/CoreColumn.vue
rename to src/ui/src/components/core/layout/CoreColumn.vue
index 7c6dea074..bed519a72 100644
--- a/src/ui/src/core_components/layout/CoreColumn.vue
+++ b/src/ui/src/components/core/layout/CoreColumn.vue
@@ -41,14 +41,14 @@
 </template>
 
 <script lang="ts">
-import { FieldCategory, FieldType } from "../../writerTypes";
+import { FieldCategory, FieldType } from "@/writerTypes";
 import {
 	contentHAlign,
 	contentPadding,
 	contentVAlign,
 	cssClasses,
 	separatorColor,
-} from "../../renderer/sharedStyleFields";
+} from "@/renderer/sharedStyleFields";
 
 const description =
 	"A layout component that organises its child components in columns. Must be inside a Column Container component.";
@@ -116,8 +116,8 @@ export default {
 </script>
 <script setup lang="ts">
 import { computed, ComputedRef, inject, Ref, ref, watch } from "vue";
-import injectionKeys from "../../injectionKeys";
-import IconGen from "../../renderer/IconGen.vue";
+import injectionKeys from "@/injectionKeys";
+import IconGen from "@/renderer/IconGen.vue";
 import BaseContainer from "../base/BaseContainer.vue";
 const instancePath = inject(injectionKeys.instancePath);
 const instanceData = inject(injectionKeys.instanceData);
@@ -197,7 +197,7 @@ watch(
 </script>
 
 <style scoped>
-@import "../../renderer/sharedStyles.css";
+@import "@/renderer/sharedStyles.css";
 
 .CoreColumn {
 	min-width: 0;
diff --git a/src/ui/src/core_components/layout/CoreColumns.vue b/src/ui/src/components/core/layout/CoreColumns.vue
similarity index 81%
rename from src/ui/src/core_components/layout/CoreColumns.vue
rename to src/ui/src/components/core/layout/CoreColumns.vue
index 2a837d99c..db9059d12 100644
--- a/src/ui/src/core_components/layout/CoreColumns.vue
+++ b/src/ui/src/components/core/layout/CoreColumns.vue
@@ -5,7 +5,7 @@
 </template>
 
 <script lang="ts">
-import { cssClasses } from "../../renderer/sharedStyleFields";
+import { cssClasses } from "@/renderer/sharedStyleFields";
 
 export default {
 	writer: {
@@ -22,14 +22,14 @@ export default {
 
 <script setup lang="ts">
 import { inject } from "vue";
-import injectionKeys from "../../injectionKeys";
+import injectionKeys from "@/injectionKeys";
 
 const instanceData = inject(injectionKeys.instanceData);
 instanceData.at(-1).value = { minimumNonCollapsiblePosition: undefined };
 </script>
 
 <style scoped>
-@import "../../renderer/sharedStyles.css";
+@import "@/renderer/sharedStyles.css";
 
 .CoreColumns {
 	width: 100%;
diff --git a/src/ui/src/core_components/layout/CoreHeader.vue b/src/ui/src/components/core/layout/CoreHeader.vue
similarity index 82%
rename from src/ui/src/core_components/layout/CoreHeader.vue
rename to src/ui/src/components/core/layout/CoreHeader.vue
index 59efafb2d..d3f5b5843 100644
--- a/src/ui/src/core_components/layout/CoreHeader.vue
+++ b/src/ui/src/components/core/layout/CoreHeader.vue
@@ -8,8 +8,8 @@
 </template>
 
 <script lang="ts">
-import { FieldType } from "../../writerTypes";
-import { cssClasses, primaryTextColor } from "../../renderer/sharedStyleFields";
+import { FieldType } from "@/writerTypes";
+import { cssClasses, primaryTextColor } from "@/renderer/sharedStyleFields";
 
 const description =
 	"A container component that typically contains the main navigation elements.";
@@ -36,13 +36,13 @@ export default {
 </script>
 <script setup lang="ts">
 import { inject } from "vue";
-import injectionKeys from "../../injectionKeys";
+import injectionKeys from "@/injectionKeys";
 
 const fields = inject(injectionKeys.evaluatedFields);
 </script>
 
 <style scoped>
-@import "../../renderer/sharedStyles.css";
+@import "@/renderer/sharedStyles.css";
 
 .CoreHeader {
 	display: flex;
diff --git a/src/ui/src/core_components/layout/CoreHorizontalStack.vue b/src/ui/src/components/core/layout/CoreHorizontalStack.vue
similarity index 87%
rename from src/ui/src/core_components/layout/CoreHorizontalStack.vue
rename to src/ui/src/components/core/layout/CoreHorizontalStack.vue
index 8c87b6c87..50959fad1 100644
--- a/src/ui/src/core_components/layout/CoreHorizontalStack.vue
+++ b/src/ui/src/components/core/layout/CoreHorizontalStack.vue
@@ -15,7 +15,7 @@ import {
 	contentHAlign,
 	contentPadding,
 	cssClasses,
-} from "../../renderer/sharedStyleFields";
+} from "@/renderer/sharedStyleFields";
 
 const description =
 	"A layout component that stacks its child components horizontally, wrapping them to the next row if necessary.";
@@ -39,14 +39,14 @@ export default {
 </script>
 <script setup lang="ts">
 import { inject } from "vue";
-import injectionKeys from "../../injectionKeys";
+import injectionKeys from "@/injectionKeys";
 import BaseContainer from "../base/BaseContainer.vue";
 
 const fields = inject(injectionKeys.evaluatedFields);
 </script>
 
 <style scoped>
-@import "../../renderer/sharedStyles.css";
+@import "@/renderer/sharedStyles.css";
 
 .CoreHorizontalStack {
 	width: 100%;
diff --git a/src/ui/src/core_components/layout/CoreSection.vue b/src/ui/src/components/core/layout/CoreSection.vue
similarity index 89%
rename from src/ui/src/core_components/layout/CoreSection.vue
rename to src/ui/src/components/core/layout/CoreSection.vue
index e67b2a11d..f063db07c 100644
--- a/src/ui/src/core_components/layout/CoreSection.vue
+++ b/src/ui/src/components/core/layout/CoreSection.vue
@@ -11,7 +11,7 @@
 </template>
 
 <script lang="ts">
-import { FieldType } from "../../writerTypes";
+import { FieldType } from "@/writerTypes";
 import {
 	accentColor,
 	primaryTextColor,
@@ -25,7 +25,7 @@ import {
 	cssClasses,
 	contentHAlign,
 	contentPadding,
-} from "../../renderer/sharedStyleFields";
+} from "@/renderer/sharedStyleFields";
 
 const description =
 	"A container component that divides the layout into sections, with an optional title.";
@@ -65,14 +65,14 @@ export default {
 </script>
 <script setup lang="ts">
 import { inject } from "vue";
-import injectionKeys from "../../injectionKeys";
+import injectionKeys from "@/injectionKeys";
 import BaseContainer from "../base/BaseContainer.vue";
 
 const fields = inject(injectionKeys.evaluatedFields);
 </script>
 
 <style scoped>
-@import "../../renderer/sharedStyles.css";
+@import "@/renderer/sharedStyles.css";
 .CoreSection {
 	border: 1px solid var(--separatorColor);
 	border-radius: 8px;
diff --git a/src/ui/src/core_components/layout/CoreSeparator.vue b/src/ui/src/components/core/layout/CoreSeparator.vue
similarity index 88%
rename from src/ui/src/core_components/layout/CoreSeparator.vue
rename to src/ui/src/components/core/layout/CoreSeparator.vue
index f44cefb2e..3ed49f809 100644
--- a/src/ui/src/core_components/layout/CoreSeparator.vue
+++ b/src/ui/src/components/core/layout/CoreSeparator.vue
@@ -11,7 +11,7 @@ If the container flows horizontally (like a _Horizontal Stack_ or a _Column Cont
 </template>
 
 <script lang="ts">
-import { cssClasses, separatorColor } from "../../renderer/sharedStyleFields";
+import { cssClasses, separatorColor } from "@/renderer/sharedStyleFields";
 
 const description =
 	"A visual component to create a separation between adjacent elements.";
@@ -30,7 +30,7 @@ export default {
 </script>
 
 <style scoped>
-@import "../../renderer/sharedStyles.css";
+@import "@/renderer/sharedStyles.css";
 .CoreSeparator {
 	min-height: 1px;
 	min-width: 1px;
diff --git a/src/ui/src/core_components/layout/CoreSidebar.vue b/src/ui/src/components/core/layout/CoreSidebar.vue
similarity index 93%
rename from src/ui/src/core_components/layout/CoreSidebar.vue
rename to src/ui/src/components/core/layout/CoreSidebar.vue
index 59a5c642e..feede9019 100644
--- a/src/ui/src/core_components/layout/CoreSidebar.vue
+++ b/src/ui/src/components/core/layout/CoreSidebar.vue
@@ -21,7 +21,7 @@
 </template>
 
 <script lang="ts">
-import { Component, FieldCategory, FieldType } from "../../writerTypes";
+import { Component, FieldCategory, FieldType } from "@/writerTypes";
 import {
 	accentColor,
 	primaryTextColor,
@@ -33,7 +33,7 @@ import {
 	buttonTextColor,
 	buttonShadow,
 	cssClasses,
-} from "../../renderer/sharedStyleFields";
+} from "@/renderer/sharedStyleFields";
 
 const description =
 	"A container component that organises its children in a sidebar. Its parent must be a Page component.";
@@ -81,8 +81,8 @@ export default {
 </script>
 <script setup lang="ts">
 import { computed, inject, onMounted, Ref, ref, watch } from "vue";
-import injectionKeys from "../../injectionKeys";
-import IconGen from "../../renderer/IconGen.vue";
+import injectionKeys from "@/injectionKeys";
+import IconGen from "@/renderer/IconGen.vue";
 
 const fields = inject(injectionKeys.evaluatedFields);
 const isCollapsed: Ref<boolean> = ref(fields.startCollapsed.value == "yes");
@@ -125,7 +125,7 @@ onMounted(() => {
 </script>
 
 <style scoped>
-@import "../../renderer/sharedStyles.css";
+@import "@/renderer/sharedStyles.css";
 
 .CoreSidebar {
 	overflow: auto;
diff --git a/src/ui/src/core_components/layout/CoreStep.vue b/src/ui/src/components/core/layout/CoreStep.vue
similarity index 97%
rename from src/ui/src/core_components/layout/CoreStep.vue
rename to src/ui/src/components/core/layout/CoreStep.vue
index 25076eb42..7c331c144 100644
--- a/src/ui/src/core_components/layout/CoreStep.vue
+++ b/src/ui/src/components/core/layout/CoreStep.vue
@@ -66,13 +66,13 @@
 const STEP_BIT_INSTANCE_NUMBER = 0;
 const CONTENT_DISPLAYING_INSTANCE_NUMBER = 1;
 
-import { Component, FieldType, InstancePath } from "../../writerTypes";
-import { useEvaluator } from "../../renderer/useEvaluator";
+import { Component, FieldType, InstancePath } from "@/writerTypes";
+import { useEvaluator } from "@/renderer/useEvaluator";
 import {
 	contentHAlign,
 	cssClasses,
 	contentPadding,
-} from "../../renderer/sharedStyleFields";
+} from "@/renderer/sharedStyleFields";
 import { onBeforeUnmount } from "vue";
 
 const description =
@@ -115,7 +115,7 @@ export default {
 </script>
 <script setup lang="ts">
 import { Ref, computed, inject, onBeforeMount, watch } from "vue";
-import injectionKeys from "../../injectionKeys";
+import injectionKeys from "@/injectionKeys";
 import BaseContainer from "./../base/BaseContainer.vue";
 import { type StepsData } from "./CoreSteps.vue";
 
@@ -323,7 +323,7 @@ onBeforeUnmount(() => {
 </script>
 
 <style scoped>
-@import "../../renderer/sharedStyles.css";
+@import "@/renderer/sharedStyles.css";
 
 button.bit {
 	padding: 16px 0 0 0;
@@ -412,3 +412,4 @@ button.bit.active:focus {
 	padding: 8px 16px 0 16px;
 }
 </style>
+../base/BaseContainer.vue
diff --git a/src/ui/src/core_components/layout/CoreSteps.vue b/src/ui/src/components/core/layout/CoreSteps.vue
similarity index 91%
rename from src/ui/src/core_components/layout/CoreSteps.vue
rename to src/ui/src/components/core/layout/CoreSteps.vue
index 765273061..e521135cc 100644
--- a/src/ui/src/core_components/layout/CoreSteps.vue
+++ b/src/ui/src/components/core/layout/CoreSteps.vue
@@ -25,7 +25,7 @@ import {
 	buttonTextColor,
 	buttonShadow,
 	cssClasses,
-} from "../../renderer/sharedStyleFields";
+} from "@/renderer/sharedStyleFields";
 
 const description =
 	"A container component for displaying Step components, allowing you to implement a stepped workflow.";
@@ -53,8 +53,8 @@ export default {
 </script>
 <script setup lang="ts">
 import { inject } from "vue";
-import injectionKeys from "../../injectionKeys";
-import { InstancePath } from "../../writerTypes";
+import injectionKeys from "@/injectionKeys";
+import { InstancePath } from "@/writerTypes";
 
 export type StepsData = {
 	activeStep: InstancePath;
@@ -75,7 +75,7 @@ instanceData.at(-1).value = stepsData;
 </script>
 
 <style scoped>
-@import "../../renderer/sharedStyles.css";
+@import "@/renderer/sharedStyles.css";
 
 .CoreSteps {
 	width: 100%;
diff --git a/src/ui/src/core_components/layout/CoreTab.vue b/src/ui/src/components/core/layout/CoreTab.vue
similarity index 95%
rename from src/ui/src/core_components/layout/CoreTab.vue
rename to src/ui/src/components/core/layout/CoreTab.vue
index 320759008..eeadefa04 100644
--- a/src/ui/src/core_components/layout/CoreTab.vue
+++ b/src/ui/src/components/core/layout/CoreTab.vue
@@ -53,13 +53,13 @@
 const TAB_BIT_INSTANCE_NUMBER = 0;
 const CONTENT_DISPLAYING_INSTANCE_NUMBER = 1;
 
-import { Component, FieldType, InstancePath } from "../../writerTypes";
-import { useEvaluator } from "../../renderer/useEvaluator";
+import { Component, FieldType, InstancePath } from "@/writerTypes";
+import { useEvaluator } from "@/renderer/useEvaluator";
 import {
 	contentHAlign,
 	cssClasses,
 	contentPadding,
-} from "../../renderer/sharedStyleFields";
+} from "@/renderer/sharedStyleFields";
 
 const description =
 	"A container component that displays its child components as a tab inside a Tab Container.";
@@ -91,7 +91,7 @@ export default {
 </script>
 <script setup lang="ts">
 import { computed, inject, onBeforeMount, watch } from "vue";
-import injectionKeys from "../../injectionKeys";
+import injectionKeys from "@/injectionKeys";
 import BaseContainer from "../base/BaseContainer.vue";
 
 const fields = inject(injectionKeys.evaluatedFields);
@@ -196,7 +196,7 @@ onBeforeMount(() => {
 </script>
 
 <style scoped>
-@import "../../renderer/sharedStyles.css";
+@import "@/renderer/sharedStyles.css";
 
 button.bit {
 	padding: 11.5px 0 9.5px 0;
diff --git a/src/ui/src/core_components/layout/CoreTabs.vue b/src/ui/src/components/core/layout/CoreTabs.vue
similarity index 90%
rename from src/ui/src/core_components/layout/CoreTabs.vue
rename to src/ui/src/components/core/layout/CoreTabs.vue
index a3a588c9b..1497e6c4a 100644
--- a/src/ui/src/core_components/layout/CoreTabs.vue
+++ b/src/ui/src/components/core/layout/CoreTabs.vue
@@ -25,7 +25,7 @@ import {
 	buttonTextColor,
 	buttonShadow,
 	cssClasses,
-} from "../../renderer/sharedStyleFields";
+} from "@/renderer/sharedStyleFields";
 
 const description =
 	"A container component for organising and displaying Tab components in a tabbed interface.";
@@ -53,15 +53,15 @@ export default {
 </script>
 <script setup lang="ts">
 import { inject } from "vue";
-import injectionKeys from "../../injectionKeys";
+import injectionKeys from "@/injectionKeys";
 
 const instanceData = inject(injectionKeys.instanceData);
 instanceData.at(-1).value = { activeTab: undefined };
 </script>
 
 <style scoped>
-@import "../../renderer/sharedStyles.css";
-@import "../../renderer/colorTransformations.css";
+@import "@/renderer/sharedStyles.css";
+@import "@/renderer/colorTransformations.css";
 
 .CoreTabs {
 	width: 100%;
diff --git a/src/ui/src/core_components/other/CoreButton.vue b/src/ui/src/components/core/other/CoreButton.vue
similarity index 86%
rename from src/ui/src/core_components/other/CoreButton.vue
rename to src/ui/src/components/core/other/CoreButton.vue
index 78995467b..8d572f697 100644
--- a/src/ui/src/core_components/other/CoreButton.vue
+++ b/src/ui/src/components/core/other/CoreButton.vue
@@ -17,17 +17,17 @@
 </template>
 
 <script lang="ts">
-import { FieldCategory, FieldType } from "../../writerTypes";
-import WdsButton from "../../wds/WdsButton.vue";
+import { FieldCategory, FieldType } from "@/writerTypes";
+import WdsButton from "@/wds/WdsButton.vue";
 import {
 	buttonColor,
 	buttonTextColor,
 	buttonShadow,
 	separatorColor,
 	cssClasses,
-} from "../../renderer/sharedStyleFields";
+} from "@/renderer/sharedStyleFields";
 import { watch } from "vue";
-import { getClick } from "../../renderer/syntheticEvents";
+import { getClick } from "@/renderer/syntheticEvents";
 
 const clickHandlerStub = `
 def handle_button_click(state):
@@ -84,7 +84,7 @@ export default {
 </script>
 <script setup lang="ts">
 import { ComponentPublicInstance, inject, ref } from "vue";
-import injectionKeys from "../../injectionKeys";
+import injectionKeys from "@/injectionKeys";
 
 const rootInstance = ref<ComponentPublicInstance | null>(null);
 const fields = inject(injectionKeys.evaluatedFields);
@@ -108,8 +108,8 @@ function handleClick(ev: MouseEvent) {
 </script>
 
 <style scoped>
-@import "../../renderer/sharedStyles.css";
-@import "../../renderer/colorTransformations.css";
+@import "@/renderer/sharedStyles.css";
+@import "@/renderer/colorTransformations.css";
 
 .CoreButton.disabled {
 	border: 1px solid var(--separatorColor);
diff --git a/src/ui/src/core_components/other/CoreHtml.vue b/src/ui/src/components/core/other/CoreHtml.vue
similarity index 93%
rename from src/ui/src/core_components/other/CoreHtml.vue
rename to src/ui/src/components/core/other/CoreHtml.vue
index 0a65bfa8c..1619b3f16 100644
--- a/src/ui/src/core_components/other/CoreHtml.vue
+++ b/src/ui/src/components/core/other/CoreHtml.vue
@@ -7,9 +7,9 @@ Take into account the potential risks of adding custom HTML to your app, includi
 </docs>
 <script lang="ts">
 import { h, inject } from "vue";
-import { FieldControl, FieldType } from "../../writerTypes";
-import injectionKeys from "../../injectionKeys";
-import { cssClasses } from "../../renderer/sharedStyleFields";
+import { FieldControl, FieldType } from "@/writerTypes";
+import injectionKeys from "@/injectionKeys";
+import { cssClasses } from "@/renderer/sharedStyleFields";
 
 const defaultStyle = {
 	padding: "16px",
diff --git a/src/ui/src/core_components/other/CorePagination.vue b/src/ui/src/components/core/other/CorePagination.vue
similarity index 98%
rename from src/ui/src/core_components/other/CorePagination.vue
rename to src/ui/src/components/core/other/CorePagination.vue
index 47ba0f407..2d76cb4ae 100644
--- a/src/ui/src/core_components/other/CorePagination.vue
+++ b/src/ui/src/components/core/other/CorePagination.vue
@@ -72,7 +72,7 @@
 </template>
 
 <script lang="ts">
-import { FieldType } from "../../writerTypes";
+import { FieldType } from "@/writerTypes";
 
 const pageChangeStub = `
 def handle_page_change(state, payload):
@@ -175,8 +175,8 @@ export default {
 
 <script setup lang="ts">
 import { inject, ref, computed, watch, onUnmounted, onMounted, Ref } from "vue";
-import injectionKeys from "../../injectionKeys";
-import { useFormValueBroker } from "../../renderer/useFormValueBroker";
+import injectionKeys from "@/injectionKeys";
+import { useFormValueBroker } from "@/renderer/useFormValueBroker";
 
 const fields = inject(injectionKeys.evaluatedFields);
 const wf = inject(injectionKeys.core);
diff --git a/src/ui/src/core_components/other/CoreRepeater.vue b/src/ui/src/components/core/other/CoreRepeater.vue
similarity index 96%
rename from src/ui/src/core_components/other/CoreRepeater.vue
rename to src/ui/src/components/core/other/CoreRepeater.vue
index e3a48c341..c00c3b577 100644
--- a/src/ui/src/core_components/other/CoreRepeater.vue
+++ b/src/ui/src/components/core/other/CoreRepeater.vue
@@ -1,7 +1,7 @@
 <script lang="ts">
 import { computed, h, inject } from "vue";
-import { FieldType } from "../../writerTypes";
-import injectionKeys from "../../injectionKeys";
+import { FieldType } from "@/writerTypes";
+import injectionKeys from "@/injectionKeys";
 
 const description =
 	"A container component that repeats its child components based on a dictionary.";
diff --git a/src/ui/src/core_components/other/CoreReuse.vue b/src/ui/src/components/core/other/CoreReuse.vue
similarity index 96%
rename from src/ui/src/core_components/other/CoreReuse.vue
rename to src/ui/src/components/core/other/CoreReuse.vue
index 46ac9e571..80a84dd74 100644
--- a/src/ui/src/core_components/other/CoreReuse.vue
+++ b/src/ui/src/components/core/other/CoreReuse.vue
@@ -3,9 +3,9 @@
 </template>
 
 <script lang="ts">
-import { FieldType } from "../../writerTypes";
+import { FieldType } from "@/writerTypes";
 import { computed, defineProps, h, inject, ref, watch } from "vue";
-import injectionKeys from "../../injectionKeys";
+import injectionKeys from "@/injectionKeys";
 
 export default {
 	writer: {
diff --git a/src/ui/src/core_components/other/CoreTimer.vue b/src/ui/src/components/core/other/CoreTimer.vue
similarity index 94%
rename from src/ui/src/core_components/other/CoreTimer.vue
rename to src/ui/src/components/core/other/CoreTimer.vue
index 574c7d06c..abc82e443 100644
--- a/src/ui/src/core_components/other/CoreTimer.vue
+++ b/src/ui/src/components/core/other/CoreTimer.vue
@@ -8,8 +8,8 @@
 </template>
 
 <script lang="ts">
-import { FieldType } from "../../writerTypes";
-import { accentColor, cssClasses } from "../../renderer/sharedStyleFields";
+import { FieldType } from "@/writerTypes";
+import { accentColor, cssClasses } from "@/renderer/sharedStyleFields";
 const description =
 	"A component that emits an event repeatedly at specified time intervals, enabling time-based refresh.";
 
@@ -57,7 +57,7 @@ export default {
 
 <script setup lang="ts">
 import { computed, inject, nextTick, onMounted, Ref, ref, watch } from "vue";
-import injectionKeys from "../../injectionKeys";
+import injectionKeys from "@/injectionKeys";
 
 const MIN_ANIMATION_RESET_MS = 500;
 const MIN_ANIMATION_DURATION_MS = 1000;
diff --git a/src/ui/src/core_components/other/CoreWebcamCapture.vue b/src/ui/src/components/core/other/CoreWebcamCapture.vue
similarity index 93%
rename from src/ui/src/core_components/other/CoreWebcamCapture.vue
rename to src/ui/src/components/core/other/CoreWebcamCapture.vue
index 856d578a1..cd6684515 100644
--- a/src/ui/src/core_components/other/CoreWebcamCapture.vue
+++ b/src/ui/src/components/core/other/CoreWebcamCapture.vue
@@ -28,16 +28,16 @@
 </template>
 
 <script lang="ts">
-import { FieldType } from "../../writerTypes";
+import { FieldType } from "@/writerTypes";
 import {
 	buttonColor,
 	buttonShadow,
 	buttonTextColor,
 	cssClasses,
 	separatorColor,
-} from "../../renderer/sharedStyleFields";
-import WdsButton from "../../wds/WdsButton.vue";
-import WdsDropdownInput from "../../wds/WdsDropdownInput.vue";
+} from "@/renderer/sharedStyleFields";
+import WdsButton from "@/wds/WdsButton.vue";
+import WdsDropdownInput from "@/wds/WdsDropdownInput.vue";
 
 const description =
 	"A user input component that allows users to capture images using their webcam.";
@@ -96,7 +96,7 @@ import {
 	ref,
 	watch,
 } from "vue";
-import injectionKeys from "../../injectionKeys";
+import injectionKeys from "@/injectionKeys";
 
 const isActive = ref(false);
 const rootEl: Ref<HTMLElement> = ref(null);
@@ -225,8 +225,8 @@ const stopCapture = () => {
 </script>
 
 <style scoped>
-@import "../../renderer/sharedStyles.css";
-@import "../../renderer/colorTransformations.css";
+@import "@/renderer/sharedStyles.css";
+@import "@/renderer/colorTransformations.css";
 
 .CoreWebcamCapture {
 	width: 100%;
diff --git a/src/ui/src/core_components/root/CorePage.vue b/src/ui/src/components/core/root/CorePage.vue
similarity index 93%
rename from src/ui/src/core_components/root/CorePage.vue
rename to src/ui/src/components/core/root/CorePage.vue
index eb6a1257e..e094c2c4a 100644
--- a/src/ui/src/core_components/root/CorePage.vue
+++ b/src/ui/src/components/core/root/CorePage.vue
@@ -17,7 +17,7 @@
 </template>
 
 <script lang="ts">
-import { FieldCategory, FieldType } from "../../writerTypes";
+import { FieldCategory, FieldType } from "@/writerTypes";
 import {
 	accentColor,
 	buttonColor,
@@ -30,10 +30,10 @@ import {
 	primaryTextColor,
 	secondaryTextColor,
 	separatorColor,
-} from "../../renderer/sharedStyleFields";
+} from "@/renderer/sharedStyleFields";
 import { onMounted } from "vue";
 import { onUnmounted } from "vue";
-import { getKeydown } from "../../renderer/syntheticEvents";
+import { getKeydown } from "@/renderer/syntheticEvents";
 
 const ssKeydownStub = `
 def handle_keydown(state, payload):
@@ -120,7 +120,7 @@ export default {
 </script>
 <script setup lang="ts">
 import { Ref, inject, ref } from "vue";
-import injectionKeys from "../../injectionKeys";
+import injectionKeys from "@/injectionKeys";
 
 const rootEl: Ref<HTMLElement> = ref(null);
 const fields = inject(injectionKeys.evaluatedFields);
@@ -151,7 +151,7 @@ onUnmounted(() => {
 </script>
 
 <style scoped>
-@import "../../renderer/sharedStyles.css";
+@import "@/renderer/sharedStyles.css";
 
 .CorePage {
 	display: flex;
diff --git a/src/ui/src/core_components/root/CoreRoot.vue b/src/ui/src/components/core/root/CoreRoot.vue
similarity index 96%
rename from src/ui/src/core_components/root/CoreRoot.vue
rename to src/ui/src/components/core/root/CoreRoot.vue
index 3352fa06f..1fb4c2cb7 100644
--- a/src/ui/src/core_components/root/CoreRoot.vue
+++ b/src/ui/src/components/core/root/CoreRoot.vue
@@ -10,10 +10,10 @@
 </template>
 
 <script lang="ts">
-import { FieldType } from "../../writerTypes";
-import * as sharedStyleFields from "../../renderer/sharedStyleFields";
+import { FieldType } from "@/writerTypes";
+import * as sharedStyleFields from "@/renderer/sharedStyleFields";
 import { nextTick } from "vue";
-import { useEvaluator } from "../../renderer/useEvaluator";
+import { useEvaluator } from "@/renderer/useEvaluator";
 
 const ssHashChangeStub = `
 def handle_hashchange(state, payload):
@@ -68,7 +68,7 @@ export default {
 </script>
 <script setup lang="ts">
 import { computed, inject, ref, Ref, watch, onBeforeMount } from "vue";
-import injectionKeys from "../../injectionKeys";
+import injectionKeys from "@/injectionKeys";
 
 const importedModulesSpecifiers: Record<string, string> = {};
 const wf = inject(injectionKeys.core);
@@ -314,7 +314,7 @@ onBeforeMount(() => {
 </script>
 
 <style scoped>
-@import "../../renderer/sharedStyles.css";
+@import "@/renderer/sharedStyles.css";
 
 .CoreRoot {
 	background: var(--emptinessColor);
diff --git a/src/ui/src/components/workflows/abstract/WorkflowsNode.vue b/src/ui/src/components/workflows/abstract/WorkflowsNode.vue
new file mode 100644
index 000000000..66076d502
--- /dev/null
+++ b/src/ui/src/components/workflows/abstract/WorkflowsNode.vue
@@ -0,0 +1,32 @@
+<docs lang="md">
+    Represents a node in Writer Framework Workflows.
+</docs>
+
+<template>
+	<div></div>
+</template>
+
+<script lang="ts">
+import { FieldCategory, FieldType } from "@/writerTypes";
+
+export default {
+	writer: {
+		name: "Node",
+		toolkit: "workflows",
+		category: "Other",
+		fields: {
+			text: {
+				name: "Text",
+				init: "Button Text",
+				type: FieldType.Text,
+			},
+		},
+		previewField: "text",
+	},
+};
+</script>
+<script setup lang="ts">
+import { ComponentPublicInstance, inject, ref } from "vue";
+</script>
+
+<style scoped></style>
diff --git a/src/ui/src/core/auditAndFix.ts b/src/ui/src/core/auditAndFix.ts
index a35276725..8760b7074 100644
--- a/src/ui/src/core/auditAndFix.ts
+++ b/src/ui/src/core/auditAndFix.ts
@@ -2,7 +2,7 @@ import {
 	Component,
 	ComponentMap,
 	WriterComponentDefinition,
-} from "../writerTypes";
+} from "@/writerTypes";
 import { getComponentDefinition } from "./templateMap";
 
 /**
diff --git a/src/ui/src/core/index.ts b/src/ui/src/core/index.ts
index 04c434292..fdda46bb0 100644
--- a/src/ui/src/core/index.ts
+++ b/src/ui/src/core/index.ts
@@ -1,16 +1,18 @@
 /* eslint-disable @typescript-eslint/ban-types */
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { ref, Ref } from "vue";
+import { readonly, ref, Ref, shallowRef } from "vue";
 import {
+	AbstractTemplate,
 	Component,
 	ComponentMap,
 	InstancePath,
 	MailItem,
 	UserFunction,
-} from "../writerTypes";
+} from "@/writerTypes";
 import {
 	getSupportedComponentTypes,
 	getComponentDefinition,
+	registerAbstractComponentTemplate,
 } from "./templateMap";
 import * as typeHierarchy from "./typeHierarchy";
 import { auditAndFixComponents } from "./auditAndFix";
@@ -24,6 +26,7 @@ export function generateCore() {
 	let sessionId: string = null;
 	const sessionTimestamp: Ref<number> = ref(null);
 	const mode: Ref<"run" | "edit"> = ref(null);
+	const featureFlags = shallowRef<string[]>([]);
 	const runCode: Ref<string> = ref(null);
 	const components: Ref<ComponentMap> = ref({});
 	const userFunctions: Ref<UserFunction[]> = ref([]);
@@ -98,7 +101,9 @@ export function generateCore() {
 		collateMail(initData.mail);
 		sessionId = initData.sessionId;
 		sessionTimestamp.value = new Date().getTime();
-
+		featureFlags.value = initData.featureFlags;
+		loadAbstractTemplates(initData.abstractTemplates);
+    
 		// Only returned for edit (Builder) mode
 
 		userFunctions.value = initData.userFunctions;
@@ -112,6 +117,16 @@ export function generateCore() {
 		await sendComponentUpdate();
 	}
 
+	function loadAbstractTemplates(
+		abstractTemplates: Record<string, AbstractTemplate>,
+	) {
+		Object.entries(abstractTemplates ?? {}).forEach(
+			([type, abstractTemplate]) => {
+				registerAbstractComponentTemplate(type, abstractTemplate);
+			},
+		);
+	}
+
 	function getSessionTimestamp() {
 		return sessionTimestamp.value;
 	}
@@ -594,6 +609,7 @@ export function generateCore() {
 		getSessionTimestamp,
 		getUserState,
 		isChildOf,
+		featureFlags: readonly(featureFlags),
 	};
 
 	return core;
diff --git a/src/ui/src/core/templateMap.ts b/src/ui/src/core/templateMap.ts
index 23b7d91ad..facc6330f 100644
--- a/src/ui/src/core/templateMap.ts
+++ b/src/ui/src/core/templateMap.ts
@@ -1,69 +1,72 @@
 // Maps Writer Framework component types to renderable Vue components
 // content
-import CoreDataframe from "../core_components/content/CoreDataframe.vue";
-import CoreHeading from "../core_components/content/CoreHeading.vue";
-import CoreIcon from "../core_components/content/CoreIcon.vue";
-import CoreImage from "../core_components/content/CoreImage.vue";
-import CoreMessage from "../core_components/content/CoreMessage.vue";
-import CoreMetric from "../core_components/content/CoreMetric.vue";
-import CorePlotlyGraph from "../core_components/content/CorePlotlyGraph.vue";
-import CoreText from "../core_components/content/CoreText.vue";
-import CoreVegaLiteChart from "../core_components/content/CoreVegaLiteChart.vue";
-import CoreVideoPlayer from "../core_components/content/CoreVideoPlayer.vue";
-import CoreLink from "../core_components/content/CoreLink.vue";
-import CoreChatbot from "../core_components/content/CoreChatbot.vue";
-import CoreTags from "../core_components/content/CoreTags.vue";
-import CoreAvatar from "../core_components/content/CoreAvatar.vue";
-import CoreAnnotatedText from "../core_components/content/CoreAnnotatedText.vue";
-import CoreJsonViewer from "../core_components/content/CoreJsonViewer.vue";
+import CoreDataframe from "../components/core/content/CoreDataframe.vue";
+import CoreHeading from "../components/core/content/CoreHeading.vue";
+import CoreIcon from "../components/core/content/CoreIcon.vue";
+import CoreImage from "../components/core/content/CoreImage.vue";
+import CoreMessage from "../components/core/content/CoreMessage.vue";
+import CoreMetric from "../components/core/content/CoreMetric.vue";
+import CorePlotlyGraph from "../components/core/content/CorePlotlyGraph.vue";
+import CoreText from "../components/core/content/CoreText.vue";
+import CoreVegaLiteChart from "../components/core/content/CoreVegaLiteChart.vue";
+import CoreVideoPlayer from "../components/core/content/CoreVideoPlayer.vue";
+import CoreLink from "../components/core/content/CoreLink.vue";
+import CoreChatbot from "../components/core/content/CoreChatbot.vue";
+import CoreTags from "../components/core/content/CoreTags.vue";
+import CoreAvatar from "../components/core/content/CoreAvatar.vue";
+import CoreAnnotatedText from "../components/core/content/CoreAnnotatedText.vue";
+import CoreJsonViewer from "../components/core/content/CoreJsonViewer.vue";
 
 // input
-import CoreCheckboxInput from "../core_components/input/CoreCheckboxInput.vue";
-import CoreColorInput from "../core_components/input/CoreColorInput.vue";
-import CoreDateInput from "../core_components/input/CoreDateInput.vue";
-import CoreDropdownInput from "../core_components/input/CoreDropdownInput.vue";
-import CoreFileInput from "../core_components/input/CoreFileInput.vue";
-import CoreMultiselectInput from "../core_components/input/CoreMultiselectInput.vue";
-import CoreNumberInput from "../core_components/input/CoreNumberInput.vue";
-import CoreRadioInput from "../core_components/input/CoreRadioInput.vue";
-import CoreSelectInput from "../core_components/input/CoreSelectInput.vue";
-import CoreSliderInput from "../core_components/input/CoreSliderInput.vue";
-import CoreTextInput from "../core_components/input/CoreTextInput.vue";
-import CoreTextareaInput from "../core_components/input/CoreTextareaInput.vue";
-import CoreTimeInput from "../core_components/input/CoreTimeInput.vue";
-import CoreRating from "../core_components/input/CoreRatingInput.vue";
-import CoreSwitchInput from "../core_components/input/CoreSwitchInput.vue";
+import CoreCheckboxInput from "../components/core/input/CoreCheckboxInput.vue";
+import CoreColorInput from "../components/core/input/CoreColorInput.vue";
+import CoreDateInput from "../components/core/input/CoreDateInput.vue";
+import CoreDropdownInput from "../components/core/input/CoreDropdownInput.vue";
+import CoreFileInput from "../components/core/input/CoreFileInput.vue";
+import CoreMultiselectInput from "../components/core/input/CoreMultiselectInput.vue";
+import CoreNumberInput from "../components/core/input/CoreNumberInput.vue";
+import CoreRadioInput from "../components/core/input/CoreRadioInput.vue";
+import CoreSelectInput from "../components/core/input/CoreSelectInput.vue";
+import CoreSliderInput from "../components/core/input/CoreSliderInput.vue";
+import CoreTextInput from "../components/core/input/CoreTextInput.vue";
+import CoreTextareaInput from "../components/core/input/CoreTextareaInput.vue";
+import CoreTimeInput from "../components/core/input/CoreTimeInput.vue";
+import CoreRating from "../components/core/input/CoreRatingInput.vue";
+import CoreSwitchInput from "../components/core/input/CoreSwitchInput.vue";
 // layout
-import CoreColumn from "../core_components/layout/CoreColumn.vue";
-import CoreColumns from "../core_components/layout/CoreColumns.vue";
-import CoreHeader from "../core_components/layout/CoreHeader.vue";
-import CoreHorizontalStack from "../core_components/layout/CoreHorizontalStack.vue";
-import CoreSection from "../core_components/layout/CoreSection.vue";
-import CoreSeparator from "../core_components/layout/CoreSeparator.vue";
-import CoreSidebar from "../core_components/layout/CoreSidebar.vue";
-import CoreTab from "../core_components/layout/CoreTab.vue";
-import CoreTabs from "../core_components/layout/CoreTabs.vue";
-import CoreStep from "../core_components/layout/CoreStep.vue";
-import CoreSteps from "../core_components/layout/CoreSteps.vue";
+import CoreColumn from "../components/core/layout/CoreColumn.vue";
+import CoreColumns from "../components/core/layout/CoreColumns.vue";
+import CoreHeader from "../components/core/layout/CoreHeader.vue";
+import CoreHorizontalStack from "../components/core/layout/CoreHorizontalStack.vue";
+import CoreSection from "../components/core/layout/CoreSection.vue";
+import CoreSeparator from "../components/core/layout/CoreSeparator.vue";
+import CoreSidebar from "../components/core/layout/CoreSidebar.vue";
+import CoreTab from "../components/core/layout/CoreTab.vue";
+import CoreTabs from "../components/core/layout/CoreTabs.vue";
+import CoreStep from "../components/core/layout/CoreStep.vue";
+import CoreSteps from "../components/core/layout/CoreSteps.vue";
 // other
-import CoreButton from "../core_components/other/CoreButton.vue";
-import CoreHtml from "../core_components/other/CoreHtml.vue";
-import CorePagination from "../core_components/other/CorePagination.vue";
-import CoreRepeater from "../core_components/other/CoreRepeater.vue";
-import CoreTimer from "../core_components/other/CoreTimer.vue";
-import CoreWebcamCapture from "../core_components/other/CoreWebcamCapture.vue";
-import CoreReuse from "../core_components/other/CoreReuse.vue";
+import CoreButton from "../components/core/other/CoreButton.vue";
+import CoreHtml from "../components/core/other/CoreHtml.vue";
+import CorePagination from "../components/core/other/CorePagination.vue";
+import CoreRepeater from "../components/core/other/CoreRepeater.vue";
+import CoreTimer from "../components/core/other/CoreTimer.vue";
+import CoreWebcamCapture from "../components/core/other/CoreWebcamCapture.vue";
+import CoreReuse from "../components/core/other/CoreReuse.vue";
 // embed
-import CorePDF from "../core_components/embed/CorePDF.vue";
-import CoreIFrame from "../core_components/embed/CoreIFrame.vue";
-import CoreGoogleMaps from "../core_components/embed/CoreGoogleMaps.vue";
+import CorePDF from "../components/core/embed/CorePDF.vue";
+import CoreIFrame from "../components/core/embed/CoreIFrame.vue";
+import CoreGoogleMaps from "../components/core/embed/CoreGoogleMaps.vue";
 // root
-import CorePage from "../core_components/root/CorePage.vue";
-import CoreRoot from "../core_components/root/CoreRoot.vue";
+import CorePage from "../components/core/root/CorePage.vue";
+import CoreRoot from "../components/core/root/CoreRoot.vue";
+import CoreMapbox from "../components/core/embed/CoreMapbox.vue";
 
-import CoreMapbox from "../core_components/embed/CoreMapbox.vue";
+// WORKFLOWS
 
-import { WriterComponentDefinition } from "../writerTypes";
+import WorkflowsNode from "../components/workflows/abstract/WorkflowsNode.vue";
+
+import { AbstractTemplate, WriterComponentDefinition } from "@/writerTypes";
 import { h } from "vue";
 
 const templateMap = {
@@ -122,8 +125,11 @@ const templateMap = {
 	avatar: CoreAvatar,
 	annotatedtext: CoreAnnotatedText,
 	jsonviewer: CoreJsonViewer,
+	workflowsnode: WorkflowsNode,
 };
 
+const abstractTemplateMap: Record<string, AbstractTemplate> = {};
+
 if (WRITER_LIVE_CCT === "yes") {
 	/*
 	Assigns the components in custom_components to the template map,
@@ -163,8 +169,29 @@ function fallbackTemplate(type: string) {
 	};
 }
 
+function getMergedAbstractTemplate(type: string) {
+	const template = abstractTemplateMap[type];
+	if (!template) return;
+	const baseType = template.baseType;
+	return {
+		...templateMap[baseType],
+		writer: {
+			...templateMap[baseType].writer,
+			...abstractTemplateMap[type].writer,
+			fields: {
+				...templateMap[baseType].writer?.fields,
+				...abstractTemplateMap[type].writer?.fields,
+			},
+		},
+	};
+}
+
 export function getTemplate(type: string) {
-	return templateMap[type] ?? fallbackTemplate(type);
+	return (
+		getMergedAbstractTemplate(type) ??
+		templateMap[type] ??
+		fallbackTemplate(type)
+	);
 }
 
 export function getComponentDefinition(
@@ -174,11 +201,18 @@ export function getComponentDefinition(
 }
 
 export function getSupportedComponentTypes() {
-	return Object.keys(templateMap);
+	return [...Object.keys(templateMap), ...Object.keys(abstractTemplateMap)];
 }
 
 export function registerComponentTemplate(type: string, vueComponent: any) {
 	templateMap[type] = vueComponent;
 }
 
+export function registerAbstractComponentTemplate(
+	type: string,
+	abstractTemplate: AbstractTemplate,
+) {
+	abstractTemplateMap[type] = abstractTemplate;
+}
+
 export default templateMap;
diff --git a/src/ui/src/core/typeHierarchy.ts b/src/ui/src/core/typeHierarchy.ts
index 1a687cf6e..f2065b0fa 100644
--- a/src/ui/src/core/typeHierarchy.ts
+++ b/src/ui/src/core/typeHierarchy.ts
@@ -1,4 +1,4 @@
-import { Component, ComponentMap } from "../writerTypes";
+import { Component, ComponentMap } from "@/writerTypes";
 import {
 	getComponentDefinition,
 	getSupportedComponentTypes,
diff --git a/src/ui/src/custom_components/BubbleMessage.vue b/src/ui/src/custom_components/BubbleMessage.vue
index 0f2a5bcdb..363f7e1f3 100644
--- a/src/ui/src/custom_components/BubbleMessage.vue
+++ b/src/ui/src/custom_components/BubbleMessage.vue
@@ -32,8 +32,8 @@ export default {
 };
 </script>
 <script setup lang="ts">
-import { FieldType } from "../writerTypes";
-import injectionKeys from "../injectionKeys";
+import { FieldType } from "@/writerTypes";
+import injectionKeys from "@/injectionKeys";
 import { inject } from "vue";
 
 /*
diff --git a/src/ui/src/custom_components/BubbleMessageAdvanced.vue b/src/ui/src/custom_components/BubbleMessageAdvanced.vue
index 4ca6d2509..537a6c6d2 100644
--- a/src/ui/src/custom_components/BubbleMessageAdvanced.vue
+++ b/src/ui/src/custom_components/BubbleMessageAdvanced.vue
@@ -114,8 +114,8 @@ import {
 	FieldControl,
 	FieldType,
 	WriterComponentDefinition,
-} from "../writerTypes";
-import injectionKeys from "../injectionKeys";
+} from "@/writerTypes";
+import injectionKeys from "@/injectionKeys";
 import { inject, computed, ref, Ref } from "vue";
 
 /* Standard style fields can be imported from "sharedStyleFields" 
@@ -126,7 +126,7 @@ import {
 	cssClasses,
 	primaryTextColor,
 	containerBackgroundColor,
-} from "../renderer/sharedStyleFields";
+} from "@/renderer/sharedStyleFields";
 
 const rootEl: Ref<HTMLElement> = ref(null); // Root element is used to fire events
 
diff --git a/src/ui/src/renderer/ChildlessPlaceholder.vue b/src/ui/src/renderer/ChildlessPlaceholder.vue
index c90bc4653..950a15ed5 100644
--- a/src/ui/src/renderer/ChildlessPlaceholder.vue
+++ b/src/ui/src/renderer/ChildlessPlaceholder.vue
@@ -8,9 +8,9 @@
 
 <script setup lang="ts">
 import { computed, inject } from "vue";
-import BaseEmptiness from "../core_components/base/BaseEmptiness.vue";
-import injectionKeys from "../injectionKeys";
-import { Component } from "../writerTypes";
+import BaseEmptiness from "@/components/core/base/BaseEmptiness.vue";
+import injectionKeys from "@/injectionKeys";
+import { Component } from "@/writerTypes";
 
 const ALLOWED_LIST_MAX_LENGTH = 10;
 const wf = inject(injectionKeys.core);
diff --git a/src/ui/src/renderer/ComponentProxy.vue b/src/ui/src/renderer/ComponentProxy.vue
index c5daca409..e781aeca5 100644
--- a/src/ui/src/renderer/ComponentProxy.vue
+++ b/src/ui/src/renderer/ComponentProxy.vue
@@ -17,7 +17,7 @@ import {
 	InstancePath,
 	InstancePathItem,
 	UserFunction,
-} from "../writerTypes";
+} from "@/writerTypes";
 import ChildlessPlaceholder from "./ChildlessPlaceholder.vue";
 import ComponentProxy from "./ComponentProxy.vue";
 import RenderError from "./RenderError.vue";
@@ -383,5 +383,5 @@ export default {
 };
 </script>
 <style scoped>
-@import "../renderer/sharedStyles.css";
+@import "@/renderer/sharedStyles.css";
 </style>
diff --git a/src/ui/src/renderer/ComponentRenderer.vue b/src/ui/src/renderer/ComponentRenderer.vue
index 69f49dbf9..0b2d1e5a5 100644
--- a/src/ui/src/renderer/ComponentRenderer.vue
+++ b/src/ui/src/renderer/ComponentRenderer.vue
@@ -21,10 +21,10 @@
 
 <script setup lang="ts">
 import { inject, ref, computed, watch } from "vue";
-import { Component, InstancePath } from "../writerTypes";
+import { Component, InstancePath } from "@/writerTypes";
 import ComponentProxy from "./ComponentProxy.vue";
 import RendererNotifications from "./RendererNotifications.vue";
-import injectionKeys from "../injectionKeys";
+import injectionKeys from "@/injectionKeys";
 import { useEvaluator } from "./useEvaluator";
 
 const wf = inject(injectionKeys.core);
diff --git a/src/ui/src/renderer/RenderError.vue b/src/ui/src/renderer/RenderError.vue
index 98a3d33ba..ae6dd6413 100644
--- a/src/ui/src/renderer/RenderError.vue
+++ b/src/ui/src/renderer/RenderError.vue
@@ -10,7 +10,7 @@
 </template>
 
 <script setup lang="ts">
-import { Component } from "../writerTypes";
+import { Component } from "@/writerTypes";
 
 interface Props {
 	componentType: Component["type"];
diff --git a/src/ui/src/renderer/instancePath.ts b/src/ui/src/renderer/instancePath.ts
index 941d7272f..f637d4e8b 100644
--- a/src/ui/src/renderer/instancePath.ts
+++ b/src/ui/src/renderer/instancePath.ts
@@ -1,4 +1,4 @@
-import type { InstancePath } from "../writerTypes";
+import type { InstancePath } from "@/writerTypes";
 
 export function flattenInstancePath(path: InstancePath) {
 	return path.map((ie) => `${ie.componentId}:${ie.instanceNumber}`).join(",");
diff --git a/src/ui/src/renderer/sharedStyleFields.ts b/src/ui/src/renderer/sharedStyleFields.ts
index 775801e75..4e9512001 100644
--- a/src/ui/src/renderer/sharedStyleFields.ts
+++ b/src/ui/src/renderer/sharedStyleFields.ts
@@ -1,4 +1,4 @@
-import { FieldCategory, FieldType } from "../writerTypes";
+import { FieldCategory, FieldType } from "@/writerTypes";
 
 export const accentColor = {
 	name: "Accent",
diff --git a/src/ui/src/renderer/useEvaluator.ts b/src/ui/src/renderer/useEvaluator.ts
index c7793954b..f1bbcd770 100644
--- a/src/ui/src/renderer/useEvaluator.ts
+++ b/src/ui/src/renderer/useEvaluator.ts
@@ -1,5 +1,5 @@
 import { ComputedRef, computed } from "vue";
-import { Component, Core, FieldType, InstancePath } from "../writerTypes";
+import { Component, Core, FieldType, InstancePath } from "@/writerTypes";
 
 export function useEvaluator(wf: Core) {
 	const templateRegex = /[\\]?@{([^}]*)}/g;
diff --git a/src/ui/src/renderer/useFormValueBroker.ts b/src/ui/src/renderer/useFormValueBroker.ts
index 8eee4d78d..90d8ce803 100644
--- a/src/ui/src/renderer/useFormValueBroker.ts
+++ b/src/ui/src/renderer/useFormValueBroker.ts
@@ -1,6 +1,6 @@
 import { ComponentPublicInstance, computed, Ref, ref, watch } from "vue";
-import { useEvaluator } from "../renderer/useEvaluator";
-import { Core, InstancePath } from "../writerTypes";
+import { useEvaluator } from "@/renderer/useEvaluator";
+import { Core, InstancePath } from "@/writerTypes";
 
 /**
  *
diff --git a/src/ui/src/writerTypes.ts b/src/ui/src/writerTypes.ts
index a5c772b1e..0840be6c0 100644
--- a/src/ui/src/writerTypes.ts
+++ b/src/ui/src/writerTypes.ts
@@ -1,9 +1,9 @@
-import { generateCore } from "./core"
-import { generateBuilderManager } from "./builder/builderManager"
+import { generateCore } from "./core";
+import { generateBuilderManager } from "./builder/builderManager";
 
-export type Core = ReturnType<typeof generateCore>
+export type Core = ReturnType<typeof generateCore>;
 
-type ComponentId = string
+type ComponentId = string;
 
 /**
  * Basic building block of applications.
@@ -54,6 +54,7 @@ export type WriterComponentDefinition = {
 	name: string; // Display name for the component
 	description: string; // Short description
 	docs?: string; // Collapsible mini-docs
+	toolkit?: "core" | "workflows";
 	category?: string; // Category (Layout, Content, etc)
 	allowedChildrenTypes?: (string | "*" | "inherit")[]; // Which component types are allowed inside (if any)
 	allowedParentTypes?: string[]; // Which component types can contain this type of component
@@ -131,3 +132,8 @@ export type ComponentMap = Record<Component["id"], Component>;
 export type MailItem = { type: string; payload: Record<string, string> };
 
 export type UserFunction = { name: string; args: string[] };
+
+export type AbstractTemplate = {
+	baseType: string;
+	writer: WriterComponentDefinition;
+};
diff --git a/src/ui/tools/generator_storybook.mjs b/src/ui/tools/generator_storybook.mjs
index db14f24af..0c5ffdf8b 100644
--- a/src/ui/tools/generator_storybook.mjs
+++ b/src/ui/tools/generator_storybook.mjs
@@ -23,7 +23,8 @@ const __dirname = path.dirname(__filename);
 
 const srcFile = (...args) => path.resolve(__dirname, "..", "src", ...args);
 
-const storyFile = (...args) => srcFile("stories", "core_components", ...args);
+const storyFile = (...args) =>
+	srcFile("stories", "components", "core", ...args);
 
 const relPath = (from, to) => path.relative(path.dirname(from), to);
 
diff --git a/src/ui/tsconfig.json b/src/ui/tsconfig.json
index 005e6ee1e..42bc7360c 100644
--- a/src/ui/tsconfig.json
+++ b/src/ui/tsconfig.json
@@ -5,6 +5,9 @@
 		"moduleResolution": "node",
 		"importHelpers": true,
 		"isolatedModules": true,
-		"noEmit": true
+		"noEmit": true,
+		"paths": {
+			"@/*": ["./src/*"]
+		}
 	}
 }
diff --git a/src/writer/abstract.py b/src/writer/abstract.py
new file mode 100644
index 000000000..b0ce57f98
--- /dev/null
+++ b/src/writer/abstract.py
@@ -0,0 +1,16 @@
+"""
+
+Abstract templates.
+
+They're used to register new component templates, based on existing frontend templates and a backend-provided component definition. 
+
+"""
+
+from typing import Dict
+
+from writer.ss_types import AbstractTemplate
+
+templates:Dict[str, AbstractTemplate]  = {}
+
+def register_abstract_template(type: str, abstract_template: AbstractTemplate):
+    templates[type] = abstract_template
\ No newline at end of file
diff --git a/src/writer/app_runner.py b/src/writer/app_runner.py
index a6a35738b..b52899740 100644
--- a/src/writer/app_runner.py
+++ b/src/writer/app_runner.py
@@ -132,9 +132,10 @@ def _handle_session_init(self, payload: InitSessionRequestPayload) -> InitSessio
 
         import writer
 
-        session = writer.session_manager.get_session(payload.proposedSessionId)
+        session = writer.session_manager.get_session(payload.proposedSessionId, restore_initial_mail=True)
         if session is None:
             session = writer.session_manager.get_new_session(payload.cookies, payload.headers, payload.proposedSessionId)
+
         if session is None:
             raise MessageHandlingException("Session rejected.")
 
@@ -150,7 +151,8 @@ def _handle_session_init(self, payload: InitSessionRequestPayload) -> InitSessio
             sessionId=session.session_id,
             mail=session.session_state.mail,
             components=session.session_component_tree.to_dict(),
-            userFunctions=self._get_user_functions()
+            userFunctions=self._get_user_functions(),
+            featureFlags=writer.Config.feature_flags
         )
 
         session.session_state.clear_mail()
diff --git a/src/writer/auth.py b/src/writer/auth.py
index 646208543..2e90a8653 100644
--- a/src/writer/auth.py
+++ b/src/writer/auth.py
@@ -99,6 +99,9 @@ def register(self,
                  callback: Optional[Callable[[Request, str, dict], None]] = None,
                  unauthorized_action: Optional[Callable[[Request, Unauthorized], Response]] = None):
 
+        self.unauthorized_action = unauthorized_action
+        self.callback_func = callback
+
         @asgi_app.middleware("http")
         async def basicauth_middleware(request: Request, call_next):
             import base64
@@ -188,14 +191,14 @@ def register(self,
         redirect_url = urljoin(self.host_url, self.callback_authorize)
         host_url_path = urlpath(self.host_url)
         callback_authorize_path = urljoin(host_url_path, self.callback_authorize)
-        asset_assets_path = urljoin(host_url_path, "assets")
+        static_assets_path = urljoin(host_url_path, "static")
 
         logger.debug(f"[auth] oidc - url redirect: {redirect_url}")
         logger.debug(f"[auth] oidc - endpoint authorize: {self.url_authorize}")
         logger.debug(f"[auth] oidc - endpoint token: {self.url_oauthtoken}")
         logger.debug(f"[auth] oidc - path: {host_url_path}")
         logger.debug(f"[auth] oidc - authorize path: {callback_authorize_path}")
-        logger.debug(f"[auth] oidc - asset path: {asset_assets_path}")
+        logger.debug(f"[auth] oidc - static asset path: {static_assets_path}")
         self.authlib = OAuth2Session(
             client_id=self.client_id,
             client_secret=self.client_secret,
@@ -205,13 +208,14 @@ def register(self,
             token_endpoint=self.url_oauthtoken,
         )
 
+        self.unauthorized_action = unauthorized_action
         self.callback_func = callback
 
         @asgi_app.middleware("http")
         async def oidc_middleware(request: Request, call_next):
             session = request.cookies.get('session')
 
-            if session is not None or request.url.path in [callback_authorize_path] or request.url.path.startswith(asset_assets_path):
+            if session is not None or request.url.path in [callback_authorize_path] or request.url.path.startswith(static_assets_path):
                 response: Response = await call_next(request)
                 return response
             else:
diff --git a/src/writer/core.py b/src/writer/core.py
index 7502582ce..e0c060342 100644
--- a/src/writer/core.py
+++ b/src/writer/core.py
@@ -131,6 +131,7 @@ class Config:
     is_mail_enabled_for_log: bool = False
     mode: str = "run"
     logger: Optional[logging.Logger] = None
+    feature_flags: list[str] = []
 
 @dataclasses.dataclass
 class MutationSubscription:
@@ -1621,16 +1622,19 @@ def get_new_session(self, cookies: Optional[Dict] = None, headers: Optional[Dict
             new_id = self._generate_session_id()
         else:
             new_id = proposed_session_id
-        new_session = WriterSession(
-            new_id, cookies, headers)
+        new_session = WriterSession(new_id, cookies, headers)
         self.sessions[new_id] = new_session
         return new_session
 
-    def get_session(self, session_id: Optional[str]) -> Optional[WriterSession]:
+    def get_session(self, session_id: Optional[str], restore_initial_mail: bool = False) -> Optional[WriterSession]:
         if session_id is None:
             return None
 
-        return self.sessions.get(session_id)
+        session = self.sessions.get(session_id)
+        if session is not None and restore_initial_mail is True:
+            session.session_state.mail = copy.copy(initial_state.mail)
+
+        return session
 
     def _generate_session_id(self) -> str:
         return secrets.token_hex(SessionManager.TOKEN_SIZE_BYTES)
@@ -2551,4 +2555,4 @@ def _split_record_as_pandas_record_and_index(param: dict, index_columns: list) -
 state_serialiser = StateSerialiser()
 initial_state = WriterState()
 base_component_tree = core_ui.build_base_component_tree()
-session_manager = SessionManager()
+session_manager: SessionManager = SessionManager()
diff --git a/src/writer/serve.py b/src/writer/serve.py
index f52611344..c65012522 100644
--- a/src/writer/serve.py
+++ b/src/writer/serve.py
@@ -20,7 +20,7 @@
 from pydantic import ValidationError
 from starlette.websockets import WebSocket, WebSocketDisconnect, WebSocketState
 
-from writer import VERSION
+from writer import VERSION, abstract
 from writer.app_runner import AppRunner
 from writer.ss_types import (
     AppProcessServerResponse,
@@ -149,7 +149,9 @@ def _get_run_starter_pack(payload: InitSessionResponsePayload):
             mail=payload.mail,
             components=payload.components,
             userFunctions=payload.userFunctions,
-            extensionPaths=cached_extension_paths
+            extensionPaths=cached_extension_paths,
+            featureFlags=payload.featureFlags,
+            abstractTemplates=abstract.templates
         )
 
     def _get_edit_starter_pack(payload: InitSessionResponsePayload):
@@ -163,7 +165,9 @@ def _get_edit_starter_pack(payload: InitSessionResponsePayload):
             components=payload.components,
             userFunctions=payload.userFunctions,
             runCode=run_code,
-            extensionPaths=cached_extension_paths
+            extensionPaths=cached_extension_paths,
+            featureFlags=payload.featureFlags,
+            abstractTemplates=abstract.templates
         )
 
     @app.get("/api/health")
diff --git a/src/writer/ss_types.py b/src/writer/ss_types.py
index c7e65d9e8..ba6ef53b6 100644
--- a/src/writer/ss_types.py
+++ b/src/writer/ss_types.py
@@ -28,6 +28,11 @@ def read(self) -> Any:
                       "event", "codeUpdate", "codeSave", "checkSession",
                       "keepAlive", "stateEnquiry", "setUserinfo", "stateContent"]
 
+
+class AbstractTemplate(BaseModel):
+    baseType: str
+    writer: Dict
+
 # Web server models
 
 
@@ -43,6 +48,8 @@ class InitResponseBody(BaseModel):
     components: Dict
     userFunctions: List[Dict]
     extensionPaths: List
+    featureFlags: List[str]
+    abstractTemplates: Dict[str, AbstractTemplate]
 
 
 class InitResponseBodyRun(InitResponseBody):
@@ -129,6 +136,7 @@ class InitSessionResponsePayload(BaseModel):
     mail: List
     userFunctions: List[Dict]
     components: Dict
+    featureFlags: List[str]
 
 
 class InitSessionResponse(AppProcessServerResponse):
diff --git a/tests/backend/test_serve.py b/tests/backend/test_serve.py
index f5b0514a7..901813bb1 100644
--- a/tests/backend/test_serve.py
+++ b/tests/backend/test_serve.py
@@ -3,6 +3,7 @@
 import fastapi
 import fastapi.testclient
 import pytest
+import writer.abstract
 import writer.serve
 from fastapi import FastAPI
 
@@ -169,3 +170,47 @@ def test_server_setup_hook_is_ignored_when_its_disabled(self):
         with fastapi.testclient.TestClient(asgi_app) as client:
             res = client.get("/probes/healthcheck")
             assert res.status_code == 404
+
+    def test_abstract_components(self):
+        writer.abstract.register_abstract_template("sectiona", {
+            "baseType": "section",
+            "writer": {
+                "name": "Section A"
+            }
+        })
+        writer.abstract.register_abstract_template("columnb", {
+            "baseType": "column",
+            "writer": {
+                "description": "Cloned Column component"
+            }
+        })
+
+        asgi_app: fastapi.FastAPI = writer.serve.get_asgi_app(
+            test_app_dir, "run")
+        with fastapi.testclient.TestClient(asgi_app) as client:
+            res = client.post("/api/init", json={
+                "proposedSessionId": None
+            }, headers={
+                "Content-Type": "application/json"
+            })
+            abstract_templates = res.json().get("abstractTemplates")
+            section_a = abstract_templates.get("sectiona")
+            column_b = abstract_templates.get("columnb")
+            assert section_a.get("writer").get("name") == "Section A"
+            assert column_b.get("writer").get("description") == "Cloned Column component"
+          
+    def test_feature_flags(self):
+        """
+        This test verifies that feature flags are carried to the frontend.
+
+        """
+        asgi_app: fastapi.FastAPI = writer.serve.get_asgi_app(
+            test_app_dir, "run")
+        with fastapi.testclient.TestClient(asgi_app) as client:
+            res = client.post("/api/init", json={
+                "proposedSessionId": None
+            }, headers={
+                "Content-Type": "application/json"
+            })
+            feature_flags = res.json().get("featureFlags")
+            assert feature_flags == ["flag_one", "flag_two"]
\ No newline at end of file
diff --git a/tests/backend/testapp/main.py b/tests/backend/testapp/main.py
index 53df2ac09..7742d84b9 100644
--- a/tests/backend/testapp/main.py
+++ b/tests/backend/testapp/main.py
@@ -9,6 +9,8 @@
 import writer as wf
 import writer.core
 
+writer.Config.feature_flags.append("flag_one")
+writer.Config.feature_flags.append("flag_two")
 
 @wf.middleware()
 def my_middleware(state):
diff --git a/tests/e2e/tests/components.spec.ts b/tests/e2e/tests/components.spec.ts
index 2ae9bae2b..8abfea5cd 100644
--- a/tests/e2e/tests/components.spec.ts
+++ b/tests/e2e/tests/components.spec.ts
@@ -12,6 +12,7 @@ type ComponentTestData = {
 	locator: string;
 	ignore?: boolean;
 	allowedParentTypes?: string[];
+	toolkit: string;
 };
 
 const mapComponents = {
@@ -52,6 +53,7 @@ const tests = components
 
 tests
 	.filter((component: ComponentTestData) => !component.ignore)
+	.filter((component: ComponentTestData) => !component.toolkit || component.toolkit == "core")
 	.forEach((component: ComponentTestData) => {
 		switch(component.test) {
 			case 'basic':
diff --git a/tests/e2e/tests/lowCode.spec.ts b/tests/e2e/tests/lowCode.spec.ts
index fc644aa3c..3490bbf3e 100644
--- a/tests/e2e/tests/lowCode.spec.ts
+++ b/tests/e2e/tests/lowCode.spec.ts
@@ -65,7 +65,8 @@ test.describe("low-code UI", () => {
 			await expect(page.locator(`.initialization .wf-type-text`)).toHaveText("Initialization successful!");
 	});
 
-	components.forEach(({ type, name, fields, allowedParentTypes }) => {
+	components.forEach(({ type, name, fields, allowedParentTypes, toolkit }) => {
+		if (toolkit && toolkit !== "core") return;
 		const renderError = type === 'root' || (allowedParentTypes && !allowedParentTypes.includes('section'));
 		const componentName = name.replaceAll(/\s/g, "");
 		test(`create ${type} with ui.${componentName}() inside of section ${renderError ? '- render error' : ''}`, async ({ page }) => {