diff --git a/client/gulpfile.js b/client/gulpfile.js
index 06d918958288..5338acac958a 100644
--- a/client/gulpfile.js
+++ b/client/gulpfile.js
@@ -43,6 +43,7 @@ const INSTALL_PLUGIN_BUILD_IDS = [
     "phylocanvas",
     "plotly",
     "venn",
+    "vitessce",
     "vizarr",
 ]; // todo: derive from XML
 const DIST_PLUGIN_BUILD_IDS = ["new_user"];
diff --git a/client/src/components/WorkflowInvocationState/VegaWrapper.vue b/client/src/components/Common/VegaWrapper.vue
similarity index 100%
rename from client/src/components/WorkflowInvocationState/VegaWrapper.vue
rename to client/src/components/Common/VegaWrapper.vue
diff --git a/client/src/components/Markdown/Markdown.vue b/client/src/components/Markdown/Markdown.vue
index 4d15b58b7e42..1115196098e4 100644
--- a/client/src/components/Markdown/Markdown.vue
+++ b/client/src/components/Markdown/Markdown.vue
@@ -1,3 +1,116 @@
+<script setup lang="ts">
+import { ref, computed, watch, onMounted } from "vue";
+
+import { useWorkflowStore } from "@/stores/workflowStore";
+import { parseMarkdown } from "./parse";
+
+import MarkdownGalaxy from "./Sections/MarkdownGalaxy.vue";
+import MarkdownDefault from "./Sections/MarkdownDefault.vue";
+import MarkdownVega from "./Sections/MarkdownVega.vue";
+import MarkdownVitessce from "./Sections/MarkdownVitessce.vue";
+
+import LoadingSpan from "@/components/LoadingSpan.vue";
+import StsDownloadButton from "@/components/StsDownloadButton.vue";
+
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { faDownload, faEdit } from "@fortawesome/free-solid-svg-icons";
+
+library.add(faDownload, faEdit);
+
+// Props
+interface MarkdownConfig {
+    generate_time?: string;
+    generate_version?: string;
+    content?: string;
+    markdown?: string;
+    errors?: Array<{ error?: string; line?: string }>;
+    history_datasets?: Record<string, unknown>;
+    histories?: Record<string, unknown>;
+    history_dataset_collections?: Record<string, unknown>;
+    workflows?: Record<string, unknown>;
+    invocations?: Record<string, unknown>;
+    id?: string;
+    title?: string;
+    model_class?: string;
+}
+
+const props = defineProps<{
+    markdownConfig: MarkdownConfig;
+    enable_beta_markdown_export?: boolean;
+    downloadEndpoint: string;
+    readOnly?: boolean;
+    exportLink?: string;
+}>();
+
+// Refs and data
+const markdownObjects = ref<any[]>([]);
+const markdownErrors = ref<any[]>([]);
+const datasets = ref<Record<string, unknown>>({});
+const histories = ref<Record<string, unknown>>({});
+const collections = ref<Record<string, unknown>>({});
+const workflows = ref<Record<string, unknown>>({});
+const invocations = ref<Record<string, unknown>>({});
+const loading = ref(true);
+const workflowID = ref("");
+
+// Workflow Store
+const workflowStore = useWorkflowStore();
+const fetchWorkflowForInstanceId = workflowStore.fetchWorkflowForInstanceId;
+const getStoredWorkflowByInstanceId = workflowStore.getStoredWorkflowByInstanceId;
+
+// Computed properties
+const effectiveExportLink = computed(() => (props.enable_beta_markdown_export ? props.exportLink : null));
+
+const time = computed(() => {
+    const generateTime = props.markdownConfig.generate_time;
+    if (generateTime) {
+        let formattedTime = generateTime.endsWith("Z") ? generateTime : `${generateTime}Z`;
+        const date = new Date(formattedTime);
+        return date.toLocaleString("default", {
+            day: "numeric",
+            month: "long",
+            year: "numeric",
+            hour: "numeric",
+            minute: "numeric",
+            timeZone: "UTC",
+            timeZoneName: "short",
+        });
+    }
+    return "unavailable";
+});
+
+const version = computed(() => props.markdownConfig.generate_version || "Unknown Galaxy Version");
+
+const workflowVersions = computed(() => getStoredWorkflowByInstanceId(workflowID.value));
+
+// Methods
+function initConfig() {
+    const config = props.markdownConfig;
+    if (Object.keys(config).length) {
+        const markdown = config.content || config.markdown || "";
+        markdownErrors.value = config.errors || [];
+        markdownObjects.value = parseMarkdown(markdown);
+        datasets.value = config.history_datasets || {};
+        histories.value = config.histories || {};
+        collections.value = config.history_dataset_collections || {};
+        workflows.value = config.workflows || {};
+        invocations.value = config.invocations || {};
+        workflowID.value = Object.keys(config.workflows || {})[0] || "";
+        loading.value = false;
+    }
+}
+
+// Watchers
+watch(() => props.markdownConfig, initConfig);
+
+// Lifecycle hooks
+onMounted(() => {
+    initConfig();
+    fetchWorkflowForInstanceId(workflowID.value);
+});
+</script>
+
 <template>
     <div class="markdown-wrapper">
         <LoadingSpan v-if="loading" />
