diff --git a/web-admin/src/features/embeds/CanvasEmbed.svelte b/web-admin/src/features/embeds/CanvasEmbed.svelte
index 29689e44ae7..b9873fa3682 100644
--- a/web-admin/src/features/embeds/CanvasEmbed.svelte
+++ b/web-admin/src/features/embeds/CanvasEmbed.svelte
@@ -9,8 +9,8 @@
   export let canvasName: string;
 
   // TODO: Remove later
-  let columns = 12;
-  let gap = 4;
+  let columns = 20;
+  let gap = 1;
   $: canvasQuery = useResource(instanceId, canvasName, ResourceKind.Canvas);
 
   $: canvas = $canvasQuery.data?.canvas.spec;
diff --git a/web-common/src/features/canvas/Canvas.svelte b/web-common/src/features/canvas/Canvas.svelte
index 65c2b072e17..0636e6dd481 100644
--- a/web-common/src/features/canvas/Canvas.svelte
+++ b/web-common/src/features/canvas/Canvas.svelte
@@ -2,11 +2,13 @@
   import CanvasDashboardPreview from "@rilldata/web-common/features/canvas/CanvasDashboardPreview.svelte";
   import { getCanvasStateManagers } from "@rilldata/web-common/features/canvas/state-managers/state-managers";
   import type { Vector } from "@rilldata/web-common/features/canvas/types";
+  import type { FileArtifact } from "@rilldata/web-common/features/entity-management/file-artifact";
   import type { V1CanvasSpec } from "@rilldata/web-common/runtime-client";
   import { parseDocument } from "yaml";
 
-  const { canvasStore, validSpecStore, fileArtifact } =
-    getCanvasStateManagers();
+  export let fileArtifact: FileArtifact;
+
+  const { canvasStore, validSpecStore } = getCanvasStateManagers();
   $: selectedIndex = $canvasStore?.selectedComponentIndex;
 
   let showGrid = true;
@@ -25,7 +27,7 @@
     updateLocalContent,
     localContent,
     remoteContent,
-  } = $fileArtifact);
+  } = fileArtifact);
 
   $: spec = structuredClone($validSpecStore ?? spec);
 
diff --git a/web-common/src/features/canvas/CanvasDashboardEmbed.svelte b/web-common/src/features/canvas/CanvasDashboardEmbed.svelte
index ad754dcc587..3e804c5d7c9 100644
--- a/web-common/src/features/canvas/CanvasDashboardEmbed.svelte
+++ b/web-common/src/features/canvas/CanvasDashboardEmbed.svelte
@@ -1,20 +1,16 @@
 <script lang="ts">
   import { type V1CanvasItem } from "@rilldata/web-common/runtime-client";
   import { runtime } from "@rilldata/web-common/runtime-client/runtime-store";
-  import { setContext } from "svelte";
   import Component from "./Component.svelte";
   import * as defaults from "./constants";
   import DashboardWrapper from "./DashboardWrapper.svelte";
 
-  export let canvasName: string;
   export let columns = 20;
   export let items: V1CanvasItem[];
-  export let gap = 4;
+  export let gap = 1;
   export let chartView = false;
 
   let contentRect: DOMRectReadOnly = new DOMRectReadOnly(0, 0, 0, 0);
-  setContext("rill::canvas:name", canvasName);
-
   $: instanceId = $runtime.instanceId;
 
   const dashboardWidth = chartView
diff --git a/web-common/src/features/canvas/components/BaseCanvasComponent.ts b/web-common/src/features/canvas/components/BaseCanvasComponent.ts
index 02a0dc97347..0d9f4439128 100644
--- a/web-common/src/features/canvas/components/BaseCanvasComponent.ts
+++ b/web-common/src/features/canvas/components/BaseCanvasComponent.ts
@@ -1,3 +1,4 @@
+import type { ChartType } from "@rilldata/web-common/features/canvas/components/charts/types";
 import type {
   CanvasComponent,
   ComponentSize,
@@ -61,4 +62,20 @@ export abstract class BaseCanvasComponent<T> implements CanvasComponent<T> {
     }
     this.specStore.set(newSpec);
   }
