diff --git a/ui/src/core/templateMap.ts b/ui/src/core/templateMap.ts
index 3b8cca20c..51812a0e0 100644
--- a/ui/src/core/templateMap.ts
+++ b/ui/src/core/templateMap.ts
@@ -1,46 +1,51 @@
 // Maps Streamsync component types to renderable Vue components
-
-import CorePage from "../core_components/CorePage.vue";
-import CoreSidebar from "../core_components/CoreSidebar.vue";
-import CoreText from "../core_components/CoreText.vue";
-import CoreButton from "../core_components/CoreButton.vue";
-import CoreIcon from "../core_components/CoreIcon.vue";
-import CoreSection from "../core_components/CoreSection.vue";
-import CoreHeader from "../core_components/CoreHeader.vue";
-import CoreHeading from "../core_components/CoreHeading.vue";
-import CoreDataframe from "../core_components/CoreDataframe.vue";
-import CoreHtml from "../core_components/CoreHtml.vue";
-import CorePagination from "../core_components/CorePagination.vue";
-import CoreRepeater from "../core_components/CoreRepeater.vue";
-import CoreColumn from "../core_components/CoreColumn.vue";
-import CoreColumns from "../core_components/CoreColumns.vue";
-import CoreHorizontalStack from "../core_components/CoreHorizontalStack.vue";
-import CoreSeparator from "../core_components/CoreSeparator.vue";
-import CoreTab from "../core_components/CoreTab.vue";
-import CoreTabs from "../core_components/CoreTabs.vue";
-import CoreImage from "../core_components/CoreImage.vue";
-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 CoreTimer from "../core_components/CoreTimer.vue";
-import CoreWebcamCapture from "../core_components/CoreWebcamCapture.vue";
-import CoreVegaLiteChart from "../core_components/CoreVegaLiteChart.vue";
-import CorePlotlyGraph from "../core_components/CorePlotlyGraph.vue";
-import CoreRoot from "../core_components/CoreRoot.vue";
-import CoreTextInput from "../core_components/input/CoreTextInput.vue";
-import CoreTextareaInput from "../core_components/input/CoreTextareaInput.vue";
-import CoreNumberInput from "../core_components/input/CoreNumberInput.vue";
-import CoreSliderInput from "../core_components/input/CoreSliderInput.vue";
+// 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";
+// input
+import CoreCheckboxInput from "../core_components/input/CoreCheckboxInput.vue";
 import CoreDateInput from "../core_components/input/CoreDateInput.vue";
-import CoreRadioInput from "../core_components/input/CoreRadioInput.vue";
 import CoreDropdownInput from "../core_components/input/CoreDropdownInput.vue";
-import CoreSelectInput from "../core_components/input/CoreSelectInput.vue";
-import CoreMultiselectInput from "../core_components/input/CoreMultiselectInput.vue";
-import CoreCheckboxInput from "../core_components/input/CoreCheckboxInput.vue";
 import CoreFileInput from "../core_components/input/CoreFileInput.vue";
-import CoreMetric from "../core_components/CoreMetric.vue";
-import CoreMessage from "../core_components/CoreMessage.vue";
-import CoreVideoPlayer from "../core_components/CoreVideoPlayer.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";
+// 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";
+// 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";
+// 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";
+// root
+import CorePage from "../core_components/root/CorePage.vue";
+import CoreRoot from "../core_components/root/CoreRoot.vue";
 
 import { StreamsyncComponentDefinition } from "../streamsyncTypes";
 import { h } from "vue";
diff --git a/ui/src/core_components/CoreDataframe.vue b/ui/src/core_components/content/CoreDataframe.vue
similarity index 98%
rename from ui/src/core_components/CoreDataframe.vue
rename to ui/src/core_components/content/CoreDataframe.vue
index 4b8c44513..0f8717f49 100644
--- a/ui/src/core_components/CoreDataframe.vue
+++ b/ui/src/core_components/content/CoreDataframe.vue
@@ -96,13 +96,13 @@
 
 <script lang="ts">
 import { Ref, computed, inject, ref } from "vue";
-import { FieldCategory, FieldType } from "../streamsyncTypes";
+import { FieldCategory, FieldType } from "../../streamsyncTypes";
 import {
 	cssClasses,
 	primaryTextColor,
 	secondaryTextColor,
 	separatorColor,
-} from "../renderer/sharedStyleFields";
+} from "../../renderer/sharedStyleFields";
 import { onMounted } from "vue";
 import { watch } from "vue";
 import { nextTick } from "vue";