@@ -9,8 +122,7 @@
                     :fallback-url="exportLink"
                     :download-endpoint="downloadEndpoint"
                     size="sm"
-                    title="Generate PDF">
-                </StsDownloadButton>
+                    title="Generate PDF" />
                 <b-button
                     v-if="!readOnly"
                     v-b-tooltip.hover
@@ -45,11 +157,12 @@
                 </b-alert>
             </div>
             <div v-for="(obj, index) in markdownObjects" :key="index" class="markdown-components">
-                <p v-if="obj.name == 'default'" class="text-justify m-2" v-html="obj.content" />
-                <MarkdownContainer
-                    v-else
-                    :name="obj.name"
-                    :args="obj.args"
+                <MarkdownDefault v-if="obj.name === 'default'" :content="obj.content" />
+                <MarkdownVega v-else-if="obj.name === 'vega'" :content="obj.content" />
+                <MarkdownVitessce v-else-if="obj.name === 'vitessce'" :content="obj.content" />
+                <MarkdownGalaxy
+                    v-else-if="obj.name === 'galaxy'"
+                    :content="obj.content"
                     :datasets="datasets"
                     :collections="collections"
                     :histories="histories"
@@ -61,146 +174,3 @@
         </div>
     </div>
 </template>
-
-<script>
-import { library } from "@fortawesome/fontawesome-svg-core";
-import { faDownload, faEdit } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import BootstrapVue from "bootstrap-vue";
-import MarkdownIt from "markdown-it";
-import markdownItRegexp from "markdown-it-regexp";
-import { mapActions } from "pinia";
-import Vue from "vue";
-
-import { useWorkflowStore } from "@/stores/workflowStore";
-
-import { splitMarkdown as splitMarkdownUnrendered } from "./parse";
-
-import MarkdownContainer from "./MarkdownContainer.vue";
-import LoadingSpan from "components/LoadingSpan.vue";
-import StsDownloadButton from "components/StsDownloadButton.vue";
-
-const mdNewline = markdownItRegexp(/<br>/, () => {
-    return "<div style='clear:both;'/><br>";
-});
-
-const md = MarkdownIt();
-md.use(mdNewline);
-
-Vue.use(BootstrapVue);
-
-library.add(faDownload, faEdit);
-
-export default {
-    components: {
-        MarkdownContainer,
-        FontAwesomeIcon,
-        LoadingSpan,
-        StsDownloadButton,
-    },
-    props: {
-        markdownConfig: {
-            type: Object,
-            default: null,
-        },
-        enable_beta_markdown_export: {
-            type: Boolean,
-            default: false,
-        },
-        downloadEndpoint: {
-            type: String,
-            default: null,
-        },
-        readOnly: {
-            type: Boolean,
-            default: false,
-        },
-        exportLink: {
-            type: String,
-            default: null,
-        },
-    },
-    data() {
-        return {
-            markdownObjects: [],
-            markdownErrors: [],
-            datasets: {},
-            histories: {},
-            collections: {},
-            workflows: {},
-            invocations: {},
-            loading: true,
-            workflowID: "",
-        };
-    },
-    computed: {
-        effectiveExportLink() {
-            return this.enable_beta_markdown_export ? this.exportLink : null;
-        },
-        time() {
-            let generateTime = this.markdownConfig.generate_time;
-            if (generateTime) {
-                if (!generateTime.endsWith("Z")) {
-                    // We don't have tzinfo, but this will always be UTC coming
-                    // from Galaxy so append Z to assert that prior to parsing
-                    generateTime += "Z";
-                }
-                const date = new Date(generateTime);
-                return date.toLocaleString("default", {
-                    day: "numeric",
-                    month: "long",
-                    year: "numeric",
-                    minute: "numeric",
-                    hour: "numeric",
-                    timeZone: "UTC",
-                    timeZoneName: "short",
-                });
-            }
-            return "unavailable";
-        },
-        workflowVersions() {
-            return this.getStoredWorkflowByInstanceId(this.workflowID);
-        },
-        version() {
-            return this.markdownConfig.generate_version || "Unknown Galaxy Version";
-        },
-    },
-    watch: {
-        markdownConfig() {
-            this.initConfig();
-        },
-    },
-    created() {
-        this.initConfig();
-        this.fetchWorkflowForInstanceId(this.workflowID);
-    },
-    methods: {
-        ...mapActions(useWorkflowStore, ["getStoredWorkflowByInstanceId", "fetchWorkflowForInstanceId"]),
-        initConfig() {
-            if (Object.keys(this.markdownConfig).length) {
-                const config = this.markdownConfig;
-                const markdown = config.content || config.markdown || "";
-                this.markdownErrors = config.errors || [];
-                this.markdownObjects = this.splitMarkdown(markdown);
-                this.datasets = config.history_datasets || {};
-                this.histories = config.histories || {};
-                this.collections = config.history_dataset_collections || {};
-                this.workflows = config.workflows || {};
-                this.invocations = config.invocations || {};
-                this.loading = false;
-                this.workflowID = Object.keys(this.markdownConfig.workflows)[0];
-            }
-        },
-        splitMarkdown(markdown) {
-            const { sections, markdownErrors } = splitMarkdownUnrendered(markdown);
-            markdownErrors.forEach((error) => markdownErrors.push(error));
-            sections.forEach((section) => {
-                if (section.name == "default") {
-                    section.content = md.render(section.content);
-                }
-            });
-            return sections;
-        },
-    },
-};
-</script>
diff --git a/client/src/components/Markdown/Elements/HistoryDatasetAsImage.vue b/client/src/components/Markdown/Sections/Elements/HistoryDatasetAsImage.vue
similarity index 100%
rename from client/src/components/Markdown/Elements/HistoryDatasetAsImage.vue
rename to client/src/components/Markdown/Sections/Elements/HistoryDatasetAsImage.vue
diff --git a/client/src/components/Markdown/Elements/HistoryDatasetAsTable.vue b/client/src/components/Markdown/Sections/Elements/HistoryDatasetAsTable.vue
similarity index 100%
rename from client/src/components/Markdown/Elements/HistoryDatasetAsTable.vue
rename to client/src/components/Markdown/Sections/Elements/HistoryDatasetAsTable.vue
diff --git a/client/src/components/Markdown/Elements/HistoryDatasetCollection/CollectionDisplay.vue b/client/src/components/Markdown/Sections/Elements/HistoryDatasetCollection/CollectionDisplay.vue
similarity index 100%
rename from client/src/components/Markdown/Elements/HistoryDatasetCollection/CollectionDisplay.vue
rename to client/src/components/Markdown/Sections/Elements/HistoryDatasetCollection/CollectionDisplay.vue
diff --git a/client/src/components/Markdown/Elements/HistoryDatasetCollection/CollectionTree.vue b/client/src/components/Markdown/Sections/Elements/HistoryDatasetCollection/CollectionTree.vue
similarity index 100%
rename from client/src/components/Markdown/Elements/HistoryDatasetCollection/CollectionTree.vue
rename to client/src/components/Markdown/Sections/Elements/HistoryDatasetCollection/CollectionTree.vue
diff --git a/client/src/components/Markdown/Elements/HistoryDatasetDetails.vue b/client/src/components/Markdown/Sections/Elements/HistoryDatasetDetails.vue
similarity index 100%
rename from client/src/components/Markdown/Elements/HistoryDatasetDetails.vue
rename to client/src/components/Markdown/Sections/Elements/HistoryDatasetDetails.vue
diff --git a/client/src/components/Markdown/Elements/HistoryDatasetDisplay.test.js b/client/src/components/Markdown/Sections/Elements/HistoryDatasetDisplay.test.js
similarity index 100%
rename from client/src/components/Markdown/Elements/HistoryDatasetDisplay.test.js
rename to client/src/components/Markdown/Sections/Elements/HistoryDatasetDisplay.test.js
diff --git a/client/src/components/Markdown/Elements/HistoryDatasetDisplay.vue b/client/src/components/Markdown/Sections/Elements/HistoryDatasetDisplay.vue
similarity index 100%
rename from client/src/components/Markdown/Elements/HistoryDatasetDisplay.vue
rename to client/src/components/Markdown/Sections/Elements/HistoryDatasetDisplay.vue
diff --git a/client/src/components/Markdown/Elements/HistoryDatasetIndex.vue b/client/src/components/Markdown/Sections/Elements/HistoryDatasetIndex.vue
similarity index 100%
rename from client/src/components/Markdown/Elements/HistoryDatasetIndex.vue
rename to client/src/components/Markdown/Sections/Elements/HistoryDatasetIndex.vue
diff --git a/client/src/components/Markdown/Elements/HistoryDatasetLink.vue b/client/src/components/Markdown/Sections/Elements/HistoryDatasetLink.vue
similarity index 100%
rename from client/src/components/Markdown/Elements/HistoryDatasetLink.vue
rename to client/src/components/Markdown/Sections/Elements/HistoryDatasetLink.vue
diff --git a/client/src/components/Markdown/Elements/HistoryLink.vue b/client/src/components/Markdown/Sections/Elements/HistoryLink.vue
similarity index 100%
rename from client/src/components/Markdown/Elements/HistoryLink.vue
rename to client/src/components/Markdown/Sections/Elements/HistoryLink.vue
diff --git a/client/src/components/Markdown/Elements/InstanceUrl.vue b/client/src/components/Markdown/Sections/Elements/InstanceUrl.vue
similarity index 100%
rename from client/src/components/Markdown/Elements/InstanceUrl.vue
rename to client/src/components/Markdown/Sections/Elements/InstanceUrl.vue
diff --git a/client/src/components/Markdown/Elements/InvocationTime.vue b/client/src/components/Markdown/Sections/Elements/InvocationTime.vue
similarity index 100%
rename from client/src/components/Markdown/Elements/InvocationTime.vue
rename to client/src/components/Markdown/Sections/Elements/InvocationTime.vue
diff --git a/client/src/components/Markdown/Elements/JobMetrics.vue b/client/src/components/Markdown/Sections/Elements/JobMetrics.vue
similarity index 100%
rename from client/src/components/Markdown/Elements/JobMetrics.vue
rename to client/src/components/Markdown/Sections/Elements/JobMetrics.vue
diff --git a/client/src/components/Markdown/Elements/JobParameters.vue b/client/src/components/Markdown/Sections/Elements/JobParameters.vue
similarity index 100%
rename from client/src/components/Markdown/Elements/JobParameters.vue
rename to client/src/components/Markdown/Sections/Elements/JobParameters.vue
diff --git a/client/src/components/Markdown/Elements/JobSelection.vue b/client/src/components/Markdown/Sections/Elements/JobSelection.vue
similarity index 100%
rename from client/src/components/Markdown/Elements/JobSelection.vue
rename to client/src/components/Markdown/Sections/Elements/JobSelection.vue
diff --git a/client/src/components/Markdown/Elements/ToolStd.vue b/client/src/components/Markdown/Sections/Elements/ToolStd.vue
similarity index 100%
rename from client/src/components/Markdown/Elements/ToolStd.vue
rename to client/src/components/Markdown/Sections/Elements/ToolStd.vue
diff --git a/client/src/components/Markdown/Elements/Visualization.vue b/client/src/components/Markdown/Sections/Elements/Visualization.vue
similarity index 100%
rename from client/src/components/Markdown/Elements/Visualization.vue
rename to client/src/components/Markdown/Sections/Elements/Visualization.vue
diff --git a/client/src/components/Markdown/Elements/Workflow/WorkflowDisplay.test.js b/client/src/components/Markdown/Sections/Elements/Workflow/WorkflowDisplay.test.js
similarity index 100%
rename from client/src/components/Markdown/Elements/Workflow/WorkflowDisplay.test.js
rename to client/src/components/Markdown/Sections/Elements/Workflow/WorkflowDisplay.test.js
diff --git a/client/src/components/Markdown/Elements/Workflow/WorkflowDisplay.vue b/client/src/components/Markdown/Sections/Elements/Workflow/WorkflowDisplay.vue
similarity index 100%
rename from client/src/components/Markdown/Elements/Workflow/WorkflowDisplay.vue
rename to client/src/components/Markdown/Sections/Elements/Workflow/WorkflowDisplay.vue
diff --git a/client/src/components/Markdown/Elements/Workflow/WorkflowImage.vue b/client/src/components/Markdown/Sections/Elements/Workflow/WorkflowImage.vue
similarity index 100%
rename from client/src/components/Markdown/Elements/Workflow/WorkflowImage.vue
rename to client/src/components/Markdown/Sections/Elements/Workflow/WorkflowImage.vue
diff --git a/client/src/components/Markdown/Elements/Workflow/WorkflowLicense.vue b/client/src/components/Markdown/Sections/Elements/Workflow/WorkflowLicense.vue
similarity index 100%
rename from client/src/components/Markdown/Elements/Workflow/WorkflowLicense.vue
rename to client/src/components/Markdown/Sections/Elements/Workflow/WorkflowLicense.vue
diff --git a/client/src/components/Markdown/Elements/Workflow/WorkflowTree.vue b/client/src/components/Markdown/Sections/Elements/Workflow/WorkflowTree.vue
similarity index 100%
rename from client/src/components/Markdown/Elements/Workflow/WorkflowTree.vue
rename to client/src/components/Markdown/Sections/Elements/Workflow/WorkflowTree.vue
diff --git a/client/src/components/Markdown/Elements/handlesMappingJobs.ts b/client/src/components/Markdown/Sections/Elements/handlesMappingJobs.ts
similarity index 100%
rename from client/src/components/Markdown/Elements/handlesMappingJobs.ts
rename to client/src/components/Markdown/Sections/Elements/handlesMappingJobs.ts
diff --git a/client/src/components/Markdown/Sections/MarkdownDefault.vue b/client/src/components/Markdown/Sections/MarkdownDefault.vue
new file mode 100644
index 000000000000..2d3c81891741
--- /dev/null
+++ b/client/src/components/Markdown/Sections/MarkdownDefault.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import MarkdownIt from "markdown-it";
+//@ts-ignore
+import markdownItRegexp from "markdown-it-regexp";
+
+const mdNewline = markdownItRegexp(/<br>/, () => {
+    return "<div style='clear:both;'/><br>";
+});
+
+const md = MarkdownIt();
+md.use(mdNewline);
+
+const props = defineProps<{
+    content: string;
+}>();
+
+const renderedContent = computed(() => md.render(props.content));
+</script>
+
+<template>
+    <p class="text-justify m-2" v-html="renderedContent" />
+</template>
diff --git a/client/src/components/Markdown/MarkdownContainer.test.js b/client/src/components/Markdown/Sections/MarkdownGalaxy.test.js
similarity index 98%
rename from client/src/components/Markdown/MarkdownContainer.test.js
rename to client/src/components/Markdown/Sections/MarkdownGalaxy.test.js
index a40f1d810176..1a224dc7ab6f 100644
--- a/client/src/components/Markdown/MarkdownContainer.test.js
+++ b/client/src/components/Markdown/Sections/MarkdownGalaxy.test.js
@@ -5,7 +5,7 @@ import flushPromises from "flush-promises";
 import { getLocalVue } from "tests/jest/helpers";
 import { withPrefix } from "utils/redirect";
 