+
+  async updateChartType(key: ChartType) {
+    const currentSpec = get(this.specStore);
+    const parentSpec = { [key]: currentSpec };
+    const parentPath = this.pathInYAML.slice(0, -1);
+
+    const parseDocumentStore = getParsedDocument(this.fileArtifact);
+    const parsedDocument = get(parseDocumentStore);
+
+    const { saveContent } = this.fileArtifact;
+
+    parsedDocument.setIn(parentPath, parentSpec);
+
+    // Save the updated document
+    await saveContent(parsedDocument.toString());
+  }
 }
diff --git a/web-common/src/features/canvas/components/charts/types.ts b/web-common/src/features/canvas/components/charts/types.ts
index 4d8a08cdc1f..84e54474cbe 100644
--- a/web-common/src/features/canvas/components/charts/types.ts
+++ b/web-common/src/features/canvas/components/charts/types.ts
@@ -1,3 +1,5 @@
+import type { ComponentType, SvelteComponent } from "svelte";
+
 export interface FieldConfig {
   field: string;
   label?: string;
@@ -17,3 +19,9 @@ export interface ChartConfig {
 }
 
 export type ChartType = "line_chart" | "bar_chart" | "stacked_bar";
+
+export interface ChartMetadata {
+  id: ChartType;
+  icon: ComponentType<SvelteComponent>;
+  title: string;
+}
diff --git a/web-common/src/features/canvas/components/charts/util.ts b/web-common/src/features/canvas/components/charts/util.ts
index eb6ce35569d..70afe11183f 100644
--- a/web-common/src/features/canvas/components/charts/util.ts
+++ b/web-common/src/features/canvas/components/charts/util.ts
@@ -1,7 +1,11 @@
+import BarChart from "@rilldata/web-common/components/icons/BarChart.svelte";
+import LineChart from "@rilldata/web-common/components/icons/LineChart.svelte";
+import StackedBar from "@rilldata/web-common/components/icons/StackedBar.svelte";
 import { generateVLBarChartSpec } from "./bar-chart/spec";
 import { generateVLLineChartSpec } from "./line-chart/spec";
 import { generateVLStackedBarChartSpec } from "./stacked-bar/spec";
-import type { ChartConfig, ChartType } from "./types";
+
+import type { ChartConfig, ChartMetadata, ChartType } from "./types";
 
 export function generateSpec(chartType: ChartType, chartConfig: ChartConfig) {
   switch (chartType) {
@@ -15,3 +19,9 @@ export function generateSpec(chartType: ChartType, chartConfig: ChartConfig) {
       return generateVLBarChartSpec(chartConfig);
   }
 }
+
+export const chartMetadata: ChartMetadata[] = [
+  { id: "line_chart", title: "Line", icon: LineChart },
+  { id: "bar_chart", title: "Bar", icon: BarChart },
+  { id: "stacked_bar", title: "Stacked Bar", icon: StackedBar },
+];
diff --git a/web-common/src/features/canvas/components/kpi/KPI.svelte b/web-common/src/features/canvas/components/kpi/KPI.svelte
index 1761417d937..a003f99a8db 100644
--- a/web-common/src/features/canvas/components/kpi/KPI.svelte
+++ b/web-common/src/features/canvas/components/kpi/KPI.svelte
@@ -38,6 +38,7 @@
     metrics_view: metricsViewName,
     measure: measureName,
     time_range: timeRange,
+    sparkline: showSparkline,
     comparison_range: comparisonTimeRange,
   } = kpiProperties);
 
@@ -160,7 +161,7 @@
       {/if}
     </div>
 