@@ -204,7 +204,7 @@ export default {
 };
 </script>
 <script setup lang="ts">
-import injectionKeys from "../injectionKeys";
+import injectionKeys from "../../injectionKeys";
 import * as aq from "arquero";
 import { tableFromIPC, Table } from "apache-arrow";
 
@@ -514,7 +514,7 @@ onUnmounted(() => {
 </script>
 
 <style scoped>
-@import "../renderer/sharedStyles.css";
+@import "../../renderer/sharedStyles.css";
 
 .CoreDataframe {
 	font-size: 0.8rem;
diff --git a/ui/src/core_components/CoreHeading.vue b/ui/src/core_components/content/CoreHeading.vue
similarity index 86%
rename from ui/src/core_components/CoreHeading.vue
rename to ui/src/core_components/content/CoreHeading.vue
index 38848864e..4d04feaf4 100644
--- a/ui/src/core_components/CoreHeading.vue
+++ b/ui/src/core_components/content/CoreHeading.vue
@@ -12,8 +12,8 @@
 </template>
 
 <script lang="ts">
-import { FieldCategory, FieldType } from "../streamsyncTypes";
-import { cssClasses, primaryTextColor } from "../renderer/sharedStyleFields";
+import { FieldCategory, FieldType } from "../../streamsyncTypes";
+import { cssClasses, primaryTextColor } from "../../renderer/sharedStyleFields";
 
 const description =
 	"A text component used to display headings or titles in different sizes and styles.";
@@ -62,11 +62,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/ui/src/core_components/CoreIcon.vue b/ui/src/core_components/content/CoreIcon.vue
similarity index 85%
rename from ui/src/core_components/CoreIcon.vue
rename to ui/src/core_components/content/CoreIcon.vue
index acafd05d4..bfcaac319 100644
--- a/ui/src/core_components/CoreIcon.vue
+++ b/ui/src/core_components/content/CoreIcon.vue
@@ -12,8 +12,8 @@
 </template>
 
 <script lang="ts">
-import { FieldCategory, FieldType } from "../streamsyncTypes";
-import { cssClasses } from "../renderer/sharedStyleFields";
+import { FieldCategory, FieldType } from "../../streamsyncTypes";
+import { cssClasses } from "../../renderer/sharedStyleFields";
 
 const docs = `
 Streamsync uses the library RemixIcon to display icons. To include an icon, check remixicon.com, find the icon's id (such as \`arrow-up\`)
@@ -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/ui/src/core_components/CoreImage.vue b/ui/src/core_components/content/CoreImage.vue
similarity index 92%
rename from ui/src/core_components/CoreImage.vue
rename to ui/src/core_components/content/CoreImage.vue
index c965af919..5da226cea 100644
--- a/ui/src/core_components/CoreImage.vue
+++ b/ui/src/core_components/content/CoreImage.vue
@@ -16,9 +16,12 @@
 </template>
 
 <script lang="ts">
-import { FieldCategory, FieldType } from "../streamsyncTypes";
-import { cssClasses, secondaryTextColor } from "../renderer/sharedStyleFields";
-import { getClick } from "../renderer/syntheticEvents";
+import { FieldCategory, FieldType } from "../../streamsyncTypes";
+import {
+	cssClasses,
+	secondaryTextColor,
+} from "../../renderer/sharedStyleFields";
+import { getClick } from "../../renderer/syntheticEvents";
 
 const description = "A component to display images.";
 
@@ -92,7 +95,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 ss = inject(injectionKeys.core);
@@ -124,7 +127,7 @@ function handleClick(ev: MouseEvent) {
 </script>
 
 <style scoped>
-@import "../renderer/sharedStyles.css";
+@import "../../renderer/sharedStyles.css";
 
 .CoreImage {
 	width: fit-content;
diff --git a/ui/src/core_components/CoreMessage.vue b/ui/src/core_components/content/CoreMessage.vue
similarity index 93%
rename from ui/src/core_components/CoreMessage.vue
rename to ui/src/core_components/content/CoreMessage.vue
index 116295c21..ddaa3f375 100644
--- a/ui/src/core_components/CoreMessage.vue
+++ b/ui/src/core_components/content/CoreMessage.vue
@@ -18,9 +18,9 @@
 </template>
 
 <script lang="ts">
-import LoadingSymbol from "../renderer/LoadingSymbol.vue";
-import { FieldCategory, FieldType } from "../streamsyncTypes";
-import { cssClasses, primaryTextColor } from "../renderer/sharedStyleFields";
+import LoadingSymbol from "../../renderer/LoadingSymbol.vue";
+import { FieldCategory, FieldType } from "../../streamsyncTypes";
+import { cssClasses, primaryTextColor } from "../../renderer/sharedStyleFields";
 
 const description =
 	"A component that displays a message in various styles, including success, error, warning, and informational.";
@@ -92,7 +92,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 isBeingEdited = inject(injectionKeys.isBeingEdited);
@@ -142,7 +142,7 @@ const rootStyle = computed(() => {
 });
 </script>
 <style scoped>
-@import "../renderer/sharedStyles.css";
+@import "../../renderer/sharedStyles.css";
 
 .CoreMessage {
 	color: var(--primaryTextColor);
diff --git a/ui/src/core_components/CoreMetric.vue b/ui/src/core_components/content/CoreMetric.vue
similarity index 93%
rename from ui/src/core_components/CoreMetric.vue
rename to ui/src/core_components/content/CoreMetric.vue
index 6404416ad..42f67b873 100644
--- a/ui/src/core_components/CoreMetric.vue
+++ b/ui/src/core_components/content/CoreMetric.vue
@@ -10,12 +10,12 @@
 </template>
 
 <script lang="ts">
-import { FieldCategory, FieldType } from "../streamsyncTypes";
+import { FieldCategory, FieldType } from "../../streamsyncTypes";
 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/ui/src/core_components/CorePlotlyGraph.vue b/ui/src/core_components/content/CorePlotlyGraph.vue
similarity index 94%
rename from ui/src/core_components/CorePlotlyGraph.vue
rename to ui/src/core_components/content/CorePlotlyGraph.vue
index 693688fb3..72e391fb5 100644
--- a/ui/src/core_components/CorePlotlyGraph.vue
+++ b/ui/src/core_components/content/CorePlotlyGraph.vue
@@ -5,8 +5,8 @@
 </template>
 
 <script lang="ts">
-import { FieldType } from "../streamsyncTypes";
-import { cssClasses } from "../renderer/sharedStyleFields";
+import { FieldType } from "../../streamsyncTypes";
+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);
@@ -147,7 +147,7 @@ onMounted(async () => {
 </script>
 
 <style scoped>
-@import "../renderer/sharedStyles.css";
+@import "../../renderer/sharedStyles.css";
 
 .CorePlotlyGraph {
 	min-height: 1px;
diff --git a/ui/src/core_components/CoreText.vue b/ui/src/core_components/content/CoreText.vue
similarity index 92%
rename from ui/src/core_components/CoreText.vue
rename to ui/src/core_components/content/CoreText.vue
index 9ae6859f0..45a2521d7 100644
--- a/ui/src/core_components/CoreText.vue
+++ b/ui/src/core_components/content/CoreText.vue
@@ -16,9 +16,9 @@
 </template>
 
 <script lang="ts">
-import { FieldCategory, FieldControl, FieldType } from "../streamsyncTypes";
-import { cssClasses, primaryTextColor } from "../renderer/sharedStyleFields";
-import { getClick } from "../renderer/syntheticEvents";
+import { FieldCategory, FieldControl, FieldType } from "../../streamsyncTypes";
+import { cssClasses, primaryTextColor } from "../../renderer/sharedStyleFields";
+import { getClick } from "../../renderer/syntheticEvents";
 
 const clickHandlerStub = `
 def click_handler(state):
@@ -80,7 +80,7 @@ export default {
 <script setup lang="ts">
 import { marked } from "marked";
 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);
@@ -114,7 +114,7 @@ function handleClick(ev: MouseEvent) {
 </script>
 
 <style scoped>
-@import "../renderer/sharedStyles.css";
+@import "../../renderer/sharedStyles.css";
 
 .CoreText {
 	color: var(--primaryTextColor);
diff --git a/ui/src/core_components/CoreVegaLiteChart.vue b/ui/src/core_components/content/CoreVegaLiteChart.vue
similarity index 90%
rename from ui/src/core_components/CoreVegaLiteChart.vue
rename to ui/src/core_components/content/CoreVegaLiteChart.vue
index cd95795bd..bb6f46aae 100644
--- a/ui/src/core_components/CoreVegaLiteChart.vue
+++ b/ui/src/core_components/content/CoreVegaLiteChart.vue
@@ -5,8 +5,8 @@
 </template>
 
 <script lang="ts">
-import { FieldType } from "../streamsyncTypes";
-import { cssClasses } from "../renderer/sharedStyleFields";
+import { FieldType } from "../../streamsyncTypes";
+import { cssClasses } from "../../renderer/sharedStyleFields";
 
 const description = "A component that displays Vega-Lite/Altair charts.";
 
@@ -60,7 +60,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);
@@ -90,7 +90,7 @@ onMounted(() => {
 </script>
 
 <style scoped>
-@import "../renderer/sharedStyles.css";
+@import "../../renderer/sharedStyles.css";
 
 .CoreVegaLiteChart {
 	min-height: 1px;
diff --git a/ui/src/core_components/CoreVideoPlayer.vue b/ui/src/core_components/content/CoreVideoPlayer.vue
similarity index 92%
rename from ui/src/core_components/CoreVideoPlayer.vue
rename to ui/src/core_components/content/CoreVideoPlayer.vue
index 8d46f4d1b..46fff7acb 100644
--- a/ui/src/core_components/CoreVideoPlayer.vue
+++ b/ui/src/core_components/content/CoreVideoPlayer.vue
@@ -11,8 +11,8 @@
 </template>
 
 <script lang="ts">
-import { FieldType } from "../streamsyncTypes";
-import { cssClasses } from "../renderer/sharedStyleFields";
+import { FieldType } from "../../streamsyncTypes";
+import { cssClasses } from "../../renderer/sharedStyleFields";
 
 const description =
 	"A video player component that can play various video formats.";
@@ -91,7 +91,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/ui/src/core_components/CoreColumn.vue b/ui/src/core_components/layout/CoreColumn.vue
similarity index 95%
rename from ui/src/core_components/CoreColumn.vue
rename to ui/src/core_components/layout/CoreColumn.vue
index 7afa54318..1c60ff261 100644
--- a/ui/src/core_components/CoreColumn.vue
+++ b/ui/src/core_components/layout/CoreColumn.vue
@@ -41,14 +41,14 @@
 </template>
 
 <script lang="ts">
-import { FieldCategory, FieldType } from "../streamsyncTypes";
+import { FieldCategory, FieldType } from "../../streamsyncTypes";
 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,9 +116,9 @@ 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 BaseContainer from "./base/BaseContainer.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);
 const ss = inject(injectionKeys.core);
@@ -197,7 +197,7 @@ watch(
 </script>
 
 <style scoped>
-@import "../renderer/sharedStyles.css";
+@import "../../renderer/sharedStyles.css";
 
 .CoreColumn {
 	min-width: 0;
diff --git a/ui/src/core_components/CoreColumns.vue b/ui/src/core_components/layout/CoreColumns.vue
similarity index 81%
rename from ui/src/core_components/CoreColumns.vue
rename to ui/src/core_components/layout/CoreColumns.vue
index 7ef68e39d..aec4ac57f 100644
--- a/ui/src/core_components/CoreColumns.vue
+++ b/ui/src/core_components/layout/CoreColumns.vue
@@ -5,7 +5,7 @@
 </template>
 
 <script lang="ts">
-import { cssClasses } from "../renderer/sharedStyleFields";
+import { cssClasses } from "../../renderer/sharedStyleFields";
 
 export default {
 	streamsync: {
@@ -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/ui/src/core_components/CoreHeader.vue b/ui/src/core_components/layout/CoreHeader.vue
similarity index 87%
rename from ui/src/core_components/CoreHeader.vue
rename to ui/src/core_components/layout/CoreHeader.vue
index 01a08e3cc..b40a01f0c 100644
--- a/ui/src/core_components/CoreHeader.vue
+++ b/ui/src/core_components/layout/CoreHeader.vue
@@ -10,12 +10,12 @@
 </template>
 
 <script lang="ts">
-import { FieldType } from "../streamsyncTypes";
+import { FieldType } from "../../streamsyncTypes";
 import {
 	accentColor,
 	cssClasses,
 	emptinessColor,
-} from "../renderer/sharedStyleFields";
+} from "../../renderer/sharedStyleFields";
 
 const description =
 	"A container component that typically contains the main navigation elements.";
@@ -43,13 +43,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/ui/src/core_components/CoreHorizontalStack.vue b/ui/src/core_components/layout/CoreHorizontalStack.vue
similarity index 83%
rename from ui/src/core_components/CoreHorizontalStack.vue
rename to ui/src/core_components/layout/CoreHorizontalStack.vue
index 99af12e4a..da480f8d2 100644
--- a/ui/src/core_components/CoreHorizontalStack.vue
+++ b/ui/src/core_components/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 BaseContainer from "./base/BaseContainer.vue";
+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/ui/src/core_components/CoreSection.vue b/ui/src/core_components/layout/CoreSection.vue
similarity index 86%
rename from ui/src/core_components/CoreSection.vue
rename to ui/src/core_components/layout/CoreSection.vue
index 470aa135e..592e1c1ce 100644
--- a/ui/src/core_components/CoreSection.vue
+++ b/ui/src/core_components/layout/CoreSection.vue
@@ -11,7 +11,7 @@
 </template>
 
 <script lang="ts">
-import { FieldType } from "../streamsyncTypes";
+import { FieldType } from "../../streamsyncTypes";
 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 BaseContainer from "./base/BaseContainer.vue";
+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 {
 	overflow: hidden;
 	border: 1px solid var(--separatorColor);
diff --git a/ui/src/core_components/CoreSeparator.vue b/ui/src/core_components/layout/CoreSeparator.vue
similarity index 88%
rename from ui/src/core_components/CoreSeparator.vue
rename to ui/src/core_components/layout/CoreSeparator.vue
index 96888638f..58082e4d8 100644
--- a/ui/src/core_components/CoreSeparator.vue
+++ b/ui/src/core_components/layout/CoreSeparator.vue
@@ -5,7 +5,7 @@
 </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.";
@@ -31,7 +31,7 @@ export default {
 </script>
 
 <style scoped>
-@import "../renderer/sharedStyles.css";
+@import "../../renderer/sharedStyles.css";
 .CoreSeparator {
 	min-height: 1px;
 	min-width: 1px;
diff --git a/ui/src/core_components/CoreSidebar.vue b/ui/src/core_components/layout/CoreSidebar.vue
similarity index 93%
rename from ui/src/core_components/CoreSidebar.vue
rename to ui/src/core_components/layout/CoreSidebar.vue
index 142673f94..19edfeb75 100644
--- a/ui/src/core_components/CoreSidebar.vue
+++ b/ui/src/core_components/layout/CoreSidebar.vue
@@ -21,7 +21,7 @@
 </template>
 
 <script lang="ts">
-import { Component, FieldCategory, FieldType } from "../streamsyncTypes";
+import { Component, FieldCategory, FieldType } from "../../streamsyncTypes";
 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.";
@@ -80,8 +80,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");
@@ -124,7 +124,7 @@ onMounted(() => {
 </script>
 
 <style scoped>
-@import "../renderer/sharedStyles.css";
+@import "../../renderer/sharedStyles.css";
 
 .CoreSidebar {
 	overflow: auto;
diff --git a/ui/src/core_components/CoreTab.vue b/ui/src/core_components/layout/CoreTab.vue
similarity index 94%
rename from ui/src/core_components/CoreTab.vue
rename to ui/src/core_components/layout/CoreTab.vue
index f68b90b3d..17f98dd51 100644
--- a/ui/src/core_components/CoreTab.vue
+++ b/ui/src/core_components/layout/CoreTab.vue
@@ -53,13 +53,13 @@
 const TAB_BIT_INSTANCE_NUMBER = 0;
 const CONTENT_DISPLAYING_INSTANCE_NUMBER = 1;
 
-import { Component, FieldType, InstancePath } from "../streamsyncTypes";
-import { useEvaluator } from "../renderer/useEvaluator";
+import { Component, FieldType, InstancePath } from "../../streamsyncTypes";
+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,8 +91,8 @@ export default {
 </script>
 <script setup lang="ts">
 import { computed, inject, onBeforeMount, watch } from "vue";
-import injectionKeys from "../injectionKeys";
-import BaseContainer from "./base/BaseContainer.vue";
+import injectionKeys from "../../injectionKeys";
+import BaseContainer from "../base/BaseContainer.vue";
 
 const fields = inject(injectionKeys.evaluatedFields);
 const instancePath = inject(injectionKeys.instancePath);
@@ -196,7 +196,7 @@ onBeforeMount(() => {
 </script>
 
 <style scoped>
-@import "../renderer/sharedStyles.css";
+@import "../../renderer/sharedStyles.css";
 
 button.bit {
 	padding: 16px 0 16px 0;
diff --git a/ui/src/core_components/CoreTabs.vue b/ui/src/core_components/layout/CoreTabs.vue
similarity index 93%
rename from ui/src/core_components/CoreTabs.vue
rename to ui/src/core_components/layout/CoreTabs.vue
index 9e0fe339a..db44f68aa 100644
--- a/ui/src/core_components/CoreTabs.vue
+++ b/ui/src/core_components/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,14 +53,14 @@ 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/sharedStyles.css";
 
 .CoreTabs {
 	width: 100%;
diff --git a/ui/src/core_components/CoreButton.vue b/ui/src/core_components/other/CoreButton.vue
similarity index 89%
rename from ui/src/core_components/CoreButton.vue
rename to ui/src/core_components/other/CoreButton.vue
index c56616cd2..d7a800a66 100644
--- a/ui/src/core_components/CoreButton.vue
+++ b/ui/src/core_components/other/CoreButton.vue
@@ -14,16 +14,16 @@
 </template>
 
 <script lang="ts">
-import { FieldCategory, FieldType } from "../streamsyncTypes";
+import { FieldCategory, FieldType } from "../../streamsyncTypes";
 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):
@@ -85,7 +85,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);
@@ -108,7 +108,7 @@ function handleClick(ev: MouseEvent) {
 </script>
 
 <style scoped>
-@import "../renderer/sharedStyles.css";
+@import "../../renderer/sharedStyles.css";
 
 .CoreButton {
 	width: fit-content;
diff --git a/ui/src/core_components/CoreHtml.vue b/ui/src/core_components/other/CoreHtml.vue
similarity index 93%
rename from ui/src/core_components/CoreHtml.vue
rename to ui/src/core_components/other/CoreHtml.vue
index a3009f873..38f46c6ef 100644
--- a/ui/src/core_components/CoreHtml.vue
+++ b/ui/src/core_components/other/CoreHtml.vue
@@ -1,8 +1,8 @@
 <script lang="ts">
 import { h, inject } from "vue";
-import { FieldControl, FieldType } from "../streamsyncTypes";
-import injectionKeys from "../injectionKeys";
-import { cssClasses } from "../renderer/sharedStyleFields";
+import { FieldControl, FieldType } from "../../streamsyncTypes";
+import injectionKeys from "../../injectionKeys";
+import { cssClasses } from "../../renderer/sharedStyleFields";
 
 const defaultStyle = {
 	padding: "16px",
diff --git a/ui/src/core_components/CorePagination.vue b/ui/src/core_components/other/CorePagination.vue
similarity index 98%
rename from ui/src/core_components/CorePagination.vue
rename to ui/src/core_components/other/CorePagination.vue
index 5f17563fd..2baf5186d 100644
--- a/ui/src/core_components/CorePagination.vue
+++ b/ui/src/core_components/other/CorePagination.vue
@@ -68,7 +68,7 @@
 </template>
 
 <script lang="ts">
-import { FieldType } from "../streamsyncTypes";
+import { FieldType } from "../../streamsyncTypes";
 
 const pageChangeStub = `
 def handle_page_change(state, payload):
@@ -170,8 +170,8 @@ export default {
 
 <script setup lang="ts">
 import { Ref, inject, ref, computed, watch, onUnmounted, onMounted } 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 ss = inject(injectionKeys.core);
diff --git a/ui/src/core_components/CoreRepeater.vue b/ui/src/core_components/other/CoreRepeater.vue
similarity index 95%
rename from ui/src/core_components/CoreRepeater.vue
rename to ui/src/core_components/other/CoreRepeater.vue
index 93d5315bd..2a1bb833c 100644
--- a/ui/src/core_components/CoreRepeater.vue
+++ b/ui/src/core_components/other/CoreRepeater.vue
@@ -1,7 +1,7 @@
 <script lang="ts">
 import { computed, h, inject } from "vue";
-import { FieldType } from "../streamsyncTypes";
-import injectionKeys from "../injectionKeys";
+import { FieldType } from "../../streamsyncTypes";
+import injectionKeys from "../../injectionKeys";
 
 const description =
 	"A container component that repeats its child components based on a dictionary.";
diff --git a/ui/src/core_components/CoreTimer.vue b/ui/src/core_components/other/CoreTimer.vue
similarity index 94%
rename from ui/src/core_components/CoreTimer.vue
rename to ui/src/core_components/other/CoreTimer.vue
index dd5062570..d838e91c3 100644
--- a/ui/src/core_components/CoreTimer.vue
+++ b/ui/src/core_components/other/CoreTimer.vue
@@ -8,8 +8,8 @@
 </template>
 
 <script lang="ts">
-import { FieldType } from "../streamsyncTypes";
-import { accentColor, cssClasses } from "../renderer/sharedStyleFields";
+import { FieldType } from "../../streamsyncTypes";
+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/ui/src/core_components/CoreWebcamCapture.vue b/ui/src/core_components/other/CoreWebcamCapture.vue
similarity index 96%
rename from ui/src/core_components/CoreWebcamCapture.vue
rename to ui/src/core_components/other/CoreWebcamCapture.vue
index e42748f7f..d843c71de 100644
--- a/ui/src/core_components/CoreWebcamCapture.vue
+++ b/ui/src/core_components/other/CoreWebcamCapture.vue
@@ -25,14 +25,14 @@
 </template>
 
 <script lang="ts">
-import { FieldType } from "../streamsyncTypes";
+import { FieldType } from "../../streamsyncTypes";
 import {
 	buttonColor,
 	buttonShadow,
 	buttonTextColor,
 	cssClasses,
 	separatorColor,
-} from "../renderer/sharedStyleFields";
+} from "../../renderer/sharedStyleFields";
 
 const description =
 	"A user input component that allows users to capture images using their webcam.";
@@ -91,7 +91,7 @@ import {
 	ref,
 	watch,
 } from "vue";
-import injectionKeys from "../injectionKeys";
+import injectionKeys from "../../injectionKeys";
 
 const isActive = ref(false);
 const rootEl: Ref<HTMLElement> = ref(null);
@@ -218,7 +218,7 @@ const stopCapture = () => {
 </script>
 
 <style scoped>
-@import "../renderer/sharedStyles.css";
+@import "../../renderer/sharedStyles.css";
 
 .CoreWebcamCapture {
 	width: 100%;
diff --git a/ui/src/core_components/CorePage.vue b/ui/src/core_components/root/CorePage.vue
similarity index 93%
rename from ui/src/core_components/CorePage.vue
rename to ui/src/core_components/root/CorePage.vue
index 320a0f91c..2e9a425ce 100644
--- a/ui/src/core_components/CorePage.vue
+++ b/ui/src/core_components/root/CorePage.vue
@@ -22,7 +22,7 @@
 </template>
 
 <script lang="ts">
-import { Component, FieldCategory, FieldType } from "../streamsyncTypes";
+import { Component, FieldCategory, FieldType } from "../../streamsyncTypes";
 import {
 	accentColor,
 	buttonColor,
@@ -36,10 +36,10 @@ import {
 	secondaryTextColor,
 	selectedColor,
 	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):
@@ -127,7 +127,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);
@@ -158,7 +158,7 @@ onUnmounted(() => {
 </script>
 
 <style scoped>
-@import "../renderer/sharedStyles.css";
+@import "../../renderer/sharedStyles.css";
 
 .CorePage {
 	display: flex;
diff --git a/ui/src/core_components/CoreRoot.vue b/ui/src/core_components/root/CoreRoot.vue
similarity index 96%
rename from ui/src/core_components/CoreRoot.vue
rename to ui/src/core_components/root/CoreRoot.vue
index ee52b8ebd..7628ff583 100644
--- a/ui/src/core_components/CoreRoot.vue
+++ b/ui/src/core_components/root/CoreRoot.vue
@@ -10,10 +10,10 @@
 </template>
 
 <script lang="ts">
-import { FieldType } from "../streamsyncTypes";
-import * as sharedStyleFields from "../renderer/sharedStyleFields";
+import { FieldType } from "../../streamsyncTypes";
+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 ss = inject(injectionKeys.core);
@@ -309,7 +309,7 @@ onBeforeMount(() => {
 </script>
 
 <style scoped>
-@import "../renderer/sharedStyles.css";
+@import "../../renderer/sharedStyles.css";
 
 .CoreRoot {
 	background: var(--emptinessColor);