-import MountTarget from "./MarkdownContainer.vue";
+import MountTarget from "./MarkdownGalaxy.vue";
 
 // mock routes
 jest.mock("utils/redirect");
diff --git a/client/src/components/Markdown/MarkdownContainer.vue b/client/src/components/Markdown/Sections/MarkdownGalaxy.vue
similarity index 96%
rename from client/src/components/Markdown/MarkdownContainer.vue
rename to client/src/components/Markdown/Sections/MarkdownGalaxy.vue
index 72f487deb26e..8d6da96eef49 100644
--- a/client/src/components/Markdown/MarkdownContainer.vue
+++ b/client/src/components/Markdown/Sections/MarkdownGalaxy.vue
@@ -2,6 +2,7 @@
 import { computed, ref } from "vue";
 
 import { useConfig } from "@/composables/config";
+import { getArgs } from "@/components/Markdown/parse";
 
 import HistoryDatasetAsImage from "./Elements/HistoryDatasetAsImage.vue";
 import HistoryDatasetAsTable from "./Elements/HistoryDatasetAsTable.vue";
@@ -25,14 +26,10 @@ const { config, isConfigLoaded } = useConfig();
 
 const toggle = ref(false);
 const props = defineProps({
-    name: {
+    content: {
         type: String,
         required: true,
     },
-    args: {
-        type: Object,
-        required: true,
-    },
     datasets: {
         type: Object,
         default: null,
@@ -63,7 +60,11 @@ const props = defineProps({
     },
 });
 
-const isCollapsible = computed(() => props.args.collapse !== undefined);
+const parsedArgs = computed(() => getArgs(props.content));
+const args = computed(() => parsedArgs.value.args);
+const name = computed(() => parsedArgs.value.name);
+
+const isCollapsible = computed(() => args.value.collapse !== undefined);
 const isVisible = computed(() => !isCollapsible.value || toggle.value);
 
 function argToBoolean(args, name, booleanDefault) {
diff --git a/client/src/components/Markdown/Sections/MarkdownVega.vue b/client/src/components/Markdown/Sections/MarkdownVega.vue
new file mode 100644
index 000000000000..dbd55571e18a
--- /dev/null
+++ b/client/src/components/Markdown/Sections/MarkdownVega.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+const VegaWrapper = () => import("@/components/Common/VegaWrapper.vue");
+import { computed } from "vue";
+
+const props = defineProps<{
+    content: string;
+}>();
+
+const spec = computed(() => ({
+    ...JSON.parse(props.content),
+    width: "container",
+}));
+</script>
+
+<template>
+    <VegaWrapper :spec="spec" />
+</template>
diff --git a/client/src/components/Markdown/Sections/MarkdownVitessce.vue b/client/src/components/Markdown/Sections/MarkdownVitessce.vue
new file mode 100644
index 000000000000..4d79dc55ae6d
--- /dev/null
+++ b/client/src/components/Markdown/Sections/MarkdownVitessce.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import VisualizationWrapper from "@/components/Visualizations/VisualizationWrapper.vue";
+
+const props = defineProps<{
+    content: string;
+}>();
+
+const dataIncoming = computed(() => ({
+    visualization_config: {
+        dataset_content: { ...JSON.parse(props.content) },
+    },
+}));
+</script>
+
+<template>
+    <div>
+        <visualization-wrapper name="vitessce" :data-incoming="dataIncoming" height="500px" />
+    </div>
+</template>
diff --git a/client/src/components/Markdown/parse.test.js b/client/src/components/Markdown/parse.test.js
index 50b1ae99397d..33e5673cc072 100644
--- a/client/src/components/Markdown/parse.test.js
+++ b/client/src/components/Markdown/parse.test.js
@@ -1,4 +1,4 @@
-import { getArgs, replaceLabel, splitMarkdown } from "./parse";
+import { getArgs, parseMarkdown, replaceLabel, splitMarkdown } from "./parse";
 
 describe("parse.ts", () => {
     describe("getArgs", () => {
@@ -20,6 +20,23 @@ describe("parse.ts", () => {
         });
     });
 
+    describe("parseSections", () => {
+        it("strip leading whitespace by default", () => {
+            const sections = parseMarkdown(
+                "```galaxy\njob_metrics(job_id=THISFAKEID)\n```\n DEFAULT_CONTENT \n```special\n SPECIAL_CONTENT \n```\n MORE_DEFAULT_CONTENT"
+            );
+            expect(sections.length).toBe(4);
+            expect(sections[0].name).toBe("galaxy");
+            expect(sections[0].content).toBe("job_metrics(job_id=THISFAKEID)");
+            expect(sections[1].name).toBe("default");
+            expect(sections[1].content).toBe("DEFAULT_CONTENT");
+            expect(sections[2].name).toBe("special");
+            expect(sections[2].content).toBe("SPECIAL_CONTENT");
+            expect(sections[3].name).toBe("default");
+            expect(sections[3].content).toBe("MORE_DEFAULT_CONTENT");
+        });
+    });
+
     describe("splitMarkdown", () => {
         it("strip leading whitespace by default", () => {
             const { sections } = splitMarkdown("\n```galaxy\njob_metrics(job_id=THISFAKEID)\n```");
diff --git a/client/src/components/Markdown/parse.ts b/client/src/components/Markdown/parse.ts
index e001e1861a0d..58e664ada52f 100644
--- a/client/src/components/Markdown/parse.ts
+++ b/client/src/components/Markdown/parse.ts
@@ -13,6 +13,29 @@ type WorkflowLabelKind = "input" | "output" | "step";
 const SINGLE_QUOTE = "'";
 const DOUBLE_QUOTE = '"';
 
+export function parseMarkdown(input: string): { name: string; content: string }[] {
+    const result: { name: string; content: string }[] = [];
+    const lines = input.split("\n");
+    let currentName: string = "default";
+    let currentContent: string[] = [];
+    lines.forEach((line) => {
+        const sectionMatch = line.match(/^```(.*)$/);
+        if (sectionMatch) {
+            if (currentContent.length > 0) {
+                result.push({ name: currentName, content: currentContent.join("\n").trim() });
+            }
+            currentName = sectionMatch[1] || "default";
+            currentContent = [];
+        } else {
+            currentContent.push(line);
+        }
+    });
+    if (currentContent.length > 0) {
+        result.push({ name: currentName, content: currentContent.join("\n").trim() });
+    }
+    return result;
+}
+
 export function splitMarkdown(markdown: string, preserveWhitespace = false) {
     const sections: Section[] = [];
     const markdownErrors = [];
diff --git a/client/src/components/Visualizations/VisualizationWrapper.vue b/client/src/components/Visualizations/VisualizationWrapper.vue
new file mode 100644
index 000000000000..938d91123f79
--- /dev/null
+++ b/client/src/components/Visualizations/VisualizationWrapper.vue
@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import { onMounted, ref } from "vue";
+import { getAppRoot } from "@/onload/loadConfig";
+
+interface Props {
+    name: string;
+    dataIncoming: object;
+    height?: string;
+}
+
+const props = defineProps<Props>();
+
+const iframeRef = ref<HTMLIFrameElement | null>(null);
+
+onMounted(() => {
+    if (!props.name) {
+        console.error("Plugin name is required!");
+        return;
+    }
+
+    const pluginPath = `${getAppRoot()}static/plugins/visualizations/${props.name}/static/dist/index`;
+    const pluginSrc = `${pluginPath}.js`;
+    const pluginCss = `${pluginPath}.css`;
+
+    if (iframeRef.value) {
+        const iframe = iframeRef.value;
+        iframe.onload = () => {
+            const iframeDocument = iframe.contentDocument;
+            if (!iframeDocument) {
+                console.error("Failed to access iframe document.");
+                return;
+            }
+
+            // Create the container for the plugin
+            const container = iframeDocument.createElement("div");
+            container.id = "app";
+            container.setAttribute("data-incoming", JSON.stringify(props.dataIncoming));
+            iframeDocument.body.appendChild(container);
+
+            // Inject the script tag for the plugin
+            const script = iframeDocument.createElement("script");
+            script.type = "module";
+            script.src = pluginSrc;
+            iframeDocument.body.appendChild(script);
+
+            // Add a CSS link to the iframe document
+            const link = iframeDocument.createElement("link");
+            link.rel = "stylesheet";
+            link.href = pluginCss;
+            iframeDocument.head.appendChild(link);
+        };
+    }
+});
+</script>
+
+<template>
+    <iframe ref="iframeRef" class="visualization-wrapper" :style="{ height: props.height || '100%' }"> </iframe>
+</template>
+
+<style>
+.visualization-wrapper {
+    border: none;
+    width: 100%;
+}
+</style>
diff --git a/client/src/components/WorkflowInvocationState/WorkflowInvocationMetrics.vue b/client/src/components/WorkflowInvocationState/WorkflowInvocationMetrics.vue
index 91782651b709..db1c58667e5c 100644
--- a/client/src/components/WorkflowInvocationState/WorkflowInvocationMetrics.vue
+++ b/client/src/components/WorkflowInvocationState/WorkflowInvocationMetrics.vue
@@ -6,7 +6,7 @@ import { type ComputedRef } from "vue";
 import { type components, GalaxyApi } from "@/api";
 import { errorMessageAsString } from "@/utils/simple-error";
 
-const VegaWrapper = () => import("./VegaWrapper.vue");
+const VegaWrapper = () => import("@/components/Common/VegaWrapper.vue");
 
 const props = defineProps({
     invocationId: {
diff --git a/config/plugins/visualizations/vitessce/config/vitessce.xml b/config/plugins/visualizations/vitessce/config/vitessce.xml
new file mode 100644
index 000000000000..2c33e0102807
--- /dev/null
+++ b/config/plugins/visualizations/vitessce/config/vitessce.xml
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE visualization SYSTEM "../../visualization.dtd">
+<visualization name="Vitessce">
+    <description>Visual integration tool for exploration of spatial single cell experiments.</description>
+    <data_sources>
+        <data_source>
+            <model_class>HistoryDatasetAssociation</model_class>
+            <test test_attr="ext" result_type="datatype">json</test>
+            <to_param param_attr="id">dataset_id</to_param>
+        </data_source>
+    </data_sources>
+    <params>
+        <param type="dataset" var_name_in_template="hda" required="true">dataset_id</param>
+    </params>
+    <requirements>
+        <requirement type="npm" version="0.0.0" package="galaxy-vitessce"/>
+    </requirements>
+    <entry_point entry_point_type="script" src="dist/index.js" css="dist/index.css" />
+</visualization>
\ No newline at end of file
diff --git a/config/plugins/visualizations/vitessce/static/logo.png b/config/plugins/visualizations/vitessce/static/logo.png
new file mode 100644
index 000000000000..79cebd6025f4
Binary files /dev/null and b/config/plugins/visualizations/vitessce/static/logo.png differ