-    {#if sparkData.length}
+    {#if showSparkline && sparkData.length}
       <SimpleDataGraphic
         height={containerHeight - 90}
         width={containerWidth - 16}
diff --git a/web-common/src/features/canvas/components/kpi/index.ts b/web-common/src/features/canvas/components/kpi/index.ts
index 48a937c438a..54d1417bb59 100644
--- a/web-common/src/features/canvas/components/kpi/index.ts
+++ b/web-common/src/features/canvas/components/kpi/index.ts
@@ -10,7 +10,7 @@ export interface KPISpec extends ComponentCommonProperties {
   metrics_view: string;
   measure: string;
   time_range: string;
-  show_sparkline?: boolean;
+  sparkline?: boolean;
   comparison_range?: string;
 }
 
@@ -27,7 +27,7 @@ export class KPIComponent extends BaseCanvasComponent<KPISpec> {
       metrics_view: "",
       measure: "",
       time_range: "",
-      // show_sparkline: false,
+      sparkline: true,
     };
     super(fileArtifact, path, defaultSpec, initialSpec);
   }
@@ -42,9 +42,9 @@ export class KPIComponent extends BaseCanvasComponent<KPISpec> {
     return {
       metrics_view: { type: "metrics", label: "Metrics view" },
       measure: { type: "measure", label: "Measure" },
+      sparkline: { type: "boolean", required: false, label: "Sparkline" },
       time_range: { type: "rill_time", label: "Time Range" },
       comparison_range: { type: "rill_time", label: "Comparison Range" },
-      show_sparkline: { type: "boolean", required: false, label: "Sparkline" },
       ...commonOptions,
     };
   }
diff --git a/web-common/src/features/canvas/inspector/ChartTypeSelector.svelte b/web-common/src/features/canvas/inspector/ChartTypeSelector.svelte
new file mode 100644
index 00000000000..119b11786cd
--- /dev/null
+++ b/web-common/src/features/canvas/inspector/ChartTypeSelector.svelte
@@ -0,0 +1,55 @@
+<script lang="ts">
+  import { Button } from "@rilldata/web-common/components/button";
+  import InputLabel from "@rilldata/web-common/components/forms/InputLabel.svelte";
+
+  import Tooltip from "@rilldata/web-common/components/tooltip/Tooltip.svelte";
+  import TooltipContent from "@rilldata/web-common/components/tooltip/TooltipContent.svelte";
+  import type { ChartMetadata } from "@rilldata/web-common/features/canvas/components/charts/types";
+  import { chartMetadata } from "@rilldata/web-common/features/canvas/components/charts/util";
+  import { type CanvasComponentType } from "@rilldata/web-common/features/canvas/components/types";
+  import {
+    isChartComponentType,
+    type CanvasComponentObj,
+  } from "@rilldata/web-common/features/canvas/components/util";
+
+  export let componentType: CanvasComponentType;
+  export let component: CanvasComponentObj;
+
+  async function selectChartType(chartType: ChartMetadata) {
+    component.updateChartType(chartType.id);
+  }
+</script>
+
+{#if isChartComponentType(componentType)}
+  <div class="section">
+    <InputLabel label="Chart type" id="chart-components" />
+    <div class="chart-icons">
+      {#each chartMetadata as chart}
+        <Tooltip distance={8} location="right">
+          <Button
+            square
+            small
+            type="secondary"
+            selected={componentType === chart.id}
+            on:click={() => selectChartType(chart)}
+          >
+            <svelte:component this={chart.icon} size="20px" />
+          </Button>
+          <TooltipContent slot="tooltip-content">
+            {chart.title}
+          </TooltipContent>
+        </Tooltip>
+      {/each}
+    </div>
+  </div>
+{/if}
+
+<style lang="postcss">
+  .section {
+    @apply flex flex-col gap-y-2;
+  }
+
+  .chart-icons {
+    @apply flex border-2 px-2 py-1 gap-x-4;
+  }
+</style>
diff --git a/web-common/src/features/canvas/inspector/ComponentInputs.svelte b/web-common/src/features/canvas/inspector/ComponentInputs.svelte
index 4d7805851d3..e3dac8c95e6 100644
--- a/web-common/src/features/canvas/inspector/ComponentInputs.svelte
+++ b/web-common/src/features/canvas/inspector/ComponentInputs.svelte
@@ -2,11 +2,23 @@
 Maps the input params for a component to a form input.
 -->
 
+<!-- 
+TODOs
+
+Do not overide params to bind values
+Align switch
+Handle optional fields and defaults properly
+-->
+
 <script lang="ts">
   import Input from "@rilldata/web-common/components/forms/Input.svelte";
+  import InputLabel from "@rilldata/web-common/components/forms/InputLabel.svelte";
+  import Switch from "@rilldata/web-common/components/forms/Switch.svelte";
   import { getComponentObj } from "@rilldata/web-common/features/canvas/components/util";
+  import ChartTypeSelector from "@rilldata/web-common/features/canvas/inspector/ChartTypeSelector.svelte";
   import MetricSelectorDropdown from "@rilldata/web-common/features/canvas/inspector/MetricSelectorDropdown.svelte";
   import { getCanvasStateManagers } from "@rilldata/web-common/features/canvas/state-managers/state-managers";
+  import type { FileArtifact } from "@rilldata/web-common/features/entity-management/file-artifact";
   import type { V1ComponentSpecRendererProperties } from "@rilldata/web-common/runtime-client";
   import type { CanvasComponentType } from "../components/types";
   import FieldSelectorDropdown from "./FieldSelectorDropdown.svelte";
@@ -14,15 +26,16 @@ Maps the input params for a component to a form input.
 
   export let componentType: CanvasComponentType;
   export let paramValues: V1ComponentSpecRendererProperties;
+  export let fileArtifact: FileArtifact;
 
-  const { fileArtifact, canvasStore } = getCanvasStateManagers();
+  const { canvasStore } = getCanvasStateManagers();
 
   $: selectedComponentIndex = $canvasStore?.selectedComponentIndex || 0;
 
   $: path = ["items", selectedComponentIndex, "component", componentType];
 
   $: component = getComponentObj(
-    $fileArtifact,
+    fileArtifact,
     path,
     componentType,
     paramValues,
@@ -34,6 +47,7 @@ Maps the input params for a component to a form input.
   $: metricsView = "metrics_view" in $spec ? $spec.metrics_view : null;
 </script>
 
+<ChartTypeSelector {component} {componentType} />
 <div>
   {#each Object.entries(inputParams) as [key, config]}
     {#if config.showInUI !== false}
@@ -66,6 +80,21 @@ Maps the input params for a component to a form input.
             component.updateProperty(key, field);
           }}
         />
+      {:else if config.type === "boolean"}
+        <div class="flex py-2 justify-between">
+          <InputLabel
+            label={config?.label || key}
+            optional={config.required === false}
+            id={key}
+          />
+          <Switch
+            bind:checked={paramValues[key]}
+            on:click={async () => {
+              component.updateProperty(key, paramValues[key]);
+            }}
+            small
+          ></Switch>
+        </div>
       {:else if config.type === "textArea"}
         <textarea
           class="w-full p-2 border border-gray-300 rounded-sm"
diff --git a/web-common/src/features/canvas/inspector/ComponentsEditor.svelte b/web-common/src/features/canvas/inspector/ComponentsEditor.svelte
index b02db6f08e1..b4996fd4b9f 100644
--- a/web-common/src/features/canvas/inspector/ComponentsEditor.svelte
+++ b/web-common/src/features/canvas/inspector/ComponentsEditor.svelte
@@ -1,42 +1,16 @@
 <script lang="ts">
-  import { Button } from "@rilldata/web-common/components/button";
-  import InputLabel from "@rilldata/web-common/components/forms/InputLabel.svelte";
-  import BarChart from "@rilldata/web-common/components/icons/BarChart.svelte";
-  import LineChart from "@rilldata/web-common/components/icons/LineChart.svelte";
-  import StackedBar from "@rilldata/web-common/components/icons/StackedBar.svelte";
-  import Tooltip from "@rilldata/web-common/components/tooltip/Tooltip.svelte";
-  import TooltipContent from "@rilldata/web-common/components/tooltip/TooltipContent.svelte";
-  import {
-    isCanvasComponentType,
-    isChartComponentType,
-  } from "@rilldata/web-common/features/canvas/components/util";
+  import { isCanvasComponentType } from "@rilldata/web-common/features/canvas/components/util";
   import ComponentInputs from "@rilldata/web-common/features/canvas/inspector/ComponentInputs.svelte";
+  import type { FileArtifact } from "@rilldata/web-common/features/entity-management/file-artifact";
   import {
     ResourceKind,
     useResourceV2,
   } from "@rilldata/web-common/features/entity-management/resource-selectors";
   import SidebarWrapper from "@rilldata/web-common/features/visual-editing/SidebarWrapper.svelte";
   import { runtime } from "@rilldata/web-common/runtime-client/runtime-store";
-  import { createEventDispatcher } from "svelte";
 
   export let selectedComponentName: string;
-
-  const dispatch = createEventDispatcher();
-
-  const chartTypes = [
-    { id: "bar", title: "Bar", icon: BarChart },
-    { id: "stacked-bar", title: "Stacked Bar", icon: StackedBar },
-    { id: "line", title: "Line", icon: LineChart },
-  ];
-
-  // const coreComponents = [
-  //   { id: "kpi", title: "KPI", icon: ArrowUp01 },
-  //   { id: "table", title: "Table", icon: Table },
-  //   { id: "text", title: "Text", icon: Text },
-  //   { id: "leaderboard", title: "Leaderboard", icon: List },
-  // ];
-
-  let selectedChartType;
+  export let fileArtifact: FileArtifact;
 
   // TODO: Avoid resource query if possible
   $: resourceQuery = useResourceV2(
@@ -49,45 +23,13 @@
 
   $: ({ renderer, rendererProperties } =
     componentResource?.component?.spec ?? {});
-
-  function selectChartType(chartType) {
-    selectedChartType = chartType.id;
-    dispatch("select", chartType);
-  }
 </script>
 
 <SidebarWrapper title="Edit {renderer || 'component'} ">
   <p class="text-slate-500 text-sm">Changes below will be auto-saved.</p>
-  {#if isChartComponentType(renderer)}
-    <div class="section">
-      <InputLabel
-        label="Charts"
-        id="chart-components"
-        hint="Chose a chart component to add to your canvas"
-      />
-      <div class="chart-icons">
-        {#each chartTypes as chart}
-          <Tooltip distance={8} location="right">
-            <Button
-              square
-              small
-              type="secondary"
-              selected={selectedChartType === chart.id}
-              on:click={() => selectChartType(chart)}
-            >
-              <svelte:component this={chart.icon} size="20px" />
-            </Button>
-            <TooltipContent slot="tooltip-content">
-              {chart.title}
-            </TooltipContent>
-          </Tooltip>
-        {/each}
-      </div>
-    </div>
-  {/if}
-
   {#if isCanvasComponentType(renderer) && rendererProperties}
     <ComponentInputs
+      {fileArtifact}
       componentType={renderer}
       paramValues={rendererProperties}
     />
@@ -97,13 +39,3 @@
     </div>
   {/if}
 </SidebarWrapper>
-
-<style lang="postcss">
-  .section {
-    @apply flex flex-col gap-y-2;
-  }
-
-  .chart-icons {
-    @apply flex gap-x-2;
-  }
-</style>
diff --git a/web-common/src/features/canvas/inspector/PageEditor.svelte b/web-common/src/features/canvas/inspector/PageEditor.svelte
index 57523b15797..8fdb6c76ee1 100644
--- a/web-common/src/features/canvas/inspector/PageEditor.svelte
+++ b/web-common/src/features/canvas/inspector/PageEditor.svelte
@@ -3,6 +3,7 @@
   import { DASHBOARD_WIDTH } from "@rilldata/web-common/features/canvas/constants";
   import { getParsedDocument } from "@rilldata/web-common/features/canvas/inspector/selectors";
   import { getCanvasStateManagers } from "@rilldata/web-common/features/canvas/state-managers/state-managers";
+  import type { FileArtifact } from "@rilldata/web-common/features/entity-management/file-artifact";
   import {
     ResourceKind,
     useFilteredResources,
@@ -16,11 +17,13 @@
     newRecord: Record<string, unknown>,
     removeProperties?: Array<string | string[]>,
   ) => Promise<void>;
-  const { fileArtifact, validSpecStore } = getCanvasStateManagers();
+  export let fileArtifact: FileArtifact;
+
+  const { validSpecStore } = getCanvasStateManagers();
 
   $: ({ instanceId } = $runtime);
 
-  $: parsedDocument = getParsedDocument($fileArtifact);
+  $: parsedDocument = getParsedDocument(fileArtifact);
 
   $: rawTitle = $parsedDocument.get("title");
   $: rawDisplayName = $parsedDocument.get("display_name");
diff --git a/web-common/src/features/canvas/inspector/PositionalFieldConfig.svelte b/web-common/src/features/canvas/inspector/PositionalFieldConfig.svelte
index 69efa2e41fb..c43da48ed6c 100644
--- a/web-common/src/features/canvas/inspector/PositionalFieldConfig.svelte
+++ b/web-common/src/features/canvas/inspector/PositionalFieldConfig.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-  import Input from "@rilldata/web-common/components/forms/Input.svelte";
   import type { FieldConfig } from "../components/charts/types";
   import FieldSelectorDropdown from "./FieldSelectorDropdown.svelte";
 
@@ -32,24 +31,4 @@
       updateFieldConfig("field", field);
     }}
   />
-  <Input
-    inputType="text"
-    capitalizeLabel={false}
-    textClass="text-sm"
-    label={`${config.label || key} Label`}
-    bind:value={value.label}
-    onBlur={async () => {
-      updateFieldConfig("label", value.label);
-    }}
-  />
-  <Input
-    inputType="text"
-    capitalizeLabel={false}
-    textClass="text-sm"
-    label={`${config.label || key} Format`}
-    bind:value={value.format}
-    onBlur={async () => {
-      updateFieldConfig("format", value.format);
-    }}
-  />
 </div>
diff --git a/web-common/src/features/canvas/inspector/VisualCanvasEditing.svelte b/web-common/src/features/canvas/inspector/VisualCanvasEditing.svelte
index 2d07a4678a7..a9c0019878b 100644
--- a/web-common/src/features/canvas/inspector/VisualCanvasEditing.svelte
+++ b/web-common/src/features/canvas/inspector/VisualCanvasEditing.svelte
@@ -3,13 +3,15 @@
   import ComponentsEditor from "@rilldata/web-common/features/canvas/inspector/ComponentsEditor.svelte";
   import PageEditor from "@rilldata/web-common/features/canvas/inspector/PageEditor.svelte";
   import { getCanvasStateManagers } from "@rilldata/web-common/features/canvas/state-managers/state-managers";
+  import type { FileArtifact } from "@rilldata/web-common/features/entity-management/file-artifact";
   import { Inspector } from "@rilldata/web-common/layout/workspace";
   import { parseDocument } from "yaml";
 
-  const { validSpecStore, canvasStore, fileArtifact } =
-    getCanvasStateManagers();
+  export let fileArtifact: FileArtifact;
 
-  $: ({ localContent, remoteContent, saveContent, path } = $fileArtifact);
+  const { validSpecStore, canvasStore } = getCanvasStateManagers();
+
+  $: ({ localContent, remoteContent, saveContent, path } = fileArtifact);
 
   $: parsedDocument = parseDocument($localContent ?? $remoteContent ?? "");
   $: selectedComponentIndex = $canvasStore.selectedComponentIndex;
@@ -57,8 +59,8 @@
 
 <Inspector filePath={path}>
   {#if selectedComponentName}
-    <ComponentsEditor {selectedComponentName} />
+    <ComponentsEditor {fileArtifact} {selectedComponentName} />
   {:else}
-    <PageEditor {updateProperties} />
+    <PageEditor {fileArtifact} {updateProperties} />
   {/if}
 </Inspector>
diff --git a/web-common/src/features/canvas/state-managers/StateManagersProvider.svelte b/web-common/src/features/canvas/state-managers/StateManagersProvider.svelte
index f05ef777fbb..03c4bbcb4ad 100644
--- a/web-common/src/features/canvas/state-managers/StateManagersProvider.svelte
+++ b/web-common/src/features/canvas/state-managers/StateManagersProvider.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-  import type { FileArtifact } from "@rilldata/web-common/features/entity-management/file-artifact";
   import type { V1Canvas } from "@rilldata/web-common/runtime-client";
   import { useQueryClient } from "@tanstack/svelte-query";
   import { setContext } from "svelte";
@@ -7,14 +6,12 @@
 
   export let canvasName: string;
   export let canvasResource: V1Canvas;
-  export let fileArtifact: FileArtifact;
 
   const queryClient = useQueryClient();
   const stateManagers = createStateManagers({
     queryClient,
     canvasName,
     canvasResource,
-    fileArtifact,
   });
 
   setContext(DEFAULT_STORE_KEY, stateManagers);
diff --git a/web-common/src/features/canvas/state-managers/state-managers.ts b/web-common/src/features/canvas/state-managers/state-managers.ts
index f2bb23159d9..ab0ef855e7b 100644
--- a/web-common/src/features/canvas/state-managers/state-managers.ts
+++ b/web-common/src/features/canvas/state-managers/state-managers.ts
@@ -1,4 +1,3 @@
-import type { FileArtifact } from "@rilldata/web-common/features/entity-management/file-artifact";
 import {
   type V1Canvas,
   type V1CanvasSpec,
@@ -23,7 +22,6 @@ export type StateManagers = {
   runtime: Writable<Runtime>;
   canvasName: Writable<string>;
   canvasStore: Readable<CanvasEntity>;
-  fileArtifact: Readable<FileArtifact>;
   validSpecStore: Readable<V1CanvasSpec>;
   updateCanvas: CanvasCallbackExecutor;
   queryClient: QueryClient;
@@ -39,16 +37,13 @@ export function createStateManagers({
   queryClient,
   canvasName,
   canvasResource,
-  fileArtifact,
 }: {
   queryClient: QueryClient;
   canvasName: string;
   canvasResource: V1Canvas;
-  fileArtifact: FileArtifact;
 }): StateManagers {
   const canvasNameStore = writable(canvasName);
 
-  const fileArtifactStore = readable(fileArtifact);
   const canvasStore: Readable<CanvasEntity> = derived(
     [canvasNameStore],
     ([name], set) => {
@@ -67,7 +62,6 @@ export function createStateManagers({
   return {
     runtime: runtime,
     canvasName: canvasNameStore,
-    fileArtifact: fileArtifactStore,
     canvasStore,
     validSpecStore,
     queryClient,
diff --git a/web-common/src/features/workspaces/CanvasWorkspace.svelte b/web-common/src/features/workspaces/CanvasWorkspace.svelte
index 4733a3519a6..fa2e5ab4e2f 100644
--- a/web-common/src/features/workspaces/CanvasWorkspace.svelte
+++ b/web-common/src/features/workspaces/CanvasWorkspace.svelte
@@ -111,7 +111,7 @@
 
 {#if canvasResource && fileArtifact}
   {#key canvasName}
-    <StateManagersProvider {canvasName} {canvasResource} {fileArtifact}>
+    <StateManagersProvider {canvasName} {canvasResource}>
       <CanvasStateProvider>
         <CanvasThemeProvider>
           <WorkspaceContainer>
@@ -125,7 +125,7 @@
             >
               <div class="flex gap-x-2" slot="cta">
                 <PreviewButton
-                  href="/custom/{canvasName}"
+                  href="/canvas/{canvasName}"
                   disabled={allErrors.length > 0 || resourceIsReconciling}
                   reconciling={resourceIsReconciling}
                 />
@@ -159,12 +159,12 @@
                     statusCode={404}
                   />
                 {:else if canvasResource}
-                  <Canvas />
+                  <Canvas {fileArtifact} />
                 {/if}
               {/if}
             </WorkspaceEditorContainer>
 
-            <VisualCanvasEditing slot="inspector" />
+            <VisualCanvasEditing {fileArtifact} slot="inspector" />
           </WorkspaceContainer>
         </CanvasThemeProvider>
       </CanvasStateProvider>
diff --git a/web-local/src/routes/(viz)/canvas/[name]/+page.svelte b/web-local/src/routes/(viz)/canvas/[name]/+page.svelte
new file mode 100644
index 00000000000..170ab852401
--- /dev/null
+++ b/web-local/src/routes/(viz)/canvas/[name]/+page.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+  import CanvasDashboardEmbed from "@rilldata/web-common/features/canvas/CanvasDashboardEmbed.svelte";
+  import CanvasThemeProvider from "@rilldata/web-common/features/canvas/CanvasThemeProvider.svelte";
+  import StateManagersProvider from "@rilldata/web-common/features/canvas/state-managers/StateManagersProvider.svelte";
+  import CanvasStateProvider from "@rilldata/web-common/features/canvas/stores/CanvasStateProvider.svelte";
+  import type { PageData } from "./$types";
+
+  export let data: PageData;
+
+  let columns = 20;
+  let gap = 1;
+  $: canvasName = data.dashboardName;
+</script>
+
+<StateManagersProvider {canvasName} canvasResource={data.dashboard}>
+  <CanvasStateProvider>
+    <CanvasThemeProvider>
+      <CanvasDashboardEmbed
+        items={data.dashboard.spec?.items || []}
+        {columns}
+        {gap}
+      />
+    </CanvasThemeProvider>
+  </CanvasStateProvider>
+</StateManagersProvider>
diff --git a/web-local/src/routes/(viz)/custom/[name]/+page.ts b/web-local/src/routes/(viz)/canvas/[name]/+page.ts
similarity index 96%
rename from web-local/src/routes/(viz)/custom/[name]/+page.ts
rename to web-local/src/routes/(viz)/canvas/[name]/+page.ts
index 58fc4407176..d88b2f7fa98 100644
--- a/web-local/src/routes/(viz)/custom/[name]/+page.ts
+++ b/web-local/src/routes/(viz)/canvas/[name]/+page.ts
@@ -44,9 +44,7 @@ export const load = async ({ params, depends }) => {
 
     return {
       dashboardName,
-      dashboard: {
-        ...dashboard.spec,
-      },
+      dashboard,
     };
   } catch (e) {
     console.error(e);
diff --git a/web-local/src/routes/(viz)/custom/[name]/+page.svelte b/web-local/src/routes/(viz)/custom/[name]/+page.svelte
deleted file mode 100644
index 4a4e85f1f6d..00000000000
--- a/web-local/src/routes/(viz)/custom/[name]/+page.svelte
+++ /dev/null
@@ -1,16 +0,0 @@
-<script lang="ts">
-  import CanvasDashboardEmbed from "@rilldata/web-common/features/canvas/CanvasDashboardEmbed.svelte";
-  import type { PageData } from "./$types";
-
-  export let data: PageData;
-
-  $: ({ items = [], columns, gap, variables } = data.dashboard);
-</script>
-
-<CanvasDashboardEmbed
-  canvasName={data.dashboardName}
-  {items}
-  {columns}
-  {gap}
-  {variables}
-/>