diff --git a/.changeset/bumpy-breads-rhyme.md b/.changeset/bumpy-breads-rhyme.md
new file mode 100644
index 000000000..13f10d948
--- /dev/null
+++ b/.changeset/bumpy-breads-rhyme.md
@@ -0,0 +1,5 @@
+---
+'layerchart': patch
+---
+
+fix(GeoPath): Do not register with hit canavs unless pointer events (onclick, onpointermove, etc) or tooltipContext are defined
diff --git a/.changeset/huge-boats-fix.md b/.changeset/huge-boats-fix.md
new file mode 100644
index 000000000..b9c90cb80
--- /dev/null
+++ b/.changeset/huge-boats-fix.md
@@ -0,0 +1,5 @@
+---
+'layerchart': patch
+---
+
+docs: Document each component's context support (svg, canvas, html) with interactive toggle
diff --git a/.changeset/ninety-ghosts-taste.md b/.changeset/ninety-ghosts-taste.md
new file mode 100644
index 000000000..a9770cbda
--- /dev/null
+++ b/.changeset/ninety-ghosts-taste.md
@@ -0,0 +1,5 @@
+---
+'layerchart': patch
+---
+
+breaking(Blur): Remove children snippet props (not needed and easier to support canvas in the future)
diff --git a/.changeset/pink-flies-worry.md b/.changeset/pink-flies-worry.md
new file mode 100644
index 000000000..2d6e97a4c
--- /dev/null
+++ b/.changeset/pink-flies-worry.md
@@ -0,0 +1,5 @@
+---
+'layerchart': patch
+---
+
+fix(Calendar|MonthPath): Support canvas by using `Spline` instead of `path`
diff --git a/.changeset/tangy-lies-strive.md b/.changeset/tangy-lies-strive.md
new file mode 100644
index 000000000..dccb7e7a9
--- /dev/null
+++ b/.changeset/tangy-lies-strive.md
@@ -0,0 +1,5 @@
+---
+'layerchart': patch
+---
+
+breaking(Spline): Rename `splineRef` to `pathRef`
diff --git a/packages/layerchart/src/app.d.ts b/packages/layerchart/src/app.d.ts
index 1fd2a0b70..95b4c707b 100644
--- a/packages/layerchart/src/app.d.ts
+++ b/packages/layerchart/src/app.d.ts
@@ -19,6 +19,7 @@ declare namespace App {
       hideUsage?: boolean;
       hideTableOfContents?: boolean;
       status?: string;
+      supportedContexts?: Array<'svg' | 'canvas' | 'html'>;
     };
   }
 
diff --git a/packages/layerchart/src/lib/components/Arc.svelte b/packages/layerchart/src/lib/components/Arc.svelte
index 3a43dab89..4c285e649 100644
--- a/packages/layerchart/src/lib/components/Arc.svelte
+++ b/packages/layerchart/src/lib/components/Arc.svelte
@@ -401,13 +401,13 @@
   <Spline
     pathData={trackArc()}
     stroke="none"
-    bind:splineRef={trackRef}
+    bind:pathRef={trackRef}
     {...extractLayerProps(track, 'arc-track')}
   />
 {/if}
 
 <Spline
-  bind:splineRef={ref}
+  bind:pathRef={ref}
   pathData={arc()}
   transform="translate({xOffset}, {yOffset})"
   {fill}
diff --git a/packages/layerchart/src/lib/components/Blur.svelte b/packages/layerchart/src/lib/components/Blur.svelte
index ce8abf54a..fd76b7f31 100644
--- a/packages/layerchart/src/lib/components/Blur.svelte
+++ b/packages/layerchart/src/lib/components/Blur.svelte
@@ -14,9 +14,9 @@
 
     /**
      * The default children snippet which provides
-     * the id and url for the filter.
+     * the id for the filter.
      */
-    children?: Snippet<[{ id: string; url: string }]>;
+    children?: Snippet;
   };
 </script>
 
@@ -42,7 +42,9 @@
 
   {#if children}
     <g filter="url(#{id})" class={layerClass('blur-g')}>
-      {@render children({ id, url: `url(#${id})` })}
+      {@render children()}
     </g>
   {/if}
+{:else if children}
+  {@render children()}
 {/if}
diff --git a/packages/layerchart/src/lib/components/Connector.svelte b/packages/layerchart/src/lib/components/Connector.svelte
index 017d03c2d..9d47fc1b5 100644
--- a/packages/layerchart/src/lib/components/Connector.svelte
+++ b/packages/layerchart/src/lib/components/Connector.svelte
@@ -82,7 +82,7 @@
     type = 'rounded',
     radius = 20,
     curve = curveLinear,
-    splineRef = $bindable(),
+    pathRef = $bindable(),
     pathData: pathDataProp,
     marker,
     markerStart,
@@ -137,7 +137,7 @@
 
 <Spline
   pathData={motionPath.current}
-  bind:splineRef
+  bind:pathRef
   marker-start={markerStartId ? `url(#${markerStartId})` : undefined}
   marker-mid={markerMidId ? `url(#${markerMidId})` : undefined}
   marker-end={markerEndId ? `url(#${markerEndId})` : undefined}
diff --git a/packages/layerchart/src/lib/components/GeoPath.svelte b/packages/layerchart/src/lib/components/GeoPath.svelte
index dccb57e30..457840a66 100644
--- a/packages/layerchart/src/lib/components/GeoPath.svelte
+++ b/packages/layerchart/src/lib/components/GeoPath.svelte
@@ -157,10 +157,11 @@
       name: 'GeoPath',
       render,
       events: {
-        click: _onClick,
-        pointerenter: _onPointerEnter,
-        pointermove: _onPointerMove,
-        pointerleave: _onPointerLeave,
+        // Only register events if they are defined (so they are not registered with hit canvas unnecessarily)
+        click: onclick ? _onClick : undefined,
+        pointerenter: restProps.onpointerenter || tooltipContext ? _onPointerEnter : undefined,
+        pointermove: restProps.onpointermove || tooltipContext ? _onPointerMove : undefined,
+        pointerleave: restProps.onpointerleave || tooltipContext ? _onPointerLeave : undefined,
         pointerdown: restProps.onpointerdown,
         touchmove: restProps.ontouchmove,
       },
diff --git a/packages/layerchart/src/lib/components/GeoPoint.svelte b/packages/layerchart/src/lib/components/GeoPoint.svelte
index 451248d80..b3444e2a2 100644
--- a/packages/layerchart/src/lib/components/GeoPoint.svelte
+++ b/packages/layerchart/src/lib/components/GeoPoint.svelte
@@ -1,7 +1,6 @@
 <script lang="ts" module>
   import type { Snippet } from 'svelte';
-  import type { SVGAttributes } from 'svelte/elements';
-  import Circle, { type CircleProps, type CirclePropsWithoutHTML } from './Circle.svelte';
+  import Circle, { type CircleProps } from './Circle.svelte';
   import type { Without } from '$lib/utils/types.js';
 
   export type GeoPointPropsWithoutHTML = {
diff --git a/packages/layerchart/src/lib/components/GeoSpline.svelte b/packages/layerchart/src/lib/components/GeoSpline.svelte
index 33ca9f209..cfe75c8c2 100644
--- a/packages/layerchart/src/lib/components/GeoSpline.svelte
+++ b/packages/layerchart/src/lib/components/GeoSpline.svelte
@@ -42,13 +42,13 @@
     link,
     loft = 1.0,
     curve = curveNatural,
-    splineRef: splineRefProp = $bindable(),
+    pathRef: pathRefProp = $bindable(),
     ...restProps
   }: GeoSplineProps = $props();
 
-  let splineRef = $state<SVGPathElement>();
+  let pathRef = $state<SVGPathElement>();
   $effect.pre(() => {
-    splineRefProp = splineRef;
+    pathRefProp = pathRef;
   });
 
   const geoCtx = getGeoContext();
@@ -76,7 +76,7 @@
 </script>
 
 <Spline
-  bind:splineRef
+  bind:pathRef
   data={[source, middle, target]}
   x={(d) => d[0]}
   y={(d) => d[1]}
diff --git a/packages/layerchart/src/lib/components/MonthPath.svelte b/packages/layerchart/src/lib/components/MonthPath.svelte
index a0673a06a..7f2511f5d 100644
--- a/packages/layerchart/src/lib/components/MonthPath.svelte
+++ b/packages/layerchart/src/lib/components/MonthPath.svelte
@@ -20,11 +20,13 @@
      *
      * @bindable
      */
-    ref?: SVGPathElement;
+    pathRef?: SVGPathElement;
   };
 
   export type MonthPathProps = MonthPathPropsWithoutHTML &
-    Without<SVGAttributes<SVGPathElement>, MonthPathPropsWithoutHTML>;
+    // we omit the spline props to avoid conflicts with attribute names since we are
+    // passing them through to `<Spline />`
+    Without<SVGAttributes<SVGPathElement>, MonthPathPropsWithoutHTML & SplinePropsWithoutHTML>;
 </script>
 
 <script lang="ts">
@@ -32,18 +34,19 @@
   import { endOfMonth } from 'date-fns';
   import { cls } from '@layerstack/tailwind';
   import { layerClass } from '$lib/utils/attributes.js';
+  import Spline, { type SplinePropsWithoutHTML } from './Spline.svelte';
 
   let {
     date,
     cellSize: cellSizeProp,
-    ref: refProp = $bindable(),
+    pathRef: pathRefProp = $bindable(),
     class: className,
     ...restProps
   }: MonthPathProps = $props();
 
-  let ref = $state<SVGPathElement>();
+  let pathRef = $state<SVGPathElement>();
   $effect.pre(() => {
-    refProp = ref;
+    pathRefProp = pathRef;
   });
 
   const cellSize = $derived(
@@ -68,9 +71,9 @@
   `);
 </script>
 
-<path
-  bind:this={ref}
-  d={pathData}
+<Spline
+  bind:pathRef
+  {pathData}
   fill="none"
   class={cls(layerClass('month-path'), 'stroke-surface-content/20', className)}
   {...restProps}
diff --git a/packages/layerchart/src/lib/components/Spline.svelte b/packages/layerchart/src/lib/components/Spline.svelte
index 9e36d155c..33953342b 100644
--- a/packages/layerchart/src/lib/components/Spline.svelte
+++ b/packages/layerchart/src/lib/components/Spline.svelte
@@ -103,7 +103,7 @@
      *
      * @bindable
      */
-    splineRef?: SVGPathElement;
+    pathRef?: SVGPathElement;
 
     motion?: MotionProp;
   } & CommonStyleProps;
@@ -159,14 +159,14 @@
     startContent,
     endContent,
     opacity,
-    splineRef: splineRefProp = $bindable(),
+    pathRef: pathRefProp = $bindable(),
     ...restProps
   }: SplineProps = $props();
 
-  let splineRef = $state<SVGPathElement>();
+  let pathRef = $state<SVGPathElement>();
 
   $effect.pre(() => {
-    splineRefProp = splineRef;
+    pathRefProp = pathRef;
   });
 
   const markerStart = $derived(markerStartProp ?? marker);
@@ -331,8 +331,8 @@
           easing: typeof draw === 'object' && draw.easing ? draw.easing : cubicInOut,
           interpolate() {
             return (t: number) => {
-              const totalLength = splineRef?.getTotalLength() ?? 0;
-              const point = splineRef?.getPointAtLength(totalLength * t);
+              const totalLength = pathRef?.getTotalLength() ?? 0;
+              const point = pathRef?.getPointAtLength(totalLength * t);
               return point;
             };
           },
@@ -343,10 +343,10 @@
   $effect(() => {
     if (!startContent && !endContent) return;
     d;
-    if (!splineRef || !splineRef.getTotalLength()) return;
-    startPoint = splineRef.getPointAtLength(0);
-    const totalLength = splineRef.getTotalLength();
-    endPoint.target = splineRef.getPointAtLength(totalLength);
+    if (!pathRef || !pathRef.getTotalLength()) return;
+    startPoint = pathRef.getPointAtLength(0);
+    const totalLength = pathRef.getTotalLength();
+    endPoint.target = pathRef.getPointAtLength(totalLength);
   });
 
   $effect(() => {
@@ -377,7 +377,7 @@
       marker-mid={markerMidId ? `url(#${markerMidId})` : undefined}
       marker-end={markerEndId ? `url(#${markerEndId})` : undefined}
       in:drawTransition|global={typeof draw === 'object' ? draw : undefined}
-      bind:this={splineRef}
+      bind:this={pathRef}
     />
     <MarkerWrapper id={markerStartId} marker={markerStart} />
     <MarkerWrapper id={markerMidId} marker={markerMid} />
diff --git a/packages/layerchart/src/lib/components/layout/Layer.svelte b/packages/layerchart/src/lib/components/layout/Layer.svelte
index df9e19cc6..9332170de 100644
--- a/packages/layerchart/src/lib/components/layout/Layer.svelte
+++ b/packages/layerchart/src/lib/components/layout/Layer.svelte
@@ -3,17 +3,19 @@
 
   export type CanvasLayerProps = {
     type: 'canvas';
-  } & Omit<ComponentProps<typeof Canvas>, 'type'>;
+  } & Omit<ComponentProps<typeof Canvas>, 'type' | 'onpointermove'>;
 
   export type HtmlLayerProps = {
     type: 'html';
-  } & Omit<ComponentProps<typeof Html>, 'type'>;
+  } & Omit<ComponentProps<typeof Html>, 'type' | 'onpointermove'>;
 
   export type SvgLayerProps = {
     type: 'svg';
-  } & Omit<ComponentProps<typeof Svg>, 'type'>;
+  } & Omit<ComponentProps<typeof Svg>, 'type' | 'onpointermove'>;
 
-  export type LayerProps = CanvasLayerProps | HtmlLayerProps | SvgLayerProps;
+  export type LayerProps = (CanvasLayerProps | HtmlLayerProps | SvgLayerProps) & {
+    onpointermove?: (e: PointerEvent) => void;
+  };
 </script>
 
 <script lang="ts">
diff --git a/packages/layerchart/src/lib/utils/canvas.ts b/packages/layerchart/src/lib/utils/canvas.ts
index 329dbac31..151372d1c 100644
--- a/packages/layerchart/src/lib/utils/canvas.ts
+++ b/packages/layerchart/src/lib/utils/canvas.ts
@@ -46,6 +46,8 @@ export function getComputedStyles(
     if (styles) {
       Object.assign(svg.style, styles);
     }
+    // Make sure `<svg>` is not visible
+    svg.style.display = 'none';
 
     if (classes) {
       svg.setAttribute(
diff --git a/packages/layerchart/src/routes/docs/+layout.svelte b/packages/layerchart/src/routes/docs/+layout.svelte
index 0e0d92c4d..0898d1d79 100644
--- a/packages/layerchart/src/routes/docs/+layout.svelte
+++ b/packages/layerchart/src/routes/docs/+layout.svelte
@@ -15,7 +15,16 @@
     mdiLink,
   } from '@mdi/js';
 
-  import { ApiDocs, Button, Dialog, Icon, ListItem, TableOfContents } from 'svelte-ux';
+  import {
+    ApiDocs,
+    Button,
+    Dialog,
+    Icon,
+    ListItem,
+    TableOfContents,
+    ToggleGroup,
+    ToggleOption,
+  } from 'svelte-ux';
 
   import { MediaQueryPresets } from '@layerstack/svelte-state';
   import { cls } from '@layerstack/tailwind';
@@ -24,6 +33,7 @@
   import Code from '$lib/docs/Code.svelte';
   import ViewSourceButton from '$lib/docs/ViewSourceButton.svelte';
   import { page } from '$app/state';
+  import { shared } from './shared.svelte.js';
 
   const { children } = $props();
 
@@ -51,6 +61,7 @@
     pageSource,
     api,
     status,
+    supportedContexts,
   } = $derived(page.data.meta ?? {});
 
   const { xlScreen } = new MediaQueryPresets();
@@ -96,11 +107,28 @@
       </div>
     </div>
 
-    <div class="text-2xl font-bold">
-      {#if type === 'examples' || type === 'tools'}
-        {title.replace(/([a-z])([A-Z])/g, '$1 $2')}
-      {:else}
-        {title}
+    <div class="flex items-center gap-4">
+      <span class="text-2xl font-bold">
+        {#if type === 'examples' || type === 'tools'}
+          {title.replace(/([a-z])([A-Z])/g, '$1 $2')}
+        {:else}
+          {title}
+        {/if}
+      </span>
+
+      {#if supportedContexts}
+        <ToggleGroup
+          bind:value={shared.renderContext}
+          variant="fill"
+          color="primary"
+          inset
+          gap="px"
+          size="sm"
+        >
+          {#each supportedContexts as context}
+            <ToggleOption value={context}>{toTitleCase(context)}</ToggleOption>
+          {/each}
+        </ToggleGroup>
       {/if}
 
       {#if status}
diff --git a/packages/layerchart/src/routes/docs/components/AnnotationLine/+page.svelte b/packages/layerchart/src/routes/docs/components/AnnotationLine/+page.svelte
index ac24137c6..2d1ebe717 100644
--- a/packages/layerchart/src/routes/docs/components/AnnotationLine/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/AnnotationLine/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import type { ComponentProps } from 'svelte';
   import {
     AnnotationLine,
     AnnotationPoint,
@@ -7,20 +8,12 @@
     LineChart,
     type Placement,
   } from 'layerchart';
-  import {
-    Button,
-    Field,
-    Menu,
-    RangeField,
-    Switch,
-    Toggle,
-    ToggleGroup,
-    ToggleOption,
-  } from 'svelte-ux';
+  import { Button, Field, Menu, RangeField, Switch, Toggle } from 'svelte-ux';
   import { format, sortFunc } from '@layerstack/utils';
 
   import Preview from '$lib/docs/Preview.svelte';
   import { createDateSeries } from '$lib/utils/genData.js';
+  import { shared } from '../../shared.svelte.js';
 
   let { data } = $props();
 
@@ -61,24 +54,17 @@
   let xOffset = $state(0);
   let yOffset = $state(0);
 
-  let renderContext: 'svg' | 'canvas' = $state('svg');
+  let renderContext = $derived(
+    shared.renderContext as ComponentProps<typeof LineChart>['renderContext']
+  );
   let debug = $state(false);
 </script>
 
 <h1>Examples</h1>
 
-<div class="grid grid-cols-[1fr_auto] gap-2">
-  <Field label="Render context">
-    <ToggleGroup bind:value={renderContext} variant="outline">
-      <ToggleOption value="svg">Svg</ToggleOption>
-      <ToggleOption value="canvas">Canvas</ToggleOption>
-    </ToggleGroup>
-  </Field>
-
-  <Field label="Debug" let:id classes={{ container: 'h-full' }}>
-    <Switch {id} bind:checked={debug} />
-  </Field>
-</div>
+<Field label="Debug" let:id classes={{ container: 'h-full' }}>
+  <Switch {id} bind:checked={debug} />
+</Field>
 
 <h2>Vertical</h2>
 
diff --git a/packages/layerchart/src/routes/docs/components/AnnotationLine/+page.ts b/packages/layerchart/src/routes/docs/components/AnnotationLine/+page.ts
index 44d9b847b..f365ac6b7 100644
--- a/packages/layerchart/src/routes/docs/components/AnnotationLine/+page.ts
+++ b/packages/layerchart/src/routes/docs/components/AnnotationLine/+page.ts
@@ -15,6 +15,7 @@ export async function load({ fetch }) {
       api,
       source,
       pageSource,
+      supportedContexts: ['svg', 'canvas'],
       related: ['components/AnnotationPoint', 'components/AnnotationRange'],
     },
   };
diff --git a/packages/layerchart/src/routes/docs/components/AnnotationPoint/+page.svelte b/packages/layerchart/src/routes/docs/components/AnnotationPoint/+page.svelte
index d76602a15..64ed8d094 100644
--- a/packages/layerchart/src/routes/docs/components/AnnotationPoint/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/AnnotationPoint/+page.svelte
@@ -9,21 +9,13 @@
     Tooltip,
     type Placement,
   } from 'layerchart';
-  import {
-    Button,
-    Field,
-    Menu,
-    RangeField,
-    Switch,
-    Toggle,
-    ToggleGroup,
-    ToggleOption,
-  } from 'svelte-ux';
+  import { Button, Field, Menu, RangeField, Switch, Toggle } from 'svelte-ux';
   import { format, sortFunc } from '@layerstack/utils';
   import { maxIndex } from 'd3-array';
 
   import Preview from '$lib/docs/Preview.svelte';
   import { createDateSeries } from '$lib/utils/genData.js';
+  import { shared } from '../../shared.svelte.js';
 
   let { data } = $props();
 
@@ -65,20 +57,13 @@
   let yOffset = $state(0);
   let radius = $state(4);
 
-  let renderContext: 'svg' | 'canvas' = $state('svg');
+  let renderContext = $derived(shared.renderContext as 'svg' | 'canvas');
   let debug = $state(false);
 </script>
 
 <h1>Examples</h1>
 
 <div class="grid grid-cols-[1fr_auto] gap-2">
-  <Field label="Render context">
-    <ToggleGroup bind:value={renderContext} variant="outline">
-      <ToggleOption value="svg">Svg</ToggleOption>
-      <ToggleOption value="canvas">Canvas</ToggleOption>
-    </ToggleGroup>
-  </Field>
-
   <Field label="Debug" let:id classes={{ container: 'h-full' }}>
     <Switch {id} bind:checked={debug} />
   </Field>
diff --git a/packages/layerchart/src/routes/docs/components/AnnotationPoint/+page.ts b/packages/layerchart/src/routes/docs/components/AnnotationPoint/+page.ts
index b68317b4c..61e8def41 100644
--- a/packages/layerchart/src/routes/docs/components/AnnotationPoint/+page.ts
+++ b/packages/layerchart/src/routes/docs/components/AnnotationPoint/+page.ts
@@ -15,6 +15,7 @@ export async function load({ fetch }) {
       api,
       source,
       pageSource,
+      supportedContexts: ['svg', 'canvas'],
       related: ['components/AnnotationLine', 'components/AnnotationRange'],
     },
   };
diff --git a/packages/layerchart/src/routes/docs/components/AnnotationRange/+page.svelte b/packages/layerchart/src/routes/docs/components/AnnotationRange/+page.svelte
index 4ddf92cb5..9ee75ae36 100644
--- a/packages/layerchart/src/routes/docs/components/AnnotationRange/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/AnnotationRange/+page.svelte
@@ -1,18 +1,12 @@
 <script lang="ts">
+  import type { ComponentProps } from 'svelte';
+
   import { AnnotationRange, BarChart, LineChart, type Placement } from 'layerchart';
-  import {
-    Button,
-    Field,
-    Menu,
-    RangeField,
-    Switch,
-    Toggle,
-    ToggleGroup,
-    ToggleOption,
-  } from 'svelte-ux';
+  import { Button, Field, Menu, RangeField, Switch, Toggle } from 'svelte-ux';
 
   import Preview from '$lib/docs/Preview.svelte';
   import { createDateSeries } from '$lib/utils/genData.js';
+  import { shared } from '../../shared.svelte.js';
 
   let { data } = $props();
 
@@ -39,20 +33,15 @@
   let xOffset = $state(0);
   let yOffset = $state(0);
 
-  let renderContext: 'svg' | 'canvas' = $state('svg');
+  let renderContext = $derived(
+    shared.renderContext as ComponentProps<typeof LineChart>['renderContext']
+  );
   let debug = $state(false);
 </script>
 
 <h1>Examples</h1>
 
 <div class="grid grid-cols-[1fr_auto] gap-2">
-  <Field label="Render context">
-    <ToggleGroup bind:value={renderContext} variant="outline">
-      <ToggleOption value="svg">Svg</ToggleOption>
-      <ToggleOption value="canvas">Canvas</ToggleOption>
-    </ToggleGroup>
-  </Field>
-
   <Field label="Debug" let:id classes={{ container: 'h-full' }}>
     <Switch {id} bind:checked={debug} />
   </Field>
diff --git a/packages/layerchart/src/routes/docs/components/AnnotationRange/+page.ts b/packages/layerchart/src/routes/docs/components/AnnotationRange/+page.ts
index d35fff982..ceeceb0df 100644
--- a/packages/layerchart/src/routes/docs/components/AnnotationRange/+page.ts
+++ b/packages/layerchart/src/routes/docs/components/AnnotationRange/+page.ts
@@ -15,6 +15,7 @@ export async function load({ fetch }) {
       api,
       source,
       pageSource,
+      supportedContexts: ['svg', 'canvas'],
       related: ['components/AnnotationLine', 'components/AnnotationPoint'],
     },
   };
diff --git a/packages/layerchart/src/routes/docs/components/Arc/+page.svelte b/packages/layerchart/src/routes/docs/components/Arc/+page.svelte
index 84de5195c..dd6daa05d 100644
--- a/packages/layerchart/src/routes/docs/components/Arc/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/Arc/+page.svelte
@@ -1,8 +1,9 @@
 <script lang="ts">
   import { Field, RangeField, Switch, TextField, ToggleGroup, ToggleOption } from 'svelte-ux';
-  import { Arc, Chart, Svg, LinearGradient, Text } from 'layerchart';
+  import { Arc, Chart, LinearGradient, Text, Layer } from 'layerchart';
 
   import Preview from '$lib/docs/Preview.svelte';
+  import { shared } from '../../shared.svelte.js';
 
   let value = $state(60);
   // let value = 100;
@@ -97,7 +98,7 @@
 <Preview>
   <div class="h-[400px] p-4 border rounded-sm">
     <Chart>
-      <Svg center>
+      <Layer type={shared.renderContext} center>
         {#key spring}
           <LinearGradient class="from-secondary to-primary" vertical>
             {#snippet children({ gradient })}
@@ -145,7 +146,7 @@
             {/snippet}
           </LinearGradient>
         {/key}
-      </Svg>
+      </Layer>
     </Chart>
   </div>
 </Preview>
@@ -156,7 +157,7 @@
   {#each labelExamples as example}
     <div class="h-[300px] p-4 border rounded-sm">
       <Chart>
-        <Svg center>
+        <Layer type={shared.renderContext} center>
           <LinearGradient class="from-secondary to-primary" vertical>
             {#snippet children({ gradient })}
               <Arc
@@ -197,7 +198,7 @@
               </Arc>
             {/snippet}
           </LinearGradient>
-        </Svg>
+        </Layer>
       </Chart>
     </div>
   {/each}
diff --git a/packages/layerchart/src/routes/docs/components/Arc/+page.ts b/packages/layerchart/src/routes/docs/components/Arc/+page.ts
index b05bf4865..ce7647903 100644
--- a/packages/layerchart/src/routes/docs/components/Arc/+page.ts
+++ b/packages/layerchart/src/routes/docs/components/Arc/+page.ts
@@ -8,6 +8,7 @@ export async function load() {
       api,
       source,
       pageSource,
+      supportedContexts: ['svg', 'canvas'],
       related: ['components/Pie', 'examples/Arc'],
     },
   };
diff --git a/packages/layerchart/src/routes/docs/components/ArcChart/+page.svelte b/packages/layerchart/src/routes/docs/components/ArcChart/+page.svelte
index 375a6d073..c02d3fe46 100644
--- a/packages/layerchart/src/routes/docs/components/ArcChart/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/ArcChart/+page.svelte
@@ -1,10 +1,12 @@
 <script lang="ts">
-  import { Arc, Group, LinearGradient, Text, ArcChart } from 'layerchart';
+  import type { ComponentProps } from 'svelte';
+  import { ArcChart, Arc, Group, LinearGradient, Text } from 'layerchart';
   import { group } from 'd3-array';
 
   import Preview from '$lib/docs/Preview.svelte';
   import { longData } from '$lib/utils/genData.js';
-  import { Field, Switch, Toggle, ToggleGroup, ToggleOption } from 'svelte-ux';
+  import { Field, Switch, Toggle } from 'svelte-ux';
+  import { shared } from '../../shared.svelte.js';
 
   const dataByYear = group(longData, (d) => d.year);
   const data = dataByYear.get(2019) ?? [];
@@ -27,20 +29,15 @@
     { key: 'stand', value: 10, maxValue: 12, color: '#22d3ee' },
   ];
 
-  let renderContext: 'svg' | 'canvas' = $state('svg');
+  let renderContext = $derived(
+    shared.renderContext as ComponentProps<typeof ArcChart>['renderContext']
+  );
   let debug = $state(false);
 </script>
 
 <h1>Examples</h1>
 
 <div class="grid grid-cols-[1fr_auto] gap-2">
-  <Field label="Render context">
-    <ToggleGroup bind:value={renderContext} variant="outline">
-      <ToggleOption value="svg">Svg</ToggleOption>
-      <ToggleOption value="canvas">Canvas</ToggleOption>
-    </ToggleGroup>
-  </Field>
-
   <Field label="Debug" let:id classes={{ container: 'h-full' }}>
     <Switch {id} bind:checked={debug} />
   </Field>
diff --git a/packages/layerchart/src/routes/docs/components/ArcChart/+page.ts b/packages/layerchart/src/routes/docs/components/ArcChart/+page.ts
index d1eaceae4..ea872ac2a 100644
--- a/packages/layerchart/src/routes/docs/components/ArcChart/+page.ts
+++ b/packages/layerchart/src/routes/docs/components/ArcChart/+page.ts
@@ -9,6 +9,7 @@ export async function load() {
       source,
       pageSource,
       description: 'Streamlined Chart configuration for Pie charts',
+      supportedContexts: ['svg', 'canvas'],
       related: ['components/Chart', 'components/Pie', 'examples/Arc'],
     },
   };
diff --git a/packages/layerchart/src/routes/docs/components/Area/+page.svelte b/packages/layerchart/src/routes/docs/components/Area/+page.svelte
index e2dd353d0..e365f5045 100644
--- a/packages/layerchart/src/routes/docs/components/Area/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/Area/+page.svelte
@@ -1,19 +1,19 @@
 <script lang="ts">
-  import type { Component, ComponentProps } from 'svelte';
+  import type { ComponentProps } from 'svelte';
 
-  import { Field, RangeField, Switch, ToggleGroup, ToggleOption } from 'svelte-ux';
-  import { Area, Axis, Chart, Svg, Points, Canvas, Spline } from 'layerchart';
+  import { Field, RangeField, Switch } from 'svelte-ux';
+  import { Area, Axis, Chart, Points, Layer } from 'layerchart';
 
   import Preview from '$lib/docs/Preview.svelte';
   import PathDataMenuField from '$lib/docs/PathDataMenuField.svelte';
   import CurveMenuField from '$lib/docs/CurveMenuField.svelte';
+  import { shared } from '../../shared.svelte.js';
 
   let pointCount = $state(10);
   let showPoints = $state(false);
   let showLine = $state(true);
   let show = $state(true);
   let tweened = $state(true);
-  let Context: Component = $state(Svg);
   const motion = $derived(tweened ? 'tween' : 'none');
 
   let pathGenerator = $state((x: number) => x);
@@ -44,18 +44,11 @@
     </Field>
   </div>
 
-  <div class="grid grid-cols-[100px_auto_auto_1fr] gap-2">
+  <div class="grid grid-cols-[100px_auto_1fr] gap-2">
     <Field label="Show" let:id>
       <Switch bind:checked={show} {id} size="md" />
     </Field>
 
-    <Field label="Context" classes={{ input: 'mt-1 mb-[6px]' }}>
-      <ToggleGroup bind:value={Context} variant="outline" size="sm">
-        <ToggleOption value={Svg}>Svg</ToggleOption>
-        <ToggleOption value={Canvas}>Canvas</ToggleOption>
-      </ToggleGroup>
-    </Field>
-
     <Field label="Tweened" let:id>
       <Switch bind:checked={tweened} {id} size="md" />
     </Field>
@@ -64,13 +57,10 @@
 
 <Preview {data}>
   <div class="h-[300px] p-4 border rounded-sm">
-    <Chart {data} x="x" y="y" yNice padding={{ left: 16, bottom: 24 }}>
-      <Svg>
+    <Chart {data} x="x" y="y" yNice padding={{ left: 20, right: 8, top: 4, bottom: 24 }}>
+      <Layer type={shared.renderContext}>
         <Axis placement="left" grid rule />
         <Axis placement="bottom" rule />
-      </Svg>
-
-      <Context>
         {#if show}
           <Area
             {curve}
@@ -83,58 +73,7 @@
             <Points {motion} r={3} class="fill-surface-100 stroke-primary" />
           {/if}
         {/if}
-      </Context>
-    </Chart>
-  </div>
-</Preview>
-
-<h1>Canvas</h1>
-
-<div class="grid gap-2 mb-2">
-  <div class="grid grid-cols-[1fr_1fr_1fr_auto_auto] gap-2">
-    <PathDataMenuField bind:value={pathGenerator} />
-    <CurveMenuField bind:value={curve} />
-    <RangeField label="Points" bind:value={pointCount} min={2} />
-    <Field label="Show points" let:id>
-      <Switch bind:checked={showPoints} {id} size="md" />
-    </Field>
-    <Field label="Show Line" let:id>
-      <Switch bind:checked={showLine} {id} size="md" />
-    </Field>
-  </div>
-
-  <div class="grid grid-cols-[100px_auto_auto_1fr] gap-2">
-    <Field label="Show" let:id>
-      <Switch bind:checked={show} {id} size="md" />
-    </Field>
-
-    <Field label="Tweened" let:id>
-      <Switch bind:checked={tweened} {id} size="md" />
-    </Field>
-  </div>
-</div>
-
-<Preview {data}>
-  <div class="h-[300px] p-4 border rounded-sm">
-    <Chart {data} x="x" y="y" yNice padding={{ left: 16, bottom: 24 }}>
-      <Svg>
-        <Axis placement="left" grid rule />
-        <Axis placement="bottom" rule />
-      </Svg>
-
-      <Canvas>
-        {#if show}
-          <Area {curve} {motion} class="fill-primary/10" />
-
-          {#if showLine}
-            <Spline {curve} {motion} class="stroke-primary stroke-2" />
-          {/if}
-
-          {#if showPoints}
-            <Points {motion} r={3} class="fill-surface-100 stroke-primary" />
-          {/if}
-        {/if}
-      </Canvas>
+      </Layer>
     </Chart>
   </div>
 </Preview>
diff --git a/packages/layerchart/src/routes/docs/components/Area/+page.ts b/packages/layerchart/src/routes/docs/components/Area/+page.ts
index 5a882c212..74d6b03be 100644
--- a/packages/layerchart/src/routes/docs/components/Area/+page.ts
+++ b/packages/layerchart/src/routes/docs/components/Area/+page.ts
@@ -8,6 +8,7 @@ export async function load() {
       api,
       source,
       pageSource,
+      supportedContexts: ['svg', 'canvas'],
       related: ['examples/Area'],
     },
   };
diff --git a/packages/layerchart/src/routes/docs/components/AreaChart/+page.svelte b/packages/layerchart/src/routes/docs/components/AreaChart/+page.svelte
index 27e8cc96c..c893b9411 100644
--- a/packages/layerchart/src/routes/docs/components/AreaChart/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/AreaChart/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import type { ComponentProps } from 'svelte';
   import {
     AreaChart,
     Area,
@@ -8,7 +9,6 @@
     Html,
     Line,
     LinearGradient,
-    Svg,
     Spline,
     Text,
     Tooltip,
@@ -17,6 +17,7 @@
     accessor,
     type ChartContextValue,
     defaultChartPadding,
+    Layer,
   } from 'layerchart';
   import { curveBasis, curveCatmullRom, curveStepAfter } from 'd3-shape';
   import { group } from 'd3-array';
@@ -30,6 +31,7 @@
   import type { DomainType } from '$lib/utils/scales.svelte.js';
   import Blockquote from '$lib/docs/Blockquote.svelte';
   import CurveMenuField from '$lib/docs/CurveMenuField.svelte';
+  import { shared } from '../../shared.svelte.js';
 
   let { data } = $props();
 
@@ -121,9 +123,12 @@
     });
   }
 
-  let renderContext: 'svg' | 'canvas' = $state('svg');
   let lockedTooltip = $state(false);
   let xDomain: DomainType | undefined = $state();
+
+  let renderContext = $derived(
+    shared.renderContext as ComponentProps<typeof AreaChart>['renderContext']
+  );
   let debug = $state(false);
 
   let markerPoints: { date: Date; value: number }[] = $state([]);
@@ -161,13 +166,6 @@
 <h1>Examples</h1>
 
 <div class="grid grid-cols-[1fr_auto] gap-2">
-  <Field label="Render context">
-    <ToggleGroup bind:value={renderContext} variant="outline">
-      <ToggleOption value="svg">Svg</ToggleOption>
-      <ToggleOption value="canvas">Canvas</ToggleOption>
-    </ToggleGroup>
-  </Field>
-
   <Field label="Debug" let:id classes={{ container: 'h-full' }}>
     <Switch {id} bind:checked={debug} />
   </Field>
@@ -1330,12 +1328,12 @@
   <div class="h-[300px] p-4 border rounded-sm">
     <AreaChart data={dateSeriesData} x="date" y="value" {renderContext} {debug}>
       {#snippet children({ context })}
-        <Svg>
+        <Layer type={shared.renderContext}>
           <Axis placement="left" grid rule />
           <Axis placement="bottom" rule />
           <Area line={{ class: 'stroke-primary' }} class="fill-primary/30" />
           <Highlight points lines />
-        </Svg>
+        </Layer>
 
         <Tooltip.Root>
           {#snippet children({ data })}
diff --git a/packages/layerchart/src/routes/docs/components/AreaChart/+page.ts b/packages/layerchart/src/routes/docs/components/AreaChart/+page.ts
index 29570c816..e3fffd5fa 100644
--- a/packages/layerchart/src/routes/docs/components/AreaChart/+page.ts
+++ b/packages/layerchart/src/routes/docs/components/AreaChart/+page.ts
@@ -54,6 +54,7 @@ export async function load({ fetch }) {
       source,
       pageSource,
       description: 'Streamlined Chart configuration for Area charts',
+      supportedContexts: ['svg', 'canvas'],
       related: ['components/Chart', 'components/Area', 'examples/Area'],
     },
   };
diff --git a/packages/layerchart/src/routes/docs/components/Axis/+page.svelte b/packages/layerchart/src/routes/docs/components/Axis/+page.svelte
index 24a50b69d..4282ba727 100644
--- a/packages/layerchart/src/routes/docs/components/Axis/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/Axis/+page.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import { scaleLinear, scaleTime, scaleBand, scaleLog } from 'd3-scale';
   import { range } from 'd3-array';
+  import { Axis, Chart, Frame, Layer, Rule, Text, Grid, asAny } from 'layerchart';
   import {
     timeDay,
     timeHour,
@@ -10,13 +11,13 @@
     timeYear,
     timeMillisecond,
   } from 'd3-time';
-  import { Field, RangeField, Switch, ToggleGroup, ToggleOption } from 'svelte-ux';
+  import { Field, RangeField, Switch } from 'svelte-ux';
 
-  import { Axis, Chart, Frame, Layer, Rule, Text, Grid, asAny } from 'layerchart';
   import Preview from '$lib/docs/Preview.svelte';
 
   import { createDateSeries } from '$lib/utils/genData.js';
   import Blockquote from '$lib/docs/Blockquote.svelte';
+  import { shared } from '../../shared.svelte.js';
 
   const largeData = createDateSeries({ count: 100, min: 50, max: 100, value: 'integer' });
 
@@ -51,21 +52,11 @@
 
   let tickSpacing = $state(80); // x-axis default
 
-  let renderContext: 'svg' | 'canvas' = $state('svg');
   let debug = $state(false);
 </script>
 
 <h1>Examples</h1>
 
-<div class="flex gap-2">
-  <Field label="Render context" class="grow">
-    <ToggleGroup bind:value={renderContext} variant="outline">
-      <ToggleOption value="svg">Svg</ToggleOption>
-      <ToggleOption value="canvas">Canvas</ToggleOption>
-    </ToggleGroup>
-  </Field>
-</div>
-
 <h2>left / bottom placement</h2>
 
 <Preview>
@@ -77,7 +68,7 @@
       yNice
       padding={{ top: 20, bottom: 20, left: 20, right: 20 }}
     >
-      <Layer type={renderContext}>
+      <Layer type={shared.renderContext}>
         <Axis placement="bottom" rule />
         <Axis placement="left" rule />
       </Layer>
@@ -96,7 +87,7 @@
       yNice
       padding={{ top: 20, bottom: 20, left: 20, right: 20 }}
     >
-      <Layer type={renderContext}>
+      <Layer type={shared.renderContext}>
         <Axis placement="top" rule />
         <Axis placement="right" rule />
       </Layer>
@@ -115,7 +106,7 @@
       yNice
       padding={{ top: 20, bottom: 20, left: 20, right: 20 }}
     >
-      <Layer type={renderContext}>
+      <Layer type={shared.renderContext}>
         <Axis placement="bottom" rule />
         <Axis placement="left" rule />
       </Layer>
@@ -134,7 +125,7 @@
       yNice
       padding={{ top: 20, bottom: 20, left: 20, right: 20 }}
     >
-      <Layer type={renderContext}>
+      <Layer type={shared.renderContext}>
         <Axis placement="top" rule />
         <Axis placement="right" rule />
       </Layer>
@@ -153,7 +144,7 @@
       yNice
       padding={{ top: 20, bottom: 20, left: 20, right: 20 }}
     >
-      <Layer type={renderContext}>
+      <Layer type={shared.renderContext}>
         <Axis placement="bottom" grid />
         <Axis placement="left" grid />
       </Layer>
@@ -172,7 +163,7 @@
       yNice
       padding={{ top: 20, bottom: 20, left: 20, right: 20 }}
     >
-      <Layer type={renderContext}>
+      <Layer type={shared.renderContext}>
         <Axis placement="bottom" />
         <Axis placement="left" grid={{ style: 'stroke-dasharray: 2' }} />
       </Layer>
@@ -191,7 +182,7 @@
       yNice
       padding={{ top: 20, bottom: 20, left: 20, right: 20 }}
     >
-      <Layer type={renderContext}>
+      <Layer type={shared.renderContext}>
         <Axis placement="left" grid />
         <Axis placement="bottom" grid rule />
       </Layer>
@@ -212,7 +203,7 @@
       yNice
       padding={{ top: 20, bottom: 20, left: 20, right: 20 }}
     >
-      <Layer type={renderContext}>
+      <Layer type={shared.renderContext}>
         <Axis placement="left" grid />
         <Axis placement="bottom" grid rule />
         <Rule x="left" />
@@ -234,7 +225,7 @@
       yNice
       padding={{ top: 20, bottom: 20, left: 20, right: 20 }}
     >
-      <Layer type={renderContext}>
+      <Layer type={shared.renderContext}>
         <Grid x y />
         <Axis placement="left" rule />
         <Axis placement="bottom" rule />
@@ -254,7 +245,7 @@
       yNice
       padding={{ top: 20, bottom: 20, left: 20, right: 20 }}
     >
-      <Layer type={renderContext}>
+      <Layer type={shared.renderContext}>
         <Axis placement="left" grid rule={{ markerEnd: 'arrow' }} />
         <Axis placement="bottom" grid rule={{ markerEnd: 'arrow' }} />
       </Layer>
@@ -267,7 +258,7 @@
 <Preview>
   <div class="h-[80px] p-4 border rounded-sm">
     <Chart xScale={scaleTime()} xDomain={[timeDay.offset(now, -10), now]} padding={{ bottom: 24 }}>
-      <Layer type={renderContext}>
+      <Layer type={shared.renderContext}>
         <Axis
           placement="bottom"
           rule
@@ -287,7 +278,7 @@
 <Preview>
   <div class="h-[80px] p-4 border rounded-sm">
     <Chart xScale={scaleTime()} xDomain={[timeDay.offset(now, -10), now]} padding={{ bottom: 24 }}>
-      <Layer type={renderContext}>
+      <Layer type={shared.renderContext}>
         <Axis
           placement="bottom"
           rule
@@ -306,7 +297,7 @@
 <Preview>
   <div class="h-[80px] p-4 border rounded-sm">
     <Chart xScale={scaleTime()} xDomain={[timeDay.offset(now, -10), now]} padding={{ bottom: 24 }}>
-      <Layer type={renderContext}>
+      <Layer type={shared.renderContext}>
         <Axis placement="bottom" rule tickMarks={false} />
       </Layer>
     </Chart>
@@ -323,7 +314,7 @@
       yDomain={[0, 100]}
       padding={{ top: 20, bottom: 20, left: 20, right: 20 }}
     >
-      <Layer type={renderContext}>
+      <Layer type={shared.renderContext}>
         <Axis
           placement="bottom"
           rule
@@ -345,7 +336,7 @@
 <Preview>
   <div class="h-[80px] p-4 border rounded-sm">
     <Chart xDomain={[0, 2]} padding={{ bottom: 24 }}>
-      <Layer type={renderContext}>
+      <Layer type={shared.renderContext}>
         <Axis
           placement="bottom"
           rule
@@ -362,7 +353,7 @@
 <Preview>
   <div class="h-[80px] p-4 border rounded-sm">
     <Chart xDomain={[0, 100]} padding={{ bottom: 24 }}>
-      <Layer type={renderContext}>
+      <Layer type={shared.renderContext}>
         <Axis placement="bottom" rule ticks={[0, 50, 100]} />
       </Layer>
     </Chart>
@@ -374,7 +365,7 @@
 <Preview>
   <div class="h-[80px] p-4 border rounded-sm">
     <Chart xDomain={[0, 100]} padding={{ bottom: 24 }}>
-      <Layer type={renderContext}>
+      <Layer type={shared.renderContext}>
         <Axis placement="bottom" rule ticks={(scale) => [45, ...(scale.ticks?.() ?? [])]} />
       </Layer>
     </Chart>
@@ -386,7 +377,7 @@
 <Preview>
   <div class="h-[80px] p-4 border rounded-sm">
     <Chart xDomain={[0, 100]} padding={{ bottom: 24 }}>
-      <Layer type={renderContext}>
+      <Layer type={shared.renderContext}>
         <Axis placement="bottom" rule ticks={20} />
       </Layer>
     </Chart>
@@ -398,7 +389,7 @@
 <Preview>
   <div class="h-[80px] p-4 border rounded-sm">
     <Chart xDomain={[0, 100]} padding={{ bottom: 24 }}>
-      <Layer type={renderContext}>
+      <Layer type={shared.renderContext}>
         <Axis placement="bottom" rule tickSpacing={200} />
       </Layer>
     </Chart>
@@ -410,7 +401,7 @@
 <Preview>
   <div class="h-[80px] p-4 border rounded-sm">
     <Chart xScale={scaleTime()} xDomain={[timeDay.offset(now, -10), now]} padding={{ bottom: 24 }}>
-      <Layer type={renderContext}>
+      <Layer type={shared.renderContext}>
         <Axis
           placement="bottom"
           rule
@@ -428,7 +419,7 @@
 <Preview>
   <div class="h-[80px] p-4 border rounded-sm">
     <Chart xDomain={[0, 100]} padding={{ bottom: 24 }}>
-      <Layer type={renderContext}>
+      <Layer type={shared.renderContext}>
         <Axis placement="bottom" rule ticks={(scale) => scale.ticks?.().filter((d) => d !== 0)} />
       </Layer>
     </Chart>
@@ -440,7 +431,7 @@
 <Preview>
   <div class="h-[80px] p-4 border rounded-sm">
     <Chart xDomain={[0, 100]} padding={{ bottom: 24 }}>
-      <Layer type={renderContext}>
+      <Layer type={shared.renderContext}>
         <Axis placement="bottom" rule format={(v) => v || ''} />
       </Layer>
     </Chart>
@@ -452,7 +443,7 @@
 <Preview data={largeData}>
   <div class="h-[80px] p-4 border rounded-sm">
     <Chart data={largeData} x="date" xScale={scaleBand()} y="value" padding={{ bottom: 24 }}>
-      <Layer type={renderContext}>
+      <Layer type={shared.renderContext}>
         <Axis
           placement="bottom"
           rule
@@ -480,7 +471,7 @@
       xDomain={[timeDay.offset(now, -10), now]}
       padding={{ top: 32, bottom: 32, left: 20, right: 20 }}
     >
-      <Layer type={renderContext}>
+      <Layer type={shared.renderContext}>
         {#if debug}
           <Frame class="fill-danger/5" />
           <Frame class="fill-danger/5" full />
@@ -511,7 +502,7 @@
 <Preview>
   <div class="h-[300px] p-4 border rounded-sm">
     <Chart yDomain={[0, 100]} padding={{ top: 20, bottom: 20, left: 32, right: 32 }}>
-      <Layer type={renderContext}>
+      <Layer type={shared.renderContext}>
         {#if debug}
           <Frame class="fill-danger/5" />
           <Frame class="fill-danger/5" full />
@@ -542,7 +533,7 @@
 <Preview>
   <div class="h-[80px] p-4 border rounded-sm">
     <Chart xScale={scaleTime()} xDomain={[timeYear.offset(now, -2), now]} padding={{ bottom: 30 }}>
-      <Layer type={renderContext}>
+      <Layer type={shared.renderContext}>
         {#if debug}
           <Frame class="fill-danger/5" />
           <Frame class="fill-danger/5" full />
@@ -570,7 +561,7 @@
 <Preview>
   <div class="h-[80px] p-4 border rounded-sm">
     <Chart xScale={scaleTime()} xDomain={[timeYear.offset(now, -2), now]} padding={{ bottom: 30 }}>
-      <Layer type={renderContext}>
+      <Layer type={shared.renderContext}>
         {#if debug}
           <Frame class="fill-danger/5" />
           <Frame class="fill-danger/5" full />
@@ -602,7 +593,7 @@
   <div class="h-[300px] p-4 border rounded-sm">
     <Chart yDomain={[0, 100]} padding={{ right: 90 }}>
       {#snippet children({ context })}
-        <Layer type={renderContext}>
+        <Layer type={shared.renderContext}>
           {#if debug}
             <Frame class="fill-danger/5" />
             <Frame class="fill-danger/5" full />
@@ -635,7 +626,7 @@
 <Preview>
   <div class="h-[300px] p-4 border rounded-sm">
     <Chart xScale={scaleTime()} xDomain={[timeDay.offset(now, -10), now]} yDomain={[0, 100]} radial>
-      <Layer type={renderContext} center>
+      <Layer type={shared.renderContext} center>
         <Axis placement="radius" rule />
         <Axis placement="angle" rule />
       </Layer>
@@ -648,7 +639,7 @@
 <Preview>
   <div class="h-[300px] p-4 border rounded-sm">
     <Chart xScale={scaleTime()} xDomain={[timeDay.offset(now, -10), now]} yDomain={[0, 100]} radial>
-      <Layer type={renderContext} center>
+      <Layer type={shared.renderContext} center>
         <Axis placement="radius" grid />
         <Axis placement="angle" grid />
       </Layer>
@@ -661,7 +652,7 @@
 <Preview>
   <div class="h-[80px] p-4 border rounded-sm">
     <Chart xScale={scaleLog()} xDomain={[1, 100]} padding={{ bottom: 24 }}>
-      <Layer type={renderContext}>
+      <Layer type={shared.renderContext}>
         <Axis placement="bottom" rule />
       </Layer>
     </Chart>
@@ -691,7 +682,7 @@
             xDomain={example.domain}
             padding={{ top: 20, bottom: 20, left: 20, right: 20 }}
           >
-            <Layer type={renderContext}>
+            <Layer type={shared.renderContext}>
               <Axis placement="bottom" rule grid {tickSpacing} />
             </Layer>
           </Chart>
@@ -724,7 +715,7 @@
             xDomain={example.domain}
             padding={{ top: 20, bottom: 20, left: 20, right: 20 }}
           >
-            <Layer type={renderContext}>
+            <Layer type={shared.renderContext}>
               <Axis placement="bottom" rule grid tickMultiline {tickSpacing} />
             </Layer>
           </Chart>
@@ -747,7 +738,7 @@
             xDomain={example.domain}
             padding={{ top: 20, bottom: 20, left: 20, right: 20 }}
           >
-            <Layer type={renderContext}>
+            <Layer type={shared.renderContext}>
               <Axis
                 placement="bottom"
                 rule
@@ -776,7 +767,7 @@
             xDomain={example.domain}
             padding={{ top: 20, bottom: 20, left: 20, right: 20 }}
           >
-            <Layer type={renderContext}>
+            <Layer type={shared.renderContext}>
               <Axis
                 placement="bottom"
                 rule
@@ -820,7 +811,7 @@
           },
         }}
       >
-        <Layer type={renderContext}>
+        <Layer type={shared.renderContext}>
           <Axis placement="bottom" rule grid {tickSpacing} />
           <Axis placement="left" />
         </Layer>
@@ -840,7 +831,7 @@
           },
         }}
       >
-        <Layer type={renderContext}>
+        <Layer type={shared.renderContext}>
           <Axis placement="bottom" rule grid ticks={{ interval: timeYear.every(1) }} />
         </Layer>
       </Chart>
@@ -875,7 +866,7 @@
           },
         }}
       >
-        <Layer type={renderContext}>
+        <Layer type={shared.renderContext}>
           <Axis placement="bottom" rule grid tickMultiline {tickSpacing} />
           <Axis placement="left" />
         </Layer>
@@ -895,7 +886,7 @@
           },
         }}
       >
-        <Layer type={renderContext}>
+        <Layer type={shared.renderContext}>
           <Axis placement="bottom" rule grid ticks={{ interval: timeYear.every(1) }} />
         </Layer>
       </Chart>
diff --git a/packages/layerchart/src/routes/docs/components/Axis/+page.ts b/packages/layerchart/src/routes/docs/components/Axis/+page.ts
index 17597df7b..8fd71a8d7 100644
--- a/packages/layerchart/src/routes/docs/components/Axis/+page.ts
+++ b/packages/layerchart/src/routes/docs/components/Axis/+page.ts
@@ -8,6 +8,7 @@ export async function load() {
       api,
       source,
       pageSource,
+      supportedContexts: ['svg', 'canvas'],
       related: ['components/Grid', 'components/Rule'],
     },
   };
diff --git a/packages/layerchart/src/routes/docs/components/Bar/+page.svelte b/packages/layerchart/src/routes/docs/components/Bar/+page.svelte
index 87857a3c4..06a474ed1 100644
--- a/packages/layerchart/src/routes/docs/components/Bar/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/Bar/+page.svelte
@@ -1,4 +1,4 @@
 <script lang="ts">
-  import { Axis, Chart, Svg } from 'layerchart';
+  import { Axis, Chart, Layer } from 'layerchart';
   import Preview from '$lib/docs/Preview.svelte';
 </script>
diff --git a/packages/layerchart/src/routes/docs/components/Bar/+page.ts b/packages/layerchart/src/routes/docs/components/Bar/+page.ts
index 6f60ad2a9..77605f7fa 100644
--- a/packages/layerchart/src/routes/docs/components/Bar/+page.ts
+++ b/packages/layerchart/src/routes/docs/components/Bar/+page.ts
@@ -8,6 +8,7 @@ export async function load() {
       api,
       source,
       pageSource,
+      supportedContexts: ['svg', 'canvas'],
       related: ['components/Bars', 'examples/Bars', 'examples/Columns'],
     },
   };
diff --git a/packages/layerchart/src/routes/docs/components/BarChart/+page.svelte b/packages/layerchart/src/routes/docs/components/BarChart/+page.svelte
index b40e3ba6d..e504b3489 100644
--- a/packages/layerchart/src/routes/docs/components/BarChart/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/BarChart/+page.svelte
@@ -11,8 +11,6 @@
     LinearGradient,
     Text,
     Tooltip,
-    Circle,
-    Group,
     Polygon,
   } from 'layerchart';
   import { extent, group, mean, sum } from 'd3-array';
@@ -22,10 +20,11 @@
   import Preview from '$lib/docs/Preview.svelte';
   import Blockquote from '$lib/docs/Blockquote.svelte';
   import { createDateSeries, wideData, longData } from '$lib/utils/genData.js';
-  import { Field, Switch, ToggleGroup, ToggleOption } from 'svelte-ux';
+  import { Field, Switch } from 'svelte-ux';
   import { timeMonth } from 'd3-time';
   import { interpolate, quantize } from 'd3-interpolate';
   import { interpolateSpectral } from 'd3-scale-chromatic';
+  import { shared } from '../../shared.svelte.js';
 
   let { data } = $props();
 
@@ -105,20 +104,13 @@
     },
   ];
 
-  let renderContext: 'svg' | 'canvas' = $state('svg');
+  let renderContext = $derived(shared.renderContext as 'svg' | 'canvas');
   let debug = $state(false);
 </script>
 
 <h1>Examples</h1>
 
 <div class="grid grid-cols-[1fr_auto] gap-2">
-  <Field label="Render context">
-    <ToggleGroup bind:value={renderContext} variant="outline">
-      <ToggleOption value="svg">Svg</ToggleOption>
-      <ToggleOption value="canvas">Canvas</ToggleOption>
-    </ToggleGroup>
-  </Field>
-
   <Field label="Debug" let:id classes={{ container: 'h-full' }}>
     <Switch {id} bind:checked={debug} />
   </Field>
diff --git a/packages/layerchart/src/routes/docs/components/BarChart/+page.ts b/packages/layerchart/src/routes/docs/components/BarChart/+page.ts
index ec0a0cd5d..94e0b68a4 100644
--- a/packages/layerchart/src/routes/docs/components/BarChart/+page.ts
+++ b/packages/layerchart/src/routes/docs/components/BarChart/+page.ts
@@ -36,6 +36,7 @@ export async function load({ fetch }) {
       source,
       pageSource,
       description: 'Streamlined Chart configuration for Bar charts',
+      supportedContexts: ['svg', 'canvas'],
       related: [
         'components/Chart',
         'components/Bars',
diff --git a/packages/layerchart/src/routes/docs/components/Bars/+page.svelte b/packages/layerchart/src/routes/docs/components/Bars/+page.svelte
index f5e63b239..1f3a40471 100644
--- a/packages/layerchart/src/routes/docs/components/Bars/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/Bars/+page.svelte
@@ -1,4 +1,4 @@
 <script lang="ts">
-  import { Chart, Svg } from 'layerchart';
+  import { Chart, Layer } from 'layerchart';
   import Preview from '$lib/docs/Preview.svelte';
 </script>
diff --git a/packages/layerchart/src/routes/docs/components/Bars/+page.ts b/packages/layerchart/src/routes/docs/components/Bars/+page.ts
index f979343fe..1c00d58cd 100644
--- a/packages/layerchart/src/routes/docs/components/Bars/+page.ts
+++ b/packages/layerchart/src/routes/docs/components/Bars/+page.ts
@@ -8,6 +8,7 @@ export async function load() {
       api,
       source,
       pageSource,
+      supportedContexts: ['svg', 'canvas'],
       related: ['components/Bar', 'examples/Bars', 'examples/Columns', 'examples/Histogram'],
     },
   };
diff --git a/packages/layerchart/src/routes/docs/components/Blur/+page.svelte b/packages/layerchart/src/routes/docs/components/Blur/+page.svelte
index a04d1abd4..2665c0dd7 100644
--- a/packages/layerchart/src/routes/docs/components/Blur/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/Blur/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { Chart, Svg } from 'layerchart';
+  import { Chart, Layer } from 'layerchart';
 
   import Preview from '$lib/docs/Preview.svelte';
   import Blockquote from '$lib/docs/Blockquote.svelte';
diff --git a/packages/layerchart/src/routes/docs/components/Blur/+page.ts b/packages/layerchart/src/routes/docs/components/Blur/+page.ts
index bde07d597..7a0712c1a 100644
--- a/packages/layerchart/src/routes/docs/components/Blur/+page.ts
+++ b/packages/layerchart/src/routes/docs/components/Blur/+page.ts
@@ -8,6 +8,7 @@ export async function load() {
       api,
       source,
       pageSource,
+      supportedContexts: ['svg'],
     },
   };
 }
diff --git a/packages/layerchart/src/routes/docs/components/Bounds/+page.svelte b/packages/layerchart/src/routes/docs/components/Bounds/+page.svelte
index f5e63b239..1f3a40471 100644
--- a/packages/layerchart/src/routes/docs/components/Bounds/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/Bounds/+page.svelte
@@ -1,4 +1,4 @@
 <script lang="ts">
-  import { Chart, Svg } from 'layerchart';
+  import { Chart, Layer } from 'layerchart';
   import Preview from '$lib/docs/Preview.svelte';
 </script>
diff --git a/packages/layerchart/src/routes/docs/components/Bounds/+page.ts b/packages/layerchart/src/routes/docs/components/Bounds/+page.ts
index 74d3ba84f..d554203ae 100644
--- a/packages/layerchart/src/routes/docs/components/Bounds/+page.ts
+++ b/packages/layerchart/src/routes/docs/components/Bounds/+page.ts
@@ -8,6 +8,7 @@ export async function load() {
       api,
       source,
       pageSource,
+      supportedContexts: ['svg', 'canvas'],
       related: ['examples/Partition', 'examples/Sunburst', 'examples/Treemap'],
     },
   };
diff --git a/packages/layerchart/src/routes/docs/components/BrushContext/+page.svelte b/packages/layerchart/src/routes/docs/components/BrushContext/+page.svelte
index e52032d32..309209897 100644
--- a/packages/layerchart/src/routes/docs/components/BrushContext/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/BrushContext/+page.svelte
@@ -10,23 +10,24 @@
   import {
     Area,
     Axis,
+    Bars,
     Chart,
     ChartClipPath,
     Circle,
     Highlight,
+    Layer,
     LinearGradient,
     Points,
     Rule,
     Text,
     Tooltip,
-    Svg,
-    Bars,
   } from 'layerchart';
 
   import Preview from '$lib/docs/Preview.svelte';
   import { createDateSeries, randomWalk } from '$lib/utils/genData.js';
   import { asAny } from '$lib/utils/types.js';
   import type { DomainType } from '$lib/utils/scales.svelte.js';
+  import { shared } from '../../shared.svelte.js';
 
   let { data } = $props();
 
@@ -60,9 +61,9 @@
 <Preview data={dataSeriesData}>
   <div class="h-[100px]">
     <Chart data={dataSeriesData} x="date" xScale={scaleBand().padding(0.4)} y="value" brush>
-      <Svg>
+      <Layer type={shared.renderContext}>
         <Bars strokeWidth={1} class="fill-primary" />
-      </Svg>
+      </Layer>
     </Chart>
   </div>
 </Preview> -->
@@ -72,9 +73,9 @@
 <Preview data={data.appleStock}>
   <div class="h-[40px]">
     <Chart data={data.appleStock} x="date" xScale={scaleTime()} y="value" brush>
-      <Svg>
+      <Layer type={shared.renderContext}>
         <Area line={{ class: 'stroke-2 stroke-primary' }} class="fill-primary/20" />
-      </Svg>
+      </Layer>
     </Chart>
   </div>
 </Preview>
@@ -90,9 +91,9 @@
       y="value"
       brush={{ classes: { range: 'bg-secondary/10', handle: 'bg-secondary/50' } }}
     >
-      <Svg>
+      <Layer type={shared.renderContext}>
         <Area line={{ class: 'stroke-2 stroke-primary' }} class="fill-primary/20" />
-      </Svg>
+      </Layer>
     </Chart>
   </div>
 </Preview>
@@ -108,9 +109,9 @@
       y="value"
       brush={{ classes: { range: 'striped-background' } }}
     >
-      <Svg>
+      <Layer type={shared.renderContext}>
         <Area line={{ class: 'stroke-2 stroke-primary' }} class="fill-primary/20" />
-      </Svg>
+      </Layer>
     </Chart>
   </div>
 </Preview>
@@ -127,7 +128,7 @@
       brush={{ classes: { range: 'bg-secondary/10' }, handleSize: 8 }}
     >
       {#snippet children({ context })}
-        <Svg>
+        <Layer type={shared.renderContext}>
           <Area line={{ class: 'stroke-2 stroke-primary' }} class="fill-primary/20" />
 
           {#if context.brush.isActive}
@@ -165,7 +166,7 @@
               <path d={mdiChevronRight} class="fill-secondary-content origin-center" />
             </svg>
           {/if}
-        </Svg>
+        </Layer>
       {/snippet}
     </Chart>
   </div>
@@ -177,7 +178,7 @@
   <div class="h-[40px]">
     <Chart data={data.appleStock} x="date" xScale={scaleTime()} y="value" brush>
       {#snippet children({ context })}
-        <Svg>
+        <Layer type={shared.renderContext}>
           <Area line={{ class: 'stroke-2 stroke-primary' }} class="fill-primary/20" />
           {#if context.brush.isActive}
             <Text
@@ -196,7 +197,7 @@
               class="text-xs"
             />
           {/if}
-        </Svg>
+        </Layer>
       {/snippet}
     </Chart>
   </div>
@@ -216,7 +217,7 @@
         brush
       >
         {#snippet children({ context })}
-          <Svg>
+          <Layer type={shared.renderContext}>
             <Area line={{ class: 'stroke-2 stroke-primary' }} class="fill-primary/20" />
 
             {#if context.brush.isActive}
@@ -236,7 +237,7 @@
                 class="text-xs"
               />
             {/if}
-          </Svg>
+          </Layer>
         {/snippet}
       </Chart>
     </div>
@@ -265,7 +266,7 @@
             },
           }}
         >
-          <Svg>
+          <Layer type={shared.renderContext}>
             <Axis placement="left" grid rule />
             <Axis placement="bottom" rule />
             <ChartClipPath>
@@ -275,7 +276,7 @@
                 {/snippet}
               </LinearGradient>
             </ChartClipPath>
-          </Svg>
+          </Layer>
         </Chart>
       </div>
     </State>
@@ -304,7 +305,7 @@
             },
           }}
         >
-          <Svg>
+          <Layer type={shared.renderContext}>
             <Axis placement="left" grid rule />
             <Axis placement="bottom" rule />
             <ChartClipPath>
@@ -314,7 +315,7 @@
                 {/snippet}
               </LinearGradient>
             </ChartClipPath>
-          </Svg>
+          </Layer>
         </Chart>
       </div>
     </State>
@@ -348,7 +349,7 @@
             },
           }}
         >
-          <Svg>
+          <Layer type={shared.renderContext}>
             <Axis placement="left" grid rule />
             <Axis placement="bottom" rule />
             <ChartClipPath>
@@ -358,7 +359,7 @@
                 {/snippet}
               </LinearGradient>
             </ChartClipPath>
-          </Svg>
+          </Layer>
         </Chart>
       </div>
     </State>
@@ -380,7 +381,7 @@
           yDomain={[0, null]}
           padding={{ left: 16, bottom: 24 }}
         >
-          <Svg>
+          <Layer type={shared.renderContext}>
             <Axis placement="left" grid rule />
             <Axis placement="bottom" rule />
             <ChartClipPath>
@@ -390,7 +391,7 @@
                 {/snippet}
               </LinearGradient>
             </ChartClipPath>
-          </Svg>
+          </Layer>
         </Chart>
       </div>
 
@@ -408,9 +409,9 @@
             },
           }}
         >
-          <Svg>
+          <Layer type={shared.renderContext}>
             <Area line={{ class: 'stroke-2 stroke-primary' }} class="fill-primary/20" />
-          </Svg>
+          </Layer>
         </Chart>
       </div>
     </State>
@@ -437,9 +438,9 @@
             },
           }}
         >
-          <Svg>
+          <Layer type={shared.renderContext}>
             <Area line={{ class: 'stroke-2 stroke-primary' }} class="fill-primary/20" />
-          </Svg>
+          </Layer>
         </Chart>
       </div>
 
@@ -452,7 +453,7 @@
           {yDomain}
           padding={{ left: 16, bottom: 24 }}
         >
-          <Svg>
+          <Layer type={shared.renderContext}>
             <Axis placement="left" grid rule />
             <Axis placement="bottom" rule />
             <ChartClipPath>
@@ -462,7 +463,7 @@
                 {/snippet}
               </LinearGradient>
             </ChartClipPath>
-          </Svg>
+          </Layer>
         </Chart>
       </div>
     </State>
@@ -489,7 +490,7 @@
           yDomain={[0, null]}
           padding={{ left: 16, bottom: 24 }}
         >
-          <Svg>
+          <Layer type={shared.renderContext}>
             <Axis placement="left" grid rule motion={{ type: 'tween', duration: 200 }} />
             <Axis placement="bottom" rule />
             <LinearGradient class="from-primary/50 to-primary/1" vertical>
@@ -504,7 +505,7 @@
                 />
               {/snippet}
             </LinearGradient>
-          </Svg>
+          </Layer>
         </Chart>
       </div>
 
@@ -522,9 +523,9 @@
             },
           }}
         >
-          <Svg>
+          <Layer type={shared.renderContext}>
             <Area line={{ class: 'stroke-2 stroke-primary' }} class="fill-primary/20" />
-          </Svg>
+          </Layer>
         </Chart>
       </div>
     </State>
@@ -554,7 +555,7 @@
             yBaseline={0}
             padding={{ left: 16, bottom: 24 }}
           >
-            <Svg>
+            <Layer type={shared.renderContext}>
               <Axis placement="left" grid rule />
               <Axis placement="bottom" />
               <Rule y={0} />
@@ -568,7 +569,7 @@
                   {/snippet}
                 </LinearGradient>
               </ChartClipPath>
-            </Svg>
+            </Layer>
           </Chart>
         </div>
 
@@ -586,13 +587,13 @@
               onReset: (e) => (xDomain = null),
             }}
           >
-            <Svg>
+            <Layer type={shared.renderContext}>
               <Area
                 line={{ class: 'stroke-2 stroke-(--chart-color)' }}
                 class="fill-(--chart-color) opacity-20"
               />
               <!-- <Brush bind:xDomain mode="separated" /> -->
-            </Svg>
+            </Layer>
           </Chart>
         </div>
       </div>
@@ -624,7 +625,7 @@
           }}
         >
           {#snippet children({ context })}
-            <Svg>
+            <Layer type={shared.renderContext}>
               <Axis placement="left" grid rule />
               <Axis placement="bottom" rule />
               <ChartClipPath>
@@ -635,7 +636,7 @@
                 </LinearGradient>
               </ChartClipPath>
               <Highlight points lines />
-            </Svg>
+            </Layer>
 
             <Tooltip.Root
               y="data"
@@ -692,7 +693,7 @@
           },
         }}
       >
-        <Svg>
+        <Layer type={shared.renderContext}>
           <Axis placement="left" grid rule />
           <Axis placement="bottom" rule />
 
@@ -718,7 +719,7 @@
               {/each}
             {/snippet}
           </Points>
-        </Svg>
+        </Layer>
       </Chart>
     </div>
   </State>
@@ -751,14 +752,14 @@
             },
           }}
         >
-          <Svg>
+          <Layer type={shared.renderContext}>
             <Axis placement="left" grid rule />
             <Axis placement="bottom" rule />
 
             <ChartClipPath>
               <Points class="fill-primary/30 stroke-primary" r={4} />
             </ChartClipPath>
-          </Svg>
+          </Layer>
         </Chart>
       </div>
 
@@ -783,7 +784,7 @@
             },
           }}
         >
-          <Svg>
+          <Layer type={shared.renderContext}>
             <Points>
               {#snippet children({ points })}
                 {#each points as point}
@@ -808,7 +809,7 @@
                 {/each}
               {/snippet}
             </Points>
-          </Svg>
+          </Layer>
         </Chart>
       </div>
     </div>
diff --git a/packages/layerchart/src/routes/docs/components/BrushContext/+page.ts b/packages/layerchart/src/routes/docs/components/BrushContext/+page.ts
index b8b828db5..71f326315 100644
--- a/packages/layerchart/src/routes/docs/components/BrushContext/+page.ts
+++ b/packages/layerchart/src/routes/docs/components/BrushContext/+page.ts
@@ -14,6 +14,7 @@ export async function load({ fetch }) {
       api,
       source,
       pageSource,
+      supportedContexts: ['svg', 'canvas'],
     },
   };
 }
diff --git a/packages/layerchart/src/routes/docs/components/Calendar/+page.svelte b/packages/layerchart/src/routes/docs/components/Calendar/+page.svelte
index ca94edbf4..578655035 100644
--- a/packages/layerchart/src/routes/docs/components/Calendar/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/Calendar/+page.svelte
@@ -3,10 +3,11 @@
   import { scaleThreshold } from 'd3-scale';
   import { range } from 'd3-array';
 
-  import { Calendar, Chart, Group, Text, Tooltip, Svg } from 'layerchart';
+  import { Calendar, Chart, Group, Text, Tooltip, Layer } from 'layerchart';
 
   import Preview from '$lib/docs/Preview.svelte';
   import { createDateSeries } from '$lib/utils/genData.js';
+  import { shared } from '../../shared.svelte.js';
 
   const now = new Date();
   const firstDayOfYear = startOfYear(now);
@@ -40,16 +41,17 @@
         'var(--color-primary-500)',
         'var(--color-primary-700)',
       ]}
+      padding={{ top: 13 }}
     >
       {#snippet children({ context })}
-        <Svg>
+        <Layer type={shared.renderContext}>
           <Calendar
             start={firstDayOfYear}
             end={lastDayOfYear}
             tooltipContext={context.tooltip}
             monthPath
           />
-        </Svg>
+        </Layer>
 
         <Tooltip.Root>
           {#snippet children({ data })}
@@ -88,9 +90,10 @@
         'var(--color-primary-500)',
         'var(--color-primary-700)',
       ]}
+      padding={{ top: 13 }}
     >
       {#snippet children({ context })}
-        <Svg>
+        <Layer type={shared.renderContext}>
           <Calendar
             start={firstDayOfYear}
             end={lastDayOfYear}
@@ -98,7 +101,7 @@
             cellSize={16}
             monthPath
           />
-        </Svg>
+        </Layer>
 
         <Tooltip.Root>
           {#snippet children({ data })}
@@ -137,10 +140,10 @@
         'var(--color-primary-500)',
         'var(--color-primary-700)',
       ]}
-      padding={{ left: 20 }}
+      padding={{ left: 20, top: 13 }}
     >
       {#snippet children({ context })}
-        <Svg>
+        <Layer type={shared.renderContext}>
           {#each range(2019, 2024) as year, i}
             {@const start = new Date(year, 0, 1)}
             {@const end = endOfYear(start)}
@@ -157,7 +160,7 @@
               <Calendar {start} {end} tooltipContext={context.tooltip} cellSize={16} monthPath />
             </Group>
           {/each}
-        </Svg>
+        </Layer>
 
         <Tooltip.Root>
           {#snippet children({ data })}
diff --git a/packages/layerchart/src/routes/docs/components/Calendar/+page.ts b/packages/layerchart/src/routes/docs/components/Calendar/+page.ts
index 69a18da2a..01ed3d2b5 100644
--- a/packages/layerchart/src/routes/docs/components/Calendar/+page.ts
+++ b/packages/layerchart/src/routes/docs/components/Calendar/+page.ts
@@ -8,6 +8,7 @@ export async function load() {
       api,
       source,
       pageSource,
+      supportedContexts: ['svg', 'canvas'],
     },
   };
 }
diff --git a/packages/layerchart/src/routes/docs/components/Chart/+page.svelte b/packages/layerchart/src/routes/docs/components/Chart/+page.svelte
index f5e63b239..1f3a40471 100644
--- a/packages/layerchart/src/routes/docs/components/Chart/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/Chart/+page.svelte
@@ -1,4 +1,4 @@
 <script lang="ts">
-  import { Chart, Svg } from 'layerchart';
+  import { Chart, Layer } from 'layerchart';
   import Preview from '$lib/docs/Preview.svelte';
 </script>
diff --git a/packages/layerchart/src/routes/docs/components/ChartClipPath/+page.svelte b/packages/layerchart/src/routes/docs/components/ChartClipPath/+page.svelte
index f5e63b239..1f3a40471 100644
--- a/packages/layerchart/src/routes/docs/components/ChartClipPath/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/ChartClipPath/+page.svelte
@@ -1,4 +1,4 @@
 <script lang="ts">
-  import { Chart, Svg } from 'layerchart';
+  import { Chart, Layer } from 'layerchart';
   import Preview from '$lib/docs/Preview.svelte';
 </script>
diff --git a/packages/layerchart/src/routes/docs/components/ChartClipPath/+page.ts b/packages/layerchart/src/routes/docs/components/ChartClipPath/+page.ts
index e1fc36992..ce652dd3e 100644
--- a/packages/layerchart/src/routes/docs/components/ChartClipPath/+page.ts
+++ b/packages/layerchart/src/routes/docs/components/ChartClipPath/+page.ts
@@ -10,6 +10,7 @@ export async function load() {
       pageSource,
       description:
         'Convenient way to clip specific components (axis labels, etc) within chart while still allowing some to overflow (tooltips, etc)',
+      supportedContexts: ['svg'],
       related: [
         'components/RectClipPath',
         'components/Rect',
diff --git a/packages/layerchart/src/routes/docs/components/Circle/+page.svelte b/packages/layerchart/src/routes/docs/components/Circle/+page.svelte
index 2880b5a6b..1f8a6bb85 100644
--- a/packages/layerchart/src/routes/docs/components/Circle/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/Circle/+page.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
-  import { Axis, Chart, Circle, Svg } from 'layerchart';
+  import { Axis, Chart, Circle, Layer } from 'layerchart';
   import Preview from '$lib/docs/Preview.svelte';
+  import { shared } from '../../shared.svelte.js';
 </script>
 
 <h1>Examples</h1>
@@ -8,13 +9,13 @@
 <Preview>
   <div class="h-[300px] p-4 border rounded-sm">
     <Chart xDomain={[0, 100]} yDomain={[0, 100]} padding={{ bottom: 20, left: 20 }}>
-      <Svg>
+      <Layer type={shared.renderContext}>
         <Axis placement="bottom" rule />
         <Axis placement="left" rule />
         <Circle cx={100} cy={100} r={20} />
         <Circle cx={200} cy={200} r={20} class="fill-primary" />
         <Circle cx={300} cy={150} r={20} class="stroke-2 stroke-primary fill-primary/10" />
-      </Svg>
+      </Layer>
     </Chart>
   </div>
 </Preview>
diff --git a/packages/layerchart/src/routes/docs/components/Circle/+page.ts b/packages/layerchart/src/routes/docs/components/Circle/+page.ts
index 4ad351ce6..962be1ab9 100644
--- a/packages/layerchart/src/routes/docs/components/Circle/+page.ts
+++ b/packages/layerchart/src/routes/docs/components/Circle/+page.ts
@@ -9,6 +9,7 @@ export async function load() {
       source,
       pageSource,
       description: '`<circle>` element with tweened properties using `motionStore`',
+      supportedContexts: ['svg', 'canvas'],
       related: ['components/Points', 'examples/Pack', 'examples/PunchCard'],
     },
   };
diff --git a/packages/layerchart/src/routes/docs/components/CircleClipPath/+page.svelte b/packages/layerchart/src/routes/docs/components/CircleClipPath/+page.svelte
index f5e63b239..1f3a40471 100644
--- a/packages/layerchart/src/routes/docs/components/CircleClipPath/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/CircleClipPath/+page.svelte
@@ -1,4 +1,4 @@
 <script lang="ts">
-  import { Chart, Svg } from 'layerchart';
+  import { Chart, Layer } from 'layerchart';
   import Preview from '$lib/docs/Preview.svelte';
 </script>
diff --git a/packages/layerchart/src/routes/docs/components/CircleClipPath/+page.ts b/packages/layerchart/src/routes/docs/components/CircleClipPath/+page.ts
index b6808545a..d4d966cf2 100644
--- a/packages/layerchart/src/routes/docs/components/CircleClipPath/+page.ts
+++ b/packages/layerchart/src/routes/docs/components/CircleClipPath/+page.ts
@@ -8,6 +8,7 @@ export async function load() {
       api,
       source,
       pageSource,
+      supportedContexts: ['svg'],
     },
   };
 }
diff --git a/packages/layerchart/src/routes/docs/components/ClipPath/+page.svelte b/packages/layerchart/src/routes/docs/components/ClipPath/+page.svelte
index f5e63b239..1f3a40471 100644
--- a/packages/layerchart/src/routes/docs/components/ClipPath/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/ClipPath/+page.svelte
@@ -1,4 +1,4 @@
 <script lang="ts">
-  import { Chart, Svg } from 'layerchart';
+  import { Chart, Layer } from 'layerchart';
   import Preview from '$lib/docs/Preview.svelte';
 </script>
diff --git a/packages/layerchart/src/routes/docs/components/ClipPath/+page.ts b/packages/layerchart/src/routes/docs/components/ClipPath/+page.ts
index ec076e604..31ec6f397 100644
--- a/packages/layerchart/src/routes/docs/components/ClipPath/+page.ts
+++ b/packages/layerchart/src/routes/docs/components/ClipPath/+page.ts
@@ -8,6 +8,7 @@ export async function load() {
       api,
       source,
       pageSource,
+      supportedContexts: ['svg'],
       related: [
         'components/ChartClipPath',
         'components/CircleClipPath',
diff --git a/packages/layerchart/src/routes/docs/components/ColorRamp/+page.ts b/packages/layerchart/src/routes/docs/components/ColorRamp/+page.ts
index ca22345b9..3011f2c52 100644
--- a/packages/layerchart/src/routes/docs/components/ColorRamp/+page.ts
+++ b/packages/layerchart/src/routes/docs/components/ColorRamp/+page.ts
@@ -8,6 +8,7 @@ export async function load() {
       api,
       source,
       pageSource,
+      supportedContexts: ['svg'],
     },
   };
 }
diff --git a/packages/layerchart/src/routes/docs/components/Connector/+page.svelte b/packages/layerchart/src/routes/docs/components/Connector/+page.svelte
index 05e129108..618ad3768 100644
--- a/packages/layerchart/src/routes/docs/components/Connector/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/Connector/+page.svelte
@@ -2,7 +2,7 @@
   import type { ComponentProps } from 'svelte';
 
   import { RangeField } from 'svelte-ux';
-  import { Connector, Chart, Svg } from 'layerchart';
+  import { Connector, Chart, Layer } from 'layerchart';
 
   import Preview from '$lib/docs/Preview.svelte';
   import CurveMenuField from '$lib/docs/CurveMenuField.svelte';
@@ -10,6 +10,7 @@
   import ConnectorTypeMenuField from 'layerchart/docs/ConnectorTypeMenuField.svelte';
   import ConnectorSweepMenuField from 'layerchart/docs/ConnectorSweepMenuField.svelte';
   import { movable } from '$lib/actions/movable.js';
+  import { shared } from '../../shared.svelte.js';
 
   let source = $state({ x: 300, y: 150 });
   let target = $state({ x: 500, y: 300 });
@@ -36,7 +37,7 @@
 <Preview>
   <div class="h-[400px] p-4 border rounded-sm">
     <Chart padding={{ left: 16, bottom: 24 }}>
-      <Svg>
+      <Layer type={shared.renderContext}>
         <Connector
           {source}
           {target}
@@ -71,7 +72,7 @@
             },
           }}
         />
-      </Svg>
+      </Layer>
     </Chart>
   </div>
 </Preview>
diff --git a/packages/layerchart/src/routes/docs/components/Connector/+page.ts b/packages/layerchart/src/routes/docs/components/Connector/+page.ts
index 07e5d295b..ba99b59f5 100644
--- a/packages/layerchart/src/routes/docs/components/Connector/+page.ts
+++ b/packages/layerchart/src/routes/docs/components/Connector/+page.ts
@@ -8,6 +8,7 @@ export async function load() {
       api,
       source,
       pageSource,
+      supportedContexts: ['svg', 'canvas'],
       related: ['components/Link', 'examples/Tree'],
     },
   };
diff --git a/packages/layerchart/src/routes/docs/components/Ellipse/+page.svelte b/packages/layerchart/src/routes/docs/components/Ellipse/+page.svelte
index 633b162d4..0ae4cd316 100644
--- a/packages/layerchart/src/routes/docs/components/Ellipse/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/Ellipse/+page.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
-  import { Axis, Chart, Ellipse, Svg } from 'layerchart';
+  import { Axis, Chart, Ellipse, Layer } from 'layerchart';
   import Preview from '$lib/docs/Preview.svelte';
+  import { shared } from '../../shared.svelte.js';
 </script>
 
 <h1>Examples</h1>
@@ -8,7 +9,7 @@
 <Preview>
   <div class="h-[300px] p-4 border rounded-sm">
     <Chart xDomain={[0, 100]} yDomain={[0, 100]} padding={{ bottom: 20, left: 20 }}>
-      <Svg>
+      <Layer type={shared.renderContext}>
         <Axis placement="bottom" rule />
         <Axis placement="left" rule />
         <Ellipse cx={100} cy={100} rx={20} ry={10} />
@@ -20,7 +21,7 @@
           ry={10}
           class="stroke-2 stroke-primary fill-primary/10"
         />
-      </Svg>
+      </Layer>
     </Chart>
   </div>
 </Preview>
diff --git a/packages/layerchart/src/routes/docs/components/Ellipse/+page.ts b/packages/layerchart/src/routes/docs/components/Ellipse/+page.ts
index 544a32480..aaa350556 100644
--- a/packages/layerchart/src/routes/docs/components/Ellipse/+page.ts
+++ b/packages/layerchart/src/routes/docs/components/Ellipse/+page.ts
@@ -9,6 +9,7 @@ export async function load() {
       source,
       pageSource,
       description: '`<ellipse>` element with tweened properties using `motionStore`',
+      supportedContexts: ['svg', 'canvas'],
     },
   };
 }
diff --git a/packages/layerchart/src/routes/docs/components/ForceSimulation/+page.svelte b/packages/layerchart/src/routes/docs/components/ForceSimulation/+page.svelte
index f5e63b239..1f3a40471 100644
--- a/packages/layerchart/src/routes/docs/components/ForceSimulation/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/ForceSimulation/+page.svelte
@@ -1,4 +1,4 @@
 <script lang="ts">
-  import { Chart, Svg } from 'layerchart';
+  import { Chart, Layer } from 'layerchart';
   import Preview from '$lib/docs/Preview.svelte';
 </script>
diff --git a/packages/layerchart/src/routes/docs/components/ForceSimulation/+page.ts b/packages/layerchart/src/routes/docs/components/ForceSimulation/+page.ts
index 22992338f..a45bc5565 100644
--- a/packages/layerchart/src/routes/docs/components/ForceSimulation/+page.ts
+++ b/packages/layerchart/src/routes/docs/components/ForceSimulation/+page.ts
@@ -8,6 +8,7 @@ export async function load() {
       api,
       source,
       pageSource,
+      supportedContexts: ['svg', 'canvas'],
       related: [
         'examples/Beeswarm',
         'examples/CollisionDetection',
diff --git a/packages/layerchart/src/routes/docs/components/Frame/+page.svelte b/packages/layerchart/src/routes/docs/components/Frame/+page.svelte
index d95b64417..e892bafbd 100644
--- a/packages/layerchart/src/routes/docs/components/Frame/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/Frame/+page.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
-  import { Axis, Canvas, Chart, Frame, LinearGradient, Svg } from 'layerchart';
+  import { Axis, Chart, Layer, Frame, LinearGradient } from 'layerchart';
   import Preview from '$lib/docs/Preview.svelte';
+  import { shared } from '../../shared.svelte.js';
 </script>
 
 <h1>Examples</h1>
@@ -18,11 +19,11 @@
       yNice
       padding={{ top: 20, bottom: 20, left: 20, right: 20 }}
     >
-      <Svg>
+      <Layer type={shared.renderContext}>
         <Frame class="fill-danger/5" />
         <Axis placement="bottom" rule />
         <Axis placement="left" rule />
-      </Svg>
+      </Layer>
     </Chart>
   </div>
 </Preview>
@@ -40,11 +41,11 @@
       yNice
       padding={{ top: 20, bottom: 20, left: 20, right: 20 }}
     >
-      <Svg>
+      <Layer type={shared.renderContext}>
         <Frame class="fill-danger/5" full />
         <Axis placement="bottom" rule />
         <Axis placement="left" rule />
-      </Svg>
+      </Layer>
     </Chart>
   </div>
 </Preview>
@@ -62,11 +63,11 @@
       yNice
       padding={{ top: 20, bottom: 20, left: 20, right: 20 }}
     >
-      <Svg>
+      <Layer type={shared.renderContext}>
         <Frame class="stroke-surface-content/50 fill-none" />
         <Axis placement="bottom" />
         <Axis placement="left" />
-      </Svg>
+      </Layer>
     </Chart>
   </div>
 </Preview>
@@ -84,7 +85,7 @@
       yNice
       padding={{ top: 20, bottom: 20, left: 20, right: 20 }}
     >
-      <Svg>
+      <Layer type={shared.renderContext}>
         <LinearGradient class="from-primary/10 to-secondary/10" vertical>
           {#snippet children({ gradient })}
             <Frame class="stroke-primary/10" fill={gradient} />
@@ -92,55 +93,7 @@
         </LinearGradient>
         <Axis placement="bottom" />
         <Axis placement="left" />
-      </Svg>
-    </Chart>
-  </div>
-</Preview>
-
-<h2>Canvas</h2>
-
-<Preview>
-  <div class="h-[300px] p-4 border rounded-sm">
-    <Chart
-      data={[]}
-      x="x"
-      xDomain={[0, 100]}
-      y="y"
-      yDomain={[0, 100]}
-      yNice
-      padding={{ top: 20, bottom: 20, left: 20, right: 20 }}
-    >
-      <Canvas>
-        <Frame class="fill-danger/5" />
-        <Axis placement="bottom" rule />
-        <Axis placement="left" rule />
-      </Canvas>
-    </Chart>
-  </div>
-</Preview>
-
-<h2>Canvas gradient background</h2>
-
-<Preview>
-  <div class="h-[300px] p-4 border rounded-sm">
-    <Chart
-      data={[]}
-      x="x"
-      xDomain={[0, 100]}
-      y="y"
-      yDomain={[0, 100]}
-      yNice
-      padding={{ top: 20, bottom: 20, left: 20, right: 20 }}
-    >
-      <Canvas>
-        <LinearGradient class="from-primary/10 to-secondary/10" vertical>
-          {#snippet children({ gradient })}
-            <Frame class="stroke-primary/10" fill={gradient} />
-          {/snippet}
-        </LinearGradient>
-        <Axis placement="bottom" />
-        <Axis placement="left" />
-      </Canvas>
+      </Layer>
     </Chart>
   </div>
 </Preview>
diff --git a/packages/layerchart/src/routes/docs/components/Frame/+page.ts b/packages/layerchart/src/routes/docs/components/Frame/+page.ts
index b32b06f3f..bdbe0e0ce 100644
--- a/packages/layerchart/src/routes/docs/components/Frame/+page.ts
+++ b/packages/layerchart/src/routes/docs/components/Frame/+page.ts
@@ -8,6 +8,7 @@ export async function load() {
       api,
       source,
       pageSource,
+      supportedContexts: ['svg', 'canvas'],
     },
   };
 }
diff --git a/packages/layerchart/src/routes/docs/components/GeoCircle/+page.svelte b/packages/layerchart/src/routes/docs/components/GeoCircle/+page.svelte
index 9ac6220f7..201d47679 100644
--- a/packages/layerchart/src/routes/docs/components/GeoCircle/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/GeoCircle/+page.svelte
@@ -11,10 +11,11 @@
   import { range } from 'd3-array';
   import { feature } from 'topojson-client';
 
-  import { Chart, GeoCircle, GeoPath, Graticule, Svg } from 'layerchart';
+  import { Chart, GeoCircle, GeoPath, Graticule, Layer } from 'layerchart';
   import { Field, RangeField, SelectField, ToggleGroup, ToggleOption } from 'svelte-ux';
 
   import Preview from '$lib/docs/Preview.svelte';
+  import { shared } from '../../shared.svelte.js';
 
   let { data } = $props();
 
@@ -98,7 +99,7 @@
       }}
       padding={{ left: 100, right: 100 }}
     >
-      <Svg>
+      <Layer type={shared.renderContext}>
         <GeoPath geojson={{ type: 'Sphere' }} class="stroke-surface-content/30" id="globe" />
         <Graticule class="stroke-surface-content/20" />
 
@@ -126,7 +127,7 @@
             />
           {/each}
         {/if}
-      </Svg>
+      </Layer>
     </Chart>
   </div>
 </Preview>
diff --git a/packages/layerchart/src/routes/docs/components/GeoCircle/+page.ts b/packages/layerchart/src/routes/docs/components/GeoCircle/+page.ts
index 57a951898..98eef6292 100644
--- a/packages/layerchart/src/routes/docs/components/GeoCircle/+page.ts
+++ b/packages/layerchart/src/routes/docs/components/GeoCircle/+page.ts
@@ -15,6 +15,7 @@ export async function load({ fetch }) {
       api,
       source,
       pageSource,
+      supportedContexts: ['svg', 'canvas'],
       related: ['examples/Timezones'],
     },
   };
diff --git a/packages/layerchart/src/routes/docs/components/GeoContext/+page.svelte b/packages/layerchart/src/routes/docs/components/GeoContext/+page.svelte
index f5e63b239..1f3a40471 100644
--- a/packages/layerchart/src/routes/docs/components/GeoContext/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/GeoContext/+page.svelte
@@ -1,4 +1,4 @@
 <script lang="ts">
-  import { Chart, Svg } from 'layerchart';
+  import { Chart, Layer } from 'layerchart';
   import Preview from '$lib/docs/Preview.svelte';
 </script>
diff --git a/packages/layerchart/src/routes/docs/components/GeoContext/+page.ts b/packages/layerchart/src/routes/docs/components/GeoContext/+page.ts
index 655ce88dd..145e2f51b 100644
--- a/packages/layerchart/src/routes/docs/components/GeoContext/+page.ts
+++ b/packages/layerchart/src/routes/docs/components/GeoContext/+page.ts
@@ -10,6 +10,7 @@ export async function load() {
       pageSource,
       description:
         'Setup geo context, particularly the projection used by other geo components.  Typically used indirectly via the `geo` prop on Chart',
+      supportedContexts: ['svg', 'canvas'],
       related: ['components/Chart'],
     },
   };
diff --git a/packages/layerchart/src/routes/docs/components/GeoEdgeFade/+page.svelte b/packages/layerchart/src/routes/docs/components/GeoEdgeFade/+page.svelte
index f5e63b239..1f3a40471 100644
--- a/packages/layerchart/src/routes/docs/components/GeoEdgeFade/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/GeoEdgeFade/+page.svelte
@@ -1,4 +1,4 @@
 <script lang="ts">
-  import { Chart, Svg } from 'layerchart';
+  import { Chart, Layer } from 'layerchart';
   import Preview from '$lib/docs/Preview.svelte';
 </script>
diff --git a/packages/layerchart/src/routes/docs/components/GeoEdgeFade/+page.ts b/packages/layerchart/src/routes/docs/components/GeoEdgeFade/+page.ts
index 0a361d816..61289eba6 100644
--- a/packages/layerchart/src/routes/docs/components/GeoEdgeFade/+page.ts
+++ b/packages/layerchart/src/routes/docs/components/GeoEdgeFade/+page.ts
@@ -8,6 +8,7 @@ export async function load() {
       api,
       source,
       pageSource,
+      supportedContexts: ['svg', 'canvas'],
       related: ['examples/LoftedArcs'],
     },
   };
diff --git a/packages/layerchart/src/routes/docs/components/GeoPath/+page.svelte b/packages/layerchart/src/routes/docs/components/GeoPath/+page.svelte
index f5e63b239..1f3a40471 100644
--- a/packages/layerchart/src/routes/docs/components/GeoPath/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/GeoPath/+page.svelte
@@ -1,4 +1,4 @@
 <script lang="ts">
-  import { Chart, Svg } from 'layerchart';
+  import { Chart, Layer } from 'layerchart';
   import Preview from '$lib/docs/Preview.svelte';
 </script>
diff --git a/packages/layerchart/src/routes/docs/components/GeoPath/+page.ts b/packages/layerchart/src/routes/docs/components/GeoPath/+page.ts
index fe05cce00..c1126d10a 100644
--- a/packages/layerchart/src/routes/docs/components/GeoPath/+page.ts
+++ b/packages/layerchart/src/routes/docs/components/GeoPath/+page.ts
@@ -8,6 +8,7 @@ export async function load() {
       api,
       source,
       pageSource,
+      supportedContexts: ['svg', 'canvas'],
       related: [
         'components/Graticule',
         'examples/AnimatedGlobe',
diff --git a/packages/layerchart/src/routes/docs/components/GeoPoint/+page.svelte b/packages/layerchart/src/routes/docs/components/GeoPoint/+page.svelte
index f5e63b239..1f3a40471 100644
--- a/packages/layerchart/src/routes/docs/components/GeoPoint/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/GeoPoint/+page.svelte
@@ -1,4 +1,4 @@
 <script lang="ts">
-  import { Chart, Svg } from 'layerchart';
+  import { Chart, Layer } from 'layerchart';
   import Preview from '$lib/docs/Preview.svelte';
 </script>
diff --git a/packages/layerchart/src/routes/docs/components/GeoPoint/+page.ts b/packages/layerchart/src/routes/docs/components/GeoPoint/+page.ts
index 53c22a784..1e511f446 100644
--- a/packages/layerchart/src/routes/docs/components/GeoPoint/+page.ts
+++ b/packages/layerchart/src/routes/docs/components/GeoPoint/+page.ts
@@ -8,6 +8,7 @@ export async function load() {
       api,
       source,
       pageSource,
+      supportedContexts: ['svg', 'canvas'],
       related: ['examples/GeoPoint'],
     },
   };
diff --git a/packages/layerchart/src/routes/docs/components/GeoSpline/+page.svelte b/packages/layerchart/src/routes/docs/components/GeoSpline/+page.svelte
index f5e63b239..1f3a40471 100644
--- a/packages/layerchart/src/routes/docs/components/GeoSpline/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/GeoSpline/+page.svelte
@@ -1,4 +1,4 @@
 <script lang="ts">
-  import { Chart, Svg } from 'layerchart';
+  import { Chart, Layer } from 'layerchart';
   import Preview from '$lib/docs/Preview.svelte';
 </script>
diff --git a/packages/layerchart/src/routes/docs/components/GeoSpline/+page.ts b/packages/layerchart/src/routes/docs/components/GeoSpline/+page.ts
index 4eec2cfa9..e0fd2f591 100644
--- a/packages/layerchart/src/routes/docs/components/GeoSpline/+page.ts
+++ b/packages/layerchart/src/routes/docs/components/GeoSpline/+page.ts
@@ -8,6 +8,7 @@ export async function load() {
       api,
       source,
       pageSource,
+      supportedContexts: ['svg', 'canvas'],
       related: ['examples/LoftedArcs'],
     },
   };
diff --git a/packages/layerchart/src/routes/docs/components/GeoTile/+page.svelte b/packages/layerchart/src/routes/docs/components/GeoTile/+page.svelte
index f5e63b239..1f3a40471 100644
--- a/packages/layerchart/src/routes/docs/components/GeoTile/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/GeoTile/+page.svelte
@@ -1,4 +1,4 @@
 <script lang="ts">
-  import { Chart, Svg } from 'layerchart';
+  import { Chart, Layer } from 'layerchart';
   import Preview from '$lib/docs/Preview.svelte';
 </script>
diff --git a/packages/layerchart/src/routes/docs/components/GeoTile/+page.ts b/packages/layerchart/src/routes/docs/components/GeoTile/+page.ts
index 9015d86e1..a39673fe1 100644
--- a/packages/layerchart/src/routes/docs/components/GeoTile/+page.ts
+++ b/packages/layerchart/src/routes/docs/components/GeoTile/+page.ts
@@ -8,6 +8,7 @@ export async function load() {
       api,
       source,
       pageSource,
+      supportedContexts: ['svg', 'canvas'],
       related: ['examples/GeoTile', 'examples/ZoomableTileMap'],
     },
   };
diff --git a/packages/layerchart/src/routes/docs/components/GeoVisible/+page.svelte b/packages/layerchart/src/routes/docs/components/GeoVisible/+page.svelte
index f5e63b239..1f3a40471 100644
--- a/packages/layerchart/src/routes/docs/components/GeoVisible/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/GeoVisible/+page.svelte
@@ -1,4 +1,4 @@
 <script lang="ts">
-  import { Chart, Svg } from 'layerchart';
+  import { Chart, Layer } from 'layerchart';
   import Preview from '$lib/docs/Preview.svelte';
 </script>
diff --git a/packages/layerchart/src/routes/docs/components/GeoVisible/+page.ts b/packages/layerchart/src/routes/docs/components/GeoVisible/+page.ts
index e6b3bebdb..366c3afc8 100644
--- a/packages/layerchart/src/routes/docs/components/GeoVisible/+page.ts
+++ b/packages/layerchart/src/routes/docs/components/GeoVisible/+page.ts
@@ -8,6 +8,7 @@ export async function load() {
       api,
       source,
       pageSource,
+      supportedContexts: ['svg', 'canvas'],
       related: ['examples/SubmarineCablesGlobe'],
     },
   };
diff --git a/packages/layerchart/src/routes/docs/components/Graticule/+page.svelte b/packages/layerchart/src/routes/docs/components/Graticule/+page.svelte
index f5e63b239..1f3a40471 100644
--- a/packages/layerchart/src/routes/docs/components/Graticule/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/Graticule/+page.svelte
@@ -1,4 +1,4 @@
 <script lang="ts">
-  import { Chart, Svg } from 'layerchart';
+  import { Chart, Layer } from 'layerchart';
   import Preview from '$lib/docs/Preview.svelte';
 </script>
diff --git a/packages/layerchart/src/routes/docs/components/Graticule/+page.ts b/packages/layerchart/src/routes/docs/components/Graticule/+page.ts
index 9c35abb86..9b28ebd29 100644
--- a/packages/layerchart/src/routes/docs/components/Graticule/+page.ts
+++ b/packages/layerchart/src/routes/docs/components/Graticule/+page.ts
@@ -8,6 +8,7 @@ export async function load() {
       api,
       source,
       pageSource,
+      supportedContexts: ['svg', 'canvas'],
       related: ['examples/AnimatedGlobe', 'examples/GeoProjection', 'examples/LoftedArcsGlobe'],
     },
   };
diff --git a/packages/layerchart/src/routes/docs/components/Grid/+page.svelte b/packages/layerchart/src/routes/docs/components/Grid/+page.svelte
index 054966339..ba5f1055d 100644
--- a/packages/layerchart/src/routes/docs/components/Grid/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/Grid/+page.svelte
@@ -2,10 +2,11 @@
   import { scaleTime, scaleBand } from 'd3-scale';
   import { MediaQueryPresets } from '@layerstack/svelte-state';
 
-  import { Axis, Chart, Grid, Svg } from 'layerchart';
+  import { Axis, Chart, Grid, Layer } from 'layerchart';
   import Preview from '$lib/docs/Preview.svelte';
 
   import { createDateSeries } from '$lib/utils/genData.js';
+  import { shared } from '../../shared.svelte.js';
 
   const data = createDateSeries({ min: 50, max: 100, value: 'integer' });
   const { mdScreen } = new MediaQueryPresets();
@@ -25,9 +26,9 @@
       yDomain={[0, 100]}
       padding={{ top: 20, bottom: 20, left: 20, right: 20 }}
     >
-      <Svg>
+      <Layer type={shared.renderContext}>
         <Grid x y />
-      </Svg>
+      </Layer>
     </Chart>
   </div>
 </Preview>
@@ -44,9 +45,9 @@
       yDomain={[0, 100]}
       padding={{ top: 20, bottom: 20, left: 20, right: 20 }}
     >
-      <Svg>
+      <Layer type={shared.renderContext}>
         <Grid x />
-      </Svg>
+      </Layer>
     </Chart>
   </div>
 </Preview>
@@ -63,9 +64,9 @@
       yDomain={[0, 100]}
       padding={{ top: 20, bottom: 20, left: 20, right: 20 }}
     >
-      <Svg>
+      <Layer type={shared.renderContext}>
         <Grid y />
-      </Svg>
+      </Layer>
     </Chart>
   </div>
 </Preview>
@@ -82,9 +83,9 @@
       yDomain={[0, 100]}
       padding={{ top: 20, bottom: 20, left: 20, right: 20 }}
     >
-      <Svg>
+      <Layer type={shared.renderContext}>
         <Grid y={{ style: 'stroke-dasharray: 2' }} />
-      </Svg>
+      </Layer>
     </Chart>
   </div>
 </Preview>
@@ -101,10 +102,10 @@
       yDomain={[0, 100]}
       padding={{ top: 20, bottom: 20, left: 20, right: 20 }}
     >
-      <Svg>
+      <Layer type={shared.renderContext}>
         <Grid x />
         <Axis placement="bottom" rule />
-      </Svg>
+      </Layer>
     </Chart>
   </div>
 </Preview>
@@ -121,10 +122,10 @@
       yDomain={[0, 100]}
       padding={{ top: 20, bottom: 20, left: 20, right: 20 }}
     >
-      <Svg>
+      <Layer type={shared.renderContext}>
         <Grid x bandAlign="between" />
         <Axis placement="bottom" rule />
-      </Svg>
+      </Layer>
     </Chart>
   </div>
 </Preview>
@@ -134,9 +135,9 @@
 <Preview {data}>
   <div class="h-[300px] p-4 border rounded-sm">
     <Chart {data} x="date" xScale={scaleTime()} y="value" yDomain={[0, 100]} radial>
-      <Svg center>
+      <Layer type={shared.renderContext}>
         <Grid x xTicks={(scale) => scale.ticks?.().splice(1)} y />
-      </Svg>
+      </Layer>
     </Chart>
   </div>
 </Preview>
@@ -146,9 +147,9 @@
 <Preview {data}>
   <div class="h-[300px] p-4 border rounded-sm">
     <Chart {data} x="date" xScale={scaleTime()} y="value" yDomain={[0, 100]} radial>
-      <Svg center>
+      <Layer type={shared.renderContext} center>
         <Grid x xTicks={(scale) => scale.ticks?.().splice(1)} y radialY="linear" />
-      </Svg>
+      </Layer>
     </Chart>
   </div>
 </Preview>
@@ -165,7 +166,7 @@
       yDomain={[0, 2]}
       padding={{ top: 20, bottom: 20, left: 20, right: 20 }}
     >
-      <Svg>
+      <Layer type={shared.renderContext}>
         <Grid y yTicks={(scale) => scale.ticks?.().filter(Number.isInteger)} />
         <Axis
           placement="left"
@@ -173,7 +174,7 @@
           ticks={(scale) => scale.ticks?.().filter(Number.isInteger)}
           format="integer"
         />
-      </Svg>
+      </Layer>
     </Chart>
   </div>
 </Preview>
@@ -190,10 +191,10 @@
       yDomain={[0, 100]}
       padding={{ top: 20, bottom: 20, left: 20, right: 20 }}
     >
-      <Svg>
+      <Layer type={shared.renderContext}>
         <Grid y yTicks={[0, 25, 50, 75, 100]} />
         <Axis placement="left" rule ticks={[0, 50, 100]} />
-      </Svg>
+      </Layer>
     </Chart>
   </div>
 </Preview>
@@ -210,10 +211,10 @@
       yDomain={[0, 100]}
       padding={{ top: 20, bottom: 20, left: 20, right: 20 }}
     >
-      <Svg>
+      <Layer type={shared.renderContext}>
         <Grid y yTicks={(scale) => [45, ...(scale.ticks?.() ?? [])]} />
         <Axis placement="left" rule ticks={(scale) => [45, ...(scale.ticks?.() ?? [])]} />
-      </Svg>
+      </Layer>
     </Chart>
   </div>
 </Preview>
@@ -230,10 +231,10 @@
       yDomain={[0, 100]}
       padding={{ top: 20, bottom: 20, left: 20, right: 20 }}
     >
-      <Svg>
+      <Layer type={shared.renderContext}>
         <Grid y yTicks={20} />
         <Axis placement="left" rule ticks={10} />
-      </Svg>
+      </Layer>
     </Chart>
   </div>
 </Preview>
@@ -250,10 +251,10 @@
       yDomain={[0, 100]}
       padding={{ bottom: 20, left: 20, right: 20 }}
     >
-      <Svg>
+      <Layer type={shared.renderContext}>
         <Grid x xTicks={mdScreen.current ? 10 : 5} />
         <Axis placement="bottom" rule ticks={mdScreen.current ? 10 : 5} />
-      </Svg>
+      </Layer>
     </Chart>
   </div>
 </Preview>
@@ -270,10 +271,10 @@
       yDomain={[0, 100]}
       padding={{ top: 20, bottom: 20, left: 20, right: 20 }}
     >
-      <Svg>
+      <Layer type={shared.renderContext}>
         <Grid y yTicks={null} />
         <Axis placement="left" rule ticks={null} />
-      </Svg>
+      </Layer>
     </Chart>
   </div>
 </Preview>
diff --git a/packages/layerchart/src/routes/docs/components/Grid/+page.ts b/packages/layerchart/src/routes/docs/components/Grid/+page.ts
index 6dc2f03e7..e53cc6063 100644
--- a/packages/layerchart/src/routes/docs/components/Grid/+page.ts
+++ b/packages/layerchart/src/routes/docs/components/Grid/+page.ts
@@ -8,6 +8,7 @@ export async function load() {
       api,
       source,
       pageSource,
+      supportedContexts: ['svg', 'canvas'],
       related: ['components/Axis', 'components/Rule'],
     },
   };
diff --git a/packages/layerchart/src/routes/docs/components/Group/+page.svelte b/packages/layerchart/src/routes/docs/components/Group/+page.svelte
index 05847bd06..6d6c2d45f 100644
--- a/packages/layerchart/src/routes/docs/components/Group/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/Group/+page.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
-  import { Axis, Chart, Circle, Group, Svg, Text } from 'layerchart';
+  import { Axis, Chart, Circle, Group, Text, Layer } from 'layerchart';
   import Preview from '$lib/docs/Preview.svelte';
+  import { shared } from '../../shared.svelte.js';
 </script>
 
 <h1>Examples</h1>
@@ -8,7 +9,7 @@
 <Preview>
   <div class="h-[300px] p-4 border rounded-sm">
     <Chart xDomain={[0, 100]} yDomain={[0, 100]} padding={{ bottom: 20, left: 20 }}>
-      <Svg>
+      <Layer type={shared.renderContext}>
         <Axis placement="bottom" rule />
         <Axis placement="left" rule />
         <Group center>
@@ -18,7 +19,7 @@
           <Circle r={10} class="fill-surface-content" />
           <Text value="point" textAnchor="middle" verticalAnchor="start" class="text-xs" dy={12} />
         </Group>
-      </Svg>
+      </Layer>
     </Chart>
   </div>
 </Preview>
diff --git a/packages/layerchart/src/routes/docs/components/Group/+page.ts b/packages/layerchart/src/routes/docs/components/Group/+page.ts
index 09c93207a..7a9a7c36f 100644
--- a/packages/layerchart/src/routes/docs/components/Group/+page.ts
+++ b/packages/layerchart/src/routes/docs/components/Group/+page.ts
@@ -10,6 +10,10 @@ export async function load() {
       pageSource,
       description:
         '`<g>` element with convenient x/y and center placement along with tweened properties using `motionStore`',
+      supportedContexts: [
+        'svg',
+        // 'canvas' // TODO: Supported, but limited use cases
+      ],
       related: [
         'examples/Pack',
         'examples/Partition',
diff --git a/packages/layerchart/src/routes/docs/components/Highlight/+page.svelte b/packages/layerchart/src/routes/docs/components/Highlight/+page.svelte
index f5e63b239..1f3a40471 100644
--- a/packages/layerchart/src/routes/docs/components/Highlight/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/Highlight/+page.svelte
@@ -1,4 +1,4 @@
 <script lang="ts">
-  import { Chart, Svg } from 'layerchart';
+  import { Chart, Layer } from 'layerchart';
   import Preview from '$lib/docs/Preview.svelte';
 </script>
diff --git a/packages/layerchart/src/routes/docs/components/Highlight/+page.ts b/packages/layerchart/src/routes/docs/components/Highlight/+page.ts
index e7bdbb8ea..4c361b911 100644
--- a/packages/layerchart/src/routes/docs/components/Highlight/+page.ts
+++ b/packages/layerchart/src/routes/docs/components/Highlight/+page.ts
@@ -8,6 +8,7 @@ export async function load() {
       api,
       source,
       pageSource,
+      supportedContexts: ['svg', 'canvas'],
       related: ['components/Tooltip', 'components/TooltipContext'],
     },
   };
diff --git a/packages/layerchart/src/routes/docs/components/Hull/+page.svelte b/packages/layerchart/src/routes/docs/components/Hull/+page.svelte
index 4782b5fc2..a7d712ab6 100644
--- a/packages/layerchart/src/routes/docs/components/Hull/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/Hull/+page.svelte
@@ -5,10 +5,11 @@
   import { curveLinearClosed } from 'd3-shape';
   import { feature } from 'topojson-client';
 
-  import { Axis, Chart, Circle, GeoPath, GeoPoint, Hull, Points, Svg, Text } from 'layerchart';
+  import { Axis, Chart, Circle, GeoPath, GeoPoint, Hull, Layer, Points, Text } from 'layerchart';
 
   import Preview from '$lib/docs/Preview.svelte';
   import CurveMenuField from '$lib/docs/CurveMenuField.svelte';
+  import { shared } from '../../shared.svelte.js';
 
   let { data } = $props();
 
@@ -44,21 +45,23 @@
       padding={{ left: 16, bottom: 24 }}
     >
       {@const dataByGroup = group(data.groupData, (d) => d.group)}
-      <Svg>
+      <Layer type={shared.renderContext}>
         <Axis placement="left" grid rule />
         <Axis placement="bottom" rule />
         {#each dataByGroup as [group, data]}
-          <Points r={3} {data} fill={groupColor(group)} />
+          {@const color = groupColor(group)}
+          <Points r={3} {data} fill={color} />
+          <!-- TODO: handle group color differently to work with Canvas -->
           <Hull
             {data}
             {curve}
-            style="--group-color:{groupColor(group)}"
+            style="--group-color:{color}"
             classes={{
               path: 'pointer-events-none stroke-[var(--group-color)] fill-[var(--group-color)] [fill-opacity:0.1]',
             }}
           />
         {/each}
-      </Svg>
+      </Layer>
     </Chart>
   </div>
 </Preview>
@@ -75,15 +78,11 @@
         fitGeojson: states,
       }}
     >
-      <Svg>
-        <g class="states">
-          {#each states.features as feature}
-            <GeoPath
-              geojson={feature}
-              class="fill-surface-content/10 stroke-surface-100 hover:fill-surface-content/20"
-            />
-          {/each}
-        </g>
+      <Layer type={shared.renderContext}>
+        <GeoPath
+          geojson={states}
+          class="fill-surface-content/10 stroke-surface-100 hover:fill-surface-content/20"
+        />
         <g class="points pointer-events-none">
           <Hull
             data={data.us.stateCaptitals.filter((d) => {
@@ -96,6 +95,7 @@
           />
 
           {#each data.us.stateCaptitals as capital}
+            <!-- TODO: Fix GeoPoint to work with Canvas -->
             <GeoPoint lat={capital.latitude} long={capital.longitude}>
               <Circle r={2} class="fill-white stroke-danger" />
               <Text
@@ -107,7 +107,7 @@
             </GeoPoint>
           {/each}
         </g>
-      </Svg>
+      </Layer>
     </Chart>
   </div>
 </Preview>
diff --git a/packages/layerchart/src/routes/docs/components/Hull/+page.ts b/packages/layerchart/src/routes/docs/components/Hull/+page.ts
index c9dcc8acf..1cdb3cf32 100644
--- a/packages/layerchart/src/routes/docs/components/Hull/+page.ts
+++ b/packages/layerchart/src/routes/docs/components/Hull/+page.ts
@@ -27,6 +27,7 @@ export async function load({ fetch }) {
       api,
       source,
       pageSource,
+      supportedContexts: ['svg', 'canvas'],
     },
   };
 }
diff --git a/packages/layerchart/src/routes/docs/components/Labels/+page.svelte b/packages/layerchart/src/routes/docs/components/Labels/+page.svelte
index f5e63b239..1f3a40471 100644
--- a/packages/layerchart/src/routes/docs/components/Labels/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/Labels/+page.svelte
@@ -1,4 +1,4 @@
 <script lang="ts">
-  import { Chart, Svg } from 'layerchart';
+  import { Chart, Layer } from 'layerchart';
   import Preview from '$lib/docs/Preview.svelte';
 </script>
diff --git a/packages/layerchart/src/routes/docs/components/Labels/+page.ts b/packages/layerchart/src/routes/docs/components/Labels/+page.ts
index 38317cc57..4a7223c96 100644
--- a/packages/layerchart/src/routes/docs/components/Labels/+page.ts
+++ b/packages/layerchart/src/routes/docs/components/Labels/+page.ts
@@ -8,6 +8,7 @@ export async function load() {
       api,
       source,
       pageSource,
+      supportedContexts: ['svg', 'canvas'],
       related: [
         'examples/Area',
         'examples/Bars',
diff --git a/packages/layerchart/src/routes/docs/components/Legend/+page.ts b/packages/layerchart/src/routes/docs/components/Legend/+page.ts
index d518ee838..8bb8abdc0 100644
--- a/packages/layerchart/src/routes/docs/components/Legend/+page.ts
+++ b/packages/layerchart/src/routes/docs/components/Legend/+page.ts
@@ -8,6 +8,7 @@ export async function load() {
       api,
       source,
       pageSource,
+      supportedContexts: ['html'],
     },
   };
 }
diff --git a/packages/layerchart/src/routes/docs/components/Line/+page.svelte b/packages/layerchart/src/routes/docs/components/Line/+page.svelte
index 8e321a347..8b1cf2ab0 100644
--- a/packages/layerchart/src/routes/docs/components/Line/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/Line/+page.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
   import Preview from '$lib/docs/Preview.svelte';
 
-  import { Axis, Chart, Line, Svg } from 'layerchart';
+  import { Axis, Chart, Line, Layer } from 'layerchart';
+  import { shared } from '../../shared.svelte.js';
 </script>
 
 <h1>Examples</h1>
@@ -9,7 +10,7 @@
 <Preview>
   <div class="h-[300px] p-4 border rounded-sm">
     <Chart xDomain={[0, 100]} yDomain={[0, 100]} padding={{ bottom: 20, left: 20 }}>
-      <Svg>
+      <Layer type={shared.renderContext}>
         <Axis placement="bottom" rule />
         <Axis placement="left" rule />
         <Line x1={100} y1={100} x2={200} y2={200} class="stroke-2 stroke-primary" />
@@ -23,7 +24,7 @@
           markerStart="circle"
           markerEnd="arrow"
         />
-      </Svg>
+      </Layer>
     </Chart>
   </div>
 </Preview>
diff --git a/packages/layerchart/src/routes/docs/components/Line/+page.ts b/packages/layerchart/src/routes/docs/components/Line/+page.ts
index d22dc001d..3df4dca88 100644
--- a/packages/layerchart/src/routes/docs/components/Line/+page.ts
+++ b/packages/layerchart/src/routes/docs/components/Line/+page.ts
@@ -9,6 +9,7 @@ export async function load() {
       source,
       pageSource,
       description: '`<line>` element with tweened properties using `motionStore`',
+      supportedContexts: ['svg', 'canvas'],
       related: ['components/Rule', 'components/Spline'],
     },
   };
diff --git a/packages/layerchart/src/routes/docs/components/LineChart/+page.svelte b/packages/layerchart/src/routes/docs/components/LineChart/+page.svelte
index 6e943ed57..5f48f2f36 100644
--- a/packages/layerchart/src/routes/docs/components/LineChart/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/LineChart/+page.svelte
@@ -14,7 +14,7 @@
   import { scaleBand, scaleSequential } from 'd3-scale';
   import { curveCatmullRom, curveLinearClosed } from 'd3-shape';
   import { extent, flatGroup, group, ticks } from 'd3-array';
-  import { Field, Switch, ToggleGroup, ToggleOption } from 'svelte-ux';
+  import { Field, Switch } from 'svelte-ux';
   import { format, sortFunc } from '@layerstack/utils';
 
   import Preview from '$lib/docs/Preview.svelte';
@@ -23,6 +23,7 @@
   import { interpolateTurbo } from 'd3-scale-chromatic';
   import { cls } from '@layerstack/tailwind';
   import { slide } from 'svelte/transition';
+  import { shared } from '../../shared.svelte.js';
 
   let { data } = $props();
 
@@ -86,20 +87,13 @@
 
   let show = $state(true);
 
-  let renderContext: 'svg' | 'canvas' = $state('svg');
+  let renderContext = $derived(shared.renderContext as 'svg' | 'canvas');
   let debug = $state(false);
 </script>
 
 <h1>Examples</h1>
 
 <div class="grid grid-cols-[1fr_auto] gap-2">
-  <Field label="Render context">
-    <ToggleGroup bind:value={renderContext} variant="outline">
-      <ToggleOption value="svg">Svg</ToggleOption>
-      <ToggleOption value="canvas">Canvas</ToggleOption>
-    </ToggleGroup>
-  </Field>
-
   <Field label="Debug" let:id classes={{ container: 'h-full' }}>
     <Switch {id} bind:checked={debug} />
   </Field>
diff --git a/packages/layerchart/src/routes/docs/components/LineChart/+page.ts b/packages/layerchart/src/routes/docs/components/LineChart/+page.ts
index ba4602ab6..a6cd96a57 100644
--- a/packages/layerchart/src/routes/docs/components/LineChart/+page.ts
+++ b/packages/layerchart/src/routes/docs/components/LineChart/+page.ts
@@ -37,6 +37,7 @@ export async function load({ fetch }) {
       source,
       pageSource,
       description: 'Streamlined Chart configuration for Line charts',
+      supportedContexts: ['svg', 'canvas'],
       related: ['components/Chart', 'components/Spline', 'examples/Line'],
     },
   };
diff --git a/packages/layerchart/src/routes/docs/components/LinearGradient/+page.svelte b/packages/layerchart/src/routes/docs/components/LinearGradient/+page.svelte
index dead13d72..31ec5a742 100644
--- a/packages/layerchart/src/routes/docs/components/LinearGradient/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/LinearGradient/+page.svelte
@@ -1,28 +1,17 @@
 <script lang="ts">
-  import { Chart, Layer, LinearGradient, Rect, Svg } from 'layerchart';
+  import { Chart, Layer, LinearGradient, Rect } from 'layerchart';
   import Preview from '$lib/docs/Preview.svelte';
-  import { Field, ToggleGroup, ToggleOption } from 'svelte-ux';
-
-  let renderContext: 'svg' | 'canvas' = $state('svg');
+  import { shared } from '../../shared.svelte.js';
 </script>
 
 <h1>Examples</h1>
 
-<div class="grid grid-cols-[1fr_auto] gap-2">
-  <Field label="Render context">
-    <ToggleGroup bind:value={renderContext} variant="outline">
-      <ToggleOption value="svg">Svg</ToggleOption>
-      <ToggleOption value="canvas">Canvas</ToggleOption>
-    </ToggleGroup>
-  </Field>
-</div>
-
 <h2>Direction with custom colors</h2>
 
 <Preview>
   <div class="h-[334px] p-4 border rounded-sm">
     <Chart>
-      <Layer type={renderContext}>
+      <Layer type={shared.renderContext}>
         <LinearGradient stops={['hsl(60 100% 50%)', 'hsl(30 100% 40%)']}>
           {#snippet children({ gradient })}
             <Rect x={120 * 0} y={0} width={100} height={300} rx={8} fill={gradient} />
@@ -50,7 +39,7 @@
 <Preview>
   <div class="h-[334px] p-4 border rounded-sm">
     <Chart>
-      <Layer type={renderContext}>
+      <Layer type={shared.renderContext}>
         <LinearGradient
           stops={[
             ['30%', 'hsl(60 100% 50%)'],
@@ -95,7 +84,7 @@
 <Preview>
   <div class="h-[334px] p-4 border rounded-sm">
     <Chart>
-      <Layer type={renderContext}>
+      <Layer type={shared.renderContext}>
         <LinearGradient class="from-pink-500 to-yellow-500" vertical>
           {#snippet children({ gradient })}
             <Rect x={120 * 0} y={0} width={100} height={300} rx={8} fill={gradient} />
@@ -159,7 +148,7 @@
 <Preview>
   <div class="h-[334px] p-4 border rounded-sm">
     <Chart>
-      <Layer type={renderContext}>
+      <Layer type={shared.renderContext}>
         <LinearGradient class="from-green-500 to-blue-500" units="objectBoundingBox">
           {#snippet children({ gradient })}
             {#each { length: 6 } as _, i}
diff --git a/packages/layerchart/src/routes/docs/components/LinearGradient/+page.ts b/packages/layerchart/src/routes/docs/components/LinearGradient/+page.ts
index 3e9278869..171c0cfc4 100644
--- a/packages/layerchart/src/routes/docs/components/LinearGradient/+page.ts
+++ b/packages/layerchart/src/routes/docs/components/LinearGradient/+page.ts
@@ -8,6 +8,7 @@ export async function load() {
       api,
       source,
       pageSource,
+      supportedContexts: ['svg', 'canvas'],
       related: ['components/RadialGradient', 'components/Pattern'],
     },
   };
diff --git a/packages/layerchart/src/routes/docs/components/Link/+page.svelte b/packages/layerchart/src/routes/docs/components/Link/+page.svelte
index f5e63b239..1f3a40471 100644
--- a/packages/layerchart/src/routes/docs/components/Link/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/Link/+page.svelte
@@ -1,4 +1,4 @@
 <script lang="ts">
-  import { Chart, Svg } from 'layerchart';
+  import { Chart, Layer } from 'layerchart';
   import Preview from '$lib/docs/Preview.svelte';
 </script>
diff --git a/packages/layerchart/src/routes/docs/components/Link/+page.ts b/packages/layerchart/src/routes/docs/components/Link/+page.ts
index ccef2cf55..328b7e72a 100644
--- a/packages/layerchart/src/routes/docs/components/Link/+page.ts
+++ b/packages/layerchart/src/routes/docs/components/Link/+page.ts
@@ -8,6 +8,7 @@ export async function load() {
       api,
       source,
       pageSource,
+      supportedContexts: ['svg', 'canvas'],
       related: ['components/Connector', 'components/Points', 'examples/Sankey', 'examples/Tree'],
     },
   };
diff --git a/packages/layerchart/src/routes/docs/components/Marker/+page.svelte b/packages/layerchart/src/routes/docs/components/Marker/+page.svelte
index 8fd51f380..2c14ba2b7 100644
--- a/packages/layerchart/src/routes/docs/components/Marker/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/Marker/+page.svelte
@@ -1,12 +1,13 @@
 <script lang="ts">
   import type { ComponentProps } from 'svelte';
 
-  import { Chart, Line, Spline, Svg } from 'layerchart';
+  import { Chart, Line, Spline, Layer } from 'layerchart';
   import { Field, RangeField, Switch } from 'svelte-ux';
 
   import Preview from '$lib/docs/Preview.svelte';
   import CurveMenuField from '$lib/docs/CurveMenuField.svelte';
   import PathDataMenuField from '$lib/docs/PathDataMenuField.svelte';
+  import { shared } from '../../shared.svelte.js';
 
   let pathGenerator = $state((x: number) => x);
   let curve: ComponentProps<typeof CurveMenuField>['value'] = $state(undefined);
@@ -63,7 +64,7 @@
       <div>{marker}</div>
       <div class="h-[100px] p-4 border rounded-sm">
         <Chart {data} x="x" y="y">
-          <Svg>
+          <Layer type={shared.renderContext}>
             <Spline
               {curve}
               class="stroke-primary"
@@ -72,7 +73,7 @@
               markerEnd={markerEnd ? marker : undefined}
               {motion}
             />
-          </Svg>
+          </Layer>
         </Chart>
       </div>
     {/each}
@@ -105,7 +106,7 @@
       <div>{marker}</div>
       <div class="h-[100px] p-4 border rounded-sm">
         <Chart {data} x="x" y="y">
-          <Svg>
+          <Layer type={shared.renderContext}>
             <Spline
               {curve}
               class="stroke-primary stroke-2"
@@ -114,7 +115,7 @@
               markerEnd={markerEnd ? { type: marker, 'stroke-width': 2 } : undefined}
               {motion}
             />
-          </Svg>
+          </Layer>
         </Chart>
       </div>
     {/each}
@@ -139,7 +140,7 @@
       <div class="h-[35px] p-4 border rounded-sm">
         <Chart {data} x="x" y="y">
           {#snippet children({ context })}
-            <Svg>
+            <Layer type={shared.renderContext}>
               <Line
                 x1={0}
                 x2={context.width}
@@ -150,7 +151,7 @@
                 markerMid={markerMid ? marker : undefined}
                 markerEnd={markerEnd ? marker : undefined}
               />
-            </Svg>
+            </Layer>
           {/snippet}
         </Chart>
       </div>
@@ -164,7 +165,7 @@
   <div class="grid gap-2">
     <div class="h-[200px] p-4 border rounded-sm">
       <Chart {data} x="x" y="y">
-        <Svg>
+        <Layer type={shared.renderContext}>
           <Spline
             {curve}
             class="stroke-primary stroke-2"
@@ -176,7 +177,7 @@
               class: 'stroke-2 stroke-surface-100 fill-secondary',
             }}
           />
-        </Svg>
+        </Layer>
       </Chart>
     </div>
   </div>
@@ -189,39 +190,39 @@
     <div>default (auto)</div>
     <div class="h-[200px] p-4 border rounded-sm">
       <Chart {data} x="x" y="y">
-        <Svg>
+        <Layer type={shared.renderContext}>
           <Spline
             {curve}
             class="stroke-primary stroke-2"
             marker={{ type: 'line', class: 'stroke-2 stroke-accent' }}
           />
-        </Svg>
+        </Layer>
       </Chart>
     </div>
 
     <div>0</div>
     <div class="h-[200px] p-4 border rounded-sm">
       <Chart {data} x="x" y="y">
-        <Svg>
+        <Layer type={shared.renderContext}>
           <Spline
             {curve}
             class="stroke-primary stroke-2"
             marker={{ type: 'line', orient: 0, class: 'stroke-2 stroke-accent' }}
           />
-        </Svg>
+        </Layer>
       </Chart>
     </div>
 
     <div>90</div>
     <div class="h-[200px] p-4 border rounded-sm">
       <Chart {data} x="x" y="y">
-        <Svg>
+        <Layer type={shared.renderContext}>
           <Spline
             {curve}
             class="stroke-primary stroke-2"
             marker={{ type: 'line', orient: 90, class: 'stroke-2 stroke-accent' }}
           />
-        </Svg>
+        </Layer>
       </Chart>
     </div>
   </div>
diff --git a/packages/layerchart/src/routes/docs/components/Marker/+page.ts b/packages/layerchart/src/routes/docs/components/Marker/+page.ts
index abc493315..e9b94ac02 100644
--- a/packages/layerchart/src/routes/docs/components/Marker/+page.ts
+++ b/packages/layerchart/src/routes/docs/components/Marker/+page.ts
@@ -9,6 +9,7 @@ export async function load() {
       source,
       pageSource,
       description: 'Graphic used for drawing arrowheads or polymarkers on Line, Spline, etc',
+      supportedContexts: ['svg'],
       related: ['components/Spline', 'components/Line', 'components/Rule', 'components/GeoSpline'],
     },
   };
diff --git a/packages/layerchart/src/routes/docs/components/MotionPath/+page.svelte b/packages/layerchart/src/routes/docs/components/MotionPath/+page.svelte
index b98d1850a..9b2753323 100644
--- a/packages/layerchart/src/routes/docs/components/MotionPath/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/MotionPath/+page.svelte
@@ -2,13 +2,14 @@
   import type { ComponentProps } from 'svelte';
   import { linear } from 'svelte/easing';
 
-  import { Axis, Chart, Circle, MotionPath, Spline, Svg } from 'layerchart';
+  import { Axis, Chart, Circle, Layer, MotionPath, Spline } from 'layerchart';
   import { Field, RangeField, Switch, Toggle } from 'svelte-ux';
 
   import Preview from '$lib/docs/Preview.svelte';
   import CurveMenuField from '$lib/docs/CurveMenuField.svelte';
   import PathDataMenuField from '$lib/docs/PathDataMenuField.svelte';
   import Blockquote from '$lib/docs/Blockquote.svelte';
+  import { shared } from '../../shared.svelte.js';
 
   let pointCount = $state(100);
 
@@ -46,7 +47,7 @@
   <Preview {data}>
     <div class="h-[300px] p-4 border rounded-sm">
       <Chart {data} x="x" y="y" yNice padding={{ left: 16, bottom: 24 }}>
-        <Svg>
+        <Layer type={shared.renderContext}>
           <Axis placement="left" grid rule />
           <Axis placement="bottom" rule />
           {#if show}
@@ -57,7 +58,7 @@
               {/snippet}
             </MotionPath>
           {/if}
-        </Svg>
+        </Layer>
       </Chart>
     </div>
   </Preview>
@@ -78,7 +79,7 @@
   <Preview {data}>
     <div class="h-[300px] p-4 border rounded-sm">
       <Chart {data} x="x" y="y" yNice padding={{ left: 16, bottom: 24 }}>
-        <Svg>
+        <Layer type={shared.renderContext}>
           <Axis placement="left" grid rule />
           <Axis placement="bottom" rule />
           {#if show}
@@ -96,7 +97,7 @@
               {/snippet}
             </MotionPath>
           {/if}
-        </Svg>
+        </Layer>
       </Chart>
     </div>
   </Preview>
@@ -117,7 +118,7 @@
   <Preview {data}>
     <div class="h-[300px] p-4 border rounded-sm">
       <Chart {data} x="x" y="y" yNice padding={{ left: 16, bottom: 24 }}>
-        <Svg>
+        <Layer type={shared.renderContext}>
           <Axis placement="left" grid rule />
           <Axis placement="bottom" rule />
           {#if show}
@@ -130,7 +131,7 @@
               </MotionPath>
             {/key}
           {/if}
-        </Svg>
+        </Layer>
       </Chart>
     </div>
   </Preview>
diff --git a/packages/layerchart/src/routes/docs/components/MotionPath/+page.ts b/packages/layerchart/src/routes/docs/components/MotionPath/+page.ts
index 90f65e3bc..2f42686e5 100644
--- a/packages/layerchart/src/routes/docs/components/MotionPath/+page.ts
+++ b/packages/layerchart/src/routes/docs/components/MotionPath/+page.ts
@@ -9,6 +9,7 @@ export async function load() {
       source,
       pageSource,
       description: 'Animate an object along a path',
+      supportedContexts: ['svg'],
       related: ['components/Spline'],
     },
   };
diff --git a/packages/layerchart/src/routes/docs/components/Pack/+page.svelte b/packages/layerchart/src/routes/docs/components/Pack/+page.svelte
index f5e63b239..1f3a40471 100644
--- a/packages/layerchart/src/routes/docs/components/Pack/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/Pack/+page.svelte
@@ -1,4 +1,4 @@
 <script lang="ts">
-  import { Chart, Svg } from 'layerchart';
+  import { Chart, Layer } from 'layerchart';
   import Preview from '$lib/docs/Preview.svelte';
 </script>
diff --git a/packages/layerchart/src/routes/docs/components/Pack/+page.ts b/packages/layerchart/src/routes/docs/components/Pack/+page.ts
index d833c7fda..dbb5c15b6 100644
--- a/packages/layerchart/src/routes/docs/components/Pack/+page.ts
+++ b/packages/layerchart/src/routes/docs/components/Pack/+page.ts
@@ -8,6 +8,7 @@ export async function load() {
       api,
       source,
       pageSource,
+      supportedContexts: ['svg', 'canvas'],
       related: ['examples/Pack'],
     },
   };
diff --git a/packages/layerchart/src/routes/docs/components/Partition/+page.svelte b/packages/layerchart/src/routes/docs/components/Partition/+page.svelte
index f5e63b239..1f3a40471 100644
--- a/packages/layerchart/src/routes/docs/components/Partition/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/Partition/+page.svelte
@@ -1,4 +1,4 @@
 <script lang="ts">
-  import { Chart, Svg } from 'layerchart';
+  import { Chart, Layer } from 'layerchart';
   import Preview from '$lib/docs/Preview.svelte';
 </script>
diff --git a/packages/layerchart/src/routes/docs/components/Partition/+page.ts b/packages/layerchart/src/routes/docs/components/Partition/+page.ts
index 9cd7ecd09..6d85be411 100644
--- a/packages/layerchart/src/routes/docs/components/Partition/+page.ts
+++ b/packages/layerchart/src/routes/docs/components/Partition/+page.ts
@@ -8,6 +8,7 @@ export async function load() {
       api,
       source,
       pageSource,
+      supportedContexts: ['svg', 'canvas'],
       related: ['examples/Partition', 'examples/Sunburst'],
     },
   };
diff --git a/packages/layerchart/src/routes/docs/components/Pattern/+page.svelte b/packages/layerchart/src/routes/docs/components/Pattern/+page.svelte
index c8b64d22c..b536fc6cd 100644
--- a/packages/layerchart/src/routes/docs/components/Pattern/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/Pattern/+page.svelte
@@ -1,28 +1,17 @@
 <script lang="ts">
   import { Chart, Layer, LinearGradient, Pattern, Rect } from 'layerchart';
   import Preview from '$lib/docs/Preview.svelte';
-  import { Field, ToggleGroup, ToggleOption } from 'svelte-ux';
-
-  let renderContext: 'svg' | 'canvas' = $state('svg');
+  import { shared } from '../../shared.svelte.js';
 </script>
 
 <h1>Examples</h1>
 
-<div class="grid grid-cols-[1fr_auto] gap-2">
-  <Field label="Render context">
-    <ToggleGroup bind:value={renderContext} variant="outline">
-      <ToggleOption value="svg">Svg</ToggleOption>
-      <ToggleOption value="canvas">Canvas</ToggleOption>
-    </ToggleGroup>
-  </Field>
-</div>
-
 <h2>Lines</h2>
 
 <Preview>
   <div class="h-[334px] p-4 border rounded-sm">
     <Chart>
-      <Layer type={renderContext}>
+      <Layer type={shared.renderContext}>
         <Pattern size={4} lines>
           {#snippet children({ pattern })}
             <Rect
@@ -116,7 +105,7 @@
 <Preview>
   <div class="h-[334px] p-4 border rounded-sm">
     <Chart>
-      <Layer type={renderContext}>
+      <Layer type={shared.renderContext}>
         <Pattern size={4} circles>
           {#snippet children({ pattern })}
             <Rect
@@ -210,7 +199,7 @@
 <Preview>
   <div class="h-[334px] p-4 border rounded-sm">
     <Chart>
-      <Layer type={renderContext}>
+      <Layer type={shared.renderContext}>
         <Pattern size={4} circles={{ color: 'white', opacity: 0.25 }} background="hsl(20 100% 50%)">
           {#snippet children({ pattern })}
             <Rect x={120 * 0} y={0} width={100} height={300} rx={8} fill={pattern} />
@@ -271,7 +260,7 @@
 <Preview>
   <div class="h-[334px] p-4 border rounded-sm">
     <Chart>
-      <Layer type={renderContext}>
+      <Layer type={shared.renderContext}>
         <LinearGradient stops={['hsl(60 100% 50%)', 'hsl(30 100% 40%)']}>
           {#snippet children({ gradient })}
             <Rect x={120 * 0} y={0} width={100} height={300} rx={8} fill={gradient} />
@@ -359,7 +348,7 @@
 <Preview>
   <div class="h-[334px] p-4 border rounded-sm">
     <Chart>
-      <Layer type={renderContext}>
+      <Layer type={shared.renderContext}>
         <LinearGradient stops={['hsl(60 100% 50%)', 'hsl(30 100% 40%)']}>
           {#snippet children({ gradient })}
             <Pattern size={4} background={gradient}>
@@ -419,7 +408,7 @@
 <Preview>
   <div class="h-[334px] p-4 border rounded-sm">
     <Chart>
-      <Layer type="svg">
+      <Layer type={shared.renderContext}>
         <Pattern width={4} height={4}>
           {#snippet patternContent()}
             <line x2="100%" class="stroke-surface-content" />
@@ -539,7 +528,7 @@
 <Preview>
   <div class="h-[334px] p-4 border rounded-sm">
     <Chart>
-      <Layer type="svg">
+      <Layer type={shared.renderContext}>
         <Pattern id="circle-pattern-1" width={4} height={4}>
           {#snippet patternContent()}
             <circle cx={2} cy={2} r={1} class="fill-surface-content" />
diff --git a/packages/layerchart/src/routes/docs/components/Pattern/+page.ts b/packages/layerchart/src/routes/docs/components/Pattern/+page.ts
index cb64c34b6..dc6104793 100644
--- a/packages/layerchart/src/routes/docs/components/Pattern/+page.ts
+++ b/packages/layerchart/src/routes/docs/components/Pattern/+page.ts
@@ -8,6 +8,7 @@ export async function load() {
       api,
       source,
       pageSource,
+      supportedContexts: ['svg', 'canvas'],
       related: ['components/LinearGradient', 'components/RadialGradient'],
     },
   };
diff --git a/packages/layerchart/src/routes/docs/components/Pie/+page.svelte b/packages/layerchart/src/routes/docs/components/Pie/+page.svelte
index a5712763b..8afc33044 100644
--- a/packages/layerchart/src/routes/docs/components/Pie/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/Pie/+page.svelte
@@ -4,11 +4,12 @@
   import { cls } from '@layerstack/tailwind';
   import { format as formatUtil } from '@layerstack/utils';
 
-  import { Arc, Chart, Group, Pie, Svg, Text, Tooltip } from 'layerchart';
+  import { Arc, Chart, Group, Layer, Pie, Text, Tooltip } from 'layerchart';
 
   import Preview from '$lib/docs/Preview.svelte';
   import { createDateSeries } from '$lib/utils/genData.js';
   import { Field, Switch, Toggle } from 'svelte-ux';
+  import { shared } from '../../shared.svelte.js';
 
   const data = createDateSeries({ min: 20, max: 100, value: 'integer', count: 4 });
   const data2 = createDateSeries({ min: 20, max: 100, value: 'integer', count: 4 });
@@ -37,9 +38,9 @@
 <Preview {data}>
   <div class="h-[300px] p-4 border rounded-sm resize overflow-auto">
     <Chart {data} x="value" c="date" cRange={keyColors}>
-      <Svg center>
+      <Layer type={shared.renderContext} center>
         <Pie />
-      </Svg>
+      </Layer>
     </Chart>
   </div>
 </Preview>
@@ -49,9 +50,9 @@
 <Preview {data}>
   <div class="h-[300px] p-4 border rounded-sm resize overflow-auto">
     <Chart {data} x="value" c="date" cRange={keyColors}>
-      <Svg center>
+      <Layer type={shared.renderContext} center>
         <Pie sort={null} />
-      </Svg>
+      </Layer>
     </Chart>
   </div>
 </Preview>
@@ -61,9 +62,9 @@
 <Preview {data}>
   <div class="h-[300px] p-4 border rounded-sm resize overflow-auto">
     <Chart {data} x="value" xRange={[-90, 90]} c="date" cRange={keyColors}>
-      <Svg center>
+      <Layer type={shared.renderContext} center>
         <Pie />
-      </Svg>
+      </Layer>
     </Chart>
   </div>
 </Preview>
@@ -73,9 +74,9 @@
 <Preview {data}>
   <div class="h-[300px] p-4 border rounded-sm resize overflow-auto">
     <Chart {data} x="value" c="date" cRange={keyColors}>
-      <Svg center>
+      <Layer type={shared.renderContext} center>
         <Pie range={[-90, 90]} />
-      </Svg>
+      </Layer>
     </Chart>
   </div>
 </Preview>
@@ -85,9 +86,9 @@
 <Preview {data}>
   <div class="h-[300px] p-4 border rounded-sm resize overflow-auto">
     <Chart {data} x="value" c="date" cRange={keyColors}>
-      <Svg center>
+      <Layer type={shared.renderContext} center>
         <Pie padAngle={0.05} />
-      </Svg>
+      </Layer>
     </Chart>
   </div>
 </Preview>
@@ -97,9 +98,9 @@
 <Preview {data}>
   <div class="h-[300px] p-4 border rounded-sm resize overflow-auto">
     <Chart {data} x="value" c="date" cRange={keyColors}>
-      <Svg center>
+      <Layer type={shared.renderContext} center>
         <Pie innerRadius={100} padAngle={0.03} />
-      </Svg>
+      </Layer>
     </Chart>
   </div>
 </Preview>
@@ -111,9 +112,9 @@
 <Preview {data}>
   <div class="h-[300px] p-4 border rounded-sm resize overflow-auto">
     <Chart {data} x="value" c="date" cRange={keyColors}>
-      <Svg center>
+      <Layer type={shared.renderContext} center>
         <Pie innerRadius={100} />
-      </Svg>
+      </Layer>
     </Chart>
   </div>
 </Preview>
@@ -123,9 +124,9 @@
 <Preview {data}>
   <div class="h-[300px] p-4 border rounded-sm resize overflow-auto">
     <Chart {data} x="value" c="date" cRange={keyColors}>
-      <Svg center>
+      <Layer type={shared.renderContext} center>
         <Pie innerRadius={0.9} />
-      </Svg>
+      </Layer>
     </Chart>
   </div>
 </Preview>
@@ -135,9 +136,9 @@
 <Preview {data}>
   <div class="h-[300px] p-4 border rounded-sm resize overflow-auto">
     <Chart {data} x="value" c="date" cRange={keyColors}>
-      <Svg center>
+      <Layer type={shared.renderContext} center>
         <Pie innerRadius={-30} />
-      </Svg>
+      </Layer>
     </Chart>
   </div>
 </Preview>
@@ -147,9 +148,9 @@
 <Preview {data}>
   <div class="h-[300px] p-4 border rounded-sm resize overflow-auto">
     <Chart {data} x="value" c="date" cRange={keyColors}>
-      <Svg center>
+      <Layer type={shared.renderContext} center>
         <Pie outerRadius={100} />
-      </Svg>
+      </Layer>
     </Chart>
   </div>
 </Preview>
@@ -159,10 +160,10 @@
 <Preview {data}>
   <div class="h-[300px] p-4 border rounded-sm resize overflow-auto">
     <Chart {data} x="value" c="date" cRange={keyColors}>
-      <Svg center>
+      <Layer type={shared.renderContext} center>
         <Pie innerRadius={100} {data} />
         <Pie outerRadius={90} data={data2} />
-      </Svg>
+      </Layer>
     </Chart>
   </div>
 </Preview>
@@ -178,11 +179,11 @@
   <Preview {data}>
     <div class="h-[300px] p-4 border rounded-sm resize overflow-auto">
       <Chart {data} x="value" c="date" cRange={keyColors}>
-        <Svg center>
+        <Layer type={shared.renderContext} center>
           {#if show}
             <Pie motion="tween" />
           {/if}
-        </Svg>
+        </Layer>
       </Chart>
     </div>
   </Preview>
@@ -193,9 +194,9 @@
 <Preview {data}>
   <div class="h-[300px] p-4 border rounded-sm resize overflow-auto">
     <Chart {data} x="value" c="date" cRange={keyColors}>
-      <Svg center>
+      <Layer type={shared.renderContext} center>
         <Pie offset={4} />
-      </Svg>
+      </Layer>
     </Chart>
   </div>
 </Preview>
@@ -205,7 +206,7 @@
 <Preview {data}>
   <div class="h-[300px] p-4 border rounded-sm resize overflow-auto">
     <Chart {data} x="value" c="date" cRange={keyColors}>
-      <Svg center>
+      <Layer type={shared.renderContext} center>
         <Pie>
           {#snippet children({ arcs })}
             {#each arcs as arc, index}
@@ -219,7 +220,7 @@
             {/each}
           {/snippet}
         </Pie>
-      </Svg>
+      </Layer>
     </Chart>
   </div>
 </Preview>
@@ -231,7 +232,7 @@
 <Preview {data}>
   <div class="h-[300px] p-4 border rounded-sm resize overflow-auto">
     <Chart {data} x="value" c="date">
-      <Svg center>
+      <Layer type={shared.renderContext} center>
         <Pie>
           {#snippet children({ arcs })}
             {#each arcs as arc, index}
@@ -253,7 +254,7 @@
             {/each}
           {/snippet}
         </Pie>
-      </Svg>
+      </Layer>
     </Chart>
   </div>
 </Preview>
@@ -263,7 +264,7 @@
 <Preview {data}>
   <div class="h-[300px] p-4 border rounded-sm resize overflow-auto">
     <Chart {data} x="value" c="date">
-      <Svg center>
+      <Layer type={shared.renderContext} center>
         <Pie>
           {#snippet children({ arcs })}
             {#each arcs as arc, index}
@@ -293,7 +294,7 @@
             {/each}
           {/snippet}
         </Pie>
-      </Svg>
+      </Layer>
     </Chart>
   </div>
 </Preview>
@@ -303,7 +304,7 @@
 <Preview {data}>
   <div class="h-[300px] p-4 border rounded-sm resize overflow-auto">
     <Chart {data} x="value" c="date">
-      <Svg center>
+      <Layer type={shared.renderContext} center>
         <Pie>
           {#snippet children({ arcs })}
             {#each arcs as arc, index}
@@ -325,7 +326,7 @@
             {/each}
           {/snippet}
         </Pie>
-      </Svg>
+      </Layer>
     </Chart>
   </div>
 </Preview>
@@ -335,7 +336,7 @@
 <Preview {data}>
   <div class="h-[320px] p-4 border rounded-sm resize overflow-auto">
     <Chart {data} x="value" c="date">
-      <Svg center>
+      <Layer type={shared.renderContext} center>
         <Pie>
           {#snippet children({ arcs })}
             {#each arcs as arc, index}
@@ -357,7 +358,7 @@
             {/each}
           {/snippet}
         </Pie>
-      </Svg>
+      </Layer>
     </Chart>
   </div>
 </Preview>
@@ -372,7 +373,7 @@
 	if it meets the minimum needed to fit the label, and if not, we push it? Idk
 	-->
     <Chart {data} x="value" c="date" padding={24}>
-      <Svg center>
+      <Layer type={shared.renderContext} center>
         <Pie>
           {#snippet children({ arcs })}
             {#each arcs as arc, index}
@@ -394,7 +395,7 @@
             {/each}
           {/snippet}
         </Pie>
-      </Svg>
+      </Layer>
     </Chart>
   </div>
 </Preview>
@@ -405,9 +406,9 @@
   <div class="h-[300px] p-4 border rounded-sm resize overflow-auto">
     <Chart {data} x="value" c="date" cRange={keyColors}>
       {#snippet children({ context })}
-        <Svg center>
+        <Layer type={shared.renderContext} center>
           <Pie tooltipContext={context.tooltip} />
-        </Svg>
+        </Layer>
         <Tooltip.Root>
           {#snippet children({ data })}
             <Tooltip.Header>{format(data.date, 'eee, MMMM do')}</Tooltip.Header>
@@ -433,7 +434,7 @@
   <div class="h-[300px] p-4 border rounded-sm resize overflow-auto">
     <Chart {data} x="value" c="date" cRange={keyColors}>
       {#snippet children({ context })}
-        <Svg center>
+        <Layer type={shared.renderContext} center>
           <Pie>
             {#snippet children({ arcs })}
               {#each arcs as arc, index}
@@ -470,7 +471,7 @@
               {/each}
             {/snippet}
           </Pie>
-        </Svg>
+        </Layer>
 
         <Tooltip.Root>
           {#snippet children({ data })}
@@ -499,11 +500,11 @@
   <div class="h-[300px] p-4 border rounded-sm resize overflow-auto">
     <Chart {data} x="value" c="date" cRange={keyColors}>
       {#snippet children({ context })}
-        <Svg>
+        <Layer type={shared.renderContext}>
           <Group x={context.height / 2} center="y">
             <Pie />
           </Group>
-        </Svg>
+        </Layer>
       {/snippet}
     </Chart>
   </div>
@@ -514,9 +515,9 @@
 <Preview {data}>
   <div class="h-[300px] p-4 border rounded-sm resize overflow-auto">
     <Chart {data} x="value" c="date" cRange={keyColors}>
-      <Svg center>
+      <Layer type={shared.renderContext} center>
         <Pie />
-      </Svg>
+      </Layer>
     </Chart>
   </div>
 </Preview>
@@ -527,11 +528,11 @@
   <div class="h-[300px] p-4 border rounded-sm resize overflow-auto">
     <Chart {data} x="value" c="date" cRange={keyColors}>
       {#snippet children({ context })}
-        <Svg>
+        <Layer type={shared.renderContext}>
           <Group x={context.width - context.height / 2} center="y">
             <Pie />
           </Group>
-        </Svg>
+        </Layer>
       {/snippet}
     </Chart>
   </div>
diff --git a/packages/layerchart/src/routes/docs/components/Pie/+page.ts b/packages/layerchart/src/routes/docs/components/Pie/+page.ts
index 6d98dd80f..c6e5f86f2 100644
--- a/packages/layerchart/src/routes/docs/components/Pie/+page.ts
+++ b/packages/layerchart/src/routes/docs/components/Pie/+page.ts
@@ -8,6 +8,7 @@ export async function load() {
       api,
       source,
       pageSource,
+      supportedContexts: ['svg', 'canvas'],
       related: ['components/Arc', 'examples/Arc'],
     },
   };
diff --git a/packages/layerchart/src/routes/docs/components/PieChart/+page.svelte b/packages/layerchart/src/routes/docs/components/PieChart/+page.svelte
index 3492aa042..f81110d9b 100644
--- a/packages/layerchart/src/routes/docs/components/PieChart/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/PieChart/+page.svelte
@@ -1,15 +1,17 @@
 <script lang="ts">
+  import type { ComponentProps } from 'svelte';
   import { Spring } from 'svelte/motion';
   import { PieChart, Text } from 'layerchart';
   import { group, sum } from 'd3-array';
   import { quantize } from 'd3-interpolate';
   import { schemeTableau10, interpolateRainbow } from 'd3-scale-chromatic';
-  import { Field, RangeField, Switch, Toggle, ToggleGroup, ToggleOption } from 'svelte-ux';
+  import { Field, RangeField, Switch, Toggle } from 'svelte-ux';
 
   import Preview from '$lib/docs/Preview.svelte';
   import { longData } from '$lib/utils/genData.js';
   import { format } from '@layerstack/utils';
   import Arc from '$lib/components/Arc.svelte';
+  import { shared } from '../../shared.svelte.js';
 
   const dataByYear = group(longData, (d) => d.year);
   const data = dataByYear.get(2019) ?? [];
@@ -41,20 +43,15 @@
     })
   );
 
-  let renderContext: 'svg' | 'canvas' = $state('svg');
+  let renderContext = $derived(
+    shared.renderContext as ComponentProps<typeof PieChart>['renderContext']
+  );
   let debug = $state(false);
 </script>
 
 <h1>Examples</h1>
 
 <div class="grid grid-cols-[1fr_auto] gap-2">
-  <Field label="Render context">
-    <ToggleGroup bind:value={renderContext} variant="outline">
-      <ToggleOption value="svg">Svg</ToggleOption>
-      <ToggleOption value="canvas">Canvas</ToggleOption>
-    </ToggleGroup>
-  </Field>
-
   <Field label="Debug" let:id classes={{ container: 'h-full' }}>
     <Switch {id} bind:checked={debug} />
   </Field>
diff --git a/packages/layerchart/src/routes/docs/components/PieChart/+page.ts b/packages/layerchart/src/routes/docs/components/PieChart/+page.ts
index d1eaceae4..ea872ac2a 100644
--- a/packages/layerchart/src/routes/docs/components/PieChart/+page.ts
+++ b/packages/layerchart/src/routes/docs/components/PieChart/+page.ts
@@ -9,6 +9,7 @@ export async function load() {
       source,
       pageSource,
       description: 'Streamlined Chart configuration for Pie charts',
+      supportedContexts: ['svg', 'canvas'],
       related: ['components/Chart', 'components/Pie', 'examples/Arc'],
     },
   };
diff --git a/packages/layerchart/src/routes/docs/components/Point/+page.svelte b/packages/layerchart/src/routes/docs/components/Point/+page.svelte
index 57891fc31..663f1fd20 100644
--- a/packages/layerchart/src/routes/docs/components/Point/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/Point/+page.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
-  import { Axis, Chart, Circle, Point, Svg } from 'layerchart';
+  import { Axis, Chart, Circle, Point, Layer } from 'layerchart';
   import Preview from '$lib/docs/Preview.svelte';
+  import { shared } from '../../shared.svelte.js';
 
   let data: Array<{ x: number; y: number }> = [];
 </script>
@@ -17,7 +18,7 @@
       yDomain={[0, 100]}
       padding={{ bottom: 20, left: 20 }}
     >
-      <Svg>
+      <Layer type={shared.renderContext}>
         <Axis placement="bottom" rule />
         <Axis placement="left" rule />
         <Point d={{ x: 50, y: 50 }}>
@@ -30,7 +31,7 @@
             <Circle cx={x} cy={y} r={15} class="fill-primary" />
           {/snippet}
         </Point>
-      </Svg>
+      </Layer>
     </Chart>
   </div>
 </Preview>
diff --git a/packages/layerchart/src/routes/docs/components/Point/+page.ts b/packages/layerchart/src/routes/docs/components/Point/+page.ts
index 5940b7f57..88b528d40 100644
--- a/packages/layerchart/src/routes/docs/components/Point/+page.ts
+++ b/packages/layerchart/src/routes/docs/components/Point/+page.ts
@@ -9,6 +9,7 @@ export async function load() {
       source,
       pageSource,
       description: 'Convenient way to translate a data item to SVG x/y coordinates',
+      supportedContexts: ['svg', 'canvas'],
       related: ['examples/Area'],
     },
   };
diff --git a/packages/layerchart/src/routes/docs/components/Points/+page.svelte b/packages/layerchart/src/routes/docs/components/Points/+page.svelte
index f5e63b239..1f3a40471 100644
--- a/packages/layerchart/src/routes/docs/components/Points/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/Points/+page.svelte
@@ -1,4 +1,4 @@
 <script lang="ts">
-  import { Chart, Svg } from 'layerchart';
+  import { Chart, Layer } from 'layerchart';
   import Preview from '$lib/docs/Preview.svelte';
 </script>
diff --git a/packages/layerchart/src/routes/docs/components/Points/+page.ts b/packages/layerchart/src/routes/docs/components/Points/+page.ts
index 0e378e54b..4998d6d5a 100644
--- a/packages/layerchart/src/routes/docs/components/Points/+page.ts
+++ b/packages/layerchart/src/routes/docs/components/Points/+page.ts
@@ -8,6 +8,7 @@ export async function load() {
       api,
       source,
       pageSource,
+      supportedContexts: ['svg', 'canvas'],
       related: [
         'components/Area',
         'components/Spline',
diff --git a/packages/layerchart/src/routes/docs/components/Polygon/+page.svelte b/packages/layerchart/src/routes/docs/components/Polygon/+page.svelte
index de5786f17..d407b33e0 100644
--- a/packages/layerchart/src/routes/docs/components/Polygon/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/Polygon/+page.svelte
@@ -2,6 +2,7 @@
   import { Chart, Group, Layer, Polygon } from 'layerchart';
   import { RangeField } from 'svelte-ux';
   import Preview from 'layerchart/docs/Preview.svelte';
+  import { shared } from '../../shared.svelte.js';
 
   let points = $state(8);
   let cornerRadius = $state(0);
@@ -16,8 +17,6 @@
 
   // Separate inset to allow playground to default to 0
   let starInset = $state(0.7);
-
-  let renderContext = $state<'svg' | 'canvas'>('svg');
 </script>
 
 <h1>Playground</h1>
@@ -38,7 +37,7 @@
 <div class="h-[300px] p-4 border rounded-sm">
   <Chart>
     {#snippet children({ context })}
-      <Layer type={renderContext}>
+      <Layer type={shared.renderContext}>
         <Polygon
           cx={context.width / 2}
           cy={context.height / 2}
@@ -74,7 +73,7 @@
       <div class="h-[150px] p-4 border rounded-sm">
         <Chart>
           {#snippet children({ context })}
-            <Layer type={renderContext}>
+            <Layer type={shared.renderContext}>
               <Polygon
                 cx={context.width / 2}
                 cy={context.height / 2}
@@ -96,7 +95,7 @@
       <div class="h-[150px] p-4 border rounded-sm">
         <Chart>
           {#snippet children({ context })}
-            <Layer type={renderContext}>
+            <Layer type={shared.renderContext}>
               <Polygon
                 cx={context.width / 2}
                 cy={context.height / 2}
@@ -118,7 +117,7 @@
       <div class="h-[150px] p-4 border rounded-sm">
         <Chart>
           {#snippet children({ context })}
-            <Layer type={renderContext}>
+            <Layer type={shared.renderContext}>
               <Polygon
                 cx={context.width / 2}
                 cy={context.height / 2}
@@ -141,7 +140,7 @@
       <div class="h-[150px] p-4 border rounded-sm">
         <Chart>
           {#snippet children({ context })}
-            <Layer type={renderContext}>
+            <Layer type={shared.renderContext}>
               <Polygon
                 cx={context.width / 2}
                 cy={context.height / 2}
@@ -164,7 +163,7 @@
       <div class="h-[150px] p-4 border rounded-sm">
         <Chart>
           {#snippet children({ context })}
-            <Layer type={renderContext}>
+            <Layer type={shared.renderContext}>
               <Polygon
                 cx={context.width / 2}
                 cy={context.height / 2}
@@ -188,7 +187,7 @@
       <div class="h-[150px] p-4 border rounded-sm">
         <Chart>
           {#snippet children({ context })}
-            <Layer type={renderContext}>
+            <Layer type={shared.renderContext}>
               <Polygon
                 cx={context.width / 2}
                 cy={context.height / 2}
@@ -211,7 +210,7 @@
       <div class="h-[150px] p-4 border rounded-sm">
         <Chart>
           {#snippet children({ context })}
-            <Layer type={renderContext}>
+            <Layer type={shared.renderContext}>
               <Polygon
                 cx={context.width / 2}
                 cy={context.height / 2}
@@ -233,7 +232,7 @@
       <div class="h-[150px] p-4 border rounded-sm">
         <Chart>
           {#snippet children({ context })}
-            <Layer type={renderContext}>
+            <Layer type={shared.renderContext}>
               <Polygon
                 cx={context.width / 2}
                 cy={context.height / 2}
@@ -255,7 +254,7 @@
       <div class="h-[150px] p-4 border rounded-sm">
         <Chart>
           {#snippet children({ context })}
-            <Layer type={renderContext}>
+            <Layer type={shared.renderContext}>
               <Polygon
                 cx={context.width / 2}
                 cy={context.height / 2}
@@ -277,7 +276,7 @@
       <div class="h-[150px] p-4 border rounded-sm">
         <Chart>
           {#snippet children({ context })}
-            <Layer type={renderContext}>
+            <Layer type={shared.renderContext}>
               <Polygon
                 cx={context.width / 2}
                 cy={context.height / 2}
@@ -317,7 +316,7 @@
         <div class="h-[150px] p-4 border rounded-sm">
           <Chart>
             {#snippet children({ context })}
-              <Layer type={renderContext}>
+              <Layer type={shared.renderContext}>
                 <Polygon
                   cx={context.width / 2}
                   cy={context.height / 2}
@@ -348,7 +347,7 @@
       <div class="h-[150px] p-4 border rounded-sm">
         <Chart>
           {#snippet children({ context })}
-            <Layer type={renderContext}>
+            <Layer type={shared.renderContext}>
               <Group x={context.width / 2} y={context.height / 2}>
                 {@const size = 60}
                 <Polygon
@@ -378,7 +377,7 @@
       <div class="h-[150px] p-4 border rounded-sm">
         <Chart>
           {#snippet children({ context })}
-            <Layer type={renderContext}>
+            <Layer type={shared.renderContext}>
               <Group x={context.width / 2} y={context.height / 2}>
                 {@const size = 50}
                 <Polygon
diff --git a/packages/layerchart/src/routes/docs/components/Polygon/+page.ts b/packages/layerchart/src/routes/docs/components/Polygon/+page.ts
index 7efff572c..0ecfdc6cc 100644
--- a/packages/layerchart/src/routes/docs/components/Polygon/+page.ts
+++ b/packages/layerchart/src/routes/docs/components/Polygon/+page.ts
@@ -8,6 +8,7 @@ export async function load() {
       api,
       source,
       pageSource,
+      supportedContexts: ['svg', 'canvas'],
     },
   };
 }
diff --git a/packages/layerchart/src/routes/docs/components/RadialGradient/+page.svelte b/packages/layerchart/src/routes/docs/components/RadialGradient/+page.svelte
index 831ab2099..f883254ec 100644
--- a/packages/layerchart/src/routes/docs/components/RadialGradient/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/RadialGradient/+page.svelte
@@ -1,29 +1,19 @@
 <script lang="ts">
-  import { Chart, Circle, Layer, RadialGradient, Svg } from 'layerchart';
+  import { Chart, Circle, Layer, RadialGradient } from 'layerchart';
   import Preview from '$lib/docs/Preview.svelte';
-  import { Field, ToggleGroup, ToggleOption } from 'svelte-ux';
+  import { shared } from '../../shared.svelte.js';
 
   const radius = 50;
-  let renderContext: 'svg' | 'canvas' = $state('svg');
 </script>
 
 <h1>Examples</h1>
 
-<!-- <div class="grid grid-cols-[1fr_auto] gap-2">
-  <Field label="Render context">
-    <ToggleGroup bind:value={renderContext} variant="outline">
-      <ToggleOption value="svg">Svg</ToggleOption>
-      <ToggleOption value="canvas">Canvas</ToggleOption>
-    </ToggleGroup>
-  </Field>
-</div> -->
-
 <h2>Focal location and radius with custom colors</h2>
 
 <Preview>
   <div class="h-[334px] p-4 border rounded-sm">
     <Chart>
-      <Layer type={renderContext}>
+      <Layer type={shared.renderContext}>
         <RadialGradient stops={['hsl(60 100% 50%)', 'hsl(30 100% 40%)']}>
           {#snippet children({ gradient })}
             <Circle cx={radius + 0 * 120} cy={radius} r={radius} fill={gradient} />
@@ -51,7 +41,7 @@
 <Preview>
   <div class="h-[334px] p-4 border rounded-sm">
     <Chart>
-      <Layer type={renderContext}>
+      <Layer type={shared.renderContext}>
         <RadialGradient id="tw-1" class="from-pink-500 to-yellow-500" />
         <RadialGradient id="tw-2" class="from-green-300 to-purple-600" />
         <RadialGradient id="tw-3" class="from-gray-600 to-black" />
@@ -74,7 +64,7 @@
 <Preview>
   <div class="h-[252px] p-4 border rounded-sm">
     <Chart>
-      <Layer type={renderContext}>
+      <Layer type={shared.renderContext}>
         <RadialGradient class="from-green-500 to-blue-500" r="30%" spreadMethod="pad">
           {#snippet children({ gradient })}
             <Circle cx={radius + 0 * 120} cy={radius} r={radius} fill={gradient} />
@@ -102,7 +92,7 @@
 <Preview>
   <div class="h-[252px] p-4 border rounded-sm">
     <Chart>
-      <Layer type={renderContext}>
+      <Layer type={shared.renderContext}>
         <RadialGradient class="from-green-500 to-blue-500" units="objectBoundingBox">
           {#snippet children({ gradient })}
             {#each { length: 6 } as _, i}
diff --git a/packages/layerchart/src/routes/docs/components/RadialGradient/+page.ts b/packages/layerchart/src/routes/docs/components/RadialGradient/+page.ts
index 3b7a2a354..769763703 100644
--- a/packages/layerchart/src/routes/docs/components/RadialGradient/+page.ts
+++ b/packages/layerchart/src/routes/docs/components/RadialGradient/+page.ts
@@ -8,6 +8,7 @@ export async function load() {
       api,
       source,
       pageSource,
+      supportedContexts: ['svg'], // TODO: `canvas` coming soon
       related: ['components/LinearGradient', 'components/Pattern'],
     },
   };
diff --git a/packages/layerchart/src/routes/docs/components/Rect/+page.svelte b/packages/layerchart/src/routes/docs/components/Rect/+page.svelte
index 4d24b0a1e..ac1cf99bf 100644
--- a/packages/layerchart/src/routes/docs/components/Rect/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/Rect/+page.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
-  import { Axis, Chart, Rect, Svg } from 'layerchart';
+  import { Axis, Chart, Rect, Layer } from 'layerchart';
   import Preview from '$lib/docs/Preview.svelte';
+  import { shared } from '../../shared.svelte.js';
 </script>
 
 <h1>Examples</h1>
@@ -8,13 +9,13 @@
 <Preview>
   <div class="h-[300px] p-4 border rounded-sm">
     <Chart xDomain={[0, 100]} yDomain={[0, 100]} padding={{ bottom: 20, left: 20 }}>
-      <Svg>
+      <Layer type={shared.renderContext}>
         <Axis placement="bottom" rule />
         <Axis placement="left" rule />
         <Rect x={50} y={50} width={100} height={150} />
         <Rect x={90} y={80} width={200} height={100} class="fill-primary" />
         <Rect x={125} y={40} width={200} height={100} class="stroke-primary fill-none" />
-      </Svg>
+      </Layer>
     </Chart>
   </div>
 </Preview>
diff --git a/packages/layerchart/src/routes/docs/components/Rect/+page.ts b/packages/layerchart/src/routes/docs/components/Rect/+page.ts
index 37b779489..48fe70a36 100644
--- a/packages/layerchart/src/routes/docs/components/Rect/+page.ts
+++ b/packages/layerchart/src/routes/docs/components/Rect/+page.ts
@@ -9,6 +9,7 @@ export async function load() {
       source,
       pageSource,
       description: '`<rect>` element with tweened properties using `motionStore`',
+      supportedContexts: ['svg', 'canvas'],
       related: [
         'components/Bars',
         'components/Highlight',
diff --git a/packages/layerchart/src/routes/docs/components/RectClipPath/+page.svelte b/packages/layerchart/src/routes/docs/components/RectClipPath/+page.svelte
index f5e63b239..1f3a40471 100644
--- a/packages/layerchart/src/routes/docs/components/RectClipPath/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/RectClipPath/+page.svelte
@@ -1,4 +1,4 @@
 <script lang="ts">
-  import { Chart, Svg } from 'layerchart';
+  import { Chart, Layer } from 'layerchart';
   import Preview from '$lib/docs/Preview.svelte';
 </script>
diff --git a/packages/layerchart/src/routes/docs/components/RectClipPath/+page.ts b/packages/layerchart/src/routes/docs/components/RectClipPath/+page.ts
index 30c0b1c15..b841ed4ed 100644
--- a/packages/layerchart/src/routes/docs/components/RectClipPath/+page.ts
+++ b/packages/layerchart/src/routes/docs/components/RectClipPath/+page.ts
@@ -8,6 +8,7 @@ export async function load() {
       api,
       source,
       pageSource,
+      supportedContexts: ['svg'],
       related: ['components/ChartClipPath', 'examples/Partition', 'examples/Treemap'],
     },
   };
diff --git a/packages/layerchart/src/routes/docs/components/Rule/+page.svelte b/packages/layerchart/src/routes/docs/components/Rule/+page.svelte
index 7294f1204..44c8055d3 100644
--- a/packages/layerchart/src/routes/docs/components/Rule/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/Rule/+page.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
-  import { Axis, Chart, Rule, Svg } from 'layerchart';
+  import { Axis, Chart, Rule, Layer } from 'layerchart';
   import Preview from '$lib/docs/Preview.svelte';
   import { createDateSeries } from '$lib/utils/genData.js';
+  import { shared } from '../../shared.svelte.js';
 
   const data = createDateSeries({ min: 50, max: 100, value: 'integer' });
 </script>
@@ -17,11 +18,11 @@
       yDomain={[0, 100]}
       padding={{ top: 20, bottom: 20, left: 20, right: 20 }}
     >
-      <Svg>
+      <Layer type={shared.renderContext}>
         <Axis placement="bottom" />
         <Axis placement="left" />
         <Rule x y />
-      </Svg>
+      </Layer>
     </Chart>
   </div>
 </Preview>
@@ -35,11 +36,11 @@
       yDomain={[0, 100]}
       padding={{ top: 20, bottom: 20, left: 20, right: 20 }}
     >
-      <Svg>
+      <Layer type={shared.renderContext}>
         <Axis placement="top" />
         <Axis placement="right" />
         <Rule x="right" y="top" />
-      </Svg>
+      </Layer>
     </Chart>
   </div>
 </Preview>
@@ -53,11 +54,11 @@
       yDomain={[0, 100]}
       padding={{ top: 20, bottom: 20, left: 20, right: 20 }}
     >
-      <Svg>
+      <Layer type={shared.renderContext}>
         <Axis placement="bottom" />
         <Axis placement="left" />
         <Rule x={0} />
-      </Svg>
+      </Layer>
     </Chart>
   </div>
 </Preview>
@@ -71,11 +72,11 @@
       yDomain={[0, 100]}
       padding={{ top: 20, bottom: 20, left: 20, right: 20 }}
     >
-      <Svg>
+      <Layer type={shared.renderContext}>
         <Axis placement="bottom" rule />
         <Axis placement="left" rule />
         <Rule x={70} class="stroke-2 stroke-danger [stroke-dasharray:4] [stroke-linecap:round] " />
-      </Svg>
+      </Layer>
     </Chart>
   </div>
 </Preview>
@@ -90,11 +91,11 @@
       yDomain={[-20, 100]}
       padding={{ top: 20, bottom: 20, left: 20, right: 20 }}
     >
-      <Svg>
+      <Layer type={shared.renderContext}>
         <Axis placement="bottom" />
         <Axis placement="left" />
         <Rule y={0} />
-      </Svg>
+      </Layer>
     </Chart>
   </div>
 </Preview>
@@ -108,11 +109,11 @@
       yDomain={[0, 100]}
       padding={{ top: 20, bottom: 20, left: 20, right: 20 }}
     >
-      <Svg>
+      <Layer type={shared.renderContext}>
         <Axis placement="bottom" rule />
         <Axis placement="left" rule />
         <Rule y={70} class="stroke-2 stroke-danger [stroke-dasharray:4] [stroke-linecap:round] " />
-      </Svg>
+      </Layer>
     </Chart>
   </div>
 </Preview>
diff --git a/packages/layerchart/src/routes/docs/components/Rule/+page.ts b/packages/layerchart/src/routes/docs/components/Rule/+page.ts
index 9e98af688..1730f9ea5 100644
--- a/packages/layerchart/src/routes/docs/components/Rule/+page.ts
+++ b/packages/layerchart/src/routes/docs/components/Rule/+page.ts
@@ -8,6 +8,7 @@ export async function load() {
       api,
       source,
       pageSource,
+      supportedContexts: ['svg', 'canvas'],
       related: ['components/Axis', 'components/Line'],
     },
   };
diff --git a/packages/layerchart/src/routes/docs/components/Sankey/+page.svelte b/packages/layerchart/src/routes/docs/components/Sankey/+page.svelte
index f5e63b239..1f3a40471 100644
--- a/packages/layerchart/src/routes/docs/components/Sankey/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/Sankey/+page.svelte
@@ -1,4 +1,4 @@
 <script lang="ts">
-  import { Chart, Svg } from 'layerchart';
+  import { Chart, Layer } from 'layerchart';
   import Preview from '$lib/docs/Preview.svelte';
 </script>
diff --git a/packages/layerchart/src/routes/docs/components/Sankey/+page.ts b/packages/layerchart/src/routes/docs/components/Sankey/+page.ts
index 69fb6b3ab..69d49fbc5 100644
--- a/packages/layerchart/src/routes/docs/components/Sankey/+page.ts
+++ b/packages/layerchart/src/routes/docs/components/Sankey/+page.ts
@@ -8,6 +8,7 @@ export async function load() {
       api,
       source,
       pageSource,
+      supportedContexts: ['svg', 'canvas'],
       related: ['examples/Sankey'],
     },
   };
diff --git a/packages/layerchart/src/routes/docs/components/ScatterChart/+page.svelte b/packages/layerchart/src/routes/docs/components/ScatterChart/+page.svelte
index 2c995917b..475c5d4b2 100644
--- a/packages/layerchart/src/routes/docs/components/ScatterChart/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/ScatterChart/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import type { ComponentProps } from 'svelte';
   import { Axis, Highlight, Layer, Points, ScatterChart, Tooltip } from 'layerchart';
   import { format } from '@layerstack/utils';
   import { flatGroup } from 'd3-array';
@@ -9,6 +10,7 @@
   import Preview from '$lib/docs/Preview.svelte';
   import Blockquote from '$lib/docs/Blockquote.svelte';
   import { createDateSeries, getSpiral } from '$lib/utils/genData.js';
+  import { shared } from '../../shared.svelte.js';
 
   let { data } = $props();
 
@@ -36,20 +38,13 @@
 
   const dateSeriesData = createDateSeries({ count: 30, min: 20, max: 100, value: 'integer' });
 
-  let renderContext: 'svg' | 'canvas' = $state('svg');
+  let renderContext = $derived(shared.renderContext as 'svg' | 'canvas');
   let debug = $state(false);
 </script>
 
 <h1>Examples</h1>
 
 <div class="grid grid-cols-[1fr_auto] gap-2">
-  <Field label="Render context">
-    <ToggleGroup bind:value={renderContext} variant="outline">
-      <ToggleOption value="svg">Svg</ToggleOption>
-      <ToggleOption value="canvas">Canvas</ToggleOption>
-    </ToggleGroup>
-  </Field>
-
   <Field label="Debug" let:id classes={{ container: 'h-full' }}>
     <Switch {id} bind:checked={debug} />
   </Field>
diff --git a/packages/layerchart/src/routes/docs/components/ScatterChart/+page.ts b/packages/layerchart/src/routes/docs/components/ScatterChart/+page.ts
index 56bf2c78a..cf7ea3f9e 100644
--- a/packages/layerchart/src/routes/docs/components/ScatterChart/+page.ts
+++ b/packages/layerchart/src/routes/docs/components/ScatterChart/+page.ts
@@ -16,6 +16,7 @@ export async function load({ fetch }) {
       source,
       pageSource,
       description: 'Streamlined Chart configuration for Scatter charts',
+      supportedContexts: ['svg', 'canvas'],
       related: ['components/Chart', 'components/Points', 'examples/Scatter'],
     },
   };
diff --git a/packages/layerchart/src/routes/docs/components/Spline/+page.svelte b/packages/layerchart/src/routes/docs/components/Spline/+page.svelte
index 81f5a6f2d..20c62ce47 100644
--- a/packages/layerchart/src/routes/docs/components/Spline/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/Spline/+page.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-  import type { Component, ComponentProps } from 'svelte';
+  import type { ComponentProps } from 'svelte';
 
-  import { Axis, Canvas, Chart, Circle, Points, Spline, Svg, Text } from 'layerchart';
+  import { Axis, Canvas, Chart, Circle, Layer, Points, Spline, Text } from 'layerchart';
   import { Field, RangeField, Switch, Toggle, ToggleGroup, ToggleOption } from 'svelte-ux';
 
   import Preview from '$lib/docs/Preview.svelte';
@@ -9,12 +9,12 @@
   import CurveMenuField from '$lib/docs/CurveMenuField.svelte';
   import PathDataMenuField from '$lib/docs/PathDataMenuField.svelte';
   import { format } from '@layerstack/utils';
+  import { shared } from '../../shared.svelte.js';
 
   let pointCount = $state(100);
   let showPoints = $state(false);
   let show = $state(true);
   let motion: 'draw' | 'tween' | 'none' = $state('tween');
-  let Context: Component = $state(Svg);
 
   let pathGenerator = $state((x: number) => x);
   let curve: ComponentProps<typeof CurveMenuField>['value'] = $state(undefined);
@@ -45,18 +45,11 @@
     </Field>
   </div>
 
-  <div class="grid grid-cols-[100px_auto_auto_1fr] gap-2">
+  <div class="grid grid-cols-[100px_auto_1fr] gap-2">
     <Field label="Show" let:id>
       <Switch bind:checked={show} {id} size="md" />
     </Field>
 
-    <Field label="Context" classes={{ input: 'mt-1 mb-[6px]' }}>
-      <ToggleGroup bind:value={Context} variant="outline" size="sm">
-        <ToggleOption value={Svg}>Svg</ToggleOption>
-        <ToggleOption value={Canvas}>Canvas</ToggleOption>
-      </ToggleGroup>
-    </Field>
-
     <Field label="Motion" classes={{ input: 'mt-1 mb-[6px]' }}>
       <ToggleGroup bind:value={motion} variant="outline" size="sm">
         <ToggleOption value="tween">tween</ToggleOption>
@@ -70,7 +63,7 @@
 <Preview {data}>
   <div class="h-[300px] p-4 border rounded-sm">
     <Chart {data} x="x" y="y" yNice padding={{ left: 24, bottom: 24, top: 4, right: 8 }}>
-      <Context>
+      <Layer type={shared.renderContext}>
         <Axis placement="left" grid rule />
         <Axis placement="bottom" rule />
 
@@ -90,7 +83,7 @@
             />
           {/if}
         {/if}
-      </Context>
+      </Layer>
     </Chart>
   </div>
 </Preview>
@@ -112,13 +105,13 @@
   <Preview {data}>
     <div class="h-[300px] p-4 border rounded-sm">
       <Chart {data} x="x" y="y" yNice padding={{ left: 16, bottom: 24 }}>
-        <Svg>
+        <Layer type={shared.renderContext}>
           <Axis placement="left" grid rule />
           <Axis placement="bottom" rule />
           {#if show}
             <Spline {curve} draw class="stroke-primary stroke-2" />
           {/if}
-        </Svg>
+        </Layer>
       </Chart>
     </div>
   </Preview>
@@ -139,13 +132,13 @@
   <Preview {data}>
     <div class="h-[300px] p-4 border rounded-sm">
       <Chart {data} x="x" y="y" yNice padding={{ left: 16, bottom: 24 }}>
-        <Svg>
+        <Layer type={shared.renderContext}>
           <Axis placement="left" grid rule />
           <Axis placement="bottom" rule />
           {#if show}
             <Spline {curve} motion="tween" class="stroke-primary stroke-2" />
           {/if}
-        </Svg>
+        </Layer>
       </Chart>
     </div>
   </Preview>
@@ -166,7 +159,7 @@
   <Preview {data}>
     <div class="h-[300px] p-4 border rounded-sm">
       <Chart {data} x="x" y="y" yNice padding={{ left: 16, bottom: 24 }}>
-        <Svg>
+        <Layer type={shared.renderContext}>
           <Axis placement="left" grid rule />
           <Axis placement="bottom" rule />
           {#if show}
@@ -177,13 +170,13 @@
               markerEnd={{ type: 'arrow', class: 'stroke-2' }}
             />
           {/if}
-        </Svg>
+        </Layer>
       </Chart>
     </div>
   </Preview>
 </Toggle>
 
-<h2>basic start and end slots</h2>
+<h2>basic start and end snippets</h2>
 
 <Toggle on let:on={show} let:toggle>
   <div class="grid grid-cols-[auto_1fr_1fr_1fr] gap-2 mb-2">
@@ -198,7 +191,7 @@
   <Preview {data}>
     <div class="h-[300px] p-4 border rounded-sm">
       <Chart {data} x="x" y="y" yNice padding={{ left: 16, bottom: 24 }}>
-        <Svg>
+        <Layer type={shared.renderContext}>
           <Axis placement="left" grid rule />
           <Axis placement="bottom" rule />
           {#if show}
@@ -211,13 +204,13 @@
               {/snippet}
             </Spline>
           {/if}
-        </Svg>
+        </Layer>
       </Chart>
     </div>
   </Preview>
 </Toggle>
 
-<h2>label using start/end slots</h2>
+<h2>label using start/end snippets</h2>
 
 <Toggle on let:on={show} let:toggle>
   <div class="grid grid-cols-[auto_1fr_1fr_1fr] gap-2 mb-2">
@@ -232,7 +225,7 @@
   <Preview {data}>
     <div class="h-[300px] p-4 border rounded-sm">
       <Chart {data} x="x" y="y" yNice padding={{ left: 48, bottom: 24, right: 48 }}>
-        <Svg>
+        <Layer type={shared.renderContext}>
           <Axis placement="left" grid rule />
           <Axis placement="bottom" rule />
           {#if show}
@@ -248,13 +241,13 @@
               {/snippet}
             </Spline>
           {/if}
-        </Svg>
+        </Layer>
       </Chart>
     </div>
   </Preview>
 </Toggle>
 
-<h2>end slot with draw</h2>
+<h2>end snippet with draw</h2>
 
 <Toggle on let:on={show} let:toggle>
   <div class="grid grid-cols-[auto_1fr_1fr_1fr] gap-2 mb-2">
@@ -269,7 +262,7 @@
   <Preview {data}>
     <div class="h-[300px] p-4 border rounded-sm">
       <Chart {data} x="x" y="y" yNice padding={{ left: 16, bottom: 24 }}>
-        <Svg>
+        <Layer type={shared.renderContext}>
           <Axis placement="left" grid rule />
           <Axis placement="bottom" rule />
           {#if show}
@@ -279,7 +272,7 @@
               {/snippet}
             </Spline>
           {/if}
-        </Svg>
+        </Layer>
       </Chart>
     </div>
   </Preview>
@@ -300,7 +293,7 @@
   <Preview {data}>
     <div class="h-[300px] p-4 border rounded-sm">
       <Chart {data} x="x" y="y" yNice padding={{ left: 16, right: 40, bottom: 24 }}>
-        <Svg>
+        <Layer type={shared.renderContext}>
           <Axis placement="left" grid rule />
           <Axis placement="bottom" rule />
           {#if show}
@@ -316,36 +309,7 @@
               {/snippet}
             </Spline>
           {/if}
-        </Svg>
-      </Chart>
-    </div>
-  </Preview>
-</Toggle>
-
-<h2>Canvas</h2>
-
-<Toggle on let:on={show} let:toggle>
-  <div class="grid grid-cols-[auto_1fr_1fr_1fr] gap-2 mb-2">
-    <Field label="Show" let:id>
-      <Switch checked={show} on:change={toggle} {id} size="md" />
-    </Field>
-    <PathDataMenuField bind:value={pathGenerator} {amplitude} {frequency} {phase} />
-    <CurveMenuField bind:value={curve} />
-    <RangeField label="Points" bind:value={pointCount} min={2} max={1000} />
-  </div>
-
-  <Preview {data}>
-    <div class="h-[300px] p-4 border rounded-sm">
-      <Chart {data} x="x" y="y" yNice padding={{ left: 16, bottom: 24 }}>
-        <Svg>
-          <Axis placement="left" grid rule />
-          <Axis placement="bottom" rule />
-        </Svg>
-        <Canvas>
-          {#if show}
-            <Spline {curve} motion="tween" class="stroke-primary stroke-2" />
-          {/if}
-        </Canvas>
+        </Layer>
       </Chart>
     </div>
   </Preview>
diff --git a/packages/layerchart/src/routes/docs/components/Spline/+page.ts b/packages/layerchart/src/routes/docs/components/Spline/+page.ts
index 2674058e7..3c7292017 100644
--- a/packages/layerchart/src/routes/docs/components/Spline/+page.ts
+++ b/packages/layerchart/src/routes/docs/components/Spline/+page.ts
@@ -10,6 +10,7 @@ export async function load() {
       pageSource,
       description:
         '`<path>` using `d3-shape` line generator to support `curve` and `defined`.  Works as data-driven via context or `data` prop, or pre-made `pathData`.  Adding tweening via `d3-interpolate-path`',
+      supportedContexts: ['svg', 'canvas'],
       related: ['components/MotionPath', 'examples/Sparkline'],
     },
   };
diff --git a/packages/layerchart/src/routes/docs/components/Text/+page.svelte b/packages/layerchart/src/routes/docs/components/Text/+page.svelte
index 3300d5e69..811600335 100644
--- a/packages/layerchart/src/routes/docs/components/Text/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/Text/+page.svelte
@@ -1,9 +1,10 @@
 <script lang="ts">
-  import { Chart, Canvas, Svg, Text, Circle } from 'layerchart';
+  import { Chart, Layer, Text, Circle } from 'layerchart';
   import type { TruncateTextOptions } from '$lib/utils/string.js';
   import type { ComponentProps } from 'svelte';
   import { Field, RangeField, Switch, TextField, ToggleGroup, ToggleOption } from 'svelte-ux';
   import Preview from 'layerchart/docs/Preview.svelte';
+  import { shared } from '../../shared.svelte.js';
 
   const config = $state({
     x: 0,
@@ -113,12 +114,12 @@
         style:width="{config.resizeSvg ? config.width : 300}px"
       >
         <Chart>
-          <Svg>
+          <Layer type="svg">
             <Text {...config} truncate={truncate ? truncateOptions : false} />
             {#if config.showAnchor}
               <Circle cx={config.x} cy={config.y} r={2} fill="red" />
             {/if}
-          </Svg>
+          </Layer>
         </Chart>
       </div>
     </div>
@@ -132,12 +133,12 @@
         style:width="{config.resizeSvg ? config.width : 300}px"
       >
         <Chart>
-          <Canvas>
+          <Layer type="canvas">
             <Text {...config} truncate={truncate ? truncateOptions : false} />
             {#if config.showAnchor}
               <Circle cx={config.x} cy={config.y} r={2} fill="red" />
             {/if}
-          </Canvas>
+          </Layer>
         </Chart>
       </div>
     </div>
@@ -151,9 +152,9 @@
 <Preview>
   <div class="h-[100px] p-4 border rounded-sm">
     <Chart>
-      <Svg>
+      <Layer type={shared.renderContext}>
         <Text value={'March\n2025'} verticalAnchor="start" />
-      </Svg>
+      </Layer>
     </Chart>
   </div>
 </Preview>
diff --git a/packages/layerchart/src/routes/docs/components/Text/+page.ts b/packages/layerchart/src/routes/docs/components/Text/+page.ts
index 8cf48d4b7..4a31bc978 100644
--- a/packages/layerchart/src/routes/docs/components/Text/+page.ts
+++ b/packages/layerchart/src/routes/docs/components/Text/+page.ts
@@ -5,6 +5,10 @@ import pageSource from './+page.svelte?raw';
 export async function load() {
   return {
     meta: {
+      api,
+      source,
+      pageSource,
+      supportedContexts: ['svg', 'canvas'],
       features: [
         'Adjustable anchor/origin point (center horizontally and vertically)',
         'Rotate (based on origin)',
@@ -12,9 +16,6 @@ export async function load() {
         'Scale to fit',
         'Easy offset with `dx` and `dy`',
       ],
-      api,
-      source,
-      pageSource,
     },
   };
 }
diff --git a/packages/layerchart/src/routes/docs/components/Threshold/+page.svelte b/packages/layerchart/src/routes/docs/components/Threshold/+page.svelte
index f5e63b239..1f3a40471 100644
--- a/packages/layerchart/src/routes/docs/components/Threshold/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/Threshold/+page.svelte
@@ -1,4 +1,4 @@
 <script lang="ts">
-  import { Chart, Svg } from 'layerchart';
+  import { Chart, Layer } from 'layerchart';
   import Preview from '$lib/docs/Preview.svelte';
 </script>
diff --git a/packages/layerchart/src/routes/docs/components/Threshold/+page.ts b/packages/layerchart/src/routes/docs/components/Threshold/+page.ts
index 4f0ac202f..ed36c5aad 100644
--- a/packages/layerchart/src/routes/docs/components/Threshold/+page.ts
+++ b/packages/layerchart/src/routes/docs/components/Threshold/+page.ts
@@ -10,6 +10,7 @@ export async function load() {
       pageSource,
       description:
         'Areas between two values (`y={["value", "baseline"]}`) depending on which is greater (ex. green/red)',
+      supportedContexts: ['svg'], // dependency on ClipPath getting canvas support
       related: ['examples/Threshold'],
     },
   };
diff --git a/packages/layerchart/src/routes/docs/components/TileImage/+page.svelte b/packages/layerchart/src/routes/docs/components/TileImage/+page.svelte
index f5e63b239..1f3a40471 100644
--- a/packages/layerchart/src/routes/docs/components/TileImage/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/TileImage/+page.svelte
@@ -1,4 +1,4 @@
 <script lang="ts">
-  import { Chart, Svg } from 'layerchart';
+  import { Chart, Layer } from 'layerchart';
   import Preview from '$lib/docs/Preview.svelte';
 </script>
diff --git a/packages/layerchart/src/routes/docs/components/TileImage/+page.ts b/packages/layerchart/src/routes/docs/components/TileImage/+page.ts
index d475db034..fc0ad2547 100644
--- a/packages/layerchart/src/routes/docs/components/TileImage/+page.ts
+++ b/packages/layerchart/src/routes/docs/components/TileImage/+page.ts
@@ -8,6 +8,7 @@ export async function load() {
       api,
       source,
       pageSource,
+      supportedContexts: ['svg', 'canvas'],
       related: ['components/GeoTile'],
     },
   };
diff --git a/packages/layerchart/src/routes/docs/components/Tooltip/+page.svelte b/packages/layerchart/src/routes/docs/components/Tooltip/+page.svelte
index 848f6ec8c..22389afb7 100644
--- a/packages/layerchart/src/routes/docs/components/Tooltip/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/Tooltip/+page.svelte
@@ -9,9 +9,9 @@
     Axis,
     Bars,
     Chart,
+    Layer,
     Highlight,
     Points,
-    Svg,
     Tooltip,
     type ChartContextValue,
   } from 'layerchart';
@@ -21,6 +21,7 @@
   import Preview from '$lib/docs/Preview.svelte';
   import TooltipControls from './TooltipControls.svelte';
   import { createDateSeries, createTimeSeries, getSpiral } from '$lib/utils/genData.js';
+  import { shared } from '../../shared.svelte.js';
 
   const dateSeries = createDateSeries({
     count: 30,
@@ -155,12 +156,12 @@
       padding={{ left: 16, bottom: 24 }}
       tooltip={{ mode: 'bisect-x' }}
     >
-      <Svg>
+      <Layer type={shared.renderContext}>
         <Axis placement="left" grid rule />
         <Axis placement="bottom" rule />
         <Area class="fill-primary/30" line={{ class: 'stroke-primary stroke-2' }} />
         <Highlight points lines />
-      </Svg>
+      </Layer>
       <Tooltip.Root>
         {#snippet children({ data })}
           <Tooltip.Header value={data.date} format="day" />
@@ -187,12 +188,12 @@
       padding={{ left: 16, bottom: 24 }}
       tooltip={{ mode: 'bisect-x' }}
     >
-      <Svg>
+      <Layer type={shared.renderContext}>
         <Axis placement="left" grid rule />
         <Axis placement="bottom" rule />
         <Area class="fill-primary/30" line={{ class: 'stroke-primary stroke-2' }} />
         <Highlight points lines />
-      </Svg>
+      </Layer>
       <Tooltip.Root>Anything can go here test</Tooltip.Root>
     </Chart>
   </div>
@@ -212,12 +213,12 @@
       padding={{ left: 16, bottom: 24 }}
       tooltip={{ mode: 'bisect-x' }}
     >
-      <Svg>
+      <Layer type={shared.renderContext}>
         <Axis placement="left" grid rule />
         <Axis placement="bottom" rule />
         <Area class="fill-primary/30" line={{ class: 'stroke-primary stroke-2' }} />
         <Highlight points lines />
-      </Svg>
+      </Layer>
       <Tooltip.Root>
         {#snippet children({ data })}
           <Tooltip.Header value={data.date} format="day" />
@@ -244,12 +245,12 @@
       padding={{ left: 16, bottom: 24 }}
       tooltip={{ mode: 'bisect-x' }}
     >
-      <Svg>
+      <Layer type={shared.renderContext}>
         <Axis placement="left" grid rule />
         <Axis placement="bottom" rule />
         <Area class="fill-primary/30" line={{ class: 'stroke-primary stroke-2' }} />
         <Highlight points lines />
-      </Svg>
+      </Layer>
       <Tooltip.Root>
         {#snippet children({ data })}
           <Tooltip.Header value={data.date} format="day" />
@@ -276,12 +277,12 @@
       padding={{ left: 16, bottom: 24 }}
       tooltip={{ mode: 'bisect-x' }}
     >
-      <Svg>
+      <Layer type={shared.renderContext}>
         <Axis placement="left" grid rule />
         <Axis placement="bottom" rule />
         <Area class="fill-primary/30" line={{ class: 'stroke-primary stroke-2' }} />
         <Highlight points lines />
-      </Svg>
+      </Layer>
       <Tooltip.Root variant="invert">
         {#snippet children({ data })}
           <Tooltip.Header value={data.date} format="day" />
@@ -309,12 +310,12 @@
       padding={{ left: 16, bottom: 24 }}
       tooltip={{ mode: 'bisect-x' }}
     >
-      <Svg>
+      <Layer type={shared.renderContext}>
         <Axis placement="left" grid rule />
         <Axis placement="bottom" rule />
         <Area class="fill-primary/30" line={{ class: 'stroke-primary stroke-2' }} />
         <Highlight points lines />
-      </Svg>
+      </Layer>
       <Tooltip.Root>
         {#snippet children({ data })}
           <Tooltip.Header value={data.date} format="day" />
@@ -341,12 +342,12 @@
       padding={{ left: 16, bottom: 24 }}
       tooltip={{ mode: 'bisect-x' }}
     >
-      <Svg>
+      <Layer type={shared.renderContext}>
         <Axis placement="left" grid rule />
         <Axis placement="bottom" rule />
         <Area class="fill-primary/30" line={{ class: 'stroke-primary stroke-2' }} />
         <Highlight points lines />
-      </Svg>
+      </Layer>
       <Tooltip.Root x="data" y="data" xOffset={8} yOffset={8}>
         {#snippet children({ data })}
           <Tooltip.Header value={data.date} format="day" />
@@ -374,12 +375,12 @@
       tooltip={{ mode: 'bisect-x' }}
     >
       {#snippet children({ context })}
-        <Svg>
+        <Layer type={shared.renderContext}>
           <Axis placement="left" grid rule />
           <Axis placement="bottom" rule />
           <Area class="fill-primary/30" line={{ class: 'stroke-primary stroke-2' }} />
           <Highlight points lines axis="both" />
-        </Svg>
+        </Layer>
 
         <Tooltip.Root
           x={context.padding.left}
@@ -423,12 +424,12 @@
       tooltip={{ mode: 'band' }}
     >
       {#snippet children({ context })}
-        <Svg>
+        <Layer type={shared.renderContext}>
           <Axis placement="left" grid rule />
           <Axis placement="bottom" rule />
           <Bars radius={4} strokeWidth={1} class="fill-primary" />
           <Highlight area />
-        </Svg>
+        </Layer>
 
         <Tooltip.Root
           x="data"
@@ -516,12 +517,12 @@
       padding={{ left: 16, bottom: 24 }}
       tooltip={{ mode: 'bisect-x' }}
     >
-      <Svg>
+      <Layer type={shared.renderContext}>
         <Axis placement="left" grid rule />
         <Axis placement="bottom" rule />
         <Area class="fill-primary/30" line={{ class: 'stroke-primary stroke-2' }} />
         <Highlight points lines />
-      </Svg>
+      </Layer>
       <Tooltip.Root
         {anchor}
         x={snap}
@@ -567,12 +568,12 @@
       tooltip={{ mode: 'bisect-x' }}
       bind:context
     >
-      <Svg>
+      <Layer type={shared.renderContext}>
         <Axis placement="left" grid rule />
         <Axis placement="bottom" rule />
         <Area class="fill-primary/30" line={{ class: 'stroke-primary stroke-2' }} />
         <Highlight points lines />
-      </Svg>
+      </Layer>
       <Tooltip.Root>
         {#snippet children({ data })}
           <Tooltip.Header value={data.date} format="day" />
@@ -608,7 +609,7 @@
         debug: charts.area.debug,
       }}
     >
-      <Svg>
+      <Layer type={shared.renderContext}>
         <Axis placement="left" grid rule />
         <Axis placement="bottom" rule />
         <Area class="fill-primary/30" line={{ class: 'stroke-primary stroke-2' }} />
@@ -618,7 +619,7 @@
           area={charts.area.highlight.includes('area')}
           axis={charts.area.axis}
         />
-      </Svg>
+      </Layer>
       <Tooltip.Root
         x={charts.area.snapToDataX ? 'data' : 'pointer'}
         y={charts.area.snapToDataY ? 'data' : 'pointer'}
@@ -660,7 +661,7 @@
       }}
     >
       {#snippet children({ context })}
-        <Svg>
+        <Layer type={shared.renderContext}>
           <Axis placement="left" grid rule />
           <Axis placement="bottom" rule />
 
@@ -680,7 +681,7 @@
             area={charts.areaStack.highlight.includes('area')}
             axis={charts.areaStack.axis}
           />
-        </Svg>
+        </Layer>
         <Tooltip.Root
           x={charts.areaStack.snapToDataX ? 'data' : 'pointer'}
           y={charts.areaStack.snapToDataY ? 'data' : 'pointer'}
@@ -719,7 +720,7 @@
         debug: charts.dateTime.debug,
       }}
     >
-      <Svg>
+      <Layer type={shared.renderContext}>
         <Axis placement="left" grid={{ style: 'stroke-dasharray: 2' }} rule />
         <Axis placement="bottom" />
         <Points class="fill-primary-100 stroke-primary" />
@@ -729,7 +730,7 @@
           area={charts.dateTime.highlight.includes('area')}
           axis={charts.dateTime.axis}
         />
-      </Svg>
+      </Layer>
       <Tooltip.Root
         x={charts.dateTime.snapToDataX ? 'data' : 'pointer'}
         y={charts.dateTime.snapToDataY ? 'data' : 'pointer'}
@@ -771,7 +772,7 @@
         debug: charts.duration.debug,
       }}
     >
-      <Svg>
+      <Layer type={shared.renderContext}>
         <Axis placement="left" grid={{ style: 'stroke-dasharray: 2' }} rule />
         <Axis placement="bottom" />
         <Points class="fill-primary-100 stroke-primary" links />
@@ -781,7 +782,7 @@
           area={charts.duration.highlight.includes('area')}
           axis={charts.duration.axis}
         />
-      </Svg>
+      </Layer>
       <Tooltip.Root
         x={charts.duration.snapToDataX ? 'data' : 'pointer'}
         y={charts.duration.snapToDataY ? 'data' : 'pointer'}
@@ -831,7 +832,7 @@
         debug: charts.multiDuration.debug,
       }}
     >
-      <Svg>
+      <Layer type={shared.renderContext}>
         <Axis placement="left" grid={{ style: 'stroke-dasharray: 2' }} rule />
         <Axis placement="bottom" />
         <Points class="fill-primary-100 stroke-primary" links />
@@ -841,7 +842,7 @@
           area={charts.multiDuration.highlight.includes('area')}
           axis={charts.multiDuration.axis}
         />
-      </Svg>
+      </Layer>
       <Tooltip.Root
         x={charts.multiDuration.snapToDataX ? 'data' : 'pointer'}
         y={charts.multiDuration.snapToDataY ? 'data' : 'pointer'}
@@ -893,7 +894,7 @@
         debug: charts.bars.debug,
       }}
     >
-      <Svg>
+      <Layer type={shared.renderContext}>
         <Axis placement="left" grid rule />
         <Axis placement="bottom" rule />
         <Bars radius={4} strokeWidth={1} class="fill-primary" />
@@ -904,7 +905,7 @@
           bar={charts.bars.highlight.includes('bar') ? { radius: 4, class: 'fill-primary' } : false}
           axis={charts.bars.axis}
         />
-      </Svg>
+      </Layer>
       <Tooltip.Root
         x={charts.bars.snapToDataX ? 'data' : 'pointer'}
         y={charts.bars.snapToDataY ? 'data' : 'pointer'}
@@ -944,7 +945,7 @@
         debug: charts.multiBars.debug,
       }}
     >
-      <Svg>
+      <Layer type={shared.renderContext}>
         <Axis placement="left" grid rule />
         <Axis placement="bottom" rule />
         <Bars y="baseline" radius={4} strokeWidth={1} class="fill-surface-content/10" />
@@ -963,7 +964,7 @@
             ? { y: 'value', radius: 4, strokeWidth: 1, class: 'fill-primary' }
             : false}
         />
-      </Svg>
+      </Layer>
       <Tooltip.Root
         x={charts.multiBars.snapToDataX ? 'data' : 'pointer'}
         y={charts.multiBars.snapToDataY ? 'data' : 'pointer'}
@@ -998,7 +999,7 @@
         debug: charts.scatter.debug,
       }}
     >
-      <Svg>
+      <Layer type={shared.renderContext}>
         <Axis placement="left" grid rule />
         <Axis placement="bottom" grid rule />
         <Points class="fill-primary stroke-primary" />
@@ -1008,7 +1009,7 @@
           area={charts.scatter.highlight.includes('area')}
           axis={charts.scatter.axis}
         />
-      </Svg>
+      </Layer>
       <Tooltip.Root
         x={charts.scatter.snapToDataX ? 'data' : 'pointer'}
         y={charts.scatter.snapToDataY ? 'data' : 'pointer'}
diff --git a/packages/layerchart/src/routes/docs/components/Tooltip/+page.ts b/packages/layerchart/src/routes/docs/components/Tooltip/+page.ts
index 4f53cbfce..048f0a917 100644
--- a/packages/layerchart/src/routes/docs/components/Tooltip/+page.ts
+++ b/packages/layerchart/src/routes/docs/components/Tooltip/+page.ts
@@ -8,6 +8,7 @@ export async function load() {
       api,
       source,
       pageSource,
+      supportedContexts: ['svg', 'canvas'],
       features: [
         'Various modes',
         [
diff --git a/packages/layerchart/src/routes/docs/components/TooltipContext/+page.svelte b/packages/layerchart/src/routes/docs/components/TooltipContext/+page.svelte
index f5e63b239..1f3a40471 100644
--- a/packages/layerchart/src/routes/docs/components/TooltipContext/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/TooltipContext/+page.svelte
@@ -1,4 +1,4 @@
 <script lang="ts">
-  import { Chart, Svg } from 'layerchart';
+  import { Chart, Layer } from 'layerchart';
   import Preview from '$lib/docs/Preview.svelte';
 </script>
diff --git a/packages/layerchart/src/routes/docs/components/TooltipContext/+page.ts b/packages/layerchart/src/routes/docs/components/TooltipContext/+page.ts
index c0b1b388f..4453243d1 100644
--- a/packages/layerchart/src/routes/docs/components/TooltipContext/+page.ts
+++ b/packages/layerchart/src/routes/docs/components/TooltipContext/+page.ts
@@ -10,6 +10,7 @@ export async function load() {
       pageSource,
       description:
         'Setup tooltip context, include mode to identify related data based on pointer position.  Typically used indirectly via the `tooltip` prop Chart',
+      supportedContexts: ['svg', 'canvas'],
       related: ['components/Chart', 'components/Tooltip', 'components/Highlight'],
     },
   };
diff --git a/packages/layerchart/src/routes/docs/components/TransformContext/+page.svelte b/packages/layerchart/src/routes/docs/components/TransformContext/+page.svelte
index 7074e57a7..2ce3eb79a 100644
--- a/packages/layerchart/src/routes/docs/components/TransformContext/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/TransformContext/+page.svelte
@@ -2,13 +2,14 @@
   import type { ComponentProps } from 'svelte';
   import { cubicOut } from 'svelte/easing';
 
-  import { Chart, Circle, Html, Points, Spline, Svg } from 'layerchart';
+  import { Chart, Circle, Layer, Points, Spline } from 'layerchart';
   import TransformControls from '$lib/components/TransformControls.svelte';
   import { Field, RangeField, Switch } from 'svelte-ux';
 
   import Preview from '$lib/docs/Preview.svelte';
   import CurveMenuField from '$lib/docs/CurveMenuField.svelte';
   import { getSpiral } from '$lib/utils/genData.js';
+  import { shared } from '../../shared.svelte.js';
 
   let pointCount = $state(500);
   let angle = $state(137.5); //
@@ -56,7 +57,7 @@
       }}
     >
       <TransformControls />
-      <Svg>
+      <Layer type={shared.renderContext}>
         {#if showPath}
           <Spline {curve} motion="tween" />
         {/if}
@@ -75,7 +76,7 @@
             {/snippet}
           </Points>
         {/if}
-      </Svg>
+      </Layer>
     </Chart>
   </div>
 </Preview>
@@ -92,13 +93,13 @@
       }}
     >
       <TransformControls />
-      <Svg>
+      <Layer type="svg">
         <image
           href="https://upload.wikimedia.org/wikipedia/commons/f/fd/Ghostscript_Tiger.svg"
           width="100%"
           height="100%"
         />
-      </Svg>
+      </Layer>
     </Chart>
   </div>
 </Preview>
@@ -115,7 +116,7 @@
       }}
     >
       <TransformControls />
-      <Html>
+      <Layer type="html">
         <div class="h-full flex justify-center">
           <img
             src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fd/Ghostscript_Tiger.svg/512px-Ghostscript_Tiger.svg.png?20091116194118"
@@ -123,7 +124,7 @@
             class="h-full"
           />
         </div>
-      </Html>
+      </Layer>
     </Chart>
   </div>
 </Preview>
diff --git a/packages/layerchart/src/routes/docs/components/TransformContext/+page.ts b/packages/layerchart/src/routes/docs/components/TransformContext/+page.ts
index e0d008421..59863711d 100644
--- a/packages/layerchart/src/routes/docs/components/TransformContext/+page.ts
+++ b/packages/layerchart/src/routes/docs/components/TransformContext/+page.ts
@@ -8,6 +8,7 @@ export async function load() {
       api,
       source,
       pageSource,
+      supportedContexts: ['svg', 'canvas', 'html'],
       related: [
         'components/Chart',
         'examples/Pack',
diff --git a/packages/layerchart/src/routes/docs/components/Tree/+page.svelte b/packages/layerchart/src/routes/docs/components/Tree/+page.svelte
index f5e63b239..1f3a40471 100644
--- a/packages/layerchart/src/routes/docs/components/Tree/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/Tree/+page.svelte
@@ -1,4 +1,4 @@
 <script lang="ts">
-  import { Chart, Svg } from 'layerchart';
+  import { Chart, Layer } from 'layerchart';
   import Preview from '$lib/docs/Preview.svelte';
 </script>
diff --git a/packages/layerchart/src/routes/docs/components/Tree/+page.ts b/packages/layerchart/src/routes/docs/components/Tree/+page.ts
index 6c3c40d2b..78fdef251 100644
--- a/packages/layerchart/src/routes/docs/components/Tree/+page.ts
+++ b/packages/layerchart/src/routes/docs/components/Tree/+page.ts
@@ -8,6 +8,7 @@ export async function load() {
       api,
       source,
       pageSource,
+      supportedContexts: ['svg', 'canvas'],
       related: ['examples/Tree'],
     },
   };
diff --git a/packages/layerchart/src/routes/docs/components/Treemap/+page.svelte b/packages/layerchart/src/routes/docs/components/Treemap/+page.svelte
index f192a7ea0..0db90f743 100644
--- a/packages/layerchart/src/routes/docs/components/Treemap/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/Treemap/+page.svelte
@@ -13,15 +13,16 @@
   import {
     Chart,
     Group,
+    Layer,
     Rect,
     RectClipPath,
-    Svg,
     Text,
     Tooltip,
     Treemap,
     findAncestor,
   } from 'layerchart';
   import { type ComponentProps } from 'svelte';
+  import { shared } from '../../shared.svelte.js';
 
   let { data } = $props();
 
@@ -144,7 +145,7 @@
   <div class="aspect-[16/9]">
     <Chart>
       {#snippet children({ context })}
-        <Svg>
+        <Layer type={shared.renderContext}>
           <Treemap
             hierarchy={rootPopulation}
             {tile}
@@ -212,7 +213,7 @@
               {/each}
             {/snippet}
           </Treemap>
-        </Svg>
+        </Layer>
 
         <Tooltip.Root>
           {#snippet children({ data })}
@@ -277,7 +278,7 @@
   <div class="h-[800px]">
     <Chart>
       {#snippet children({ context })}
-        <Svg>
+        <Layer type={shared.renderContext}>
           <Treemap
             hierarchy={root.copy()}
             {tile}
@@ -345,7 +346,7 @@
               {/each}
             {/snippet}
           </Treemap>
-        </Svg>
+        </Layer>
 
         <Tooltip.Root>
           {#snippet children({ data })}
@@ -365,7 +366,7 @@
 <Preview data={rootFlat}>
   <div class="h-[400px]">
     <Chart>
-      <Svg>
+      <Layer type={shared.renderContext}>
         <Treemap hierarchy={rootFlat}>
           {#snippet children({ nodes })}
             {#each nodes.filter((n) => n.depth > 0) as node}
@@ -390,7 +391,7 @@
             {/each}
           {/snippet}
         </Treemap>
-      </Svg>
+      </Layer>
     </Chart>
   </div>
 </Preview>
diff --git a/packages/layerchart/src/routes/docs/components/Treemap/+page.ts b/packages/layerchart/src/routes/docs/components/Treemap/+page.ts
index f35b4bea4..252822ce6 100644
--- a/packages/layerchart/src/routes/docs/components/Treemap/+page.ts
+++ b/packages/layerchart/src/routes/docs/components/Treemap/+page.ts
@@ -59,6 +59,7 @@ export async function load() {
       api,
       source,
       pageSource,
+      supportedContexts: ['svg', 'canvas'],
       related: ['examples/Treemap'],
     },
   };
diff --git a/packages/layerchart/src/routes/docs/components/Voronoi/+page.svelte b/packages/layerchart/src/routes/docs/components/Voronoi/+page.svelte
index 619cc8e5d..2af77d713 100644
--- a/packages/layerchart/src/routes/docs/components/Voronoi/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/Voronoi/+page.svelte
@@ -3,7 +3,8 @@
 
   import Preview from '$lib/docs/Preview.svelte';
   import { getSpiral } from '$lib/utils/genData.js';
-  import { Field, RangeField, ToggleGroup, ToggleOption } from 'svelte-ux';
+  import { RangeField } from 'svelte-ux';
+  import { shared } from '../../shared.svelte.js';
 
   const data = getSpiral({ angle: 137.5, radius: 10, count: 100, width: 500, height: 500 });
 
@@ -16,27 +17,17 @@
   }
 
   let radius = $state(0);
-  let renderContext: 'svg' | 'canvas' = $state('svg');
 </script>
 
 <h2>Example</h2>
 
-<div class="grid grid-cols-[1fr_auto] gap-2">
-  <Field label="Render context">
-    <ToggleGroup bind:value={renderContext} variant="outline">
-      <ToggleOption value="svg">Svg</ToggleOption>
-      <ToggleOption value="canvas">Canvas</ToggleOption>
-    </ToggleGroup>
-  </Field>
-
-  <RangeField label="Radius" bind:value={radius} max={100} />
-</div>
+<RangeField label="Radius" bind:value={radius} max={100} />
 
 <Preview {data}>
   <div class="h-[400px] p-4 border rounded-sm relative" onpointermove={onPointerMove}>
     <Chart {data} x="x" y="y">
       {#snippet children({ context })}
-        <Layer type={renderContext}>
+        <Layer type={shared.renderContext}>
           <ChartClipPath>
             <Points r={2} class="fill-primary stroke-primary" />
             <Voronoi
diff --git a/packages/layerchart/src/routes/docs/components/Voronoi/+page.ts b/packages/layerchart/src/routes/docs/components/Voronoi/+page.ts
index 036a98d98..8339061e8 100644
--- a/packages/layerchart/src/routes/docs/components/Voronoi/+page.ts
+++ b/packages/layerchart/src/routes/docs/components/Voronoi/+page.ts
@@ -8,6 +8,7 @@ export async function load() {
       api,
       source,
       pageSource,
+      supportedContexts: ['svg', 'canvas'],
     },
   };
 }
diff --git a/packages/layerchart/src/routes/docs/examples/AnimatedGlobe/+page.svelte b/packages/layerchart/src/routes/docs/examples/AnimatedGlobe/+page.svelte
index 962496d89..45f26325f 100644
--- a/packages/layerchart/src/routes/docs/examples/AnimatedGlobe/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/AnimatedGlobe/+page.svelte
@@ -6,7 +6,7 @@
   import { mdiPlay, mdiStop } from '@mdi/js';
 
   import { Chart, GeoPath, Graticule, Layer, Tooltip, type ChartContextValue } from 'layerchart';
-  import { Button, ButtonGroup, Field, Switch, ToggleGroup, ToggleOption } from 'svelte-ux';
+  import { Button, ButtonGroup, Field, Switch } from 'svelte-ux';
   import { sortFunc } from '@layerstack/utils';
   import { scrollIntoView } from '@layerstack/svelte-actions';
   import { cls } from '@layerstack/tailwind';
@@ -17,12 +17,12 @@
   import TransformDebug from '$lib/docs/TransformDebug.svelte';
 
   import { timings } from './timings.js';
+  import { shared } from '../../shared.svelte.js';
 
   let { data } = $props();
 
   const countries = feature(data.geojson, data.geojson.objects.countries);
 
-  let renderContext: 'svg' | 'canvas' = $state('svg');
   let context = $state<ChartContextValue>(null!);
 
   let selectedFeature: (typeof countries.features)[0] | null = $state(null);
@@ -95,18 +95,9 @@
   let debug = $state(false);
 </script>
 
-<div class="grid grid-cols-[1fr_auto] gap-2 mb-3">
-  <Field label="Render context">
-    <ToggleGroup bind:value={renderContext} variant="outline">
-      <ToggleOption value="svg">Svg</ToggleOption>
-      <ToggleOption value="canvas">Canvas</ToggleOption>
-    </ToggleGroup>
-  </Field>
-
-  <Field label="Debug" let:id classes={{ container: 'h-full' }}>
-    <Switch {id} bind:checked={debug} />
-  </Field>
-</div>
+<Field label="Debug" let:id classes={{ container: 'h-full mb-3' }}>
+  <Switch {id} bind:checked={debug} />
+</Field>
 
 <Preview data={countries}>
   <div class="h-[600px] grid grid-cols-[224px_1fr] relative">
@@ -157,7 +148,7 @@
           </div>
         {/if}
 
-        <Layer type={renderContext} {debug}>
+        <Layer type={shared.renderContext} {debug}>
           <GeoPath geojson={{ type: 'Sphere' }} class="fill-blue-400/50" />
           <Graticule class="stroke-surface-content/20" />
 
@@ -176,7 +167,7 @@
           {/each}
         </Layer>
 
-        {#if renderContext === 'canvas'}
+        {#if shared.renderContext === 'canvas'}
           <!-- Provides better performance by rendering tooltip path on separate <Canvas> -->
           <Layer type="canvas" pointerEvents={false}>
             {#if context.tooltip.data}
diff --git a/packages/layerchart/src/routes/docs/examples/AnimatedGlobe/+page.ts b/packages/layerchart/src/routes/docs/examples/AnimatedGlobe/+page.ts
index d026f0e02..f1b3f6a65 100644
--- a/packages/layerchart/src/routes/docs/examples/AnimatedGlobe/+page.ts
+++ b/packages/layerchart/src/routes/docs/examples/AnimatedGlobe/+page.ts
@@ -13,6 +13,7 @@ export async function load({ fetch }) {
     }>,
     meta: {
       pageSource,
+      supportedContexts: ['svg', 'canvas'],
       hideTableOfContents: true,
     },
   };
diff --git a/packages/layerchart/src/routes/docs/examples/Arc/+page.svelte b/packages/layerchart/src/routes/docs/examples/Arc/+page.svelte
index e6d95438c..c961c222b 100644
--- a/packages/layerchart/src/routes/docs/examples/Arc/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/Arc/+page.svelte
@@ -6,8 +6,8 @@
     Chart,
     ClipPath,
     Group,
+    Layer,
     LinearGradient,
-    Svg,
     Text,
     Tooltip,
     cartesianToPolar,
@@ -19,6 +19,7 @@
 
   import Preview from '$lib/docs/Preview.svelte';
   import Blockquote from '$lib/docs/Blockquote.svelte';
+  import { shared } from '../../shared.svelte.js';
 
   let value = $state(75);
   let segments = $state(60);
@@ -59,7 +60,7 @@
 <Preview>
   <div class="h-[120px] p-4 border resize overflow-auto">
     <Chart>
-      <Svg center>
+      <Layer type={shared.renderContext} center>
         <Group y={16}>
           <LinearGradient class="from-secondary to-primary">
             {#snippet children({ gradient })}
@@ -85,7 +86,7 @@
             {/snippet}
           </LinearGradient>
         </Group>
-      </Svg>
+      </Layer>
     </Chart>
   </div>
 </Preview>
@@ -95,7 +96,7 @@
 <Preview>
   <div class="h-[200px] p-4 border resize overflow-auto">
     <Chart>
-      <Svg center>
+      <Layer type={shared.renderContext} center>
         <Arc
           value={400}
           domain={[0, 1000]}
@@ -122,7 +123,7 @@
           class="fill-cyan-400"
           track={{ class: 'fill-cyan-500/10' }}
         />
-      </Svg>
+      </Layer>
     </Chart>
   </div>
 </Preview>
@@ -136,7 +137,7 @@
 <Preview>
   <div class="h-[240px] p-4 border resize overflow-auto">
     <Chart>
-      <Svg center>
+      <Layer type={shared.renderContext} center>
         <SpringValue {value} let:value>
           {#each { length: segments } as _, segmentIndex}
             {@const segmentAngle = (2 * Math.PI) / segments}
@@ -162,7 +163,7 @@
             class="text-6xl tabular-nums"
           />
         </SpringValue>
-      </Svg>
+      </Layer>
     </Chart>
   </div>
 </Preview>
@@ -176,7 +177,7 @@
 <Preview>
   <div class="h-[240px] p-4 border resize overflow-auto">
     <Chart>
-      <Svg center>
+      <Layer type={shared.renderContext} center>
         <SpringValue {value} let:value>
           <ClipPath>
             {#snippet clip()}
@@ -208,7 +209,7 @@
             class="text-6xl tabular-nums"
           />
         </SpringValue>
-      </Svg>
+      </Layer>
     </Chart>
   </div>
 </Preview>
@@ -219,7 +220,7 @@
   <div class="h-[300px] p-4 border resize overflow-auto">
     <Chart>
       {#snippet children({ context })}
-        <Svg center>
+        <Layer type={shared.renderContext} center>
           {#each { length: layerCount } as _, layerIndex}
             {@const layer = layerIndex + 1}
             {#each { length: divisions } as _, segmentIndex}
@@ -241,7 +242,7 @@
               />
             {/each}
           {/each}
-        </Svg>
+        </Layer>
         <Tooltip.Root>
           {#snippet children({ data })}
             {data}
@@ -264,7 +265,7 @@
   <Preview>
     <div class="h-[200px] p-4 border resize overflow-auto">
       <Chart>
-        <Svg center>
+        <Layer type={shared.renderContext} center>
           {#if show}
             <Arc
               initialValue={0}
@@ -296,7 +297,7 @@
               motion={{ type: 'tween', duration: 1000, easing: cubicInOut }}
             />
           {/if}
-        </Svg>
+        </Layer>
       </Chart>
     </div>
   </Preview>
@@ -308,7 +309,7 @@
   <div class="h-[200px] p-4 border resize overflow-auto">
     <Chart>
       {#snippet children({ context })}
-        <Svg center>
+        <Layer type={shared.renderContext} center>
           {@const arcWidth = 20}
           {@const maxValue = 100}
           <SpringValue {value} let:value={springValue}>
@@ -383,7 +384,7 @@
           r={circleRadius}
           class="stroke-black/10 fill-black/10"
         /> -->
-        </Svg>
+        </Layer>
       {/snippet}
     </Chart>
   </div>
diff --git a/packages/layerchart/src/routes/docs/examples/Arc/+page.ts b/packages/layerchart/src/routes/docs/examples/Arc/+page.ts
index 5cc4e3910..1a21167b0 100644
--- a/packages/layerchart/src/routes/docs/examples/Arc/+page.ts
+++ b/packages/layerchart/src/routes/docs/examples/Arc/+page.ts
@@ -4,6 +4,7 @@ export async function load() {
   return {
     meta: {
       pageSource,
+      supportedContexts: ['svg', 'canvas'],
       related: ['components/Arc', 'components/Pie'],
     },
   };
diff --git a/packages/layerchart/src/routes/docs/examples/Area/+page.svelte b/packages/layerchart/src/routes/docs/examples/Area/+page.svelte
index 9a40ea846..96b50b5a8 100644
--- a/packages/layerchart/src/routes/docs/examples/Area/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/Area/+page.svelte
@@ -12,12 +12,12 @@
     Circle,
     Highlight,
     Labels,
+    Layer,
     LinearGradient,
     Point,
     RectClipPath,
     Rule,
     Spline,
-    Svg,
     Text,
     Tooltip,
     asAny,
@@ -32,6 +32,7 @@
   import Blockquote from '$lib/docs/Blockquote.svelte';
   import { createDateSeries } from '$lib/utils/genData.js';
   import flatten from '$lib/utils/chart.js';
+  import { shared } from '../../shared.svelte.js';
 
   let { data } = $props();
 
@@ -96,11 +97,11 @@
       yNice
       padding={{ left: 16, bottom: 24 }}
     >
-      <Svg>
+      <Layer type={shared.renderContext}>
         <Axis placement="left" grid rule />
         <Axis placement="bottom" rule />
         <Area line={{ class: 'stroke-2 stroke-primary' }} class="fill-primary/30" />
-      </Svg>
+      </Layer>
     </Chart>
   </div>
 </Preview>
@@ -119,12 +120,12 @@
       padding={{ left: 16, bottom: 24 }}
       tooltip={{ mode: 'bisect-x' }}
     >
-      <Svg>
+      <Layer type={shared.renderContext}>
         <Axis placement="left" grid rule />
         <Axis placement="bottom" rule />
         <Area line={{ class: 'stroke-2 stroke-primary' }} class="fill-primary/30" />
         <Highlight points lines />
-      </Svg>
+      </Layer>
       <Tooltip.Root>
         {#snippet children({ data })}
           <Tooltip.Header value={data.date} format="day" />
@@ -150,12 +151,12 @@
       yNice
       padding={{ left: 16, bottom: 24 }}
     >
-      <Svg>
+      <Layer type={shared.renderContext}>
         <Axis placement="left" grid rule />
         <Axis placement="bottom" rule />
         <Area line={{ class: 'stroke-2 stroke-primary' }} class="fill-primary/30" />
         <Labels format="integer" />
-      </Svg>
+      </Layer>
     </Chart>
   </div>
 </Preview>
@@ -173,7 +174,7 @@
       yNice
       padding={{ left: 16, bottom: 24 }}
     >
-      <Svg>
+      <Layer type={shared.renderContext}>
         <Axis placement="left" grid rule />
         <Axis placement="bottom" format="day" rule ticks={(scale) => scale.domain()}>
           {#snippet tickLabel({ props, index })}
@@ -181,7 +182,7 @@
           {/snippet}
         </Axis>
         <Area line={{ class: 'stroke-2 stroke-primary' }} class="fill-primary/30" />
-      </Svg>
+      </Layer>
     </Chart>
   </div>
 </Preview>
@@ -199,7 +200,7 @@
       yNice
       padding={{ left: 16, bottom: 24 }}
     >
-      <Svg>
+      <Layer type={shared.renderContext}>
         <Axis placement="left" grid rule />
         <Axis placement="bottom" rule />
         <LinearGradient class="from-primary/50 to-primary/1" vertical>
@@ -207,7 +208,7 @@
             <Area line={{ class: 'stroke-2 stroke-primary' }} fill={gradient} />
           {/snippet}
         </LinearGradient>
-      </Svg>
+      </Layer>
     </Chart>
   </div>
 </Preview>
@@ -225,7 +226,7 @@
       yNice
       padding={{ left: 16, bottom: 24 }}
     >
-      <Svg>
+      <Layer type={shared.renderContext}>
         <Axis placement="left" grid rule />
         <Axis placement="bottom" rule />
         <LinearGradient class="from-secondary/1 to-secondary">
@@ -237,7 +238,7 @@
             </LinearGradient>
           {/snippet}
         </LinearGradient>
-      </Svg>
+      </Layer>
     </Chart>
   </div>
 </Preview>
@@ -261,7 +262,7 @@
       tooltip={{ mode: 'voronoi' }}
     >
       {#snippet children({ context })}
-        <Svg>
+        <Layer type={shared.renderContext}>
           <Axis placement="left" grid rule />
           <Axis placement="bottom" rule />
           {#each dataByFruit as [fruit, data]}
@@ -289,7 +290,8 @@
             </Point>
           {/each}
           <Highlight points lines />
-        </Svg>
+        </Layer>
+
         <Tooltip.Root>
           {#snippet children({ data })}
             <Tooltip.Header value={data.date} format="day" />
@@ -316,7 +318,7 @@
       padding={{ left: 16, bottom: 24, right: 48 }}
       tooltip={{ mode: 'bisect-x' }}
     >
-      <Svg>
+      <Layer type={shared.renderContext}>
         <Axis placement="left" grid rule />
         <Axis placement="bottom" rule />
 
@@ -348,7 +350,8 @@
         <Highlight y={(d) => d.bananas} points={{ fill: fruitColors.bananas }} />
         <Highlight y={(d) => d.oranges} points={{ fill: fruitColors.oranges }} />
         <Highlight lines />
-      </Svg>
+      </Layer>
+
       <Tooltip.Root>
         {#snippet children({ data })}
           <Tooltip.Header value={data.date} format="day" />
@@ -382,7 +385,7 @@
       tooltip={{ mode: 'voronoi' }}
     >
       {#snippet children({ context })}
-        <Svg>
+        <Layer type={shared.renderContext}>
           <Axis placement="left" grid rule />
           <Axis placement="bottom" rule />
           {#each dataByFruit as [fruit, data]}
@@ -413,7 +416,8 @@
             </g>
           {/each}
           <Highlight points lines />
-        </Svg>
+        </Layer>
+
         <Tooltip.Root {context}>
           {#snippet children({ data })}
             <Tooltip.Header value={data.date} format="day" />
@@ -446,7 +450,7 @@
       tooltip={{ mode: 'voronoi' }}
     >
       {#snippet children({ context })}
-        <Svg>
+        <Layer type={shared.renderContext}>
           <Axis placement="left" grid rule />
           <Axis placement="bottom" rule />
           {#each dataByFruit as [fruit, data]}
@@ -460,7 +464,8 @@
           {/each}
           <Labels format="integer" />
           <Highlight points lines />
-        </Svg>
+        </Layer>
+
         <Tooltip.Root>
           {#snippet children({ data })}
             <Tooltip.Header value={data.date} format="day" />
@@ -493,7 +498,7 @@
       tooltip={{ mode: 'bisect-x' }}
     >
       {#snippet children({ context })}
-        <Svg>
+        <Layer type={shared.renderContext}>
           <Axis placement="left" grid rule />
           <Axis placement="bottom" rule />
 
@@ -508,7 +513,7 @@
           {/each}
 
           <Highlight points lines />
-        </Svg>
+        </Layer>
 
         <Tooltip.Root>
           {#snippet children({ data })}
@@ -538,7 +543,7 @@
       yNice
       padding={{ left: 16, bottom: 24 }}
     >
-      <Svg>
+      <Layer type={shared.renderContext}>
         <Axis placement="left" grid rule />
         <Axis placement="bottom" rule />
         {@const primaryColors = [
@@ -567,7 +572,7 @@
             {/snippet}
           </LinearGradient>
         {/each}
-      </Svg>
+      </Layer>
     </Chart>
   </div>
 </Preview>
@@ -592,7 +597,7 @@
         yNice
         padding={{ left: 16, bottom: 24 }}
       >
-        <Svg>
+        <Layer type={shared.renderContext}>
           <Axis placement="left" grid rule />
           <Axis placement="bottom" rule />
           {#if show}
@@ -603,7 +608,7 @@
               <Area line={{ class: 'stroke-2 stroke-primary' }} class="fill-primary/30" />
             </ChartClipPath>
           {/if}
-        </Svg>
+        </Layer>
       </Chart>
     </div>
   </Preview>
@@ -627,7 +632,7 @@
         yNice
         padding={{ left: 16, bottom: 24 }}
       >
-        <Svg>
+        <Layer type={shared.renderContext}>
           <Axis placement="left" grid rule />
           <Axis placement="bottom" rule />
           {#if show}
@@ -639,7 +644,7 @@
               <Area class="fill-primary/30" />
             </ChartClipPath>
           {/if}
-        </Svg>
+        </Layer>
       </Chart>
     </div>
   </Preview>
@@ -663,7 +668,7 @@
         yNice
         padding={{ left: 16, bottom: 24 }}
       >
-        <Svg>
+        <Layer type={shared.renderContext}>
           <Axis placement="left" grid rule />
           <Axis placement="bottom" rule />
           {#if show}
@@ -679,7 +684,7 @@
               <Area class="fill-primary/30" />
             </ChartClipPath>
           {/if}
-        </Svg>
+        </Layer>
       </Chart>
     </div>
   </Preview>
@@ -698,7 +703,7 @@
       tooltip={{ mode: 'bisect-x' }}
     >
       {#snippet children({ context })}
-        <Svg>
+        <Layer type={shared.renderContext}>
           <Axis placement="left" grid rule />
           <Axis placement="bottom" />
           <Rule y={0} />
@@ -713,7 +718,7 @@
           >
             <Area line={{ class: 'stroke-2 stroke-danger' }} class="fill-danger/20" />
           </RectClipPath>
-        </Svg>
+        </Layer>
       {/snippet}
     </Chart>
   </div>
@@ -733,7 +738,7 @@
       tooltip={{ mode: 'bisect-x' }}
     >
       {#snippet children({ context })}
-        <Svg>
+        <Layer type={shared.renderContext}>
           <Axis placement="left" grid rule />
           <Axis placement="bottom" />
           <Rule y={0} />
@@ -748,7 +753,7 @@
           >
             <Area y0={(d) => 0} line={{ class: 'stroke-2 stroke-danger' }} class="fill-danger/20" />
           </RectClipPath>
-        </Svg>
+        </Layer>
       {/snippet}
     </Chart>
   </div>
@@ -772,7 +777,7 @@
       cRange={['var(--color-success)', 'var(--color-danger)']}
     >
       {#snippet children({ context })}
-        <Svg>
+        <Layer type={shared.renderContext}>
           <Axis placement="left" grid rule />
           <Axis placement="bottom" />
           <Rule y={0} />
@@ -792,7 +797,7 @@
             <Area y0={(d) => 0} line={{ class: 'stroke-2 stroke-danger' }} class="fill-danger/20" />
           </RectClipPath>
           <Highlight lines points />
-        </Svg>
+        </Layer>
 
         <Tooltip.Root>
           {#snippet children({ data })}
@@ -821,7 +826,7 @@
       tooltip={{ mode: 'bisect-x' }}
     >
       {#snippet children({ context })}
-        <Svg>
+        <Layer type={shared.renderContext}>
           <Axis placement="left" grid rule />
           <Axis placement="bottom" />
           <Rule y={0} />
@@ -856,7 +861,7 @@
                 : undefined,
             }}
           />
-        </Svg>
+        </Layer>
 
         <Tooltip.Root>
           {#snippet children({ data })}
@@ -888,7 +893,7 @@
         {@const thresholdValue = 0}
         {@const thresholdOffset =
           context.yScale(thresholdValue) / (context.height + context.padding.bottom)}
-        <Svg>
+        <Layer type={shared.renderContext}>
           <Axis placement="left" grid rule />
           <Axis placement="bottom" />
           <Rule y={0} />
@@ -908,7 +913,7 @@
               />
             {/snippet}
           </LinearGradient>
-        </Svg>
+        </Layer>
       {/snippet}
     </Chart>
   </div>
@@ -931,7 +936,7 @@
         {@const thresholdValue = 0}
         {@const thresholdOffset =
           context.yScale(thresholdValue) / (context.height + context.padding.bottom)}
-        <Svg>
+        <Layer type={shared.renderContext}>
           <Axis placement="left" grid rule />
           <Axis placement="bottom" />
           <Rule y={0} />
@@ -952,7 +957,7 @@
               />
             {/snippet}
           </LinearGradient>
-        </Svg>
+        </Layer>
       {/snippet}
     </Chart>
   </div>
@@ -973,7 +978,7 @@
       tooltip={{ mode: 'bisect-x' }}
     >
       {#snippet children({ context })}
-        <Svg>
+        <Layer type={shared.renderContext}>
           <LinearGradient class="from-primary/50 to-primary/1" vertical>
             {#snippet children({ gradient })}
               <Area line={{ class: 'stroke-2 stroke-primary opacity-20' }} fill={gradient} />
@@ -990,7 +995,7 @@
           </LinearGradient>
           <Highlight points lines={{ class: 'stroke-primary [stroke-dasharray:unset]' }} />
           <Axis placement="bottom" />
-        </Svg>
+        </Layer>
 
         <Tooltip.Root
           y={48}
diff --git a/packages/layerchart/src/routes/docs/examples/Area/+page.ts b/packages/layerchart/src/routes/docs/examples/Area/+page.ts
index f34b8d0af..22e389db0 100644
--- a/packages/layerchart/src/routes/docs/examples/Area/+page.ts
+++ b/packages/layerchart/src/routes/docs/examples/Area/+page.ts
@@ -10,6 +10,7 @@ export async function load({ fetch }) {
     ),
     meta: {
       pageSource,
+      supportedContexts: ['svg', 'canvas'],
     },
   };
 }
diff --git a/packages/layerchart/src/routes/docs/examples/Bars/+page.svelte b/packages/layerchart/src/routes/docs/examples/Bars/+page.svelte
index e5fea2ce2..827fc7ea8 100644
--- a/packages/layerchart/src/routes/docs/examples/Bars/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/Bars/+page.svelte
@@ -16,7 +16,7 @@
     LinearGradient,
     RectClipPath,
     Rule,
-    Svg,
+    Layer,
     Text,
     Tooltip,
     groupStackData,
@@ -28,6 +28,7 @@
   import Blockquote from '$lib/docs/Blockquote.svelte';
   import { createDateSeries, longData } from '$lib/utils/genData.js';
   import { unique } from '@layerstack/utils';
+  import { shared } from '../../shared.svelte.js';
 
   const data = createDateSeries({
     count: 10,
@@ -121,11 +122,11 @@
       yScale={scaleBand().padding(0.4)}
       padding={{ left: 20, bottom: 20 }}
     >
-      <Svg>
+      <Layer type={shared.renderContext}>
         <Axis placement="bottom" grid rule />
         <Axis placement="left" rule />
         <Bars strokeWidth={1} class="fill-primary" />
-      </Svg>
+      </Layer>
     </Chart>
   </div>
 </Preview>
@@ -143,11 +144,11 @@
       yScale={scaleBand().padding(0.4)}
       padding={{ left: 20, bottom: 20 }}
     >
-      <Svg>
+      <Layer type={shared.renderContext}>
         <Axis placement="bottom" grid rule />
         <Axis placement="left" rule />
         <Bars radius={4} rounded="right" strokeWidth={1} class="fill-primary" />
-      </Svg>
+      </Layer>
     </Chart>
   </div>
 </Preview>
@@ -166,12 +167,12 @@
       padding={{ left: 16, bottom: 24 }}
       tooltip={{ mode: 'band' }}
     >
-      <Svg>
+      <Layer type={shared.renderContext}>
         <Axis placement="bottom" grid rule />
         <Axis placement="left" rule />
         <Bars strokeWidth={1} class="fill-primary" />
         <Highlight area />
-      </Svg>
+      </Layer>
       <Tooltip.Root>
         {#snippet children({ data })}
           <Tooltip.Header value={data.date} format="day" />
@@ -198,12 +199,12 @@
       padding={{ left: 16, bottom: 24 }}
       tooltip={{ mode: 'band' }}
     >
-      <Svg>
+      <Layer type={shared.renderContext}>
         <Axis placement="bottom" grid rule />
         <Axis placement="left" rule />
         <Bars strokeWidth={1} class="fill-primary group-hover:fill-gray-300 transition-colors" />
         <Highlight area bar={{ class: 'fill-primary', strokeWidth: 1 }} />
-      </Svg>
+      </Layer>
       <Tooltip.Root>
         {#snippet children({ data })}
           <Tooltip.Header value={data.date} format="day" />
@@ -230,7 +231,7 @@
       padding={{ left: 16, bottom: 24 }}
       tooltip={{ mode: 'band' }}
     >
-      <Svg>
+      <Layer type={shared.renderContext}>
         <Axis placement="bottom" grid rule />
         <Axis placement="left" rule />
         <Bars strokeWidth={1} class="fill-primary group-hover:fill-gray-300 transition-colors" />
@@ -247,7 +248,7 @@
             </RectClipPath>
           {/snippet}
         </Highlight>
-      </Svg>
+      </Layer>
       <Tooltip.Root>
         {#snippet children({ data })}
           <Tooltip.Header value={data.date} format="day" />
@@ -272,11 +273,11 @@
       yScale={scaleBand().padding(0.4)}
       padding={{ left: 20, bottom: 20 }}
     >
-      <Svg>
+      <Layer type={shared.renderContext}>
         <Axis placement="bottom" grid rule />
         <Axis placement="left" rule />
         <Bars strokeWidth={1} class="fill-primary" />
-      </Svg>
+      </Layer>
     </Chart>
   </div>
 </Preview>
@@ -293,11 +294,11 @@
       yScale={scaleBand().padding(0.4)}
       padding={{ left: 20, bottom: 20 }}
     >
-      <Svg>
+      <Layer type={shared.renderContext}>
         <Axis placement="bottom" grid rule />
         <Axis placement="left" rule />
         <Bars strokeWidth={1} class="fill-primary" />
-      </Svg>
+      </Layer>
     </Chart>
   </div>
 </Preview>
@@ -315,13 +316,13 @@
       yScale={scaleBand().padding(0.4)}
       padding={{ left: 16, bottom: 24 }}
     >
-      <Svg>
+      <Layer type={shared.renderContext}>
         <Axis placement="bottom" grid rule />
         <Axis placement="left" rule />
         <Rule x={0} />
         <Bars strokeWidth={1} class="fill-primary" />
         <Labels format="integer" />
-      </Svg>
+      </Layer>
     </Chart>
   </div>
 </Preview>
@@ -338,13 +339,13 @@
       yScale={scaleBand().padding(0.4)}
       padding={{ left: 16, bottom: 24 }}
     >
-      <Svg>
+      <Layer type={shared.renderContext}>
         <Axis placement="bottom" grid rule />
         <Axis placement="left" rule />
         <Rule x={0} />
         <Bars strokeWidth={1} class="fill-primary" />
         <Labels placement="inside" format="integer" />
-      </Svg>
+      </Layer>
     </Chart>
   </div>
 </Preview>
@@ -362,11 +363,11 @@
       yScale={scaleBand().padding(0.4)}
       padding={{ left: 20, bottom: 20 }}
     >
-      <Svg>
+      <Layer type={shared.renderContext}>
         <Axis placement="bottom" grid rule />
         <Axis placement="left" ticks={4} rule />
         <Bars strokeWidth={1} class="fill-primary" />
-      </Svg>
+      </Layer>
     </Chart>
   </div>
 </Preview>
@@ -384,7 +385,7 @@
       yScale={scaleBand().padding(0.4)}
       padding={{ left: 20, bottom: 20 }}
     >
-      <Svg>
+      <Layer type={shared.renderContext}>
         <Axis placement="bottom" grid rule />
         <Axis
           placement="left"
@@ -392,7 +393,7 @@
           rule
         />
         <Bars strokeWidth={1} class="fill-primary" />
-      </Svg>
+      </Layer>
     </Chart>
   </div>
 </Preview>
@@ -410,7 +411,7 @@
       yScale={scaleBand().padding(0.4)}
       padding={{ left: 16, bottom: 24 }}
     >
-      <Svg>
+      <Layer type={shared.renderContext}>
         <Axis placement="bottom" grid rule />
         <Axis placement="left" rule />
         <LinearGradient class="from-green-400 to-blue-500" units="userSpaceOnUse">
@@ -418,7 +419,7 @@
             <Bars strokeWidth={1} fill={gradient} class="stroke-blue-900" />
           {/snippet}
         </LinearGradient>
-      </Svg>
+      </Layer>
     </Chart>
   </div>
 </Preview>
@@ -436,7 +437,7 @@
       yScale={scaleBand().padding(0.4)}
       padding={{ left: 16, bottom: 24 }}
     >
-      <Svg>
+      <Layer type={shared.renderContext}>
         <Axis placement="bottom" grid rule />
         <Axis placement="left" rule />
         <Bars>
@@ -448,7 +449,7 @@
             />
           {/each}
         </Bars>
-      </Svg>
+      </Layer>
     </Chart>
   </div>
 </Preview>
@@ -466,7 +467,7 @@
       yScale={scaleBand().padding(0.4)}
       padding={{ left: 20, bottom: 20 }}
     >
-      <Svg>
+      <Layer type={shared.renderContext}>
         <Axis placement="bottom" grid rule />
         <Axis placement="left" rule />
         <Bars strokeWidth={1} class="fill-primary" />
@@ -478,7 +479,7 @@
           data={data[3]}
           area={{ fill: 'url(#highlight-pattern)', class: 'stroke-secondary/50' }}
         />
-      </Svg>
+      </Layer>
     </Chart>
   </div>
 </Preview>
@@ -496,7 +497,7 @@
       yScale={scaleBand().padding(0.4)}
       padding={{ left: 20, bottom: 20 }}
     >
-      <Svg>
+      <Layer type={shared.renderContext}>
         <Axis placement="bottom" grid rule />
         <Axis placement="left" rule />
         <Bars strokeWidth={1} class="fill-primary" />
@@ -505,7 +506,7 @@
           lines={{ class: 'stroke-2 stroke-danger [stroke-dasharray:4] [stroke-linecap:round] ' }}
           axis="x"
         />
-      </Svg>
+      </Layer>
     </Chart>
   </div>
 </Preview>
@@ -525,7 +526,7 @@
     >
       {#snippet children({ context })}
         {@const avg = mean(data, (d) => d.value)}
-        <Svg>
+        <Layer type={shared.renderContext}>
           <Axis placement="bottom" grid rule />
           <Axis placement="left" rule />
           <Bars strokeWidth={1} class="fill-primary" />
@@ -542,7 +543,7 @@
             verticalAnchor="start"
             class="text-sm fill-danger stroke-surface-100 stroke-2"
           />
-        </Svg>
+        </Layer>
       {/snippet}
     </Chart>
   </div>
@@ -561,11 +562,11 @@
       yScale={scaleBand().padding(0.4)}
       padding={{ left: 16, bottom: 24 }}
     >
-      <Svg>
+      <Layer type={shared.renderContext}>
         <Bars strokeWidth={1} class="fill-primary" />
         <Axis placement="bottom" grid={{ class: 'stroke-surface-100' }} rule />
         <Axis placement="left" rule />
-      </Svg>
+      </Layer>
     </Chart>
   </div>
 </Preview>
@@ -583,11 +584,11 @@
       yScale={scaleBand().padding(0.4)}
       padding={{ left: 16, bottom: 24 }}
     >
-      <Svg>
+      <Layer type={shared.renderContext}>
         <Bars strokeWidth={1} class="fill-primary" />
         <Axis placement="bottom" grid={{ class: 'mix-blend-multiply' }} rule />
         <Axis placement="left" rule />
-      </Svg>
+      </Layer>
     </Chart>
   </div>
 </Preview>
@@ -606,13 +607,13 @@
       padding={{ left: 16, bottom: 24 }}
       tooltip={{ mode: 'band' }}
     >
-      <Svg>
+      <Layer type={shared.renderContext}>
         <Axis placement="bottom" grid rule />
         <Axis placement="left" rule />
         <Bars x="baseline" strokeWidth={1} class="fill-surface-content/20" />
         <Bars x="value" strokeWidth={1} insets={{ y: 8 }} class="fill-primary" />
         <Highlight area />
-      </Svg>
+      </Layer>
       <Tooltip.Root>
         {#snippet children({ data })}
           <Tooltip.Header value={data.date} format="day" />
@@ -639,7 +640,7 @@
       padding={{ left: 16, bottom: 24 }}
       tooltip={{ mode: 'band' }}
     >
-      <Svg>
+      <Layer type={shared.renderContext}>
         <Axis placement="bottom" grid rule />
         <Axis placement="left" />
         <Bars x="value" rounded-sm="right" strokeWidth={1} class="fill-primary" />
@@ -647,7 +648,7 @@
         <Rule x={0} />
 
         <Highlight area />
-      </Svg>
+      </Layer>
       <Tooltip.Root>
         {#snippet children({ data })}
           <Tooltip.Header value={data.date} format="day" />
@@ -681,7 +682,7 @@
         yScale={scaleBand().padding(0.4)}
         padding={{ left: 16, bottom: 24 }}
       >
-        <Svg>
+        <Layer type={shared.renderContext}>
           <Axis placement="bottom" grid rule />
           <Axis placement="left" rule />
           {#if show}
@@ -696,7 +697,7 @@
               class="fill-primary"
             />
           {/if}
-        </Svg>
+        </Layer>
       </Chart>
     </div>
   </Preview>
@@ -722,7 +723,7 @@
         yScale={scaleBand().padding(0.4)}
         padding={{ left: 16, bottom: 24 }}
       >
-        <Svg>
+        <Layer type={shared.renderContext}>
           <Axis placement="bottom" grid rule />
           <Axis placement="left" rule />
           {#if show}
@@ -740,7 +741,7 @@
               />
             {/each}
           {/if}
-        </Svg>
+        </Layer>
       </Chart>
     </div>
   </Preview>
@@ -768,12 +769,12 @@
       tooltip={{ mode: 'band' }}
     >
       {#snippet children({ context })}
-        <Svg>
+        <Layer type={shared.renderContext}>
           <Axis placement="bottom" grid rule />
           <Axis placement="left" rule />
           <Bars strokeWidth={1} />
           <Highlight area />
-        </Svg>
+        </Layer>
 
         <Tooltip.Root>
           {#snippet children({ data })}
@@ -824,12 +825,12 @@
       tooltip={{ mode: 'band' }}
     >
       {#snippet children({ context })}
-        <Svg>
+        <Layer type={shared.renderContext}>
           <Axis placement="bottom" grid rule />
           <Axis placement="left" rule />
           <Bars strokeWidth={1} />
           <Highlight area />
-        </Svg>
+        </Layer>
 
         <Tooltip.Root>
           {#snippet children({ data })}
@@ -880,12 +881,12 @@
       tooltip={{ mode: 'band' }}
     >
       {#snippet children({ context })}
-        <Svg>
+        <Layer type={shared.renderContext}>
           <Axis placement="bottom" grid rule format="percentRound" />
           <Axis placement="left" rule />
           <Bars strokeWidth={1} />
           <Highlight area />
-        </Svg>
+        </Layer>
 
         <Tooltip.Root>
           {#snippet children({ data })}
@@ -940,12 +941,12 @@
       tooltip={{ mode: 'band' }}
     >
       {#snippet children({ context })}
-        <Svg>
+        <Layer type={shared.renderContext}>
           <Axis placement="bottom" grid rule />
           <Axis placement="left" rule />
           <Bars strokeWidth={1} />
           <Highlight area />
-        </Svg>
+        </Layer>
 
         <Tooltip.Root>
           {#snippet children({ data })}
@@ -1013,7 +1014,7 @@
       tooltip={{ mode: 'band' }}
     >
       {#snippet children({ context })}
-        <Svg>
+        <Layer type={shared.renderContext}>
           <Axis placement="bottom" grid rule />
           <Axis placement="left" rule />
           <g>
@@ -1049,7 +1050,7 @@
             {/each}
           </g>
           <Highlight area />
-        </Svg>
+        </Layer>
 
         <Tooltip.Root>
           {#snippet children({ data })}
@@ -1116,7 +1117,7 @@
       padding={{ left: 16, bottom: 24 }}
     >
       {#snippet children({ context })}
-        <Svg>
+        <Layer type={shared.renderContext}>
           <Axis placement="bottom" grid rule />
           <Axis placement="left" rule />
           <g>
@@ -1158,7 +1159,7 @@
               />
             {/each}
           </g>
-        </Svg>
+        </Layer>
 
         <Tooltip.Root>
           {#snippet children({ data })}
@@ -1198,12 +1199,12 @@
         },
       }}
     >
-      <Svg>
+      <Layer type={shared.renderContext}>
         <Axis placement="bottom" grid rule />
         <Axis placement="left" rule />
         <Bars strokeWidth={1} class="fill-primary" />
         <Highlight area />
-      </Svg>
+      </Layer>
     </Chart>
   </div>
 </Preview>
diff --git a/packages/layerchart/src/routes/docs/examples/Bars/+page.ts b/packages/layerchart/src/routes/docs/examples/Bars/+page.ts
index b40169ef0..8d3a50c7b 100644
--- a/packages/layerchart/src/routes/docs/examples/Bars/+page.ts
+++ b/packages/layerchart/src/routes/docs/examples/Bars/+page.ts
@@ -5,6 +5,7 @@ export async function load() {
     meta: {
       title: 'Bar Chart (Horizontal)',
       pageSource,
+      supportedContexts: ['svg', 'canvas'],
       related: ['components/Bars', 'examples/Columns', 'examples/Histogram', 'charts/BarChart'],
     },
   };
diff --git a/packages/layerchart/src/routes/docs/examples/Beeswarm/+page.svelte b/packages/layerchart/src/routes/docs/examples/Beeswarm/+page.svelte
index b02e98a36..5faeec629 100644
--- a/packages/layerchart/src/routes/docs/examples/Beeswarm/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/Beeswarm/+page.svelte
@@ -2,11 +2,12 @@
   import { scaleOrdinal } from 'd3-scale';
   import { forceX, forceY, forceCollide, type SimulationNodeDatum } from 'd3-force';
 
-  import { asAny, Axis, Chart, Circle, ForceSimulation, Svg, Tooltip } from 'layerchart';
+  import { asAny, Axis, Chart, Circle, ForceSimulation, Layer, Tooltip } from 'layerchart';
 
   import Preview from '$lib/docs/Preview.svelte';
   import type { USSenatorsDatum } from '$static/data/examples/us-senators.js';
   import type { Prettify } from '@layerstack/utils';
+  import { shared } from '../../shared.svelte.js';
 
   type NodeDatum = USSenatorsDatum;
 
@@ -31,11 +32,11 @@
       data={data.usSenators}
       x={(d) => d.date_of_birth.getFullYear()}
       xNice
-      padding={{ bottom: 12, left: 8, right: 8 }}
+      padding={{ bottom: 20, left: 12, right: 12 }}
     >
       {#snippet children({ context })}
         {@const r = 6}
-        <Svg>
+        <Layer type={shared.renderContext}>
           <Axis placement="bottom" format="none" rule grid />
           <ForceSimulation
             forces={{
@@ -60,7 +61,7 @@
               {/each}
             {/snippet}
           </ForceSimulation>
-        </Svg>
+        </Layer>
 
         <Tooltip.Root {context}>
           {#snippet children({ data })}
diff --git a/packages/layerchart/src/routes/docs/examples/Beeswarm/+page.ts b/packages/layerchart/src/routes/docs/examples/Beeswarm/+page.ts
index cf690d8ad..c09878684 100644
--- a/packages/layerchart/src/routes/docs/examples/Beeswarm/+page.ts
+++ b/packages/layerchart/src/routes/docs/examples/Beeswarm/+page.ts
@@ -10,6 +10,7 @@ export async function load({ fetch }) {
     )) as USSenatorsData,
     meta: {
       pageSource,
+      supportedContexts: ['svg', 'canvas'],
     },
   };
 }
diff --git a/packages/layerchart/src/routes/docs/examples/BubbleMap/+page.svelte b/packages/layerchart/src/routes/docs/examples/BubbleMap/+page.svelte
index 1c3c65258..db89adfa5 100644
--- a/packages/layerchart/src/routes/docs/examples/BubbleMap/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/BubbleMap/+page.svelte
@@ -7,10 +7,11 @@
   import { feature } from 'topojson-client';
   import { sortFunc } from '@layerstack/utils';
 
-  import { Chart, Canvas, GeoPath, Legend, Svg, Tooltip, Circle } from 'layerchart';
+  import { Chart, GeoPath, Legend, Layer, Tooltip, Circle } from 'layerchart';
   import TransformControls from '$lib/components/TransformControls.svelte';
 
   import Preview from '$lib/docs/Preview.svelte';
+  import { shared } from '../../shared.svelte.js';
 
   let { data } = $props();
 
@@ -66,7 +67,7 @@
 
 <h1>Examples</h1>
 
-<h2>SVG</h2>
+<h2>Basic</h2>
 
 <Preview data={states}>
   <div class="h-[600px] overflow-hidden">
@@ -85,7 +86,7 @@
         {@const strokeWidth = 1 / context.transform.scale}
         <TransformControls />
 
-        <Svg>
+        <Layer type={shared.renderContext}>
           <GeoPath
             geojson={states}
             class="fill-surface-content/10 stroke-surface-100"
@@ -102,9 +103,9 @@
                   {cy}
                   r={rScale(d?.population ?? 0)}
                   fill={colorScale(d?.percentUnder18 ?? 0)}
-                  fill-opacity={0.5}
+                  fillOpacity={0.5}
                   stroke={colorScale(d?.percentUnder18 ?? 0)}
-                  stroke-width={strokeWidth / 2}
+                  strokeWidth={strokeWidth / 2}
                   class="pointer-events-none"
                 />
               {/snippet}
@@ -119,102 +120,18 @@
               {strokeWidth}
             />
           {/each}
-        </Svg>
-
-        <Legend
-          scale={colorScale}
-          title="Est. Percent under 18"
-          placement="top-left"
-          class="bg-surface-100/80 px-2 py-1 backdrop-blur-xs rounded-sm m-1"
-        />
-
-        <Tooltip.Root>
-          {#snippet children({ data })}
-            {@const d = data.properties.data}
-            <Tooltip.Header>
-              {data.properties.name + ' - ' + data.properties.data?.state}
-            </Tooltip.Header>
-            <Tooltip.List>
-              <Tooltip.Item
-                label="Total Population"
-                value={d?.population}
-                format="integer"
-                valueAlign="right"
-              />
-              <Tooltip.Item
-                label="Est. Population under 18"
-                value={d?.populationUnder18}
-                format="integer"
-                valueAlign="right"
-              />
-              <Tooltip.Item
-                label="Est. Percent under 18"
-                value={d?.percentUnder18 / 100}
-                format="percentRound"
-                valueAlign="right"
-              />
-            </Tooltip.List>
-          {/snippet}
-        </Tooltip.Root>
-      {/snippet}
-    </Chart>
-  </div>
-</Preview>
-
-<h2>Canvas</h2>
-
-<Preview data={states}>
-  <div class="h-[600px]">
-    <Chart
-      geo={{
-        projection,
-        fitGeojson: states,
-      }}
-      transform={{
-        mode: 'canvas',
-        initialScrollMode: 'scale',
-      }}
-      padding={{ top: 60 }}
-    >
-      {#snippet children({ context })}
-        {@const strokeWidth = 1 / context.transform.scale}
-        <TransformControls />
-
-        <Canvas>
-          <GeoPath
-            geojson={states}
-            class="fill-surface-content/10 stroke-surface-100"
-            {strokeWidth}
-          />
-
-          {#each enrichedCountiesFeatures as feature}
-            <GeoPath geojson={feature} {strokeWidth} tooltipContext={context.tooltip}>
-              {#snippet children({ geoPath })}
-                {@const [cx, cy] = geoPath?.centroid(feature) ?? []}
-                {@const d = feature.properties.data}
-                <Circle
-                  {cx}
-                  {cy}
-                  r={rScale(d?.population ?? 0)}
-                  fill={colorScale(d?.percentUnder18 ?? 0)}
-                  fillOpacity={0.5}
-                  stroke={colorScale(d?.percentUnder18 ?? 0)}
-                  strokeWidth={strokeWidth / 2}
-                />
-              {/snippet}
-            </GeoPath>
-          {/each}
-        </Canvas>
+        </Layer>
 
-        <Canvas pointerEvents={false}>
-          {#if context.tooltip.data}
+        <!-- Add extra path to mimic hover stroke on canvas -->
+        <Layer type={shared.renderContext} pointerEvents={false}>
+          {#if context.tooltip.data && shared.renderContext === 'canvas'}
             <GeoPath
               geojson={context.tooltip.data}
               class="stroke-none fill-surface-content/10"
               {strokeWidth}
             />
           {/if}
-        </Canvas>
+        </Layer>
 
         <Legend
           scale={colorScale}
diff --git a/packages/layerchart/src/routes/docs/examples/BubbleMap/+page.ts b/packages/layerchart/src/routes/docs/examples/BubbleMap/+page.ts
index beeb54e67..53f8b7218 100644
--- a/packages/layerchart/src/routes/docs/examples/BubbleMap/+page.ts
+++ b/packages/layerchart/src/routes/docs/examples/BubbleMap/+page.ts
@@ -17,6 +17,7 @@ export async function load({ fetch }) {
     )) as USCountyPopulationData,
     meta: {
       pageSource,
+      supportedContexts: ['svg', 'canvas'],
     },
   };
 }
diff --git a/packages/layerchart/src/routes/docs/examples/Candlestick/+page.svelte b/packages/layerchart/src/routes/docs/examples/Candlestick/+page.svelte
index ce01dc501..5b50a0be6 100644
--- a/packages/layerchart/src/routes/docs/examples/Candlestick/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/Candlestick/+page.svelte
@@ -1,17 +1,16 @@
 <script lang="ts">
   import { scaleBand, scaleOrdinal } from 'd3-scale';
 
-  import { Axis, Bars, Chart, Highlight, Points, Svg, Tooltip } from 'layerchart';
+  import { Axis, Bars, Chart, Highlight, Layer, Points, Tooltip } from 'layerchart';
 
   import Preview from '$lib/docs/Preview.svelte';
+  import { shared } from '../../shared.svelte.js';
 
   let { data } = $props();
 </script>
 
 <h1>Examples</h1>
 
-<h2>Basic</h2>
-
 <!-- TODO: Should use xScale={scaleTime()} once `<Bar>` / createDimensionGetter() supports it -->
 <Preview data={data.appleTicker}>
   <div class="h-[300px] p-4 border rounded-sm">
@@ -29,13 +28,13 @@
       tooltip={{ mode: 'bisect-x' }}
     >
       {#snippet children({ context })}
-        <Svg>
+        <Layer type={shared.renderContext}>
           <Axis placement="left" grid rule ticks={10} />
           <Axis placement="bottom" rule format={(d) => ''} />
           <Points links r={0} />
           <Bars y={(d) => [d.open, d.close]} radius={2} />
           <Highlight area />
-        </Svg>
+        </Layer>
         <Tooltip.Root {context}>
           {#snippet children({ data })}
             <Tooltip.Header value={data.date} format="day" />
diff --git a/packages/layerchart/src/routes/docs/examples/Candlestick/+page.ts b/packages/layerchart/src/routes/docs/examples/Candlestick/+page.ts
index fd40bccec..ec9188a54 100644
--- a/packages/layerchart/src/routes/docs/examples/Candlestick/+page.ts
+++ b/packages/layerchart/src/routes/docs/examples/Candlestick/+page.ts
@@ -10,6 +10,7 @@ export async function load({ fetch }) {
     )) as AppleTickerData,
     meta: {
       pageSource,
+      supportedContexts: ['svg', 'canvas'],
       related: [
         'components/Bars',
         'components/Points',
diff --git a/packages/layerchart/src/routes/docs/examples/Choropleth/+page.svelte b/packages/layerchart/src/routes/docs/examples/Choropleth/+page.svelte
index c67c1048a..df9812e14 100644
--- a/packages/layerchart/src/routes/docs/examples/Choropleth/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/Choropleth/+page.svelte
@@ -5,10 +5,11 @@
   import { geoIdentity, type GeoProjection } from 'd3-geo';
   import { feature } from 'topojson-client';
 
-  import { Canvas, Chart, GeoPath, Legend, Svg, Tooltip } from 'layerchart';
+  import { Chart, GeoPath, Legend, Layer, Tooltip } from 'layerchart';
   import TransformControls from '$lib/components/TransformControls.svelte';
 
   import Preview from '$lib/docs/Preview.svelte';
+  import { shared } from '../../shared.svelte.js';
 
   let { data } = $props();
   const states = feature(data.geojson, data.geojson.objects.states);
@@ -51,7 +52,7 @@
 
 <h1>Examples</h1>
 
-<h2>SVG</h2>
+<h2>Basic</h2>
 
 <Preview data={states}>
   <div class="h-[600px] overflow-hidden">
@@ -65,115 +66,40 @@
         initialScrollMode: 'scale',
       }}
       padding={{ top: 60 }}
-      tooltip={{ raiseTarget: true }}
+      tooltip={{ raiseTarget: shared.renderContext === 'svg' }}
     >
       {#snippet children({ context })}
         {@const strokeWidth = 1 / context.transform.scale}
         <TransformControls />
 
-        <Svg>
-          <g>
-            {#each enrichedCountiesFeatures as feature}
-              <GeoPath
-                geojson={feature}
-                fill={colorScale(feature.properties.data?.population ?? 0)}
-                class="stroke-none hover:stroke-white"
-                {strokeWidth}
-                tooltipContext={context.tooltip}
-              />
-            {/each}
-          </g>
-          <GeoPath
-            geojson={states}
-            class="fill-none stroke-black/30 pointer-events-none"
-            {strokeWidth}
-          />
-        </Svg>
-
-        <Legend
-          scale={colorScale}
-          title="Population"
-          class="absolute bg-surface-100/80 px-2 py-1 backdrop-blur-xs rounded-sm m-1"
-        />
-
-        <Tooltip.Root>
-          {#snippet children({ data })}
-            {@const d = populationByFips.get(data.id)}
-            <Tooltip.Header>
-              {data.properties.name + ' - ' + data.properties.data?.state}
-            </Tooltip.Header>
-            <Tooltip.List>
-              <Tooltip.Item
-                label="Total Population"
-                value={d?.population}
-                format="integer"
-                valueAlign="right"
-              />
-              <Tooltip.Item
-                label="Est. Population under 18"
-                value={d?.populationUnder18}
-                format="integer"
-                valueAlign="right"
-              />
-              <Tooltip.Item
-                label="Est. Percent under 18"
-                value={d?.percentUnder18 ?? 0 / 100}
-                format="percentRound"
-                valueAlign="right"
-              />
-            </Tooltip.List>
-          {/snippet}
-        </Tooltip.Root>
-      {/snippet}
-    </Chart>
-  </div>
-</Preview>
-
-<h2>Canvas</h2>
-
-<Preview data={states}>
-  <div class="h-[600px]">
-    <Chart
-      geo={{
-        projection,
-        fitGeojson: states,
-      }}
-      transform={{
-        mode: 'canvas',
-        initialScrollMode: 'scale',
-      }}
-      padding={{ top: 60 }}
-    >
-      {#snippet children({ context })}
-        {@const strokeWidth = 1 / context.transform.scale}
-        <TransformControls />
-
-        <Canvas>
+        <Layer type={shared.renderContext}>
           {#each enrichedCountiesFeatures as feature}
             <GeoPath
               geojson={feature}
               fill={colorScale(feature.properties.data?.population ?? 0)}
+              class="stroke-none hover:stroke-white"
               {strokeWidth}
-              class="stroke-none"
               tooltipContext={context.tooltip}
             />
           {/each}
-        </Canvas>
 
-        <Canvas pointerEvents={false}>
-          <GeoPath geojson={states} class="stroke-black/30" {strokeWidth} />
-        </Canvas>
+          <GeoPath
+            geojson={states}
+            class="fill-none stroke-black/30 pointer-events-none"
+            {strokeWidth}
+          />
+        </Layer>
 
-        <Canvas pointerEvents={false}>
-          {#if context.tooltip.data}
+        <!-- Add extra path to mimic hover stroke on canvas -->
+        <Layer type={shared.renderContext} pointerEvents={false}>
+          {#if context.tooltip.data && shared.renderContext === 'canvas'}
             <GeoPath geojson={context.tooltip.data} class="stroke-white" {strokeWidth} />
           {/if}
-        </Canvas>
+        </Layer>
 
         <Legend
           scale={colorScale}
           title="Population"
-          placement="top-left"
           class="absolute bg-surface-100/80 px-2 py-1 backdrop-blur-xs rounded-sm m-1"
         />
 
diff --git a/packages/layerchart/src/routes/docs/examples/Choropleth/+page.ts b/packages/layerchart/src/routes/docs/examples/Choropleth/+page.ts
index beeb54e67..53f8b7218 100644
--- a/packages/layerchart/src/routes/docs/examples/Choropleth/+page.ts
+++ b/packages/layerchart/src/routes/docs/examples/Choropleth/+page.ts
@@ -17,6 +17,7 @@ export async function load({ fetch }) {
     )) as USCountyPopulationData,
     meta: {
       pageSource,
+      supportedContexts: ['svg', 'canvas'],
     },
   };
 }
diff --git a/packages/layerchart/src/routes/docs/examples/CollisionDetection/+page.svelte b/packages/layerchart/src/routes/docs/examples/CollisionDetection/+page.svelte
index cea68a38e..6114817c1 100644
--- a/packages/layerchart/src/routes/docs/examples/CollisionDetection/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/CollisionDetection/+page.svelte
@@ -3,10 +3,11 @@
   import { randomUniform } from 'd3-random';
   import { forceX, forceY, forceManyBody, forceCollide, type SimulationNodeDatum } from 'd3-force';
 
-  import { Chart, Circle, Group, ForceSimulation, Svg } from 'layerchart';
+  import { Chart, Circle, Group, ForceSimulation, Layer } from 'layerchart';
 
   import Preview from '$lib/docs/Preview.svelte';
   import type { Prettify } from '@layerstack/utils';
+  import { shared } from '../../shared.svelte.js';
 
   type NodeDatum = { r: number; group: number };
   type MySimulationNodeDatum = Prettify<NodeDatum & SimulationNodeDatum>;
@@ -39,19 +40,25 @@
   <div class="h-[600px] p-4 border rounded-sm overflow-hidden">
     <Chart>
       {#snippet children({ context })}
-        <Svg>
-          <ForceSimulation
-            forces={{
-              x: xForce,
-              y: yForce,
-              collide: collideForce,
-              charge: manyBodyForce.strength((d, i) => (i ? 0 : (-context.width * 2) / 3)),
-            }}
-            data={{ nodes: randomData }}
-            alphaTarget={0.3}
-            velocityDecay={0.1}
-          >
-            {#snippet children({ nodes, simulation })}
+        <ForceSimulation
+          forces={{
+            x: xForce,
+            y: yForce,
+            collide: collideForce,
+            charge: manyBodyForce.strength((d, i) => (i ? 0 : (-context.width * 2) / 3)),
+          }}
+          data={{ nodes: randomData }}
+          alphaTarget={0.3}
+          velocityDecay={0.1}
+        >
+          {#snippet children({ nodes, simulation })}
+            <Layer
+              type={shared.renderContext}
+              onpointermove={(e) => {
+                simulation.nodes()[0].fx = e.offsetX - context.width / 2;
+                simulation.nodes()[0].fy = e.offsetY - context.height / 2;
+              }}
+            >
               <Group center>
                 {#each nodes as node, i}
                   {#if i > 0}
@@ -64,19 +71,9 @@
                   {/if}
                 {/each}
               </Group>
-
-              <rect
-                width={context.width}
-                height={context.height}
-                onpointermove={(e) => {
-                  simulation.nodes()[0].fx = e.offsetX - context.width / 2;
-                  simulation.nodes()[0].fy = e.offsetY - context.height / 2;
-                }}
-                class="fill-transparent"
-              />
-            {/snippet}
-          </ForceSimulation>
-        </Svg>
+            </Layer>
+          {/snippet}
+        </ForceSimulation>
       {/snippet}
     </Chart>
   </div>
diff --git a/packages/layerchart/src/routes/docs/examples/CollisionDetection/+page.ts b/packages/layerchart/src/routes/docs/examples/CollisionDetection/+page.ts
index 0a45eaea6..a97d410be 100644
--- a/packages/layerchart/src/routes/docs/examples/CollisionDetection/+page.ts
+++ b/packages/layerchart/src/routes/docs/examples/CollisionDetection/+page.ts
@@ -4,6 +4,7 @@ export async function load() {
   return {
     meta: {
       pageSource,
+      supportedContexts: ['svg', 'canvas'],
       related: [
         'https://d3js.org/d3-force/collide',
         'https://observablehq.com/@d3/collision-detection',
diff --git a/packages/layerchart/src/routes/docs/examples/Columns/+page.svelte b/packages/layerchart/src/routes/docs/examples/Columns/+page.svelte
index 0075453ef..a633e7078 100644
--- a/packages/layerchart/src/routes/docs/examples/Columns/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/Columns/+page.svelte
@@ -15,7 +15,7 @@
     Pattern,
     RectClipPath,
     Rule,
-    Svg,
+    Layer,
     Text,
     Tooltip,
     groupStackData,
@@ -28,6 +28,7 @@
   import Preview from '$lib/docs/Preview.svelte';
   import Blockquote from '$lib/docs/Blockquote.svelte';
   import { createDateSeries, longData } from '$lib/utils/genData.js';
+  import { shared } from '../../shared.svelte.js';
 
   const data = createDateSeries({
     count: 30,
@@ -121,11 +122,11 @@
       yNice={4}
       padding={{ left: 16, bottom: 24 }}
     >
-      <Svg>
+      <Layer type={shared.renderContext}>
         <Axis placement="left" grid rule />
         <Axis placement="bottom" rule />
         <Bars strokeWidth={1} class="fill-primary" />
-      </Svg>
+      </Layer>
     </Chart>
   </div>
 </Preview>
@@ -143,11 +144,11 @@
       yNice={4}
       padding={{ left: 16, bottom: 24 }}
     >
-      <Svg>
+      <Layer type={shared.renderContext}>
         <Axis placement="left" grid rule />
         <Axis placement="bottom" rule />
         <Bars radius={4} rounded="top" strokeWidth={1} class="fill-primary" />
-      </Svg>
+      </Layer>
     </Chart>
   </div>
 </Preview>
@@ -166,12 +167,12 @@
       padding={{ left: 16, bottom: 24 }}
       tooltip={{ mode: 'band' }}
     >
-      <Svg>
+      <Layer type={shared.renderContext}>
         <Axis placement="left" grid rule />
         <Axis placement="bottom" rule />
         <Bars strokeWidth={1} class="fill-primary" />
         <Highlight area />
-      </Svg>
+      </Layer>
       <Tooltip.Root>
         {#snippet children({ data })}
           <Tooltip.Header value={data.date} format="day" />
@@ -198,12 +199,12 @@
       padding={{ left: 16, bottom: 24 }}
       tooltip={{ mode: 'band' }}
     >
-      <Svg>
+      <Layer type={shared.renderContext}>
         <Axis placement="left" grid rule />
         <Axis placement="bottom" rule />
         <Bars strokeWidth={1} class="fill-primary group-hover:fill-gray-300 transition-colors" />
         <Highlight area bar={{ class: 'fill-primary', strokeWidth: 1 }} />
-      </Svg>
+      </Layer>
       <Tooltip.Root>
         {#snippet children({ data })}
           <Tooltip.Header value={data.date} format="day" />
@@ -230,7 +231,7 @@
       padding={{ left: 16, bottom: 24 }}
       tooltip={{ mode: 'band' }}
     >
-      <Svg>
+      <Layer type={shared.renderContext}>
         <Axis placement="left" grid rule />
         <Axis placement="bottom" rule />
         <Bars strokeWidth={1} class="fill-primary group-hover:fill-gray-300 transition-colors" />
@@ -247,7 +248,7 @@
             </RectClipPath>
           {/snippet}
         </Highlight>
-      </Svg>
+      </Layer>
       <Tooltip.Root>
         {#snippet children({ data })}
           <Tooltip.Header value={data.date} format="day" />
@@ -272,11 +273,11 @@
       yNice={4}
       padding={{ left: 16, bottom: 24 }}
     >
-      <Svg>
+      <Layer type={shared.renderContext}>
         <Axis placement="left" grid rule />
         <Axis placement="bottom" rule />
         <Bars strokeWidth={1} class="fill-primary" />
-      </Svg>
+      </Layer>
     </Chart>
   </div>
 </Preview>
@@ -293,11 +294,11 @@
       yNice={4}
       padding={{ left: 16, bottom: 24 }}
     >
-      <Svg>
+      <Layer type={shared.renderContext}>
         <Axis placement="left" grid rule />
         <Axis placement="bottom" rule />
         <Bars strokeWidth={1} class="fill-primary" />
-      </Svg>
+      </Layer>
     </Chart>
   </div>
 </Preview>
@@ -316,13 +317,13 @@
       yPadding={[16, 16]}
       padding={{ left: 16, bottom: 24 }}
     >
-      <Svg>
+      <Layer type={shared.renderContext}>
         <Axis placement="left" grid rule />
         <Axis placement="bottom" rule />
         <Rule y={0} />
         <Bars strokeWidth={1} class="fill-primary" />
         <Labels format="integer" />
-      </Svg>
+      </Layer>
     </Chart>
   </div>
 </Preview>
@@ -340,13 +341,13 @@
       yNice={4}
       padding={{ left: 16, bottom: 24 }}
     >
-      <Svg>
+      <Layer type={shared.renderContext}>
         <Axis placement="left" grid rule />
         <Axis placement="bottom" rule />
         <Rule y={0} />
         <Bars strokeWidth={1} class="fill-primary" />
         <Labels placement="inside" format="integer" />
-      </Svg>
+      </Layer>
     </Chart>
   </div>
 </Preview>
@@ -364,11 +365,11 @@
       yNice={4}
       padding={{ left: 16, bottom: 24 }}
     >
-      <Svg>
+      <Layer type={shared.renderContext}>
         <Axis placement="left" grid rule />
         <Axis placement="bottom" ticks={4} rule />
         <Bars strokeWidth={1} class="fill-primary" />
-      </Svg>
+      </Layer>
     </Chart>
   </div>
 </Preview>
@@ -386,7 +387,7 @@
       yNice={4}
       padding={{ left: 16, bottom: 24 }}
     >
-      <Svg>
+      <Layer type={shared.renderContext}>
         <Axis placement="left" grid rule />
         <Axis
           placement="bottom"
@@ -394,7 +395,7 @@
           rule
         />
         <Bars strokeWidth={1} class="fill-primary" />
-      </Svg>
+      </Layer>
     </Chart>
   </div>
 </Preview>
@@ -412,7 +413,7 @@
       yNice={4}
       padding={{ left: 16, bottom: 24 }}
     >
-      <Svg>
+      <Layer type={shared.renderContext}>
         <Axis placement="left" grid rule />
         <Axis placement="bottom" rule />
         <LinearGradient class="from-blue-500 to-green-400" vertical units="userSpaceOnUse">
@@ -420,7 +421,7 @@
             <Bars strokeWidth={1} fill={gradient} class="stroke-blue-900" />
           {/snippet}
         </LinearGradient>
-      </Svg>
+      </Layer>
     </Chart>
   </div>
 </Preview>
@@ -438,7 +439,7 @@
       yNice={4}
       padding={{ left: 16, bottom: 24 }}
     >
-      <Svg>
+      <Layer type={shared.renderContext}>
         <Axis placement="left" grid rule />
         <Axis placement="bottom" rule />
         <Bars>
@@ -450,7 +451,7 @@
             />
           {/each}
         </Bars>
-      </Svg>
+      </Layer>
     </Chart>
   </div>
 </Preview>
@@ -468,7 +469,7 @@
       yNice={4}
       padding={{ left: 16, bottom: 24 }}
     >
-      <Svg>
+      <Layer type={shared.renderContext}>
         <Axis placement="left" grid rule />
         <Axis placement="bottom" rule />
         <Bars strokeWidth={1} class="fill-primary" />
@@ -480,7 +481,7 @@
           data={data[3]}
           area={{ fill: 'url(#highlight-pattern)', class: 'stroke-secondary/50' }}
         />
-      </Svg>
+      </Layer>
     </Chart>
   </div>
 </Preview>
@@ -498,7 +499,7 @@
       yNice={4}
       padding={{ left: 16, bottom: 24 }}
     >
-      <Svg>
+      <Layer type={shared.renderContext}>
         <Axis placement="left" grid rule />
         <Axis placement="bottom" rule />
         <Bars strokeWidth={1} class="fill-primary" />
@@ -507,7 +508,7 @@
           lines={{ class: 'stroke-2 stroke-danger [stroke-dasharray:4] [stroke-linecap:round] ' }}
           axis="y"
         />
-      </Svg>
+      </Layer>
     </Chart>
   </div>
 </Preview>
@@ -527,7 +528,7 @@
     >
       {#snippet children({ context })}
         {@const avg = mean(data, (d) => d.value)}
-        <Svg>
+        <Layer type={shared.renderContext}>
           <Axis placement="left" grid rule />
           <Axis placement="bottom" rule />
           <Bars strokeWidth={1} class="fill-primary" />
@@ -544,7 +545,7 @@
             verticalAnchor="end"
             class="text-sm fill-danger stroke-surface-100 stroke-2"
           />
-        </Svg>
+        </Layer>
       {/snippet}
     </Chart>
   </div>
@@ -563,11 +564,11 @@
       yNice={4}
       padding={{ left: 16, bottom: 24 }}
     >
-      <Svg>
+      <Layer type={shared.renderContext}>
         <Bars strokeWidth={1} class="fill-primary" />
         <Axis placement="left" grid={{ class: 'stroke-surface-100' }} rule />
         <Axis placement="bottom" rule />
-      </Svg>
+      </Layer>
     </Chart>
   </div>
 </Preview>
@@ -585,11 +586,11 @@
       yNice={4}
       padding={{ left: 16, bottom: 24 }}
     >
-      <Svg>
+      <Layer type={shared.renderContext}>
         <Bars strokeWidth={1} class="fill-primary" />
         <Axis placement="left" grid={{ class: 'mix-blend-multiply' }} rule />
         <Axis placement="bottom" rule />
-      </Svg>
+      </Layer>
     </Chart>
   </div>
 </Preview>
@@ -608,13 +609,13 @@
       padding={{ left: 16, bottom: 24 }}
       tooltip={{ mode: 'bisect-x' }}
     >
-      <Svg>
+      <Layer type={shared.renderContext}>
         <Axis placement="left" grid rule />
         <Axis placement="bottom" rule />
         <Bars y="baseline" strokeWidth={1} class="fill-surface-content/20" />
         <Bars y="value" strokeWidth={1} insets={{ x: 4 }} class="fill-primary" />
         <Highlight area />
-      </Svg>
+      </Layer>
       <Tooltip.Root>
         {#snippet children({ data })}
           <Tooltip.Header value={data.date} format="day" />
@@ -641,14 +642,14 @@
       padding={{ left: 16, bottom: 24 }}
       tooltip={{ mode: 'bisect-x' }}
     >
-      <Svg>
+      <Layer type={shared.renderContext}>
         <Axis placement="left" grid rule format={(d) => format(Math.abs(d), 'integer')} />
         <Axis placement="bottom" />
         <Bars y="value" rounded-sm="top" strokeWidth={1} class="fill-primary" />
         <Bars y={(d) => -d.baseline} rounded="bottom" strokeWidth={1} class="fill-secondary" />
         <Rule y={0} />
         <Highlight area />
-      </Svg>
+      </Layer>
       <Tooltip.Root>
         {#snippet children({ data })}
           <Tooltip.Header value={data.date} format="day" />
@@ -682,7 +683,7 @@
         yNice={4}
         padding={{ left: 16, bottom: 24 }}
       >
-        <Svg>
+        <Layer type={shared.renderContext}>
           <Axis placement="left" grid rule />
           <Axis placement="bottom" rule />
           {#if show}
@@ -697,7 +698,7 @@
               class="fill-primary"
             />
           {/if}
-        </Svg>
+        </Layer>
       </Chart>
     </div>
   </Preview>
@@ -723,7 +724,7 @@
         yNice={4}
         padding={{ left: 16, bottom: 24 }}
       >
-        <Svg>
+        <Layer type={shared.renderContext}>
           <Axis placement="left" grid rule />
           <Axis placement="bottom" rule />
           {#if show}
@@ -739,7 +740,7 @@
               class="fill-primary"
             />
           {/if}
-        </Svg>
+        </Layer>
       </Chart>
     </div>
   </Preview>
@@ -765,7 +766,7 @@
         yNice={4}
         padding={{ left: 16, bottom: 24 }}
       >
-        <Svg>
+        <Layer type={shared.renderContext}>
           <Axis placement="left" grid rule />
           <Axis placement="bottom" rule />
           {#if show}
@@ -783,7 +784,7 @@
               />
             {/each}
           {/if}
-        </Svg>
+        </Layer>
       </Chart>
     </div>
   </Preview>
@@ -809,7 +810,7 @@
         yNice={4}
         padding={{ left: 16, bottom: 24 }}
       >
-        <Svg>
+        <Layer type={shared.renderContext}>
           <Axis placement="left" grid rule />
           <Axis placement="bottom" rule />
           {#if show}
@@ -829,7 +830,7 @@
               />
             {/each}
           {/if}
-        </Svg>
+        </Layer>
       </Chart>
     </div>
   </Preview>
@@ -857,12 +858,12 @@
       tooltip={{ mode: 'band' }}
     >
       {#snippet children({ context })}
-        <Svg>
+        <Layer type={shared.renderContext}>
           <Axis placement="left" grid rule />
           <Axis placement="bottom" rule />
           <Bars strokeWidth={1} />
           <Highlight area />
-        </Svg>
+        </Layer>
 
         <Tooltip.Root>
           {#snippet children({ data })}
@@ -912,12 +913,12 @@
       tooltip={{ mode: 'band' }}
     >
       {#snippet children({ context })}
-        <Svg>
+        <Layer type={shared.renderContext}>
           <Axis placement="left" grid rule />
           <Axis placement="bottom" rule />
           <Bars strokeWidth={1} />
           <Highlight area />
-        </Svg>
+        </Layer>
 
         <Tooltip.Root>
           {#snippet children({ data })}
@@ -967,12 +968,12 @@
       tooltip={{ mode: 'band' }}
     >
       {#snippet children({ context })}
-        <Svg>
+        <Layer type={shared.renderContext}>
           <Axis placement="left" grid rule format="percentRound" />
           <Axis placement="bottom" rule />
           <Bars strokeWidth={1} />
           <Highlight area />
-        </Svg>
+        </Layer>
 
         <Tooltip.Root>
           {#snippet children({ data })}
@@ -1026,12 +1027,12 @@
       tooltip={{ mode: 'band' }}
     >
       {#snippet children({ context })}
-        <Svg>
+        <Layer type={shared.renderContext}>
           <Axis placement="left" grid rule />
           <Axis placement="bottom" rule />
           <Bars strokeWidth={1} />
           <Highlight area />
-        </Svg>
+        </Layer>
 
         <Tooltip.Root>
           {#snippet children({ data })}
@@ -1097,7 +1098,7 @@
       tooltip={{ mode: 'band' }}
     >
       {#snippet children({ context })}
-        <Svg>
+        <Layer type={shared.renderContext}>
           <Axis placement="left" grid rule />
           <Axis placement="bottom" rule />
           <g>
@@ -1133,7 +1134,7 @@
             {/each}
           </g>
           <Highlight area />
-        </Svg>
+        </Layer>
 
         <Tooltip.Root>
           {#snippet children({ data })}
@@ -1199,7 +1200,7 @@
       padding={{ left: 16, bottom: 24 }}
     >
       {#snippet children({ context })}
-        <Svg>
+        <Layer type={shared.renderContext}>
           <Axis placement="left" grid rule />
           <Axis placement="bottom" rule />
           <g>
@@ -1240,7 +1241,7 @@
               />
             {/each}
           </g>
-        </Svg>
+        </Layer>
 
         <Tooltip.Root>
           {#snippet children({ data })}
@@ -1280,12 +1281,12 @@
         },
       }}
     >
-      <Svg>
+      <Layer type={shared.renderContext}>
         <Axis placement="left" grid rule />
         <Axis placement="bottom" rule />
         <Bars strokeWidth={1} class="fill-primary" />
         <Highlight area />
-      </Svg>
+      </Layer>
     </Chart>
   </div>
 </Preview>
diff --git a/packages/layerchart/src/routes/docs/examples/Columns/+page.ts b/packages/layerchart/src/routes/docs/examples/Columns/+page.ts
index 2f23eab19..af07044bf 100644
--- a/packages/layerchart/src/routes/docs/examples/Columns/+page.ts
+++ b/packages/layerchart/src/routes/docs/examples/Columns/+page.ts
@@ -5,6 +5,7 @@ export async function load() {
     meta: {
       title: 'Bar Chart (Vertical)',
       pageSource,
+      supportedContexts: ['svg', 'canvas'],
       related: ['components/Bars', 'examples/Bars', 'examples/Histogram', 'examples/Sparkbar'],
     },
   };
diff --git a/packages/layerchart/src/routes/docs/examples/Compound/+page.svelte b/packages/layerchart/src/routes/docs/examples/Compound/+page.svelte
index 4a13c883f..60ad86c74 100644
--- a/packages/layerchart/src/routes/docs/examples/Compound/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/Compound/+page.svelte
@@ -1,10 +1,11 @@
 <script lang="ts">
-  import { Area, Axis, BarChart, Chart, Highlight, Spline, Svg, Tooltip } from 'layerchart';
+  import { Area, Axis, BarChart, Chart, Highlight, Layer, Spline, Tooltip } from 'layerchart';
   import { scaleLinear, scaleTime } from 'd3-scale';
   import { extent } from 'd3-array';
 
   import Preview from '$lib/docs/Preview.svelte';
   import { createDateSeries } from '$lib/utils/genData.js';
+  import { shared } from '../../shared.svelte.js';
 
   let { data } = $props();
 
@@ -15,6 +16,8 @@
     value: 'integer',
     keys: ['value', 'baseline'],
   });
+
+  let renderContext = $derived(shared.renderContext as 'svg' | 'canvas');
 </script>
 
 <h1>Examples</h1>
@@ -30,6 +33,7 @@
       props={{
         bars: { y: 'baseline' },
       }}
+      {renderContext}
     >
       {#snippet aboveMarks()}
         <Area y1="value" class="fill-secondary/20" line={{ class: 'stroke-secondary' }} />
@@ -66,6 +70,7 @@
       props={{
         bars: { radius: 1, class: 'stroke-none fill-surface-content/10' },
       }}
+      {renderContext}
     />
 
     <!-- Second chart (line), responsible for tooltip -->
@@ -80,6 +85,7 @@
         xAxis: { ticks: 10, rule: true },
         tooltip: { context: { mode: 'band' } },
       }}
+      {renderContext}
     >
       {#snippet marks()}
         <Spline y="open" class="stroke-primary" />
@@ -122,7 +128,7 @@
       tooltip={{ mode: 'bisect-x' }}
     >
       {#snippet children({ context })}
-        <Svg>
+        <Layer type={shared.renderContext}>
           <Axis
             placement="left"
             rule
@@ -148,7 +154,7 @@
             points={{ class: 'fill-secondary' }}
             y={(d) => context.y1Scale?.(d.efficiency)}
           />
-        </Svg>
+        </Layer>
 
         <Tooltip.Root {context}>
           {#snippet children({ data })}
@@ -177,7 +183,7 @@
       yNice
       padding={{ top: 24, bottom: 24, left: 24, right: 24 }}
     >
-      <Svg>
+      <Layer type={shared.renderContext}>
         <Axis
           placement="left"
           rule
@@ -189,7 +195,7 @@
         <Axis placement="bottom" format="none" rule />
         <Spline class="stroke-2 stroke-primary" />
         <Highlight lines points />
-      </Svg>
+      </Layer>
     </Chart>
 
     <!-- Efficiency chart, provides tooltip for both values  -->
@@ -200,7 +206,7 @@
       padding={{ top: 24, bottom: 24, left: 24, right: 24 }}
       tooltip={{ mode: 'bisect-x' }}
     >
-      <Svg>
+      <Layer type={shared.renderContext}>
         <Axis
           placement="right"
           rule
@@ -211,7 +217,7 @@
         <Spline class="stroke-2 stroke-secondary" />
         <!-- Difficult to add points for both charts without using a remaped scale for one value -->
         <Highlight lines />
-      </Svg>
+      </Layer>
 
       <Tooltip.Root>
         {#snippet children({ data })}
@@ -246,6 +252,7 @@
           class: 'stroke-none fill-blue-500',
         },
       }}
+      {renderContext}
     />
 
     <BarChart
@@ -280,6 +287,7 @@
         },
       ]}
       seriesLayout="stack"
+      {renderContext}
     >
       {#snippet axis({ context })}
         <Axis placement="left" />
diff --git a/packages/layerchart/src/routes/docs/examples/Compound/+page.ts b/packages/layerchart/src/routes/docs/examples/Compound/+page.ts
index 2c922c6a7..156960bff 100644
--- a/packages/layerchart/src/routes/docs/examples/Compound/+page.ts
+++ b/packages/layerchart/src/routes/docs/examples/Compound/+page.ts
@@ -21,6 +21,7 @@ export async function load({ fetch }) {
     )) as HydroData,
     meta: {
       pageSource,
+      supportedContexts: ['svg', 'canvas'],
       related: [
         'components/Bars',
         'examples/Bars',
diff --git a/packages/layerchart/src/routes/docs/examples/CountryMap/+page.svelte b/packages/layerchart/src/routes/docs/examples/CountryMap/+page.svelte
index d43093176..2a9124785 100644
--- a/packages/layerchart/src/routes/docs/examples/CountryMap/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/CountryMap/+page.svelte
@@ -2,8 +2,9 @@
   import { geoAlbersUsa } from 'd3-geo';
   import { feature } from 'topojson-client';
 
-  import { Canvas, Chart, GeoPath, Svg, Text } from 'layerchart';
+  import { Canvas, Chart, GeoPath, Layer, Text } from 'layerchart';
   import Preview from '$lib/docs/Preview.svelte';
+  import { shared } from '../../shared.svelte.js';
 
   let { data } = $props();
   const states = feature(data.geojson, data.geojson.objects.states);
@@ -11,7 +12,7 @@
 
 <h1>Examples</h1>
 
-<h2>SVG</h2>
+<h2>Basic</h2>
 
 <Preview data={states}>
   <div class="h-[600px]">
@@ -21,7 +22,7 @@
         fitGeojson: states,
       }}
     >
-      <Svg>
+      <Layer type={shared.renderContext}>
         <g class="states">
           {#each states.features as feature}
             <GeoPath
@@ -47,39 +48,7 @@
             </GeoPath>
           {/each}
         </g>
-      </Svg>
-    </Chart>
-  </div>
-</Preview>
-
-<h2>Canvas</h2>
-
-<Preview data={states}>
-  <div class="h-[600px]">
-    <Chart
-      geo={{
-        projection: geoAlbersUsa,
-        fitGeojson: states,
-      }}
-    >
-      <Canvas>
-        <GeoPath geojson={states} class="fill-surface-content/10 stroke-surface-100" />
-        {#each states.features as feature}
-          <GeoPath geojson={feature}>
-            {#snippet children({ geoPath })}
-              {@const [x, y] = geoPath?.centroid(feature) ?? []}
-              <Text
-                {x}
-                {y}
-                value={feature.properties.name}
-                textAnchor="middle"
-                verticalAnchor="middle"
-                class="text-[8px] stroke-surface-100 [stroke-width:2px]"
-              />
-            {/snippet}
-          </GeoPath>
-        {/each}
-      </Canvas>
+      </Layer>
     </Chart>
   </div>
 </Preview>
diff --git a/packages/layerchart/src/routes/docs/examples/CountryMap/+page.ts b/packages/layerchart/src/routes/docs/examples/CountryMap/+page.ts
index bde492d07..406d5bdbe 100644
--- a/packages/layerchart/src/routes/docs/examples/CountryMap/+page.ts
+++ b/packages/layerchart/src/routes/docs/examples/CountryMap/+page.ts
@@ -10,6 +10,7 @@ export async function load({ fetch }) {
     }>,
     meta: {
       pageSource,
+      supportedContexts: ['svg', 'canvas'],
     },
   };
 }
diff --git a/packages/layerchart/src/routes/docs/examples/Dagre/+page.svelte b/packages/layerchart/src/routes/docs/examples/Dagre/+page.svelte
index 3233eec1a..051f06c21 100644
--- a/packages/layerchart/src/routes/docs/examples/Dagre/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/Dagre/+page.svelte
@@ -5,12 +5,13 @@
   import { slide } from 'svelte/transition';
   import { cls } from '@layerstack/tailwind';
 
-  import { Chart, Dagre, Group, Rect, Spline, Svg, Text, Tooltip } from 'layerchart';
+  import { Chart, Dagre, Group, Layer, Rect, Spline, Text, Tooltip } from 'layerchart';
   import { Field, MenuField, Switch, Toggle } from 'svelte-ux';
 
   import Preview from '$lib/docs/Preview.svelte';
   import DagreControls from './DagreControls.svelte';
   import TransformControls from '$lib/components/TransformControls.svelte';
+  import { shared } from '../../shared.svelte.js';
 
   let { data } = $props();
 
@@ -121,7 +122,7 @@
         >
           <TransformControls />
 
-          <Svg>
+          <Layer type={shared.renderContext}>
             <Dagre data={selectedGraph} edges={(d) => d.links} {...settings.playground}>
               {#snippet children({ nodes, edges })}
                 <g class="edges">
@@ -162,7 +163,7 @@
                 </g>
               {/snippet}
             </Dagre>
-          </Svg>
+          </Layer>
         </Chart>
       </div>
 
@@ -196,7 +197,7 @@
         >
           <TransformControls />
 
-          <Svg>
+          <Layer type={shared.renderContext}>
             <Dagre data={data.basic} edges={(d) => d.links} {...settings.simple}>
               {#snippet children({ nodes, edges })}
                 <g class="edges">
@@ -237,7 +238,7 @@
                 </g>
               {/snippet}
             </Dagre>
-          </Svg>
+          </Layer>
         </Chart>
       </div>
 
@@ -275,7 +276,7 @@
         >
           <TransformControls />
 
-          <Svg>
+          <Layer type={shared.renderContext}>
             <Dagre data={data.tcpState} edges={(d) => d.links} {...settings.tcpState}>
               {#snippet children({ nodes, edges })}
                 <g class="edges">
@@ -339,7 +340,7 @@
                 </g>
               {/snippet}
             </Dagre>
-          </Svg>
+          </Layer>
         </Chart>
       </div>
 
@@ -377,7 +378,7 @@
         >
           <TransformControls />
 
-          <Svg>
+          <Layer type={shared.renderContext}>
             <Dagre
               data={data.softwareUserFlow}
               edges={(d) => d.links}
@@ -445,7 +446,7 @@
                 </g>
               {/snippet}
             </Dagre>
-          </Svg>
+          </Layer>
         </Chart>
       </div>
 
@@ -482,7 +483,7 @@
         >
           <TransformControls />
 
-          <Svg>
+          <Layer type={shared.renderContext}>
             <Dagre
               data={data.cluster}
               edges={(d) => d.links}
@@ -531,7 +532,7 @@
                 {/each}
               </g>
             </Dagre>
-          </Svg>
+          </Layer>
         </Chart>
       </div>
 
diff --git a/packages/layerchart/src/routes/docs/examples/Dagre/+page.ts b/packages/layerchart/src/routes/docs/examples/Dagre/+page.ts
index 1d3cd642c..fca93d091 100644
--- a/packages/layerchart/src/routes/docs/examples/Dagre/+page.ts
+++ b/packages/layerchart/src/routes/docs/examples/Dagre/+page.ts
@@ -58,6 +58,7 @@ export async function load({ fetch }) {
 
     meta: {
       pageSource,
+      supportedContexts: ['svg'], // TODO: `canvas` coming soon
       related: ['components/Dagre', 'components/Link'],
     },
   };
diff --git a/packages/layerchart/src/routes/docs/examples/Duration/+page.svelte b/packages/layerchart/src/routes/docs/examples/Duration/+page.svelte
index fc99b5303..9a1ca9b60 100644
--- a/packages/layerchart/src/routes/docs/examples/Duration/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/Duration/+page.svelte
@@ -7,6 +7,7 @@
 
   import Preview from '$lib/docs/Preview.svelte';
   import { getRandomInteger } from '$lib/utils/genData.js';
+  import { shared } from '../../shared.svelte.js';
 
   const count = 10;
   const now = startOfDay(new Date());
@@ -23,6 +24,8 @@
     };
   });
 
+  let renderContext = $derived(shared.renderContext as 'svg' | 'canvas');
+
   // TODO: Update to use better data example: https://observablehq.com/@d3/dot-plot
 </script>
 
@@ -40,6 +43,7 @@
       grid={{ x: false, y: true, bandAlign: 'between' }}
       orientation="horizontal"
       padding={{ left: 36, bottom: 36 }}
+      {renderContext}
     >
       {#snippet tooltip({ context })}
         <Tooltip.Root {context}>
@@ -87,6 +91,7 @@
       grid={{ x: false, y: true, bandAlign: 'between' }}
       orientation="horizontal"
       padding={{ left: 36, bottom: 36 }}
+      {renderContext}
     >
       {#snippet tooltip({ context })}
         <Tooltip.Root {context}>
@@ -134,6 +139,7 @@
           points: true,
         },
       }}
+      {renderContext}
     >
       {#snippet marks()}
         <Points class="fill-primary-100 stroke-primary" links={{ class: 'stroke-primary' }} />
@@ -192,6 +198,7 @@
           points: true,
         },
       }}
+      {renderContext}
     >
       {#snippet marks()}
         <Points links />
diff --git a/packages/layerchart/src/routes/docs/examples/Duration/+page.ts b/packages/layerchart/src/routes/docs/examples/Duration/+page.ts
index cd258a5af..779483d7e 100644
--- a/packages/layerchart/src/routes/docs/examples/Duration/+page.ts
+++ b/packages/layerchart/src/routes/docs/examples/Duration/+page.ts
@@ -4,6 +4,7 @@ export async function load() {
   return {
     meta: {
       pageSource,
+      supportedContexts: ['svg', 'canvas'],
       related: ['components/BarChart', 'components/Points'],
     },
   };
diff --git a/packages/layerchart/src/routes/docs/examples/EarthquakeGlobe/+page.svelte b/packages/layerchart/src/routes/docs/examples/EarthquakeGlobe/+page.svelte
index f8ea9c229..f0e04f12e 100644
--- a/packages/layerchart/src/routes/docs/examples/EarthquakeGlobe/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/EarthquakeGlobe/+page.svelte
@@ -3,15 +3,7 @@
   import { scaleSqrt } from 'd3-scale';
   import { feature } from 'topojson-client';
 
-  import {
-    Button,
-    ButtonGroup,
-    Field,
-    RangeField,
-    Switch,
-    ToggleGroup,
-    ToggleOption,
-  } from 'svelte-ux';
+  import { Button, ButtonGroup, Field, RangeField, Switch } from 'svelte-ux';
   import { TimerState } from '@layerstack/svelte-state';
 
   import {
@@ -24,6 +16,7 @@
     type ChartContextValue,
   } from 'layerchart';
   import Preview from '$lib/docs/Preview.svelte';
+  import { shared } from '../../shared.svelte.js';
 
   let { data } = $props();
 
@@ -50,26 +43,12 @@
     disabled: true,
   });
 
-  let renderContext: 'svg' | 'canvas' = $state('svg');
   let debug = $state(false);
 </script>
 
 <h1>Examples</h1>
 
 <div class="flex gap-2 items-end mb-2">
-  <Field label="Render context">
-    <ToggleGroup bind:value={renderContext} variant="outline">
-      <ToggleOption value="svg">Svg</ToggleOption>
-      <ToggleOption value="canvas">Canvas</ToggleOption>
-    </ToggleGroup>
-  </Field>
-
-  <Field label="Debug" let:id classes={{ container: 'h-full' }}>
-    <Switch {id} bind:checked={debug} />
-  </Field>
-
-  <div class="grow"></div>
-
   <Field label="Spin:" dense labelPlacement="left" let:id>
     <ButtonGroup size="sm" variant="fill-light">
       <Button on:click={timer.start} disabled={timer.running}>Start</Button>
@@ -85,6 +64,11 @@
     disabled={!timer.running}
     labelPlacement="left"
   />
+  <div class="grow"></div>
+
+  <Field label="Debug" labelPlacement="left" let:id classes={{ container: 'h-full' }}>
+    <Switch {id} bind:checked={debug} />
+  </Field>
 </div>
 
 <Preview data={countries}>
@@ -106,7 +90,7 @@
       ondragstart={timer.stop}
     >
       {#snippet children({ context })}
-        <Layer type={renderContext} {debug} disableHitCanvas={timer.running}>
+        <Layer type={shared.renderContext} {debug} disableHitCanvas={timer.running}>
           <GeoPath geojson={{ type: 'Sphere' }} class="fill-blue-400/50" />
 
           <Graticule class="stroke-surface-content/20" />
diff --git a/packages/layerchart/src/routes/docs/examples/EarthquakeGlobe/+page.ts b/packages/layerchart/src/routes/docs/examples/EarthquakeGlobe/+page.ts
index 3d69ba38c..ae1ac4161 100644
--- a/packages/layerchart/src/routes/docs/examples/EarthquakeGlobe/+page.ts
+++ b/packages/layerchart/src/routes/docs/examples/EarthquakeGlobe/+page.ts
@@ -30,6 +30,7 @@ export async function load({ fetch }) {
       ),
     meta: {
       pageSource,
+      supportedContexts: ['svg', 'canvas'],
     },
   };
 }
diff --git a/packages/layerchart/src/routes/docs/examples/EclipsesGlobe/+page.svelte b/packages/layerchart/src/routes/docs/examples/EclipsesGlobe/+page.svelte
index cf98486c4..4e5e97740 100644
--- a/packages/layerchart/src/routes/docs/examples/EclipsesGlobe/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/EclipsesGlobe/+page.svelte
@@ -21,6 +21,7 @@
   import { TimerState } from '@layerstack/svelte-state';
 
   import Preview from '$lib/docs/Preview.svelte';
+  import { shared } from '../../shared.svelte.js';
 
   let { data } = $props();
 
@@ -53,9 +54,7 @@
 
 <h1>Examples</h1>
 
-<div class="grid grid-cols-[1fr_auto] gap-2 items-end">
-  <h2>SVG</h2>
-
+<div class="flex gap-2 items-end mb-2">
   <div class="mb-2 flex gap-6">
     <Field label="Spin:" dense labelPlacement="left" let:id>
       <ButtonGroup size="sm" variant="fill-light">
@@ -90,7 +89,7 @@
       {#snippet children({ context })}
         <Legend scale={colorScale} title="Eclipse date" tickFormat="year" />
 
-        <Layer type="svg">
+        <Layer type={shared.renderContext}>
           <GeoPath
             geojson={{ type: 'Sphere' }}
             class="fill-surface-200 stroke-surface-content/20"
diff --git a/packages/layerchart/src/routes/docs/examples/EclipsesGlobe/+page.ts b/packages/layerchart/src/routes/docs/examples/EclipsesGlobe/+page.ts
index b7f81d1f3..a40ad273a 100644
--- a/packages/layerchart/src/routes/docs/examples/EclipsesGlobe/+page.ts
+++ b/packages/layerchart/src/routes/docs/examples/EclipsesGlobe/+page.ts
@@ -17,6 +17,7 @@ export async function load({ fetch }) {
     }>,
     meta: {
       pageSource,
+      supportedContexts: ['svg', 'canvas'],
       related: [
         'https://www.visionscarto.net/empreintes-d-eclipses',
         'http://xjubier.free.fr/en/site_pages/Solar_Eclipses.html',
diff --git a/packages/layerchart/src/routes/docs/examples/ForceDisjointGraph/+page.svelte b/packages/layerchart/src/routes/docs/examples/ForceDisjointGraph/+page.svelte
index 2262b2605..62efd5a58 100644
--- a/packages/layerchart/src/routes/docs/examples/ForceDisjointGraph/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/ForceDisjointGraph/+page.svelte
@@ -11,10 +11,11 @@
   import { scaleOrdinal } from 'd3-scale';
   import { schemeCategory10 } from 'd3-scale-chromatic';
 
-  import { Chart, Circle, ForceSimulation, Link, Svg } from 'layerchart';
+  import { Chart, Circle, ForceSimulation, Link, Layer } from 'layerchart';
 
   import Preview from '$lib/docs/Preview.svelte';
   import type { Prettify } from '@layerstack/utils';
+  import { shared } from '../../shared.svelte.js';
 
   let { data } = $props();
 
@@ -53,14 +54,10 @@
 
 <h1>Examples</h1>
 
-<!-- <pre>
-	{JSON.stringify(links, null, 2)}
-</pre> -->
-
 <Preview data={data.miserables}>
   <div class="h-[680px] p-4 border rounded-sm">
     <Chart>
-      <Svg center>
+      <Layer type={shared.renderContext} center>
         <ForceSimulation
           forces={{
             link: linkForce,
@@ -85,7 +82,7 @@
             {/each}
           {/snippet}
         </ForceSimulation>
-      </Svg>
+      </Layer>
     </Chart>
   </div>
 </Preview>
diff --git a/packages/layerchart/src/routes/docs/examples/ForceDisjointGraph/+page.ts b/packages/layerchart/src/routes/docs/examples/ForceDisjointGraph/+page.ts
index 31b261c25..855f1b38d 100644
--- a/packages/layerchart/src/routes/docs/examples/ForceDisjointGraph/+page.ts
+++ b/packages/layerchart/src/routes/docs/examples/ForceDisjointGraph/+page.ts
@@ -5,6 +5,7 @@ export async function load({ fetch }) {
     miserables: await fetch('/data/examples/graph/disjoint-graph.json').then((r) => r.json()),
     meta: {
       pageSource,
+      supportedContexts: ['svg', 'canvas'],
       related: ['https://observablehq.com/@d3/disjoint-force-directed-graph'],
     },
   };
diff --git a/packages/layerchart/src/routes/docs/examples/ForceDrag/+page.svelte b/packages/layerchart/src/routes/docs/examples/ForceDrag/+page.svelte
index 2a0c0a2a2..57ea87983 100644
--- a/packages/layerchart/src/routes/docs/examples/ForceDrag/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/ForceDrag/+page.svelte
@@ -9,12 +9,13 @@
   import { curveLinear } from 'd3-shape';
 
   import { Field, Switch } from 'svelte-ux';
-  import { Chart, ForceSimulation, Link, Svg, Tooltip } from 'layerchart';
+  import { Chart, ForceSimulation, Link, Layer, Tooltip } from 'layerchart';
   import { cls } from '@layerstack/tailwind';
   import { clamp, type Prettify } from '@layerstack/utils';
 
   import Preview from '$lib/docs/Preview.svelte';
   import { movable } from '$lib/actions/movable.js';
+  import { shared } from '../../shared.svelte.js';
 
   type NodeDatum = {
     id: number;
@@ -73,7 +74,7 @@
   <div class="h-[600px] p-4 border rounded-sm overflow-hidden">
     <Chart>
       {#snippet children({ context })}
-        <Svg>
+        <Layer type={shared.renderContext}>
           <ForceSimulation
             forces={{
               link: linkForce,
@@ -144,7 +145,7 @@
               {/each}
             {/snippet}
           </ForceSimulation>
-        </Svg>
+        </Layer>
 
         <Tooltip.Root>
           {context.tooltip.data?.id}
diff --git a/packages/layerchart/src/routes/docs/examples/ForceDrag/+page.ts b/packages/layerchart/src/routes/docs/examples/ForceDrag/+page.ts
index d2c80ef9c..871b56056 100644
--- a/packages/layerchart/src/routes/docs/examples/ForceDrag/+page.ts
+++ b/packages/layerchart/src/routes/docs/examples/ForceDrag/+page.ts
@@ -4,6 +4,7 @@ export async function load() {
   return {
     meta: {
       pageSource,
+      supportedContexts: ['svg', 'canvas'],
       related: ['https://observablehq.com/@d3/sticky-force-layout'],
     },
   };
diff --git a/packages/layerchart/src/routes/docs/examples/ForceGraph/+page.svelte b/packages/layerchart/src/routes/docs/examples/ForceGraph/+page.svelte
index 7d6b89666..c27467467 100644
--- a/packages/layerchart/src/routes/docs/examples/ForceGraph/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/ForceGraph/+page.svelte
@@ -11,11 +11,12 @@
   import { scaleOrdinal } from 'd3-scale';
   import { schemeCategory10 } from 'd3-scale-chromatic';
 
-  import { Chart, Circle, ForceSimulation, Link, Svg, Tooltip } from 'layerchart';
+  import { Chart, Circle, ForceSimulation, Link, Layer, Tooltip } from 'layerchart';
   import { Checkbox, Field, ProgressCircle, RangeField } from 'svelte-ux';
 
   import Preview from '$lib/docs/Preview.svelte';
   import type { Prettify } from '@layerstack/utils';
+  import { shared } from '../../shared.svelte.js';
 
   let { data } = $props();
 
@@ -277,7 +278,7 @@
   <div class="h-[600px] p-4 border rounded-sm overflow-hidden">
     <Chart>
       {#snippet children({ context })}
-        <Svg>
+        <Layer type={shared.renderContext}>
           <ForceSimulation
             forces={{
               ...(hasLinkForce && { link: linkForce }),
@@ -322,7 +323,7 @@
               {/each}
             {/snippet}
           </ForceSimulation>
-        </Svg>
+        </Layer>
 
         <Tooltip.Root>
           {context.tooltip.data?.id}
diff --git a/packages/layerchart/src/routes/docs/examples/ForceGraph/+page.ts b/packages/layerchart/src/routes/docs/examples/ForceGraph/+page.ts
index b238daf79..947d100f9 100644
--- a/packages/layerchart/src/routes/docs/examples/ForceGraph/+page.ts
+++ b/packages/layerchart/src/routes/docs/examples/ForceGraph/+page.ts
@@ -5,6 +5,7 @@ export async function load({ fetch }) {
     miserables: await fetch('/data/examples/graph/miserables.json').then((r) => r.json()),
     meta: {
       pageSource,
+      supportedContexts: ['svg', 'canvas'],
       related: ['https://observablehq.com/@d3/force-directed-graph'],
     },
   };
diff --git a/packages/layerchart/src/routes/docs/examples/ForceGroup/+page.svelte b/packages/layerchart/src/routes/docs/examples/ForceGroup/+page.svelte
index fcfa6f8ae..1a73e7a55 100644
--- a/packages/layerchart/src/routes/docs/examples/ForceGroup/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/ForceGroup/+page.svelte
@@ -8,13 +8,13 @@
     type SimulationNodeDatum,
   } from 'd3-force';
 
-  import { asAny, Chart, Circle, ForceSimulation, Svg } from 'layerchart';
+  import { asAny, Chart, Circle, ForceSimulation, Layer } from 'layerchart';
   import { Field, ToggleGroup, ToggleOption } from 'svelte-ux';
 
   import Preview from '$lib/docs/Preview.svelte';
-
   import dots from './dots.json' with { type: 'json' };
   import type { Prettify } from '@layerstack/utils';
+  import { shared } from '../../shared.svelte.js';
 
   type NodeDatum = { category: string; value: number };
   type MySimulationNodeDatum = Prettify<NodeDatum & SimulationNodeDatum>;
@@ -62,7 +62,7 @@
     <Chart data={nodes} x="category" xScale={scaleBand()} r="value" rRange={[3, 12]}>
       {#snippet children({ context })}
         {@const nodeStrokeWidth = 1}
-        <Svg>
+        <Layer type={shared.renderContext}>
           <ForceSimulation
             forces={{
               x: xForce.x((d) =>
@@ -91,7 +91,7 @@
               {/each}
             {/snippet}
           </ForceSimulation>
-        </Svg>
+        </Layer>
       {/snippet}
     </Chart>
   </div>
diff --git a/packages/layerchart/src/routes/docs/examples/ForceGroup/+page.ts b/packages/layerchart/src/routes/docs/examples/ForceGroup/+page.ts
index 48dcda64e..2f92cb817 100644
--- a/packages/layerchart/src/routes/docs/examples/ForceGroup/+page.ts
+++ b/packages/layerchart/src/routes/docs/examples/ForceGroup/+page.ts
@@ -4,6 +4,7 @@ export async function load() {
   return {
     meta: {
       pageSource,
+      supportedContexts: ['svg', 'canvas'],
     },
   };
 }
diff --git a/packages/layerchart/src/routes/docs/examples/ForceLattice/+page.svelte b/packages/layerchart/src/routes/docs/examples/ForceLattice/+page.svelte
index eb19639b0..0513745ef 100644
--- a/packages/layerchart/src/routes/docs/examples/ForceLattice/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/ForceLattice/+page.svelte
@@ -2,9 +2,10 @@
   import { forceManyBody, forceLink } from 'd3-force';
   import { curveLinear } from 'd3-shape';
 
-  import { Chart, Circle, ForceSimulation, Link, Svg } from 'layerchart';
+  import { Chart, Circle, ForceSimulation, Link, Layer } from 'layerchart';
 
   import Preview from '$lib/docs/Preview.svelte';
+  import { shared } from '../../shared.svelte.js';
 
   const n = 20;
   const nodes = Array.from({ length: n * n }, (_, i) => ({ index: i }));
@@ -25,15 +26,15 @@
 <Preview data={nodes}>
   <div class="h-[800px] p-4 border rounded-sm overflow-hidden">
     <Chart>
-      <Svg center>
-        <ForceSimulation
-          data={{ nodes, links }}
-          forces={{
-            charge: chargeForce,
-            link: linkForce,
-          }}
-        >
-          {#snippet children({ nodes, linkPositions })}
+      <ForceSimulation
+        data={{ nodes, links }}
+        forces={{
+          charge: chargeForce,
+          link: linkForce,
+        }}
+      >
+        {#snippet children({ nodes, linkPositions })}
+          <Layer type={shared.renderContext} center>
             {#each links as link, i (i)}
               <Link
                 explicitCoords={linkPositions[i]}
@@ -46,9 +47,9 @@
             {#each nodes as node}
               <Circle cx={node.x} cy={node.y} r={3} class="fill-surface-content" />
             {/each}
-          {/snippet}
-        </ForceSimulation>
-      </Svg>
+          </Layer>
+        {/snippet}
+      </ForceSimulation>
     </Chart>
   </div>
 </Preview>
diff --git a/packages/layerchart/src/routes/docs/examples/ForceLattice/+page.ts b/packages/layerchart/src/routes/docs/examples/ForceLattice/+page.ts
index ca2763df2..cd09df9a4 100644
--- a/packages/layerchart/src/routes/docs/examples/ForceLattice/+page.ts
+++ b/packages/layerchart/src/routes/docs/examples/ForceLattice/+page.ts
@@ -4,6 +4,7 @@ export async function load() {
   return {
     meta: {
       pageSource,
+      supportedContexts: ['svg', 'canvas'],
       related: [
         'https://d3js.org/d3-force/link',
         'https://observablehq.com/@d3/force-directed-lattice',
diff --git a/packages/layerchart/src/routes/docs/examples/ForceText/+page.svelte b/packages/layerchart/src/routes/docs/examples/ForceText/+page.svelte
index 1808bb393..9ba4fb14f 100644
--- a/packages/layerchart/src/routes/docs/examples/ForceText/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/ForceText/+page.svelte
@@ -1,13 +1,13 @@
 <script lang="ts">
+  import type { ComponentProps } from 'svelte';
   import { forceX, forceY, forceManyBody, forceCollide } from 'd3-force';
 
-  import { Canvas, Chart, Circle, ForceSimulation, Points, Svg } from 'layerchart';
+  import { Chart, ForceSimulation, Layer, Points } from 'layerchart';
   import { Field, RangeField, Switch, TextField } from 'svelte-ux';
 
   import Preview from '$lib/docs/Preview.svelte';
-
   import { rasterizeText, type RasterizeTextOptions } from '$lib/utils/string.js';
-  import type { ChartResizeDetail } from '$lib/components/Chart.svelte';
+  import { shared } from '../../shared.svelte.js';
 
   const collisionStrength = 0.01;
 
@@ -19,10 +19,10 @@
   let hasChargeForce = $state(false);
   let transition = $state(false);
 
-  function onResize(e: ChartResizeDetail) {
+  const onResize: ComponentProps<typeof Chart>['onResize'] = (e) => {
     width = e.width;
     height = e.height;
-  }
+  };
 
   let mouseNode = $derived({
     x: 0,
@@ -116,27 +116,15 @@
           velocityDecay={0.2}
         >
           {#snippet children({ nodes, simulation })}
-            <Canvas>
-              <!-- <Circle
-                cx={nodes?.[0]?.x}
-                cy={nodes?.[0]?.y}
-                r={nodes?.[0]?.rTarget}
-                class="fill-primary/10"
-              /> -->
+            <Layer
+              type={shared.renderContext}
+              onpointermove={(e) => {
+                simulation.nodes()[0].fx = e.offsetX;
+                simulation.nodes()[0].fy = e.offsetY;
+              }}
+            >
               <Points data={nodes.slice(1)} r={radius} class="fill-primary" />
-            </Canvas>
-
-            <Svg>
-              <rect
-                width={context.width}
-                height={context.height}
-                onpointermove={(e) => {
-                  simulation.nodes()[0].fx = e.offsetX;
-                  simulation.nodes()[0].fy = e.offsetY;
-                }}
-                class="fill-transparent"
-              />
-            </Svg>
+            </Layer>
           {/snippet}
         </ForceSimulation>
       {/snippet}
diff --git a/packages/layerchart/src/routes/docs/examples/ForceText/+page.ts b/packages/layerchart/src/routes/docs/examples/ForceText/+page.ts
index cdeabe134..ff6c7a5d8 100644
--- a/packages/layerchart/src/routes/docs/examples/ForceText/+page.ts
+++ b/packages/layerchart/src/routes/docs/examples/ForceText/+page.ts
@@ -4,6 +4,7 @@ export async function load() {
   return {
     meta: {
       pageSource,
+      supportedContexts: ['svg', 'canvas'],
       related: ['https://d3og.com/armollica/06a202c9f7df191ace8a1f97e33ffb97/'],
     },
   };
diff --git a/packages/layerchart/src/routes/docs/examples/ForceTree/+page.svelte b/packages/layerchart/src/routes/docs/examples/ForceTree/+page.svelte
index 77ebefe24..82dc6401b 100644
--- a/packages/layerchart/src/routes/docs/examples/ForceTree/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/ForceTree/+page.svelte
@@ -2,11 +2,12 @@
   import { hierarchy, type HierarchyLink, type HierarchyNode } from 'd3-hierarchy';
   import { forceX, forceY, forceManyBody, forceLink, type SimulationNodeDatum } from 'd3-force';
 
-  import { Chart, Circle, ForceSimulation, Link, Svg, Tooltip } from 'layerchart';
+  import { Chart, Circle, ForceSimulation, Link, Layer, Tooltip } from 'layerchart';
   import { cls } from '@layerstack/tailwind';
 
   import Preview from '$lib/docs/Preview.svelte';
   import type { Prettify } from '@layerstack/utils';
+  import { shared } from '../../shared.svelte.js';
 
   type NodeDatum = { name: string; value: number };
   type MySimulationNodeDatum = Prettify<NodeDatum & SimulationNodeDatum>;
@@ -34,18 +35,18 @@
   <div class="h-[600px] p-4 border rounded-sm">
     <Chart>
       {#snippet children({ context })}
-        <Svg center>
-          <ForceSimulation
-            forces={{
-              link: linkForce,
-              charge: chargeForce,
-              x: xForce,
-              y: yForce,
-            }}
-            data={{ nodes, links }}
-            cloneNodes
-          >
-            {#snippet children({ nodes, linkPositions })}
+        <ForceSimulation
+          forces={{
+            link: linkForce,
+            charge: chargeForce,
+            x: xForce,
+            y: yForce,
+          }}
+          data={{ nodes, links }}
+          cloneNodes
+        >
+          {#snippet children({ nodes, linkPositions })}
+            <Layer type={shared.renderContext} center>
               {#each links as link, i}
                 <Link
                   data={link}
@@ -68,9 +69,9 @@
                   onpointerleave={context.tooltip.hide}
                 />
               {/each}
-            {/snippet}
-          </ForceSimulation>
-        </Svg>
+            </Layer>
+          {/snippet}
+        </ForceSimulation>
 
         <Tooltip.Root>
           {#snippet children({ data })}
diff --git a/packages/layerchart/src/routes/docs/examples/ForceTree/+page.ts b/packages/layerchart/src/routes/docs/examples/ForceTree/+page.ts
index 0659f3547..d85b3dd4f 100644
--- a/packages/layerchart/src/routes/docs/examples/ForceTree/+page.ts
+++ b/packages/layerchart/src/routes/docs/examples/ForceTree/+page.ts
@@ -5,6 +5,7 @@ export async function load({ fetch }) {
     flare: await fetch('/data/examples/hierarchy/flare.json').then((r) => r.json()),
     meta: {
       pageSource,
+      supportedContexts: ['svg', 'canvas'],
       related: ['https://observablehq.com/@d3/force-directed-tree'],
     },
   };
diff --git a/packages/layerchart/src/routes/docs/examples/GeoPath/+page.svelte b/packages/layerchart/src/routes/docs/examples/GeoPath/+page.svelte
index c490c1379..5fc81b995 100644
--- a/packages/layerchart/src/routes/docs/examples/GeoPath/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/GeoPath/+page.svelte
@@ -2,8 +2,9 @@
   import { geoAlbersUsa } from 'd3-geo';
   import { feature } from 'topojson-client';
 
-  import { Canvas, Chart, GeoPath, Svg, Tooltip } from 'layerchart';
+  import { Chart, GeoPath, Layer, Tooltip } from 'layerchart';
   import Preview from '$lib/docs/Preview.svelte';
+  import { shared } from '../../shared.svelte.js';
 
   let { data } = $props();
 
@@ -13,7 +14,7 @@
 
 <h1>Examples</h1>
 
-<h2>SVG</h2>
+<h2>Basic</h2>
 
 <Preview data={states}>
   <div class="h-[600px]">
@@ -24,7 +25,7 @@
       }}
     >
       {#snippet children({ context })}
-        <Svg>
+        <Layer type={shared.renderContext}>
           {#each states.features as feature}
             <GeoPath
               geojson={feature}
@@ -37,58 +38,20 @@
             geojson={counties}
             class="fill-none stroke-surface-content/10 pointer-events-none"
           />
-        </Svg>
+        </Layer>
 
-        <Tooltip.Root>
-          {#snippet children({ data })}
-            {@const [longitude, latitude] =
-              context.geo.projection?.invert?.([context.tooltip.x, context.tooltip.y]) ?? []}
-            <Tooltip.Header>{data.properties.name}</Tooltip.Header>
-            <Tooltip.List>
-              <Tooltip.Item label="longitude" value={longitude} format="decimal" />
-              <Tooltip.Item label="latitude" value={latitude} format="decimal" />
-            </Tooltip.List>
-          {/snippet}
-        </Tooltip.Root>
-      {/snippet}
-    </Chart>
-  </div>
-</Preview>
-
-<h2>Canvas</h2>
-
-<Preview data={states}>
-  <div class="h-[600px] mt-10">
-    <Chart
-      geo={{
-        projection: geoAlbersUsa,
-        fitGeojson: states,
-      }}
-    >
-      {#snippet children({ context })}
-        <Canvas>
-          {#each states.features as feature}
-            <GeoPath
-              geojson={feature}
-              class="stroke-surface-content"
-              tooltipContext={context.tooltip}
-            />
-          {/each}
-        </Canvas>
-
-        <Canvas pointerEvents={false}>
-          <GeoPath geojson={counties} class="stroke-surface-content/10" />
-        </Canvas>
-
-        <!-- Provides better performance by rendering tooltip path on separate <Canvas> -->
-        <Canvas pointerEvents={false}>
-          {#if context.tooltip.data}
-            <GeoPath
-              geojson={context.tooltip.data}
-              class="stroke-surface-content fill-surface-content/20"
-            />
-          {/if}
-        </Canvas>
+        <!-- Draw tooltip path for canvas since hover: not supported -->
+        <!-- Provides better performance by rendering tooltip path on separate <canvas> layer -->
+        {#if shared.renderContext === 'canvas'}
+          <Layer type={shared.renderContext} pointerEvents={false}>
+            {#if context.tooltip.data}
+              <GeoPath
+                geojson={context.tooltip.data}
+                class="stroke-surface-content fill-surface-content/20"
+              />
+            {/if}
+          </Layer>
+        {/if}
 
         <Tooltip.Root>
           {#snippet children({ data })}
diff --git a/packages/layerchart/src/routes/docs/examples/GeoPath/+page.ts b/packages/layerchart/src/routes/docs/examples/GeoPath/+page.ts
index af04f1af5..5a147d814 100644
--- a/packages/layerchart/src/routes/docs/examples/GeoPath/+page.ts
+++ b/packages/layerchart/src/routes/docs/examples/GeoPath/+page.ts
@@ -13,6 +13,7 @@ export async function load({ fetch }) {
     }>,
     meta: {
       pageSource,
+      supportedContexts: ['svg', 'canvas'],
     },
   };
 }
diff --git a/packages/layerchart/src/routes/docs/examples/GeoPoint/+page.svelte b/packages/layerchart/src/routes/docs/examples/GeoPoint/+page.svelte
index 0499f7929..d4faecbe6 100644
--- a/packages/layerchart/src/routes/docs/examples/GeoPoint/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/GeoPoint/+page.svelte
@@ -3,8 +3,9 @@
   import { feature } from 'topojson-client';
   import { Field, RangeField, Switch, ToggleGroup, ToggleOption } from 'svelte-ux';
 
-  import { Canvas, Chart, Circle, GeoPath, GeoPoint, Svg, Text, Tooltip } from 'layerchart';
+  import { Canvas, Chart, Circle, GeoPath, GeoPoint, Layer, Text, Tooltip } from 'layerchart';
   import Preview from '$lib/docs/Preview.svelte';
+  import { shared } from '../../shared.svelte.js';
 
   // @ts-expect-error
   import LucideStar from '~icons/lucide/star';
@@ -22,13 +23,6 @@
 <h1>Examples</h1>
 
 <div class="flex gap-2">
-  <!-- <Field label="Render context">
-    <ToggleGroup bind:value={renderContext} variant="outline">
-      <ToggleOption value="svg">Svg</ToggleOption>
-      <ToggleOption value="canvas">Canvas</ToggleOption>
-    </ToggleGroup>
-  </Field> -->
-
   <Field label="Tooltip mode" class="grow">
     <ToggleGroup bind:value={tooltipMode} variant="outline">
       <ToggleOption value="quadtree">quadtree</ToggleOption>
@@ -53,29 +47,44 @@
         fitGeojson: states,
       }}
     >
-      <Svg>
-        <g class="states">
-          {#each states.features as feature}
-            <GeoPath
-              geojson={feature}
-              class="fill-surface-content/10 stroke-surface-100 hover:fill-surface-content/20"
-            />
-          {/each}
-        </g>
+      <Layer type={shared.renderContext}>
+        {#each states.features as feature}
+          <GeoPath
+            geojson={feature}
+            class="fill-surface-content/10 stroke-surface-100 hover:fill-surface-content/20"
+          />
+        {/each}
+
         <g class="points pointer-events-none">
           {#each data.us.capitals as capital}
-            <GeoPoint lat={capital.latitude} long={capital.longitude}>
-              <Circle r={2} class="fill-white stroke-danger" />
-              <Text
-                y="-6"
-                value={capital.description}
-                textAnchor="middle"
-                class="text-[8px] stroke-surface-100 [stroke-width:2px]"
-              />
-            </GeoPoint>
+            <!-- TODO: Improve GeoPoint to standardize svg/canvas -->
+            {#if shared.renderContext === 'svg'}
+              <GeoPoint lat={capital.latitude} long={capital.longitude}>
+                <Circle r={2} class="fill-white stroke-danger" />
+                <Text
+                  y="-6"
+                  value={capital.description}
+                  textAnchor="middle"
+                  class="text-[8px] stroke-surface-100 [stroke-width:2px]"
+                />
+              </GeoPoint>
+            {:else if shared.renderContext === 'canvas'}
+              <GeoPoint lat={capital.latitude} long={capital.longitude}>
+                {#snippet children({ x, y })}
+                  <Circle cx={x} cy={y} r={2} class="fill-white stroke-danger" />
+                  <Text
+                    {x}
+                    y={y - 6}
+                    value={capital.description}
+                    textAnchor="middle"
+                    class="text-[8px] stroke-surface-100 [stroke-width:2px]"
+                  />
+                {/snippet}
+              </GeoPoint>
+            {/if}
           {/each}
         </g>
-      </Svg>
+      </Layer>
     </Chart>
   </div>
 </Preview>
@@ -95,44 +104,62 @@
       tooltip={{ mode: tooltipMode, debug, radius: tooltipRadius }}
     >
       {#snippet children({ context })}
-        <Svg>
-          <g class="states">
-            {#each countries.features as feature}
-              <GeoPath
-                geojson={feature}
-                class="fill-surface-content/10 stroke-surface-100 hover:fill-surface-content/20"
-              />
-            {/each}
-          </g>
+        <Layer type={shared.renderContext}>
+          {#each countries.features as feature}
+            <GeoPath
+              geojson={feature}
+              class="fill-surface-content/10 stroke-surface-100 hover:fill-surface-content/20"
+            />
+          {/each}
 
-          <g class="points pointer-events-none">
-            {#each data.world.capitals as capital}
-              <GeoPoint
-                lat={capital.latitude}
-                long={capital.longitude}
-                r={2}
-                class="fill-white stroke-danger"
-              />
+          {#each data.world.capitals as capital}
+            <GeoPoint
+              lat={capital.latitude}
+              long={capital.longitude}
+              r={2}
+              class="fill-white stroke-danger pointer-events-none"
+            />
+          {/each}
+        </Layer>
 
-              <!-- Show tooltip as GeoPoint (Svg/Canvas) instead of Tooltip.Point (Html)) -->
-              {#if context.tooltip.data}
-                <GeoPoint
-                  lat={context.tooltip.data.latitude}
-                  long={context.tooltip.data.longitude}
-                  motion="spring"
-                >
-                  <Circle r={4} class="stroke-primary/50 fill-none" />
+        <!-- Show tooltip as GeoPoint (Svg/Canvas) instead of Tooltip.Point (Html)) -->
+        <!-- Render tooltip on separate layer to avoid performance issues (canvas) -->
+        <Layer type={shared.renderContext}>
+          {#if context.tooltip.data}
+            {#if shared.renderContext === 'svg'}
+              <GeoPoint
+                lat={context.tooltip.data.latitude}
+                long={context.tooltip.data.longitude}
+                motion="spring"
+              >
+                <Circle r={4} class="stroke-primary/50 fill-none" />
+                <Text
+                  y="-6"
+                  value={context.tooltip.data.label}
+                  textAnchor="middle"
+                  class="text-[8px] stroke-surface-100 [stroke-width:2px]"
+                />
+              </GeoPoint>
+            {:else if shared.renderContext === 'canvas'}
+              <GeoPoint
+                lat={context.tooltip.data.latitude}
+                long={context.tooltip.data.longitude}
+                motion="spring"
+              >
+                {#snippet children({ x, y })}
+                  <Circle cx={x} cy={y} r={4} class="stroke-primary/50 fill-none" />
                   <Text
-                    y="-6"
-                    value={context.tooltip.data.label}
+                    {x}
+                    y={y - 6}
+                    value={context.tooltip.data?.label}
                     textAnchor="middle"
                     class="text-[8px] stroke-surface-100 [stroke-width:2px]"
                   />
-                </GeoPoint>
-              {/if}
-            {/each}
-          </g>
-        </Svg>
+                {/snippet}
+              </GeoPoint>
+            {/if}
+          {/if}
+        </Layer>
       {/snippet}
     </Chart>
   </div>
@@ -153,37 +180,36 @@
       tooltip={{ mode: tooltipMode, debug, radius: tooltipRadius }}
     >
       {#snippet children({ context })}
-        <Svg>
-          <g class="states">
-            {#each states.features as feature}
-              <GeoPath
-                geojson={feature}
-                class="fill-surface-content/10 stroke-surface-100 hover:fill-surface-content/20"
-              />
-            {/each}
-          </g>
+        <Layer type={shared.renderContext}>
+          {#each states.features as feature}
+            <GeoPath
+              geojson={feature}
+              class="fill-surface-content/10 stroke-surface-100 hover:fill-surface-content/20"
+            />
+          {/each}
 
-          <g class="points pointer-events-none">
-            {#each data.us.airports as airport}
-              <GeoPoint
-                lat={airport.latitude}
-                long={airport.longitude}
-                r={1}
-                class="fill-primary"
-              />
-            {/each}
+          {#each data.us.airports as airport}
+            <GeoPoint
+              lat={airport.latitude}
+              long={airport.longitude}
+              r={1}
+              class="fill-primary pointer-events-none"
+            />
+          {/each}
+        </Layer>
 
-            {#if context.tooltip.data}
-              <GeoPoint
-                lat={context.tooltip.data.latitude}
-                long={context.tooltip.data.longitude}
-                r={4}
-                class="stroke-primary/50 fill-none"
-                motion="spring"
-              />
-            {/if}
-          </g>
-        </Svg>
+        <!-- Render tooltip on separate layer to avoid performance issues (canvas) -->
+        <Layer type={shared.renderContext}>
+          {#if context.tooltip.data}
+            <GeoPoint
+              lat={context.tooltip.data.latitude}
+              long={context.tooltip.data.longitude}
+              r={4}
+              class="stroke-primary/50 fill-none pointer-events-none"
+              motion="spring"
+            />
+          {/if}
+        </Layer>
 
         <Tooltip.Root {context}>
           {#snippet children({ data })}
@@ -214,33 +240,33 @@
       tooltip={{ mode: tooltipMode, debug, radius: tooltipRadius }}
     >
       {#snippet children({ context })}
-        <Svg>
-          <g class="countries">
-            {#each countries.features as feature}
-              <GeoPath geojson={feature} class="fill-surface-content/10 stroke-surface-100" />
-            {/each}
-          </g>
-          <g class="points pointer-events-none">
-            {#each data.world.airports as airport}
-              <GeoPoint
-                lat={airport.latitude}
-                long={airport.longitude}
-                r={1}
-                class="fill-primary"
-              />
-            {/each}
+        <Layer type={shared.renderContext}>
+          {#each countries.features as feature}
+            <GeoPath geojson={feature} class="fill-surface-content/10 stroke-surface-100" />
+          {/each}
 
-            {#if context.tooltip.data}
-              <GeoPoint
-                lat={context.tooltip.data.latitude}
-                long={context.tooltip.data.longitude}
-                r={4}
-                class="stroke-primary/50 fill-none"
-                motion="spring"
-              />
-            {/if}
-          </g>
-        </Svg>
+          {#each data.world.airports as airport}
+            <GeoPoint
+              lat={airport.latitude}
+              long={airport.longitude}
+              r={1}
+              class="fill-primary pointer-events-none"
+            />
+          {/each}
+        </Layer>
+
+        <!-- Render tooltip on separate layer to avoid performance issues (canvas) -->
+        <Layer type={shared.renderContext}>
+          {#if context.tooltip.data}
+            <GeoPoint
+              lat={context.tooltip.data.latitude}
+              long={context.tooltip.data.longitude}
+              r={4}
+              class="stroke-primary/50 fill-none pointer-events-none"
+              motion="spring"
+            />
+          {/if}
+        </Layer>
 
         <Tooltip.Root {context}>
           {#snippet children({ data })}
@@ -256,7 +282,7 @@
   </div>
 </Preview>
 
-<h2>Canvas</h2>
+<h2>Icons</h2>
 
 <Preview data={data.us.capitals}>
   <div class="h-[600px]">
@@ -266,70 +292,35 @@
         fitGeojson: states,
       }}
     >
-      <Canvas>
-        {#each states.features as feature}
-          <GeoPath geojson={feature} class="fill-surface-content/10 stroke-surface-100" />
-        {/each}
-        {#each data.us.capitals as capital}
-          <GeoPoint lat={capital.latitude} long={capital.longitude}>
-            {#snippet children({ x, y })}
-              <Circle cx={x} cy={y} r={2} class="fill-white stroke-danger" />
+      {#snippet children({ context })}
+        <Layer type={shared.renderContext}>
+          {#each states.features as feature}
+            <GeoPath
+              geojson={feature}
+              class="fill-surface-content/10 stroke-surface-100 hover:fill-surface-content/20"
+            />
+          {/each}
+
+          {#each data.us.capitals as capital}
+            <GeoPoint lat={capital.latitude} long={capital.longitude}>
+              <!-- TODO: How best to support canvas? -->
+              <LucideStar class="text-danger text-[8px]" x={-5} y={-5} />
               <Text
-                {x}
-                y={y - 6}
+                y="-6"
                 value={capital.description}
                 textAnchor="middle"
                 class="text-[8px] stroke-surface-100 [stroke-width:2px]"
               />
-            {/snippet}
-          </GeoPoint>
-        {/each}
-      </Canvas>
-    </Chart>
-  </div>
-</Preview>
-
-<h2>Icons</h2>
-
-<Preview data={data.us.capitals}>
-  <div class="h-[600px]">
-    <Chart
-      geo={{
-        projection: geoAlbersUsa,
-        fitGeojson: states,
-      }}
-    >
-      {#snippet children({ context })}
-        <Svg>
-          <g class="states">
-            {#each states.features as feature}
-              <GeoPath
-                geojson={feature}
-                class="fill-surface-content/10 stroke-surface-100 hover:fill-surface-content/20"
+              <Circle
+                r={10}
+                class="fill-transparent"
+                onpointerenter={(e) => context.tooltip.show(e, capital)}
+                onpointermove={(e) => context.tooltip.show(e, capital)}
+                onpointerleave={(e) => context.tooltip.hide(e)}
               />
-            {/each}
-          </g>
-          <g class="points">
-            {#each data.us.capitals as capital}
-              <GeoPoint lat={capital.latitude} long={capital.longitude}>
-                <LucideStar class="text-danger text-[8px]" x={-5} y={-5} />
-                <Text
-                  y="-6"
-                  value={capital.description}
-                  textAnchor="middle"
-                  class="text-[8px] stroke-surface-100 [stroke-width:2px]"
-                />
-                <Circle
-                  r={10}
-                  class="fill-transparent"
-                  onpointerenter={(e) => context.tooltip.show(e, capital)}
-                  onpointermove={(e) => context.tooltip.show(e, capital)}
-                  onpointerleave={(e) => context.tooltip.hide(e)}
-                />
-              </GeoPoint>
-            {/each}
-          </g>
-        </Svg>
+            </GeoPoint>
+          {/each}
+        </Layer>
 
         <Tooltip.Root {context}>
           {#snippet children({ data })}
diff --git a/packages/layerchart/src/routes/docs/examples/GeoPoint/+page.ts b/packages/layerchart/src/routes/docs/examples/GeoPoint/+page.ts
index 5033caedf..ebe7b3db1 100644
--- a/packages/layerchart/src/routes/docs/examples/GeoPoint/+page.ts
+++ b/packages/layerchart/src/routes/docs/examples/GeoPoint/+page.ts
@@ -37,6 +37,7 @@ export async function load({ fetch }) {
     },
     meta: {
       pageSource,
+      supportedContexts: ['svg', 'canvas'],
     },
   };
 }
diff --git a/packages/layerchart/src/routes/docs/examples/GeoProjection/+page.svelte b/packages/layerchart/src/routes/docs/examples/GeoProjection/+page.svelte
index 8902d98c2..6f135ded4 100644
--- a/packages/layerchart/src/routes/docs/examples/GeoProjection/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/GeoProjection/+page.svelte
@@ -10,10 +10,11 @@
   } from 'd3-geo';
   import { feature } from 'topojson-client';
 
-  import { Canvas, Chart, GeoPath, Graticule, Svg, Tooltip } from 'layerchart';
+  import { Chart, GeoPath, Graticule, Layer, Tooltip } from 'layerchart';
   import { Field, RangeField, SelectField, Switch } from 'svelte-ux';
 
   import Preview from '$lib/docs/Preview.svelte';
+  import { shared } from '../../shared.svelte.js';
 
   let { data } = $props();
 
@@ -70,8 +71,6 @@
 
 <h1>Examples</h1>
 
-<h2>SVG</h2>
-
 <Preview data={geojson}>
   <div class="h-[600px] overflow-hidden">
     <Chart
@@ -85,7 +84,7 @@
       padding={{ left: 100, right: 100 }}
     >
       {#snippet children({ context })}
-        <Svg>
+        <Layer type={shared.renderContext}>
           <GeoPath geojson={{ type: 'Sphere' }} class="stroke-surface-content fill-blue-400/50" />
           <Graticule class="stroke-surface-content/20 pointer-events-none" />
           {#each features as feature}
@@ -95,7 +94,7 @@
               class="stroke-surface-content/50 fill-white hover:fill-gray-300"
             />
           {/each}
-        </Svg>
+        </Layer>
 
         <Tooltip.Root>
           {context.tooltip.data?.properties.name}
@@ -104,29 +103,3 @@
     </Chart>
   </div>
 </Preview>
-
-<h2>Canvas</h2>
-
-<Preview data={geojson}>
-  <div class="h-[600px]">
-    <Chart
-      geo={{
-        projection: config.projection,
-        fitGeojson: geojson,
-        rotate: config.rotate,
-        scale: config.scale,
-        // applyTransform: ['rotate'],
-      }}
-    >
-      <Canvas>
-        <GeoPath geojson={{ type: 'Sphere' }} class="stroke-surface-content fill-blue-400/50" />
-      </Canvas>
-      <Canvas>
-        <Graticule class="stroke-surface-content/20" />
-      </Canvas>
-      <Canvas>
-        <GeoPath {geojson} class="stroke-surface-content/50 fill-white" />
-      </Canvas>
-    </Chart>
-  </div>
-</Preview>
diff --git a/packages/layerchart/src/routes/docs/examples/GeoProjection/+page.ts b/packages/layerchart/src/routes/docs/examples/GeoProjection/+page.ts
index 6126ea720..6ae8e1b4f 100644
--- a/packages/layerchart/src/routes/docs/examples/GeoProjection/+page.ts
+++ b/packages/layerchart/src/routes/docs/examples/GeoProjection/+page.ts
@@ -20,6 +20,7 @@ export async function load({ fetch }) {
 
     meta: {
       pageSource,
+      supportedContexts: ['svg', 'canvas'],
     },
   };
 }
diff --git a/packages/layerchart/src/routes/docs/examples/GeoTile/+page.svelte b/packages/layerchart/src/routes/docs/examples/GeoTile/+page.svelte
index 77d6fb4a0..f1816665d 100644
--- a/packages/layerchart/src/routes/docs/examples/GeoTile/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/GeoTile/+page.svelte
@@ -3,11 +3,12 @@
   import { geoMercator } from 'd3-geo';
   import { feature } from 'topojson-client';
 
-  import { Canvas, ClipPath, Chart, GeoPath, GeoTile, Svg, Tooltip } from 'layerchart';
+  import { ClipPath, Chart, GeoPath, GeoTile, Layer, Tooltip } from 'layerchart';
   import { Field, RangeField, Switch } from 'svelte-ux';
 
   import Preview from '$lib/docs/Preview.svelte';
   import TilesetField from '$lib/docs/TilesetField.svelte';
+  import { shared } from '../../shared.svelte.js';
 
   let { data } = $props();
 
@@ -38,7 +39,7 @@
 
 <h1>Examples</h1>
 
-<h2>SVG</h2>
+<h2>Basic</h2>
 
 <Preview data={filteredStates}>
   <div class="h-[600px] overflow-hidden">
@@ -49,9 +50,10 @@
       }}
     >
       {#snippet children({ context })}
-        <Svg>
+        <Layer type={shared.renderContext}>
           <GeoTile url={serviceUrl} {zoomDelta} {debug} />
           {#each filteredStates.features as feature}
+            <!-- TODO: Renders on canvas if put on separate Layer  -->
             <GeoPath
               geojson={feature}
               tooltipContext={context.tooltip}
@@ -60,7 +62,7 @@
                 (selectedFeature = selectedFeature === feature ? filteredStates : feature)}
             />
           {/each}
-        </Svg>
+        </Layer>
 
         <Tooltip.Root>
           {#snippet children({ data })}
@@ -78,7 +80,7 @@
   </div>
 </Preview>
 
-<h2>SVG (clipped)</h2>
+<h2>Clippped (currently svg-only)</h2>
 
 <Preview data={filteredStates}>
   <div class="h-[600px] overflow-hidden">
@@ -89,7 +91,7 @@
       }}
     >
       {#snippet children({ context })}
-        <Svg>
+        <Layer type={shared.renderContext}>
           <ClipPath useId="clip">
             <GeoTile url={serviceUrl} {zoomDelta} />
           </ClipPath>
@@ -103,7 +105,7 @@
                 (selectedFeature = selectedFeature === feature ? filteredStates : feature)}
             />
           {/each}
-        </Svg>
+        </Layer>
 
         <Tooltip.Root>
           {#snippet children({ data })}
@@ -120,23 +122,3 @@
     </Chart>
   </div>
 </Preview>
-
-<h2>Canvas</h2>
-
-<Preview data={filteredStates}>
-  <div class="h-[600px]">
-    <Chart
-      geo={{
-        projection: geoMercator,
-        fitGeojson: selectedFeature,
-      }}
-    >
-      <Canvas>
-        <GeoTile url={serviceUrl} {zoomDelta} />
-      </Canvas>
-      <Canvas>
-        <GeoPath geojson={filteredStates} class="stroke-black/20" />
-      </Canvas>
-    </Chart>
-  </div>
-</Preview>
diff --git a/packages/layerchart/src/routes/docs/examples/GeoTile/+page.ts b/packages/layerchart/src/routes/docs/examples/GeoTile/+page.ts
index 3df834077..fc885698a 100644
--- a/packages/layerchart/src/routes/docs/examples/GeoTile/+page.ts
+++ b/packages/layerchart/src/routes/docs/examples/GeoTile/+page.ts
@@ -10,6 +10,7 @@ export async function load({ fetch }) {
     }>,
     meta: {
       pageSource,
+      supportedContexts: ['svg', 'canvas'],
       related: ['examples/ZoomableTileMap'],
     },
   };
diff --git a/packages/layerchart/src/routes/docs/examples/Histogram/+page.svelte b/packages/layerchart/src/routes/docs/examples/Histogram/+page.svelte
index 156ea9a66..1d2794cfe 100644
--- a/packages/layerchart/src/routes/docs/examples/Histogram/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/Histogram/+page.svelte
@@ -17,6 +17,7 @@
   import { format } from '@layerstack/utils';
 
   import Preview from '$lib/docs/Preview.svelte';
+  import { shared } from '../../shared.svelte.js';
 
   let { data } = $props();
 
@@ -47,6 +48,8 @@
   const randomDateData = $derived(
     Array.from({ length: randomCount }, () => getRandomDate(subDays(now, dateRange), now)) as any[]
   ); // TODO: Make typescript happy
+
+  let renderContext = $derived(shared.renderContext as 'svg' | 'canvas');
 </script>
 
 <h1>Examples</h1>
@@ -67,6 +70,7 @@
         yAxis: { format: 'metric', motion: 'tween' },
         bars: { motion: 'tween' },
       }}
+      {renderContext}
     >
       {#snippet tooltip()}
         <Tooltip.Root>
@@ -89,6 +93,7 @@
     </BarChart>
   </div>
 </Preview>
+
 <h2>Horizontal</h2>
 
 <Preview data={olympiansBins}>
@@ -104,6 +109,7 @@
         bars: { motion: 'tween' },
       }}
       orientation="horizontal"
+      {renderContext}
     >
       {#snippet tooltip()}
         <Tooltip.Root>
@@ -198,6 +204,7 @@
         yAxis: { format: 'metric', motion: 'tween' },
         bars: { motion: 'tween' },
       }}
+      {renderContext}
     >
       {#snippet tooltip()}
         <Tooltip.Root>
@@ -250,6 +257,7 @@
           yAxis: { format: 'metric', motion: 'tween' },
           bars: { motion: 'tween' },
         }}
+        {renderContext}
       >
         {#snippet tooltip()}
           <Tooltip.Root>
@@ -320,6 +328,7 @@
           yAxis: { format: 'metric', motion: 'tween' },
           bars: { motion: 'tween' },
         }}
+        {renderContext}
       >
         {#snippet tooltip()}
           <Tooltip.Root>
diff --git a/packages/layerchart/src/routes/docs/examples/Histogram/+page.ts b/packages/layerchart/src/routes/docs/examples/Histogram/+page.ts
index e16093fac..a2a8acbee 100644
--- a/packages/layerchart/src/routes/docs/examples/Histogram/+page.ts
+++ b/packages/layerchart/src/routes/docs/examples/Histogram/+page.ts
@@ -8,6 +8,7 @@ export async function load({ fetch }) {
     )) as OlympiansData,
     meta: {
       pageSource,
+      supportedContexts: ['svg', 'canvas'],
       related: ['components/Bars', 'examples/Bars', 'examples/Columns'],
     },
   };
diff --git a/packages/layerchart/src/routes/docs/examples/Line/+page.svelte b/packages/layerchart/src/routes/docs/examples/Line/+page.svelte
index e4b5740ab..b5656b25b 100644
--- a/packages/layerchart/src/routes/docs/examples/Line/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/Line/+page.svelte
@@ -6,15 +6,14 @@
 
   import {
     Axis,
-    Canvas,
     Chart,
     Circle,
     Highlight,
     Labels,
+    Layer,
     Legend,
     LinearGradient,
     Spline,
-    Svg,
     Text,
     Tooltip,
     pivotLonger,
@@ -23,6 +22,7 @@
   import Preview from '$lib/docs/Preview.svelte';
   import Blockquote from '$lib/docs/Blockquote.svelte';
   import { createDateSeries } from '$lib/utils/genData.js';
+  import { shared } from '../../shared.svelte.js';
 
   let { data } = $props();
 
@@ -71,35 +71,11 @@
       yNice
       padding={{ left: 16, bottom: 24 }}
     >
-      <Svg>
+      <Layer type={shared.renderContext}>
         <Axis placement="left" grid rule />
         <Axis placement="bottom" rule />
         <Spline class="stroke-2 stroke-primary" />
-      </Svg>
-    </Chart>
-  </div>
-</Preview>
-
-<h2>Canvas</h2>
-
-<Preview data={dateSeriesData}>
-  <div class="h-[300px] p-4 border rounded-sm">
-    <Chart
-      data={dateSeriesData}
-      x="date"
-      xScale={scaleTime()}
-      y="value"
-      yDomain={[0, null]}
-      yNice
-      padding={{ left: 16, bottom: 24 }}
-    >
-      <Svg>
-        <Axis placement="left" grid rule />
-        <Axis placement="bottom" rule />
-      </Svg>
-      <Canvas>
-        <Spline class="stroke-2 stroke-primary" />
-      </Canvas>
+      </Layer>
     </Chart>
   </div>
 </Preview>
@@ -118,12 +94,12 @@
       padding={{ left: 16, bottom: 24 }}
       tooltip={{ mode: 'bisect-x' }}
     >
-      <Svg>
+      <Layer type={shared.renderContext}>
         <Axis placement="left" grid rule />
         <Axis placement="bottom" rule />
         <Spline class="stroke-2 stroke-primary" />
         <Highlight points lines />
-      </Svg>
+      </Layer>
 
       <Tooltip.Root>
         {#snippet children({ data })}
@@ -150,12 +126,12 @@
       yNice
       padding={{ left: 16, bottom: 24 }}
     >
-      <Svg>
+      <Layer type={shared.renderContext}>
         <Axis placement="left" grid rule />
         <Axis placement="bottom" rule />
         <Spline class="stroke-2 stroke-primary" />
         <Labels format="integer" />
-      </Svg>
+      </Layer>
     </Chart>
   </div>
 </Preview>
@@ -172,7 +148,7 @@
       yNice
       padding={{ left: 16, bottom: 24 }}
     >
-      <Svg>
+      <Layer type={shared.renderContext}>
         <Axis placement="left" grid rule />
         <Axis placement="bottom" rule />
         <LinearGradient stops={ticks(1, 0, 10).map(temperatureColor.interpolator())} vertical>
@@ -180,7 +156,7 @@
             <Spline class="stroke-2" stroke={gradient} />
           {/snippet}
         </LinearGradient>
-      </Svg>
+      </Layer>
       <Legend
         scale={temperatureColor}
         title="Temperature (°F)"
@@ -207,7 +183,7 @@
       {#snippet children({ context })}
         {@const thresholdOffset =
           (context.yScale(50) / (context.height + context.padding.bottom)) * 100 + '%'}
-        <Svg>
+        <Layer type={shared.renderContext}>
           <Axis placement="left" grid rule />
           <Axis placement="bottom" rule />
           <LinearGradient
@@ -222,7 +198,7 @@
               <Spline class="stroke-2" stroke={gradient} />
             {/snippet}
           </LinearGradient>
-        </Svg>
+        </Layer>
       {/snippet}
     </Chart>
   </div>
@@ -247,7 +223,7 @@
       tooltip={{ mode: 'voronoi' }}
     >
       {#snippet children({ context })}
-        <Svg>
+        <Layer type={shared.renderContext}>
           <Axis placement="left" grid rule />
           <Axis placement="bottom" rule />
           {#each dataByFruit as [fruit, data]}
@@ -267,7 +243,7 @@
             </Spline>
           {/each}
           <Highlight points lines />
-        </Svg>
+        </Layer>
 
         <Tooltip.Root>
           {#snippet children({ data })}
@@ -299,7 +275,7 @@
       padding={{ left: 16, bottom: 24 }}
       tooltip={{ mode: 'bisect-x' }}
     >
-      <Svg>
+      <Layer type={shared.renderContext}>
         <Axis placement="left" grid rule />
         <Axis placement="bottom" rule />
         <Spline y={(d) => d.y} class="stroke-2" stroke={fruitColors.bananas} />
@@ -307,7 +283,7 @@
         <Highlight y={(d) => d.y} points={{ fill: fruitColors.bananas }} />
         <Highlight y={(d) => d.y1} points={{ fill: fruitColors.oranges }} />
         <Highlight lines />
-      </Svg>
+      </Layer>
 
       <Tooltip.Root>
         {#snippet children({ data })}
@@ -340,7 +316,7 @@
       tooltip={{ mode: 'voronoi' }}
     >
       {#snippet children({ context })}
-        <Svg>
+        <Layer type={shared.renderContext}>
           <Axis placement="left" grid rule />
           <Axis placement="bottom" rule />
           {#each dataByFruit as [fruit, data]}
@@ -363,7 +339,7 @@
             </g>
           {/each}
           <Highlight points lines />
-        </Svg>
+        </Layer>
         <Tooltip.Root>
           <Tooltip.Header value={context.tooltip.data.date} format="day" />
           <Tooltip.List>
@@ -394,7 +370,7 @@
       tooltip={{ mode: 'voronoi' }}
     >
       {#snippet children({ context })}
-        <Svg>
+        <Layer type={shared.renderContext}>
           <Axis placement="left" grid rule />
           <Axis placement="bottom" rule />
           {#each dataByFruit as [fruit, data]}
@@ -403,7 +379,7 @@
           {/each}
           <Labels format="integer" />
           <Highlight points lines />
-        </Svg>
+        </Layer>
         <Tooltip.Root>
           {#snippet children({ data })}
             <Tooltip.Header value={data.date} format="day" />
diff --git a/packages/layerchart/src/routes/docs/examples/Line/+page.ts b/packages/layerchart/src/routes/docs/examples/Line/+page.ts
index 5b951ec84..4f08aa0c7 100644
--- a/packages/layerchart/src/routes/docs/examples/Line/+page.ts
+++ b/packages/layerchart/src/routes/docs/examples/Line/+page.ts
@@ -9,6 +9,7 @@ export async function load({ fetch }) {
     ),
     meta: {
       pageSource,
+      supportedContexts: ['svg', 'canvas'],
     },
   };
 }
diff --git a/packages/layerchart/src/routes/docs/examples/LoftedArcs/+page.svelte b/packages/layerchart/src/routes/docs/examples/LoftedArcs/+page.svelte
index 3aecdcb04..3dcf5ff56 100644
--- a/packages/layerchart/src/routes/docs/examples/LoftedArcs/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/LoftedArcs/+page.svelte
@@ -3,11 +3,12 @@
   import { flatRollup } from 'd3-array';
   import { feature } from 'topojson-client';
 
-  import { Chart, GeoEdgeFade, GeoPath, GeoPoint, GeoSpline, Graticule, Svg } from 'layerchart';
+  import { Chart, GeoEdgeFade, GeoPath, GeoPoint, GeoSpline, Graticule, Layer } from 'layerchart';
   import { Field, Switch } from 'svelte-ux';
 
   import GeoDebug from '$lib/docs/GeoDebug.svelte';
   import Preview from '$lib/docs/Preview.svelte';
+  import { shared } from '../../shared.svelte.js';
 
   let { data } = $props();
 
@@ -40,7 +41,7 @@
       }}
       padding={{ top: 16, bottom: 16, left: 16, right: 16 }}
     >
-      <Svg>
+      <Layer type={shared.renderContext}>
         <GeoPath geojson={{ type: 'Sphere' }} class="fill-blue-400/50" />
         <Graticule class="stroke-surface-content/20" />
         {#each countries.features as country}
@@ -52,7 +53,7 @@
           <GeoPoint lat={link.source[1]} long={link.source[0]} r={2} class="fill-black" />
           <GeoPoint lat={link.target[1]} long={link.target[0]} r={2} class="fill-black" />
         {/each}
-      </Svg>
+      </Layer>
     </Chart>
   </div>
 </Preview>
@@ -83,7 +84,7 @@
       {#if debug}
         <GeoDebug class="absolute top-0 right-0 z-10" />
       {/if}
-      <Svg>
+      <Layer type={shared.renderContext}>
         <GeoPath geojson={{ type: 'Sphere' }} class="fill-blue-400/50" />
         <Graticule class="stroke-surface-content/20 pointer-events-none" />
         {#each countries.features as country}
@@ -100,7 +101,7 @@
             <GeoSpline {link} class="stroke-danger stroke-2" loft={1.3} />
           </GeoEdgeFade>
         {/each}
-      </Svg>
+      </Layer>
     </Chart>
   </div>
 </Preview>
diff --git a/packages/layerchart/src/routes/docs/examples/LoftedArcs/+page.ts b/packages/layerchart/src/routes/docs/examples/LoftedArcs/+page.ts
index 1be6a8043..9b47b9e8a 100644
--- a/packages/layerchart/src/routes/docs/examples/LoftedArcs/+page.ts
+++ b/packages/layerchart/src/routes/docs/examples/LoftedArcs/+page.ts
@@ -17,6 +17,7 @@ export async function load({ fetch }) {
     )) as WorldLinksData,
     meta: {
       pageSource,
+      supportedContexts: ['svg', 'canvas'],
       reference: 'https://observablehq.com/@armollica/globe-with-lofted-arcs',
     },
   };
diff --git a/packages/layerchart/src/routes/docs/examples/Oscilloscope/+page.svelte b/packages/layerchart/src/routes/docs/examples/Oscilloscope/+page.svelte
index c0a0481a7..cd9bd50ac 100644
--- a/packages/layerchart/src/routes/docs/examples/Oscilloscope/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/Oscilloscope/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { onDestroy, onMount } from 'svelte';
+  import { onMount } from 'svelte';
   import { range, ticks } from 'd3-array';
   import { scaleLinear, scaleSequential } from 'd3-scale';
   import { interpolateTurbo } from 'd3-scale-chromatic';
@@ -7,6 +7,7 @@
   import { BarChart, Bars, LinearGradient, LineChart } from 'layerchart';
 
   import Preview from '$lib/docs/Preview.svelte';
+  import { shared } from '../../shared.svelte.js';
 
   // Inspired by: https://observablehq.com/@visnup/microphone-oscilloscope and https://codepen.io/agalliat/pen/PoZLBxP
 
@@ -66,6 +67,8 @@
     };
   });
   const colorScale = scaleSequential([0, 256], interpolateTurbo);
+
+  let renderContext = $derived(shared.renderContext as 'svg' | 'canvas');
 </script>
 
 <h1>Examples</h1>
@@ -83,6 +86,7 @@
       grid={false}
       props={{ spline: { class: 'stroke-surface-content' } }}
       tooltip={{ mode: 'manual' }}
+      {renderContext}
     />
   </div>
 </Preview>
@@ -104,6 +108,7 @@
       props={{
         yAxis: { format: (d) => decibels(d)?.toFixed(1) },
       }}
+      {renderContext}
     >
       {#snippet marks()}
         <LinearGradient
diff --git a/packages/layerchart/src/routes/docs/examples/Oscilloscope/+page.ts b/packages/layerchart/src/routes/docs/examples/Oscilloscope/+page.ts
index a20d59c43..70f8e4352 100644
--- a/packages/layerchart/src/routes/docs/examples/Oscilloscope/+page.ts
+++ b/packages/layerchart/src/routes/docs/examples/Oscilloscope/+page.ts
@@ -4,6 +4,7 @@ export async function load() {
   return {
     meta: {
       pageSource,
+      supportedContexts: ['svg', 'canvas'],
       related: [
         'components/Bars',
         'components/Spline',
diff --git a/packages/layerchart/src/routes/docs/examples/Pack/+page.svelte b/packages/layerchart/src/routes/docs/examples/Pack/+page.svelte
index 2b93e3166..8a1384c60 100644
--- a/packages/layerchart/src/routes/docs/examples/Pack/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/Pack/+page.svelte
@@ -11,7 +11,8 @@
     Circle,
     Group,
     Pack,
-    Svg,
+    Layer,
+    Text,
     findAncestor,
     type ChartContextValue,
   } from 'layerchart';
@@ -19,8 +20,10 @@
   import { format, sortFunc } from '@layerstack/utils';
 
   import Preview from '$lib/docs/Preview.svelte';
+  import { shared } from '../../shared.svelte.js';
 
   let { data } = $props();
+  let renderContext = $derived(shared.renderContext as 'svg' | 'canvas');
 
   const complexHierarchy = hierarchy(data.flare)
     .sum((d) => d.value)
@@ -120,7 +123,7 @@
       }}
       bind:context
     >
-      <Svg onclick={() => (selected = complexHierarchy)}>
+      <Layer type={renderContext} onclick={() => (selected = complexHierarchy)}>
         <Pack {padding} hierarchy={complexHierarchy} bind:nodes>
           {#each nodes as node ([node.data.name, node.parent?.data.name].join('-'))}
             <Group
@@ -143,6 +146,7 @@
               />
             </Group>
           {/each}
+
           {@const selectedNodes = selected
             ? (selected.children ?? [selected])
             : nodes[0]
@@ -153,20 +157,18 @@
             {@const trueNode = findSelectedNodeInHierarchy(node, nodes)}
             {@const fontSize = 1 / context.transform.scale}
             <g in:fade|local>
-              <text
+              <Text
+                value={trueNode.data.name}
                 x={trueNode.x}
                 y={trueNode.y}
                 dy={fontSize * 8}
-                class="stroke-white/70 pointer-events-none [text-anchor:middle] [paint-order:stroke]"
-                style:font-size="{fontSize}rem"
-                style:stroke-width="{fontSize * 2}px"
-              >
-                {trueNode.data.name}
-              </text>
+                style="font-size: {fontSize}rem; stroke-width: {fontSize * 2}px"
+                class="fill-black stroke-white/70 pointer-events-none [text-anchor:middle] [paint-order:stroke]"
+              />
             </g>
           {/each}
         </Pack>
-      </Svg>
+      </Layer>
     </Chart>
   </div>
 </Preview>
diff --git a/packages/layerchart/src/routes/docs/examples/Pack/+page.ts b/packages/layerchart/src/routes/docs/examples/Pack/+page.ts
index 3892fc5d9..2f2bf42d5 100644
--- a/packages/layerchart/src/routes/docs/examples/Pack/+page.ts
+++ b/packages/layerchart/src/routes/docs/examples/Pack/+page.ts
@@ -5,6 +5,7 @@ export async function load({ fetch }) {
     flare: await fetch('/data/examples/hierarchy/flare.json').then((r) => r.json()),
     meta: {
       pageSource,
+      supportedContexts: ['svg'], // TODO: `canvas` coming soon
     },
   };
 }
diff --git a/packages/layerchart/src/routes/docs/examples/Partition/+page.svelte b/packages/layerchart/src/routes/docs/examples/Partition/+page.svelte
index 7530ab1da..c73136020 100644
--- a/packages/layerchart/src/routes/docs/examples/Partition/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/Partition/+page.svelte
@@ -15,7 +15,7 @@
     Partition,
     Rect,
     RectClipPath,
-    Svg,
+    Layer,
     Text,
     findAncestor,
   } from 'layerchart';
@@ -33,6 +33,7 @@
   import { cls } from '@layerstack/tailwind';
 
   import Preview from '$lib/docs/Preview.svelte';
+  import { shared } from '../../shared.svelte.js';
 
   let { data } = $props();
 
@@ -172,7 +173,7 @@
   <div class="h-[600px] p-4 border rounded-sm">
     <Chart>
       {#snippet children({ context })}
-        <Svg>
+        <Layer type={shared.renderContext}>
           <Bounds
             domain={{
               x0: selectedHorizontal?.y0,
@@ -241,7 +242,7 @@
               </ChartClipPath>
             {/snippet}
           </Bounds>
-        </Svg>
+        </Layer>
       {/snippet}
     </Chart>
   </div>
@@ -267,7 +268,7 @@
   <div class="h-[600px] p-4 border rounded-sm">
     <Chart>
       {#snippet children({ context })}
-        <Svg>
+        <Layer type={shared.renderContext}>
           <Bounds
             domain={{
               x0: selectedVertical?.x0,
@@ -339,7 +340,7 @@
               </ChartClipPath>
             {/snippet}
           </Bounds>
-        </Svg>
+        </Layer>
       {/snippet}
     </Chart>
   </div>
@@ -372,7 +373,7 @@
   </Breadcrumb>
   <div class="h-[600px] p-4 border rounded-sm">
     <Chart>
-      <Svg>
+      <Layer type={shared.renderContext}>
         <Bounds
           domain={{ x0: selectedCarNode?.y0, y0: selectedCarNode?.x0, y1: selectedCarNode?.x1 }}
         >
@@ -439,7 +440,7 @@
             </ChartClipPath>
           {/snippet}
         </Bounds>
-      </Svg>
+      </Layer>
     </Chart>
   </div>
 </Preview>
diff --git a/packages/layerchart/src/routes/docs/examples/Partition/+page.ts b/packages/layerchart/src/routes/docs/examples/Partition/+page.ts
index 799611f5b..82edd0c32 100644
--- a/packages/layerchart/src/routes/docs/examples/Partition/+page.ts
+++ b/packages/layerchart/src/routes/docs/examples/Partition/+page.ts
@@ -11,6 +11,7 @@ export async function load({ fetch }) {
     ),
     meta: {
       pageSource,
+      supportedContexts: ['svg'], // TODO: `canvas` coming soon
     },
   };
 }
diff --git a/packages/layerchart/src/routes/docs/examples/PunchCard/+page.svelte b/packages/layerchart/src/routes/docs/examples/PunchCard/+page.svelte
index 431261df1..e33b25869 100644
--- a/packages/layerchart/src/routes/docs/examples/PunchCard/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/PunchCard/+page.svelte
@@ -7,10 +7,13 @@
 
   import Preview from '$lib/docs/Preview.svelte';
   import { createDateSeries } from '$lib/utils/genData.js';
+  import { shared } from '../../shared.svelte.js';
 
   const data = createDateSeries({ count: 60, min: 10, max: 100, value: 'integer' });
 
-  const daysOfWeek = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
+  const daysOfWeek = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+
+  let renderContext = $derived(shared.renderContext as 'svg' | 'canvas');
 </script>
 
 <h1>Examples</h1>
@@ -28,7 +31,7 @@
       yDomain={range(7)}
       r="value"
       rRange={[0, 16]}
-      padding={{ left: 48, bottom: 16 }}
+      padding={{ left: 32, bottom: 16 }}
       props={{
         xAxis: { format: (d) => 'Week ' + d },
         yAxis: { format: (d) => daysOfWeek[d] },
@@ -36,6 +39,7 @@
         grid: { x: false, y: true, bandAlign: 'between' },
         tooltip: { context: { mode: 'band' } },
       }}
+      {renderContext}
     >
       {#snippet highlight()}
         <Highlight area axis="x" />
diff --git a/packages/layerchart/src/routes/docs/examples/PunchCard/+page.ts b/packages/layerchart/src/routes/docs/examples/PunchCard/+page.ts
index 48dcda64e..2f92cb817 100644
--- a/packages/layerchart/src/routes/docs/examples/PunchCard/+page.ts
+++ b/packages/layerchart/src/routes/docs/examples/PunchCard/+page.ts
@@ -4,6 +4,7 @@ export async function load() {
   return {
     meta: {
       pageSource,
+      supportedContexts: ['svg', 'canvas'],
     },
   };
 }
diff --git a/packages/layerchart/src/routes/docs/examples/RadialLine/+page.svelte b/packages/layerchart/src/routes/docs/examples/RadialLine/+page.svelte
index 18a7e7891..99a20cb39 100644
--- a/packages/layerchart/src/routes/docs/examples/RadialLine/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/RadialLine/+page.svelte
@@ -5,10 +5,11 @@
   import { Field, ToggleGroup, ToggleOption } from 'svelte-ux';
   import { cls } from '@layerstack/tailwind';
 
-  import { Area, Axis, Chart, Points, Spline, Svg } from 'layerchart';
+  import { Area, Axis, Chart, Layer, Points, Spline } from 'layerchart';
 
   import Preview from '$lib/docs/Preview.svelte';
   import Blockquote from '$lib/docs/Blockquote.svelte';
+  import { shared } from '../../shared.svelte.js';
 
   let { data } = $props();
 
@@ -49,7 +50,7 @@
       padding={{ top: 32, bottom: 8 }}
       radial
     >
-      <Svg center>
+      <Layer type={shared.renderContext} center>
         <Axis
           placement="radius"
           grid={{ class: 'stroke-surface-content/20 fill-surface-200/50' }}
@@ -59,7 +60,7 @@
         <Axis placement="angle" grid={{ class: 'stroke-surface-content/20' }} />
         <Spline {curve} class="stroke-primary fill-primary/20" />
         <Points class="fill-primary stroke-surface-200" />
-      </Svg>
+      </Layer>
     </Chart>
   </div>
 </Preview>
@@ -75,8 +76,9 @@
       y={['minmin', 'maxmax']}
       yRange={({ height }) => [height / 5, height / 2]}
       radial
+      padding={{ top: 12, bottom: 12 }}
     >
-      <Svg center>
+      <Layer type={shared.renderContext} center>
         <Spline y={(d) => d.avg} curve={curveCatmullRom} class="stroke-primary" />
         <Area
           y0={(d) => d.min}
@@ -97,7 +99,7 @@
           grid
           format={(v) => v + '° F'}
         />
-      </Svg>
+      </Layer>
     </Chart>
   </div>
 </Preview>
@@ -116,9 +118,10 @@
       zDomain={[1940, 2024]}
       zRange={[0.1, 0.2]}
       radial
+      padding={{ top: 12, bottom: 12 }}
     >
       {#snippet children({ context })}
-        <Svg center>
+        <Layer type={shared.renderContext} center>
           {#each flatGroup(data.dailyTemperatures, (d) => d.year) as [year, yearData]}
             <Spline
               data={yearData}
@@ -141,7 +144,7 @@
             ticks={4}
             format={(v) => v + '° F'}
           />
-        </Svg>
+        </Layer>
       {/snippet}
     </Chart>
   </div>
diff --git a/packages/layerchart/src/routes/docs/examples/RadialLine/+page.ts b/packages/layerchart/src/routes/docs/examples/RadialLine/+page.ts
index 507f0a5dd..3d86e1786 100644
--- a/packages/layerchart/src/routes/docs/examples/RadialLine/+page.ts
+++ b/packages/layerchart/src/routes/docs/examples/RadialLine/+page.ts
@@ -43,6 +43,7 @@ export async function load({ fetch }) {
     }),
     meta: {
       pageSource,
+      supportedContexts: ['svg', 'canvas'],
     },
   };
 }
diff --git a/packages/layerchart/src/routes/docs/examples/Sankey/+page.svelte b/packages/layerchart/src/routes/docs/examples/Sankey/+page.svelte
index aa507147b..0a9713454 100644
--- a/packages/layerchart/src/routes/docs/examples/Sankey/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/Sankey/+page.svelte
@@ -16,7 +16,7 @@
     Link,
     Rect,
     Sankey,
-    Svg,
+    Layer,
     Text,
     Tooltip,
     sankeyGraphFromHierarchy,
@@ -25,6 +25,7 @@
 
   import Preview from '$lib/docs/Preview.svelte';
   import SankeyControls from './SankeyControls.svelte';
+  import { shared } from '../../shared.svelte.js';
 
   let { data } = $props();
 
@@ -76,7 +77,7 @@
 <Preview data={data.simple}>
   <div class="h-[400px] p-4 border rounded-sm">
     <Chart data={data.simple} flatData={[]}>
-      <Svg>
+      <Layer type={shared.renderContext}>
         <Sankey nodeId={(d) => d.id}>
           {#snippet children({ links, nodes })}
             {#each links as link ([link.value, link.source.id, link.target.id].join('-'))}
@@ -98,7 +99,7 @@
             {/each}
           {/snippet}
         </Sankey>
-      </Svg>
+      </Layer>
     </Chart>
   </div>
 </Preview>
@@ -109,7 +110,7 @@
   <div class="h-[800px] p-4 border rounded-sm">
     <Chart data={data.greenhouse} flatData={[]}>
       {#snippet children({ context })}
-        <Svg>
+        <Layer type={shared.renderContext}>
           <Sankey nodeId={(d) => d.name} nodeWidth={8}>
             {#snippet children({ links, nodes })}
               {#each links as link ([link.value, link.source.name, link.target.name].join('-'))}
@@ -146,7 +147,7 @@
               {/each}
             {/snippet}
           </Sankey>
-        </Svg>
+        </Layer>
 
         <Tooltip.Root>
           {#snippet children({ data })}
@@ -195,7 +196,7 @@
 <Preview data={selectedNode ? sankeyGraphFromNode(selectedNode) : data.greenhouse}>
   <div class="h-[600px] p-4 border rounded-sm">
     <Chart data={selectedNode ? sankeyGraphFromNode(selectedNode) : data.greenhouse} flatData={[]}>
-      <Svg>
+      <Layer type={shared.renderContext}>
         <Sankey nodeId={(d) => d.name} nodeWidth={8}>
           {#snippet children({ links, nodes })}
             {#each links as link ([link.value, link.source.name, link.target.name].join('-'))}
@@ -245,7 +246,7 @@
             {/each}
           {/snippet}
         </Sankey>
-      </Svg>
+      </Layer>
     </Chart>
   </div>
 </Preview>
@@ -258,7 +259,7 @@
   <div class="h-[800px] p-4 border rounded-sm">
     <Chart data={data.complex} padding={{ right: 164 }} flatData={[]}>
       {#snippet children({ context })}
-        <Svg>
+        <Layer type={shared.renderContext}>
           <Sankey
             {nodeAlign}
             {nodePadding}
@@ -333,7 +334,7 @@
               {/each}
             {/snippet}
           </Sankey>
-        </Svg>
+        </Layer>
 
         <Tooltip.Root>
           {#snippet children({ data })}
@@ -384,7 +385,7 @@
 <Preview data={hierarchyGraph}>
   <div class="h-[2000px] p-4 border rounded-sm">
     <Chart data={hierarchyGraph} padding={{ right: 100 }} flatData={[]}>
-      <Svg>
+      <Layer type={shared.renderContext}>
         <Sankey
           {nodeAlign}
           {nodePadding}
@@ -451,7 +452,7 @@
             {/each}
           {/snippet}
         </Sankey>
-      </Svg>
+      </Layer>
     </Chart>
   </div>
 </Preview>
diff --git a/packages/layerchart/src/routes/docs/examples/Sankey/+page.ts b/packages/layerchart/src/routes/docs/examples/Sankey/+page.ts
index ee92e2314..5578c6939 100644
--- a/packages/layerchart/src/routes/docs/examples/Sankey/+page.ts
+++ b/packages/layerchart/src/routes/docs/examples/Sankey/+page.ts
@@ -9,6 +9,7 @@ export async function load({ fetch }) {
 
     meta: {
       pageSource,
+      supportedContexts: ['svg'], // TODO: `canvas` coming soon
       related: ['components/Sankey', 'components/Link'],
     },
   };
diff --git a/packages/layerchart/src/routes/docs/examples/Scatter/+page.svelte b/packages/layerchart/src/routes/docs/examples/Scatter/+page.svelte
index 8eb0cdc5a..1de42103f 100644
--- a/packages/layerchart/src/routes/docs/examples/Scatter/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/Scatter/+page.svelte
@@ -2,13 +2,16 @@
   import { scaleTime, scaleThreshold } from 'd3-scale';
   import { format } from 'date-fns';
 
-  import { Axis, Chart, Highlight, Labels, Points, Svg, Tooltip } from 'layerchart';
+  import { Axis, Chart, Highlight, Labels, Layer, Points, Tooltip } from 'layerchart';
 
   import Preview from '$lib/docs/Preview.svelte';
   import Blockquote from '$lib/docs/Blockquote.svelte';
   import { createDateSeries } from '$lib/utils/genData.js';
+  import { shared } from '../../shared.svelte.js';
 
   const data = createDateSeries({ min: 10, max: 100, value: 'integer' });
+
+  let renderContext = $derived(shared.renderContext as 'svg' | 'canvas');
 </script>
 
 <h1>Examples</h1>
@@ -30,11 +33,11 @@
       yNice
       padding={{ left: 16, bottom: 24 }}
     >
-      <Svg>
+      <Layer type={shared.renderContext}>
         <Axis placement="left" grid rule />
         <Axis placement="bottom" rule />
         <Points class="fill-primary/10 stroke-primary" />
-      </Svg>
+      </Layer>
     </Chart>
   </div>
 </Preview>
@@ -53,12 +56,12 @@
       padding={{ left: 16, bottom: 24 }}
       tooltip={{ mode: 'bisect-x' }}
     >
-      <Svg>
+      <Layer type={shared.renderContext}>
         <Axis placement="left" grid rule />
         <Axis placement="bottom" rule />
         <Points class="fill-primary/10 stroke-primary" />
         <Highlight points lines />
-      </Svg>
+      </Layer>
 
       <Tooltip.Root>
         {#snippet children({ data })}
@@ -85,12 +88,12 @@
       yNice
       padding={{ left: 16, bottom: 24 }}
     >
-      <Svg>
+      <Layer type={shared.renderContext}>
         <Axis placement="left" grid rule />
         <Axis placement="bottom" rule />
         <Points class="fill-primary/10 stroke-primary" />
         <Labels format="integer" offset={10} />
-      </Svg>
+      </Layer>
     </Chart>
   </div>
 </Preview>
@@ -114,11 +117,11 @@
       cRange={['var(--color-danger)', 'var(--color-warning)', 'var(--color-success)']}
       padding={{ left: 16, bottom: 24 }}
     >
-      <Svg>
+      <Layer type={shared.renderContext}>
         <Axis placement="left" grid rule />
         <Axis placement="bottom" rule />
         <Points class="stroke-surface-content/50" />
-      </Svg>
+      </Layer>
     </Chart>
   </div>
 </Preview>
diff --git a/packages/layerchart/src/routes/docs/examples/Scatter/+page.ts b/packages/layerchart/src/routes/docs/examples/Scatter/+page.ts
index 48dcda64e..2f92cb817 100644
--- a/packages/layerchart/src/routes/docs/examples/Scatter/+page.ts
+++ b/packages/layerchart/src/routes/docs/examples/Scatter/+page.ts
@@ -4,6 +4,7 @@ export async function load() {
   return {
     meta: {
       pageSource,
+      supportedContexts: ['svg', 'canvas'],
     },
   };
 }
diff --git a/packages/layerchart/src/routes/docs/examples/SketchyGlobe/+page.svelte b/packages/layerchart/src/routes/docs/examples/SketchyGlobe/+page.svelte
index 4eca91de2..dca4aef52 100644
--- a/packages/layerchart/src/routes/docs/examples/SketchyGlobe/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/SketchyGlobe/+page.svelte
@@ -4,12 +4,13 @@
   import { feature } from 'topojson-client';
   import { presimplify, simplify } from 'topojson-simplify';
 
-  import { Chart, GeoPath, Graticule, Svg, type ChartContextValue } from 'layerchart';
+  import { Chart, GeoPath, Graticule, Layer, type ChartContextValue } from 'layerchart';
   import { Button, ButtonGroup, Field, RangeField } from 'svelte-ux';
   import { TimerState } from '@layerstack/svelte-state';
 
   import Preview from '$lib/docs/Preview.svelte';
   import CurveMenuField from '$lib/docs/CurveMenuField.svelte';
+  import { shared } from '../../shared.svelte.js';
 
   let { data } = $props();
 
@@ -45,7 +46,7 @@
 <h1>Examples</h1>
 
 <div class="grid grid-cols-[1fr_auto] gap-2 items-end">
-  <h2>SVG</h2>
+  <h2>Basic</h2>
 
   <div class="mb-2 flex gap-6">
     <Field label="Spin:" dense labelPlacement="left">
@@ -77,11 +78,11 @@
       ondragstart={timer.stop}
       bind:context
     >
-      <Svg>
+      <Layer type={shared.renderContext}>
         <GeoPath geojson={{ type: 'Sphere' }} class="fill-blue-400/50" />
         <Graticule class="stroke-surface-content/20" />
         <GeoPath geojson={land} {curve} class="stroke-surface-content/50 fill-white" />
-      </Svg>
+      </Layer>
     </Chart>
   </div>
 </Preview>
diff --git a/packages/layerchart/src/routes/docs/examples/SketchyGlobe/+page.ts b/packages/layerchart/src/routes/docs/examples/SketchyGlobe/+page.ts
index e0cee5eac..480d72db5 100644
--- a/packages/layerchart/src/routes/docs/examples/SketchyGlobe/+page.ts
+++ b/packages/layerchart/src/routes/docs/examples/SketchyGlobe/+page.ts
@@ -11,6 +11,7 @@ export async function load({ fetch }) {
     }>,
     meta: {
       pageSource,
+      supportedContexts: ['svg', 'canvas'],
     },
   };
 }
diff --git a/packages/layerchart/src/routes/docs/examples/Sparkbar/+page.svelte b/packages/layerchart/src/routes/docs/examples/Sparkbar/+page.svelte
index 00f500268..eae3e53d1 100644
--- a/packages/layerchart/src/routes/docs/examples/Sparkbar/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/Sparkbar/+page.svelte
@@ -5,6 +5,7 @@
 
   import Preview from '$lib/docs/Preview.svelte';
   import { createDateSeries } from '$lib/utils/genData.js';
+  import { shared } from '../../shared.svelte.js';
 
   const data = createDateSeries({
     count: 30,
@@ -14,6 +15,8 @@
     keys: ['value', 'baseline'],
   });
   const negativeData = createDateSeries({ count: 30, min: -20, max: 50, value: 'integer' });
+
+  let renderContext = $derived(shared.renderContext as 'svg' | 'canvas');
 </script>
 
 <h1>Examples</h1>
@@ -30,6 +33,7 @@
       grid={false}
       bandPadding={0.1}
       props={{ bars: { radius: 1, strokeWidth: 0 } }}
+      {renderContext}
     />
   </div>
 </Preview>
@@ -49,6 +53,7 @@
           grid={false}
           bandPadding={0.1}
           props={{ bars: { radius: 1, strokeWidth: 0 } }}
+          {renderContext}
         />
       </span> Sed ipsum justo, facilisis id tempor hendrerit, suscipit eu ipsum. Mauris ut sapien quis
       nibh volutpat venenatis. Ut viverra justo varius sapien convallis venenatis vel faucibus urna.
@@ -68,6 +73,7 @@
       grid={false}
       bandPadding={0.1}
       props={{ bars: { radius: 1, strokeWidth: 0 } }}
+      {renderContext}
     />
   </div>
 </Preview>
@@ -84,6 +90,7 @@
       grid={false}
       bandPadding={0.1}
       props={{ bars: { radius: 1, strokeWidth: 0 } }}
+      {renderContext}
     >
       {#snippet tooltip({ context })}
         <Tooltip.Root
@@ -123,6 +130,7 @@
           grid={false}
           bandPadding={0.1}
           props={{ bars: { radius: 1, strokeWidth: 0 } }}
+          {renderContext}
         >
           {#snippet tooltip({ context })}
             <Tooltip.Root
diff --git a/packages/layerchart/src/routes/docs/examples/Sparkbar/+page.ts b/packages/layerchart/src/routes/docs/examples/Sparkbar/+page.ts
index 614c76c2d..6b4c20cc9 100644
--- a/packages/layerchart/src/routes/docs/examples/Sparkbar/+page.ts
+++ b/packages/layerchart/src/routes/docs/examples/Sparkbar/+page.ts
@@ -4,6 +4,7 @@ export async function load() {
   return {
     meta: {
       pageSource,
+      supportedContexts: ['svg', 'canvas'],
       related: [
         'components/BarChart',
         'components/Bars',
diff --git a/packages/layerchart/src/routes/docs/examples/Sparkline/+page.svelte b/packages/layerchart/src/routes/docs/examples/Sparkline/+page.svelte
index e981ba3a1..14ca79cdf 100644
--- a/packages/layerchart/src/routes/docs/examples/Sparkline/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/Sparkline/+page.svelte
@@ -5,8 +5,11 @@
 
   import Preview from '$lib/docs/Preview.svelte';
   import { createDateSeries } from '$lib/utils/genData.js';
+  import { shared } from '../../shared.svelte.js';
 
   const data = createDateSeries({ count: 50, min: 50, max: 100, value: 'integer' });
+
+  let renderContext = $derived(shared.renderContext as 'svg' | 'canvas');
 </script>
 
 <h1>Examples</h1>
@@ -15,7 +18,15 @@
 <Preview {data}>
   <div>
     <div class="w-[124px] h-[18px]">
-      <LineChart {data} x="date" y="value" yDomain={null} axis={false} grid={false} />
+      <LineChart
+        {data}
+        x="date"
+        y="value"
+        yDomain={null}
+        axis={false}
+        grid={false}
+        {renderContext}
+      />
     </div>
   </div>
 </Preview>
@@ -27,7 +38,15 @@
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pretium, ligula ac sollicitudin
       ullamcorper, leo justo pretium tellus, at gravida ex quam et orci.
       <span class="w-[124px] h-[18px] inline-block">
-        <LineChart {data} x="date" y="value" yDomain={null} axis={false} grid={false} />
+        <LineChart
+          {data}
+          x="date"
+          y="value"
+          yDomain={null}
+          axis={false}
+          grid={false}
+          {renderContext}
+        />
       </span> Sed ipsum justo, facilisis id tempor hendrerit, suscipit eu ipsum. Mauris ut sapien quis
       nibh volutpat venenatis. Ut viverra justo varius sapien convallis venenatis vel faucibus urna.
     </p>
@@ -37,7 +56,7 @@
 <h2>Basic zero axis</h2>
 <Preview {data}>
   <div class="w-[124px] h-[20px] inline-block">
-    <LineChart {data} x="date" y="value" axis={false} grid={false} />
+    <LineChart {data} x="date" y="value" axis={false} grid={false} {renderContext} />
   </div>
 </Preview>
 
@@ -54,6 +73,7 @@
       props={{
         highlight: { points: { r: 3, class: 'stroke-none' } },
       }}
+      {renderContext}
     >
       {#snippet tooltip({ context })}
         <Tooltip.Root
@@ -95,6 +115,7 @@
           props={{
             highlight: { points: { r: 3, class: 'stroke-none' } },
           }}
+          {renderContext}
         >
           {#snippet tooltip({ context })}
             <Tooltip.Root
diff --git a/packages/layerchart/src/routes/docs/examples/Sparkline/+page.ts b/packages/layerchart/src/routes/docs/examples/Sparkline/+page.ts
index 52b933f4d..94a9a1755 100644
--- a/packages/layerchart/src/routes/docs/examples/Sparkline/+page.ts
+++ b/packages/layerchart/src/routes/docs/examples/Sparkline/+page.ts
@@ -4,6 +4,7 @@ export async function load() {
   return {
     meta: {
       pageSource,
+      supportedContexts: ['svg', 'canvas'],
       related: [
         'components/LineChart',
         'components/Spline',
diff --git a/packages/layerchart/src/routes/docs/examples/SpikeMap/+page.svelte b/packages/layerchart/src/routes/docs/examples/SpikeMap/+page.svelte
index bb4728058..0e0fe9293 100644
--- a/packages/layerchart/src/routes/docs/examples/SpikeMap/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/SpikeMap/+page.svelte
@@ -4,10 +4,11 @@
   import { scaleLinear } from 'd3-scale';
   import { feature } from 'topojson-client';
 
-  import { Canvas, Chart, GeoPath, spikePath, Spline, Svg, Tooltip } from 'layerchart';
+  import { Chart, GeoPath, Layer, spikePath, Spline, Tooltip } from 'layerchart';
   import TransformControls from '$lib/components/TransformControls.svelte';
 
   import Preview from '$lib/docs/Preview.svelte';
+  import { shared } from '../../shared.svelte.js';
 
   let { data } = $props();
 
@@ -50,7 +51,7 @@
 
 <h1>Examples</h1>
 
-<h2>SVG</h2>
+<h2>Basic</h2>
 
 <Preview data={states}>
   <div class="h-[600px] overflow-hidden">
@@ -69,7 +70,7 @@
 
         <TransformControls />
 
-        <Svg>
+        <Layer type={shared.renderContext}>
           <GeoPath
             geojson={states}
             class="fill-surface-content/10 stroke-surface-100"
@@ -82,10 +83,10 @@
                 {@const [x, y] = geoPath?.centroid(feature) ?? [0, 0]}
                 {@const d = feature.properties.data}
                 {@const height = heightScale(d?.population ?? 0)}
-                <path
-                  d={spikePath({ x, y, width, height })}
+                <Spline
+                  pathData={spikePath({ x, y, width, height })}
                   class="stroke-danger fill-danger/25"
-                  stroke-width={strokeWidth}
+                  {strokeWidth}
                 />
               {/snippet}
             </GeoPath>
@@ -99,91 +100,18 @@
               {strokeWidth}
             />
           {/each}
-        </Svg>
-
-        <Tooltip.Root>
-          {#snippet children({ data })}
-            {@const d = data.properties.data}
-            <Tooltip.Header
-              >{data.properties.name + ' - ' + data.properties.data?.state}</Tooltip.Header
-            >
-            <Tooltip.List>
-              <Tooltip.Item
-                label="Total Population"
-                value={d?.population}
-                format="integer"
-                valueAlign="right"
-              />
-              <Tooltip.Item
-                label="Est. Population under 18"
-                value={d?.populationUnder18}
-                format="integer"
-                valueAlign="right"
-              />
-              <Tooltip.Item
-                label="Est. Percent under 18"
-                value={d?.percentUnder18 / 100}
-                format="percentRound"
-                valueAlign="right"
-              />
-            </Tooltip.List>
-          {/snippet}
-        </Tooltip.Root>
-      {/snippet}
-    </Chart>
-  </div>
-</Preview>
-
-<h2>Canvas</h2>
-
-<Preview data={states}>
-  <div class="h-[600px] mt-10">
-    <Chart
-      geo={{
-        projection,
-        fitGeojson: states,
-      }}
-      transform={{
-        mode: 'canvas',
-        initialScrollMode: 'scale',
-      }}
-    >
-      {#snippet children({ context })}
-        {@const strokeWidth = 1 / context.transform.scale}
-        <TransformControls />
-
-        <Canvas>
-          <GeoPath
-            geojson={states}
-            class="fill-surface-content/10 stroke-surface-100"
-            {strokeWidth}
-          />
-
-          {#each enrichedCountiesFeatures as feature}
-            <GeoPath geojson={feature} {strokeWidth} tooltipContext={context.tooltip}>
-              {#snippet children({ geoPath })}
-                {@const [x, y] = geoPath?.centroid(feature) ?? [0, 0]}
-                {@const d = feature.properties.data}
-                {@const height = heightScale(d?.population ?? 0)}
-                <Spline
-                  pathData={spikePath({ x, y, width, height })}
-                  class="stroke-danger fill-danger/25"
-                  {strokeWidth}
-                />
-              {/snippet}
-            </GeoPath>
-          {/each}
-        </Canvas>
+        </Layer>
 
-        <Canvas pointerEvents={false}>
-          {#if context.tooltip.data}
+        <!-- Add extra path to mimic hover stroke on canvas -->
+        <Layer type={shared.renderContext} pointerEvents={false}>
+          {#if context.tooltip.data && shared.renderContext === 'canvas'}
             <GeoPath
               geojson={context.tooltip.data}
               class="stroke-none fill-surface-content/10"
               {strokeWidth}
             />
           {/if}
-        </Canvas>
+        </Layer>
 
         <Tooltip.Root>
           {#snippet children({ data })}
diff --git a/packages/layerchart/src/routes/docs/examples/SpikeMap/+page.ts b/packages/layerchart/src/routes/docs/examples/SpikeMap/+page.ts
index beeb54e67..53f8b7218 100644
--- a/packages/layerchart/src/routes/docs/examples/SpikeMap/+page.ts
+++ b/packages/layerchart/src/routes/docs/examples/SpikeMap/+page.ts
@@ -17,6 +17,7 @@ export async function load({ fetch }) {
     )) as USCountyPopulationData,
     meta: {
       pageSource,
+      supportedContexts: ['svg', 'canvas'],
     },
   };
 }
diff --git a/packages/layerchart/src/routes/docs/examples/StateMap/+page.svelte b/packages/layerchart/src/routes/docs/examples/StateMap/+page.svelte
index fe82203c3..f5d84fe18 100644
--- a/packages/layerchart/src/routes/docs/examples/StateMap/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/StateMap/+page.svelte
@@ -2,11 +2,13 @@
   import { geoAlbersUsa, geoAlbers, geoMercator } from 'd3-geo';
   import { feature } from 'topojson-client';
 
-  import { Chart, ChartClipPath, GeoPath, Svg, Tooltip } from 'layerchart';
+  import { Chart, ChartClipPath, GeoPath, Layer, Tooltip } from 'layerchart';
   import { SelectField } from 'svelte-ux';
   import { sort } from '@layerstack/utils';
 
   import Preview from '$lib/docs/Preview.svelte';
+  import { shared } from '../../shared.svelte.js';
+
   let { data } = $props();
 
   const counties = feature(data.geojson, data.geojson.objects.counties);
@@ -63,9 +65,9 @@
         fitGeojson: selectedStateFeature,
       }}
     >
-      <Svg>
+      <Layer type={shared.renderContext}>
         <GeoPath geojson={selectedStateFeature} class="stroke-surface-content" />
-      </Svg>
+      </Layer>
     </Chart>
   </div>
 </Preview>
@@ -81,7 +83,7 @@
       }}
     >
       {#snippet children({ context })}
-        <Svg>
+        <Layer type={shared.renderContext}>
           {#each selectedCountiesFeatures as feature}
             <GeoPath
               geojson={feature}
@@ -93,7 +95,7 @@
             geojson={selectedStateFeature}
             class="fill-none stroke-surface-content pointer-events-none"
           />
-        </Svg>
+        </Layer>
 
         <Tooltip.Root>
           {context.tooltip.data?.properties.name}
@@ -114,7 +116,7 @@
       }}
     >
       {#snippet children({ context })}
-        <Svg>
+        <Layer type={shared.renderContext}>
           <ChartClipPath>
             {#each counties.features as feature}
               <GeoPath
@@ -134,7 +136,7 @@
               class="fill-none stroke-surface-content pointer-events-none"
             />
           </ChartClipPath>
-        </Svg>
+        </Layer>
 
         <Tooltip.Root>
           {context.tooltip.data?.properties.name}
diff --git a/packages/layerchart/src/routes/docs/examples/StateMap/+page.ts b/packages/layerchart/src/routes/docs/examples/StateMap/+page.ts
index af04f1af5..5a147d814 100644
--- a/packages/layerchart/src/routes/docs/examples/StateMap/+page.ts
+++ b/packages/layerchart/src/routes/docs/examples/StateMap/+page.ts
@@ -13,6 +13,7 @@ export async function load({ fetch }) {
     }>,
     meta: {
       pageSource,
+      supportedContexts: ['svg', 'canvas'],
     },
   };
 }
diff --git a/packages/layerchart/src/routes/docs/examples/SubmarineCablesGlobe/+page.svelte b/packages/layerchart/src/routes/docs/examples/SubmarineCablesGlobe/+page.svelte
index e98851ecc..eac0b8e49 100644
--- a/packages/layerchart/src/routes/docs/examples/SubmarineCablesGlobe/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/SubmarineCablesGlobe/+page.svelte
@@ -13,11 +13,12 @@
     GeoPoint,
     GeoVisible,
     Graticule,
-    Svg,
+    Layer,
     Tooltip,
     type ChartContextValue,
   } from 'layerchart';
   import Preview from '$lib/docs/Preview.svelte';
+  import { shared } from '../../shared.svelte.js';
 
   let { data } = $props();
 
@@ -46,7 +47,7 @@
 <h1>Examples</h1>
 
 <div class="grid grid-cols-[1fr_auto] gap-2 items-end">
-  <h2>SVG</h2>
+  <h2>Basic</h2>
 
   <div class="mb-2 flex gap-6">
     <Field label="Spin:" dense labelPlacement="left" let:id>
@@ -79,7 +80,7 @@
       bind:context
     >
       {#snippet children({ context })}
-        <Svg>
+        <Layer type={shared.renderContext}>
           <GeoPath
             geojson={{ type: 'Sphere' }}
             class="fill-surface-200 stroke-surface-content/20"
@@ -117,21 +118,21 @@
           {#each data.landingPoints.features as feature}
             {@const [long, lat] = feature.geometry.coordinates}
             <GeoVisible {lat} {long}>
-              <GeoPoint {lat} {long}>
-                <Circle
-                  r={2}
-                  class="fill-surface-content stroke-surface-100 stroke"
-                  onpointermove={(e) => context.tooltip.show(e, feature.properties)}
-                  onpointerleave={(e) => context.tooltip.hide()}
-                />
-              </GeoPoint>
+              <GeoPoint
+                {lat}
+                {long}
+                r={2}
+                class="fill-surface-content stroke-surface-100 stroke"
+                onpointermove={(e) => context.tooltip.show(e, feature.properties)}
+                onpointerleave={(e) => context.tooltip.hide()}
+              />
             </GeoVisible>
           {/each}
-        </Svg>
+        </Layer>
 
         <Tooltip.Root>
           {#snippet children({ data })}
-            <Tooltip.Header>{data.name}</Tooltip.Header>
+            {data.name}
             <!-- <Tooltip.List>
           <Tooltip.Item label="Latitude" value={data.latitude} format="decimal" />
           <Tooltip.Item label="Longitude" value={data.longitude} format="decimal" />
diff --git a/packages/layerchart/src/routes/docs/examples/SubmarineCablesGlobe/+page.ts b/packages/layerchart/src/routes/docs/examples/SubmarineCablesGlobe/+page.ts
index 1b819a36e..1b581f7e2 100644
--- a/packages/layerchart/src/routes/docs/examples/SubmarineCablesGlobe/+page.ts
+++ b/packages/layerchart/src/routes/docs/examples/SubmarineCablesGlobe/+page.ts
@@ -16,6 +16,7 @@ export async function load({ fetch }) {
     ),
     meta: {
       pageSource,
+      supportedContexts: ['svg', 'canvas'],
     },
   };
 }
diff --git a/packages/layerchart/src/routes/docs/examples/Sunburst/+page.svelte b/packages/layerchart/src/routes/docs/examples/Sunburst/+page.svelte
index 176fcd24a..33009fb10 100644
--- a/packages/layerchart/src/routes/docs/examples/Sunburst/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/Sunburst/+page.svelte
@@ -5,12 +5,13 @@
   import * as chromatic from 'd3-scale-chromatic';
   import { hsl } from 'd3-color';
 
-  import { Arc, Bounds, Chart, Partition, Svg, Tooltip, findAncestor } from 'layerchart';
+  import { Arc, Bounds, Chart, Layer, Partition, Tooltip, findAncestor } from 'layerchart';
 
   import { Breadcrumb, Button, Field, ToggleGroup, ToggleOption } from 'svelte-ux';
   import { format, sortFunc, compoundSortFunc } from '@layerstack/utils';
 
   import Preview from '$lib/docs/Preview.svelte';
+  import { shared } from '../../shared.svelte.js';
 
   let { data } = $props();
 
@@ -84,7 +85,7 @@
   <div class="h-[600px] p-4 border rounded-sm">
     <Chart>
       {#snippet children({ context })}
-        <Svg center>
+        <Layer type={shared.renderContext} center>
           <Bounds
             domain={{ x0: selected?.x0 ?? 0, x1: selected?.x1 ?? 1, y0: selected?.y0 ?? 0, y1: 1 }}
             range={({ height }) => ({
@@ -107,7 +108,8 @@
                       innerRadius={Math.max(0, yScale(node.y0))}
                       outerRadius={Math.max(0, yScale(node.y1))}
                       fill={nodeColor}
-                      class="stroke-black/50 cursor-pointer"
+                      stroke="black"
+                      class="cursor-pointer"
                       onclick={() => {
                         selected = node;
                       }}
@@ -119,7 +121,7 @@
               </Partition>
             {/snippet}
           </Bounds>
-        </Svg>
+        </Layer>
 
         <Tooltip.Root>
           {#snippet children({ data })}
diff --git a/packages/layerchart/src/routes/docs/examples/Sunburst/+page.ts b/packages/layerchart/src/routes/docs/examples/Sunburst/+page.ts
index 3892fc5d9..e22ed0828 100644
--- a/packages/layerchart/src/routes/docs/examples/Sunburst/+page.ts
+++ b/packages/layerchart/src/routes/docs/examples/Sunburst/+page.ts
@@ -5,6 +5,7 @@ export async function load({ fetch }) {
     flare: await fetch('/data/examples/hierarchy/flare.json').then((r) => r.json()),
     meta: {
       pageSource,
+      supportedContexts: ['svg', 'canvas'],
     },
   };
 }
diff --git a/packages/layerchart/src/routes/docs/examples/Threshold/+page.svelte b/packages/layerchart/src/routes/docs/examples/Threshold/+page.svelte
index 629b4d325..e3797f5dd 100644
--- a/packages/layerchart/src/routes/docs/examples/Threshold/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/Threshold/+page.svelte
@@ -8,6 +8,9 @@
   import CurveMenuField from '$lib/docs/CurveMenuField.svelte';
   import { createDateSeries } from '$lib/utils/genData.js';
   import Blockquote from '$lib/docs/Blockquote.svelte';
+  import { shared } from '../../shared.svelte.js';
+
+  let renderContext = $derived(shared.renderContext as 'svg' | 'canvas');
 
   let selectedCurve = $state(curveStepAfter);
 
@@ -38,6 +41,7 @@
       y={['value', 'baseline']}
       padding={{ left: 16, bottom: 24 }}
       tooltip={false}
+      {renderContext}
     >
       {#snippet marks()}
         <Threshold curve={selectedCurve}>
@@ -72,6 +76,7 @@
         highlight: { area: true, lines: false, points: false },
         tooltip: { context: { mode: 'bisect-x', findTooltipData: 'left' } },
       }}
+      {renderContext}
     >
       {#snippet marks()}
         <Threshold curve={selectedCurve}>
@@ -118,6 +123,7 @@
       padding={{ left: 16, bottom: 24 }}
       labels
       tooltip={false}
+      {renderContext}
     >
       {#snippet marks()}
         <Threshold>
diff --git a/packages/layerchart/src/routes/docs/examples/Threshold/+page.ts b/packages/layerchart/src/routes/docs/examples/Threshold/+page.ts
index 257d50de8..e6c185ced 100644
--- a/packages/layerchart/src/routes/docs/examples/Threshold/+page.ts
+++ b/packages/layerchart/src/routes/docs/examples/Threshold/+page.ts
@@ -4,6 +4,7 @@ export async function load() {
   return {
     meta: {
       pageSource,
+      supportedContexts: ['svg'], // dependency on ClipPath getting canvas support
       related: ['components/Threshold', 'components/AreaChart'],
     },
   };
diff --git a/packages/layerchart/src/routes/docs/examples/Timezones/+page.svelte b/packages/layerchart/src/routes/docs/examples/Timezones/+page.svelte
index 5502b5d2f..20cc2705d 100644
--- a/packages/layerchart/src/routes/docs/examples/Timezones/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/Timezones/+page.svelte
@@ -15,11 +15,12 @@
   // @ts-expect-error
   import { century, equationOfTime, declination } from 'solar-calculator';
 
-  import { Blur, Chart, ClipPath, GeoCircle, GeoPath, Svg, Tooltip, antipode } from 'layerchart';
+  import { Blur, Chart, ClipPath, GeoCircle, GeoPath, Layer, Tooltip, antipode } from 'layerchart';
   import { Field, SelectField, Switch } from 'svelte-ux';
   import { TimerState } from '@layerstack/svelte-state';
 
   import Preview from '$lib/docs/Preview.svelte';
+  import { shared } from '../../shared.svelte.js';
 
   let { data } = $props();
 
@@ -100,7 +101,7 @@
 
 <h1>Examples</h1>
 
-<h2>SVG</h2>
+<h2>Basic</h2>
 
 <Preview data={countriesGeojson}>
   <div class="h-[600px] overflow-hidden">
@@ -112,7 +113,7 @@
       padding={{ left: 10, right: 10 }}
     >
       {#snippet children({ context })}
-        <Svg>
+        <Layer type={shared.renderContext}>
           <GeoPath geojson={{ type: 'Sphere' }} class="stroke-surface-content/30" id="globe" />
 
           <GeoPath geojson={countriesGeojson} id="clip" />
@@ -148,7 +149,7 @@
               </Blur>
             </ClipPath>
           {/if}
-        </Svg>
+        </Layer>
 
         <Tooltip.Root>
           {#snippet children({ data })}
diff --git a/packages/layerchart/src/routes/docs/examples/Timezones/+page.ts b/packages/layerchart/src/routes/docs/examples/Timezones/+page.ts
index b9910f9ac..c4c4ec289 100644
--- a/packages/layerchart/src/routes/docs/examples/Timezones/+page.ts
+++ b/packages/layerchart/src/routes/docs/examples/Timezones/+page.ts
@@ -41,6 +41,7 @@ export async function load({ fetch }) {
 
     meta: {
       pageSource,
+      supportedContexts: ['svg', 'canvas'],
       related: [
         'components/Blur',
         'components/GeoCircle',
diff --git a/packages/layerchart/src/routes/docs/examples/TranslucentGlobe/+page.svelte b/packages/layerchart/src/routes/docs/examples/TranslucentGlobe/+page.svelte
index b162cf6f7..2309a19d0 100644
--- a/packages/layerchart/src/routes/docs/examples/TranslucentGlobe/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/TranslucentGlobe/+page.svelte
@@ -7,7 +7,7 @@
     GeoContext,
     GeoPath,
     Graticule,
-    Svg,
+    Layer,
     Tooltip,
     type ChartContextValue,
   } from 'layerchart';
@@ -15,6 +15,7 @@
   import { TimerState } from '@layerstack/svelte-state';
 
   import Preview from '$lib/docs/Preview.svelte';
+  import { shared } from '../../shared.svelte.js';
 
   let { data } = $props();
 
@@ -41,7 +42,7 @@
 <h1>Examples</h1>
 
 <div class="grid grid-cols-[1fr_auto] gap-2 items-end">
-  <h2>SVG</h2>
+  <h2>Basic</h2>
 
   <div class="mb-2 flex gap-6">
     <Field label="Spin:" dense labelPlacement="left" let:id>
@@ -75,7 +76,7 @@
     >
       {#snippet children({ context })}
         {@const [yaw, pitch, roll] = context.geo.projection?.rotate() ?? [0, 0, 0]}
-        <Svg>
+        <Layer type={shared.renderContext}>
           <GeoPath geojson={{ type: 'Sphere' }} class="fill-blue-400/20" />
 
           <!-- Back -->
@@ -100,7 +101,7 @@
               tooltipContext={context.tooltip}
             />
           {/each}
-        </Svg>
+        </Layer>
 
         <Tooltip.Root>
           {#snippet children({ data })}
diff --git a/packages/layerchart/src/routes/docs/examples/TranslucentGlobe/+page.ts b/packages/layerchart/src/routes/docs/examples/TranslucentGlobe/+page.ts
index 4f6aadb26..f42afc5ae 100644
--- a/packages/layerchart/src/routes/docs/examples/TranslucentGlobe/+page.ts
+++ b/packages/layerchart/src/routes/docs/examples/TranslucentGlobe/+page.ts
@@ -13,6 +13,7 @@ export async function load({ fetch }) {
     }>,
     meta: {
       pageSource,
+      supportedContexts: ['svg', 'canvas'],
     },
   };
 }
diff --git a/packages/layerchart/src/routes/docs/examples/Tree/+page.svelte b/packages/layerchart/src/routes/docs/examples/Tree/+page.svelte
index 2db0660aa..4f68df8a1 100644
--- a/packages/layerchart/src/routes/docs/examples/Tree/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/Tree/+page.svelte
@@ -1,18 +1,19 @@
 <script lang="ts">
+  import type { ComponentProps } from 'svelte';
   import { cubicOut } from 'svelte/easing';
   import { hierarchy, type HierarchyNode } from 'd3-hierarchy';
   import { curveBumpX, curveBumpY, curveStep, curveStepBefore, curveStepAfter } from 'd3-shape';
 
-  import { Chart, Group, Html, Link, Rect, Svg, Text, Tree } from 'layerchart';
+  import { Chart, Group, Link, Layer, Rect, Text, Tree } from 'layerchart';
   import TransformControls from '$lib/components/TransformControls.svelte';
   import { Field, RangeField, ToggleGroup, ToggleOption } from 'svelte-ux';
   import { cls } from '@layerstack/tailwind';
 
   import Preview from '$lib/docs/Preview.svelte';
-  import type { Component, ComponentProps } from 'svelte';
   import type { ConnectorSweep, ConnectorType } from 'layerchart/utils/connectorUtils.js';
   import ConnectorTypeMenuField from 'layerchart/docs/ConnectorTypeMenuField.svelte';
   import ConnectorSweepMenuField from 'layerchart/docs/ConnectorSweepMenuField.svelte';
+  import { shared } from '../../shared.svelte.js';
 
   let { data } = $props();
 
@@ -27,7 +28,6 @@
   let orientation: ComponentProps<typeof Tree>['orientation'] = $state('horizontal');
   let curve = $state(curveBumpX);
   let layout = $state('chart');
-  let Context: Component = $state(Svg);
   let selected = $state();
   let sweep: ConnectorSweep = $state('none'); // Sweep direction
   let type: ConnectorType = $state('d3'); // Connector type: 'straight', 'square', 'beveled', 'rounded', 'd3'
@@ -94,13 +94,6 @@
       <RangeField label="Radius" bind:value={radius} min={0} />
     {/if}
   </div>
-
-  <!-- <Field label="Context">
-      <ToggleGroup bind:value={Context} variant="outline" size="sm" inset class="w-full">
-        <ToggleOption value={Svg}>Svg</ToggleOption>
-        <ToggleOption value={Canvas}>Canvas</ToggleOption>
-      </ToggleGroup>
-    </Field> -->
 </div>
 
 <h2>Basic</h2>
@@ -123,7 +116,7 @@
           nodeSize={layout === 'node' ? nodeSize : undefined}
         >
           {#snippet children({ nodes, links })}
-            <Context>
+            <Layer type={shared.renderContext}>
               {#each links as link (getNodeKey(link.source) + '_' + getNodeKey(link.target))}
                 <Link
                   data={link}
@@ -184,7 +177,7 @@
                   />
                 </Group>
               {/each}
-            </Context>
+            </Layer>
           {/snippet}
         </Tree>
       {/snippet}
@@ -212,7 +205,7 @@
           nodeSize={layout === 'node' ? nodeSize : undefined}
         >
           {#snippet children({ nodes, links })}
-            <Context>
+            <Layer type={shared.renderContext}>
               {#each links as link (getNodeKey(link.source) + '_' + getNodeKey(link.target))}
                 <Link
                   data={link}
@@ -225,9 +218,9 @@
                   class="stroke-surface-content opacity-20"
                 />
               {/each}
-            </Context>
+            </Layer>
 
-            <Html>
+            <Layer type="html">
               {#each nodes as node}
                 {@const x = (orientation === 'horizontal' ? node.y : node.x) - nodeWidth / 2}
                 {@const y = (orientation === 'horizontal' ? node.x : node.y) - nodeHeight / 2}
@@ -257,7 +250,7 @@
                   {node.data.name}
                 </Group>
               {/each}
-            </Html>
+            </Layer>
           {/snippet}
         </Tree>
       {/snippet}
diff --git a/packages/layerchart/src/routes/docs/examples/Tree/+page.ts b/packages/layerchart/src/routes/docs/examples/Tree/+page.ts
index 3892fc5d9..2f2bf42d5 100644
--- a/packages/layerchart/src/routes/docs/examples/Tree/+page.ts
+++ b/packages/layerchart/src/routes/docs/examples/Tree/+page.ts
@@ -5,6 +5,7 @@ export async function load({ fetch }) {
     flare: await fetch('/data/examples/hierarchy/flare.json').then((r) => r.json()),
     meta: {
       pageSource,
+      supportedContexts: ['svg'], // TODO: `canvas` coming soon
     },
   };
 }
diff --git a/packages/layerchart/src/routes/docs/examples/Treemap/+page.svelte b/packages/layerchart/src/routes/docs/examples/Treemap/+page.svelte
index 78558e005..e85462ba1 100644
--- a/packages/layerchart/src/routes/docs/examples/Treemap/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/Treemap/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { untrack, type ComponentProps } from 'svelte';
   import { cubicOut } from 'svelte/easing';
   import { fade } from 'svelte/transition';
   import { hierarchy, type HierarchyNode, type HierarchyRectangularNode } from 'd3-hierarchy';
@@ -28,7 +29,7 @@
     Group,
     Rect,
     RectClipPath,
-    Svg,
+    Layer,
     Text,
     Tooltip,
     Treemap,
@@ -36,7 +37,7 @@
     findAncestor,
   } from 'layerchart';
   import { isNodeVisible } from '$lib/utils/treemap.js';
-  import { untrack, type ComponentProps } from 'svelte';
+  import { shared } from '../../shared.svelte.js';
 
   let { data } = $props();
 
@@ -184,7 +185,7 @@
   <div class="h-[800px] p-4 border rounded-sm">
     <Chart>
       {#snippet children({ context })}
-        <Svg>
+        <Layer type={shared.renderContext}>
           <Bounds
             domain={asAny(selectedNested)}
             motion={{ type: 'tween', duration: 800, easing: cubicOut }}
@@ -263,7 +264,7 @@
               </ChartClipPath>
             {/snippet}
           </Bounds>
-        </Svg>
+        </Layer>
 
         <Tooltip.Root>
           {#snippet children({ data })}
@@ -348,7 +349,7 @@
   </Breadcrumb>
   <div class="h-[800px] p-4 border rounded-sm">
     <Chart>
-      <Svg>
+      <Layer type={shared.renderContext}>
         <Treemap
           hierarchy={groupedHierarchy}
           {tile}
@@ -425,7 +426,7 @@
             {/each}
           {/snippet}
         </Treemap>
-      </Svg>
+      </Layer>
     </Chart>
   </div>
 </Preview>
@@ -483,7 +484,7 @@
   </Breadcrumb>
   <div class="h-[600px] p-4 border rounded-sm">
     <Chart>
-      <Svg>
+      <Layer type={shared.renderContext}>
         <Bounds
           domain={asAny(selectedZoomable)}
           motion={{ type: 'tween', duration: 800, easing: cubicOut }}
@@ -544,7 +545,7 @@
             </ChartClipPath>
           {/snippet}
         </Bounds>
-      </Svg>
+      </Layer>
     </Chart>
   </div>
 </Preview>
diff --git a/packages/layerchart/src/routes/docs/examples/Treemap/+page.ts b/packages/layerchart/src/routes/docs/examples/Treemap/+page.ts
index 799611f5b..82edd0c32 100644
--- a/packages/layerchart/src/routes/docs/examples/Treemap/+page.ts
+++ b/packages/layerchart/src/routes/docs/examples/Treemap/+page.ts
@@ -11,6 +11,7 @@ export async function load({ fetch }) {
     ),
     meta: {
       pageSource,
+      supportedContexts: ['svg'], // TODO: `canvas` coming soon
     },
   };
 }
diff --git a/packages/layerchart/src/routes/docs/examples/ZoomableMap/+page.svelte b/packages/layerchart/src/routes/docs/examples/ZoomableMap/+page.svelte
index 63d99ac22..d32dd5746 100644
--- a/packages/layerchart/src/routes/docs/examples/ZoomableMap/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/ZoomableMap/+page.svelte
@@ -1,15 +1,16 @@
 <script lang="ts">
   import { fade } from 'svelte/transition';
   import { cubicOut } from 'svelte/easing';
-  import { geoAlbersUsa, geoAlbers, geoMercator, geoPath as d3geoPath } from 'd3-geo';
+  import { geoAlbersUsa, geoAlbers, geoMercator } from 'd3-geo';
   import { feature } from 'topojson-client';
 
-  import { Canvas, Chart, GeoPath, Svg, Tooltip, geoFitObjectTransform } from 'layerchart';
+  import { Chart, GeoPath, Layer, Tooltip, geoFitObjectTransform } from 'layerchart';
   import TransformControls from '$lib/components/TransformControls.svelte';
   import { SelectField } from 'svelte-ux';
 
   import Preview from '$lib/docs/Preview.svelte';
   import type { GeometryObjectA } from 'topojson-specification';
+  import { shared } from '../../shared.svelte.js';
 
   let { data } = $props();
 
@@ -52,7 +53,7 @@
 
 <h1>Examples</h1>
 
-<h2>SVG (projection transform)</h2>
+<h2>Projection transform</h2>
 
 <Preview data={states}>
   <div class="h-[600px] relative overflow-hidden">
@@ -70,13 +71,14 @@
       {#snippet children({ context })}
         <TransformControls />
 
-        <Svg>
+        <Layer type={shared.renderContext}>
           {#each states.features as feature}
             <GeoPath
               geojson={feature}
               class="stroke-surface-content fill-surface-100 hover:fill-surface-content/10"
               tooltipContext={context.tooltip}
               onclick={() => {
+                context.tooltip.hide();
                 if (selectedStateId === feature.id) {
                   selectedStateId = null;
                   context.transform.reset();
@@ -97,6 +99,7 @@
           {/each}
 
           {#each selectedCountiesFeatures as feature (feature.id)}
+            <!-- Hade does not work for canvas -->
             <g in:fade={{ duration: 300, delay: 600 }} out:fade={{ duration: 300 }}>
               <GeoPath
                 geojson={feature}
@@ -104,12 +107,24 @@
                 class="stroke-surface-content/10 hover:stroke-surface-content/50 hover:fill-surface-content/10"
                 onclick={() => {
                   selectedStateId = null;
+                  context.tooltip.hide();
                   context.transform.reset();
                 }}
               />
             </g>
           {/each}
-        </Svg>
+        </Layer>
+
+        <!-- Add extra path to mimic hover stroke on canvas -->
+        <Layer type={shared.renderContext} pointerEvents={false}>
+          {#if context.tooltip.data && shared.renderContext === 'canvas'}
+            <GeoPath
+              geojson={context.tooltip.data}
+              strokeWidth={1 / context.transform.scale}
+              class="stroke-surface-content/50 fill-surface-content/20"
+            />
+          {/if}
+        </Layer>
 
         <Tooltip.Root>
           {#snippet children({ data })}
@@ -127,7 +142,7 @@
   </div>
 </Preview>
 
-<h2>SVG (canvas transform)</h2>
+<h2>Canvas transform</h2>
 
 <Preview data={states}>
   <div class="h-[600px] relative overflow-hidden">
@@ -145,7 +160,7 @@
       {#snippet children({ context })}
         <TransformControls />
 
-        <Svg>
+        <Layer type={shared.renderContext}>
           {#each states.features as feature}
             <GeoPath
               geojson={feature}
@@ -153,6 +168,7 @@
               strokeWidth={1 / context.transform.scale}
               tooltipContext={context.tooltip}
               onclick={(e, geoPath) => {
+                context.tooltip.hide();
                 if (selectedStateId === feature.id) {
                   selectedStateId = null;
                   context.transform.reset();
@@ -188,201 +204,30 @@
               />
             </g>
           {/each}
-        </Svg>
-
-        <Tooltip.Root>
-          {#snippet children({ data })}
-            {data.properties.name}
-            <!-- TODO: How to handle scale (when using canvas and not projection transforms) -->
-            <!-- {@const [longitude, latitude] = projection.invert?.([tooltip.x, tooltip.y]) ?? []}
-        <Tooltip.Header>{data.properties.name}</Tooltip.Header>
-        <Tooltip.List>
-          <Tooltip.Item label="longitude" value={longitude} format="decimal" />
-          <Tooltip.Item label="latitude" value={latitude} format="decimal" />
-        </Tooltip.List> -->
-          {/snippet}
-        </Tooltip.Root>
-      {/snippet}
-    </Chart>
-  </div>
-</Preview>
-
-<h2>Canvas (projection transform)</h2>
-
-<Preview data={states}>
-  <div class="h-[600px] relative overflow-hidden">
-    <Chart
-      geo={{
-        projection,
-        fitGeojson: projection === geoMercator ? contiguousStates : states,
-        applyTransform: ['translate', 'scale'],
-      }}
-      transform={{
-        initialScrollMode: 'none',
-        motion: { type: 'tween', duration: 800, easing: cubicOut },
-      }}
-    >
-      {#snippet children({ context })}
-        <TransformControls />
-
-        <Canvas>
-          {#each states.features as feature}
-            <GeoPath
-              geojson={feature}
-              class="stroke-surface-content fill-surface-100"
-              tooltipContext={context.tooltip}
-              onclick={(e, geoPath) => {
-                if (
-                  selectedStateId === feature.id ||
-                  !states.features.some((f) => f.id == feature.id) // County selected
-                ) {
-                  selectedStateId = null;
-                  context.transform.reset();
-                } else {
-                  selectedStateId = feature.id;
-                  context.tooltip.hide();
-                  if (!context.geo.projection) return;
-                  const featureTransform = geoFitObjectTransform(
-                    context.geo.projection,
-                    [context.width, context.height],
-                    feature
-                  );
-                  context.transform.setTranslate(featureTransform.translate);
-                  context.transform.setScale(featureTransform.scale);
-                }
-              }}
-            />
-          {/each}
-
-          {#each selectedCountiesFeatures as feature (feature.id)}
-            <GeoPath
-              geojson={feature}
-              tooltipContext={context.tooltip}
-              class="stroke-surface-content/10 hover:fill-surface-content/10"
-              onclick={() => {
-                selectedStateId = null;
-                context.transform.reset();
-              }}
-            />
-          {/each}
-        </Canvas>
-
-        <Canvas pointerEvents={false}>
-          {#if context.tooltip.data}
-            <GeoPath
-              geojson={context.tooltip.data}
-              strokeWidth={1 / context.transform.scale}
-              class="stroke-surface-content/50 fill-surface-content/20"
-            />
-          {/if}
-        </Canvas>
-
-        <Tooltip.Root>
-          {#snippet children({ data })}
-            {@const [longitude, latitude] =
-              context.geo.projection?.invert?.([context.tooltip.x, context.tooltip.y]) ?? []}
-            <Tooltip.Header>{data.properties.name}</Tooltip.Header>
-            <Tooltip.List>
-              <Tooltip.Item label="longitude" value={longitude} format="decimal" />
-              <Tooltip.Item label="latitude" value={latitude} format="decimal" />
-            </Tooltip.List>
-          {/snippet}
-        </Tooltip.Root>
-      {/snippet}
-    </Chart>
-  </div>
-</Preview>
-
-<h2>Canvas (canvas transform)</h2>
-
-<!-- TODO: zoomable tooltip is off-->
-
-<Preview data={states}>
-  <div class="h-[600px] relative overflow-hidden">
-    <Chart
-      geo={{
-        projection,
-        fitGeojson: projection === geoMercator ? contiguousStates : states,
-      }}
-      transform={{
-        mode: 'canvas',
-        initialScrollMode: 'none',
-        motion: { type: 'tween', duration: 800, easing: cubicOut },
-      }}
-    >
-      {#snippet children({ context })}
-        <TransformControls />
-
-        <Canvas>
-          {#each states.features as feature, i (i)}
-            <GeoPath
-              geojson={feature}
-              class="stroke-surface-content fill-surface-100 hover:fill-surface-content/10"
-              strokeWidth={1 / context.transform.scale}
-              tooltipContext={context.tooltip}
-              onclick={(e) => {
-                if (!context.geo.projection) return;
-                const geoPath = d3geoPath(context.geo.projection);
-
-                if (
-                  selectedStateId === feature.id ||
-                  !states.features.some((f) => f.id == feature.id) // County selected
-                ) {
-                  selectedStateId = null;
-                  context.transform.reset();
-                } else {
-                  selectedStateId = feature.id;
-                  context.tooltip.hide();
-                  let [[left, top], [right, bottom]] = geoPath.bounds(feature);
-                  let width = right - left;
-                  let height = bottom - top;
-                  let x = (left + right) / 2;
-                  let y = (top + bottom) / 2;
-                  const padding = 20;
-
-                  context.transform.zoomTo(
-                    { x, y },
-                    { width: width + padding, height: height + padding }
-                  );
-                }
-              }}
-            />
-          {/each}
-
-          {#each selectedCountiesFeatures as feature (feature.id)}
-            <GeoPath
-              geojson={feature}
-              tooltipContext={context.tooltip}
-              strokeWidth={1 / context.transform.scale}
-              class="stroke-surface-content/10 hover:fill-surface-content/10"
-              onclick={() => {
-                selectedStateId = null;
-                context.transform.reset();
-              }}
-            />
-          {/each}
-        </Canvas>
+        </Layer>
 
         <!-- Provides better performance by rendering tooltip path on separate <Canvas> -->
-        <Canvas pointerEvents={false}>
-          {#if context.tooltip.data}
+        <Layer type={shared.renderContext} pointerEvents={false}>
+          {#if context.tooltip.data && shared.renderContext === 'canvas'}
             <GeoPath
               geojson={context.tooltip.data}
               strokeWidth={1 / context.transform.scale}
               class="stroke-surface-content/50 fill-surface-content/20"
             />
           {/if}
-        </Canvas>
+        </Layer>
 
         <Tooltip.Root>
-          {context.tooltip.data?.properties.name}
-          <!-- TODO: How to handle scale (when using canvas and not projection transforms) -->
-          <!-- {@const [longitude, latitude] = projection.invert?.([tooltip.x, tooltip.y]) ?? []}
+          {#snippet children({ data })}
+            {data.properties.name}
+            <!-- TODO: How to handle scale (when using canvas and not projection transforms) -->
+            <!-- {@const [longitude, latitude] = projection.invert?.([tooltip.x, tooltip.y]) ?? []}
         <Tooltip.Header>{data.properties.name}</Tooltip.Header>
         <Tooltip.List>
           <Tooltip.Item label="longitude" value={longitude} format="decimal" />
           <Tooltip.Item label="latitude" value={latitude} format="decimal" />
         </Tooltip.List> -->
+          {/snippet}
         </Tooltip.Root>
       {/snippet}
     </Chart>
diff --git a/packages/layerchart/src/routes/docs/examples/ZoomableMap/+page.ts b/packages/layerchart/src/routes/docs/examples/ZoomableMap/+page.ts
index af04f1af5..5a147d814 100644
--- a/packages/layerchart/src/routes/docs/examples/ZoomableMap/+page.ts
+++ b/packages/layerchart/src/routes/docs/examples/ZoomableMap/+page.ts
@@ -13,6 +13,7 @@ export async function load({ fetch }) {
     }>,
     meta: {
       pageSource,
+      supportedContexts: ['svg', 'canvas'],
     },
   };
 }
diff --git a/packages/layerchart/src/routes/docs/examples/ZoomableTileMap/+page.svelte b/packages/layerchart/src/routes/docs/examples/ZoomableTileMap/+page.svelte
index fc681fccc..274c82c86 100644
--- a/packages/layerchart/src/routes/docs/examples/ZoomableTileMap/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/ZoomableTileMap/+page.svelte
@@ -3,13 +3,14 @@
   import { geoMercator } from 'd3-geo';
   import { feature } from 'topojson-client';
 
-  import { Chart, GeoPath, GeoTile, Svg, Tooltip, geoFitObjectTransform } from 'layerchart';
+  import { Chart, GeoPath, GeoTile, Layer, Tooltip, geoFitObjectTransform } from 'layerchart';
   import TransformControls from '$lib/components/TransformControls.svelte';
   import { Field, RangeField, Switch } from 'svelte-ux';
 
   import GeoDebug from '$lib/docs/GeoDebug.svelte';
   import Preview from '$lib/docs/Preview.svelte';
   import TilesetField from '$lib/docs/TilesetField.svelte';
+  import { shared } from '../../shared.svelte.js';
 
   let { data } = $props();
 
@@ -38,7 +39,7 @@
 
 <h1>Examples</h1>
 
-<h2>SVG</h2>
+<h2>Basic</h2>
 
 {#if serviceUrl}
   <Preview data={filteredStates}>
@@ -62,7 +63,7 @@
 
           <TransformControls />
 
-          <Svg>
+          <Layer type={shared.renderContext}>
             <GeoTile url={serviceUrl} {zoomDelta} {debug} />
 
             {#each filteredStates.features as feature}
@@ -82,7 +83,7 @@
                 }}
               />
             {/each}
-          </Svg>
+          </Layer>
 
           <Tooltip.Root>
             {#snippet children({ data })}
@@ -100,7 +101,7 @@
     </div>
   </Preview>
 
-  <h2>SVG with padding</h2>
+  <h2>With padding</h2>
 
   <Preview data={filteredStates}>
     <div class="h-[600px] relative overflow-hidden">
@@ -129,7 +130,7 @@
 
           <TransformControls />
 
-          <Svg>
+          <Layer type={shared.renderContext}>
             <GeoTile url={serviceUrl} {zoomDelta} {debug} />
 
             {#each filteredStates.features as feature}
@@ -149,7 +150,7 @@
                 }}
               />
             {/each}
-          </Svg>
+          </Layer>
 
           <Tooltip.Root>
             {#snippet children({ data })}
@@ -193,7 +194,7 @@
 
           <TransformControls />
 
-          <Svg>
+          <Layer type={shared.renderContext}>
             <!-- technique: https://observablehq.com/@d3/seamless-zoomable-map-tiles -->
             <GeoTile url={serviceUrl} zoomDelta={-100} />
             <GeoTile url={serviceUrl} zoomDelta={-4} />
@@ -217,7 +218,7 @@
                 }}
               />
             {/each}
-          </Svg>
+          </Layer>
 
           <Tooltip.Root>
             {#snippet children({ data })}
diff --git a/packages/layerchart/src/routes/docs/examples/ZoomableTileMap/+page.ts b/packages/layerchart/src/routes/docs/examples/ZoomableTileMap/+page.ts
index 84c432e95..6314ea7dd 100644
--- a/packages/layerchart/src/routes/docs/examples/ZoomableTileMap/+page.ts
+++ b/packages/layerchart/src/routes/docs/examples/ZoomableTileMap/+page.ts
@@ -11,6 +11,7 @@ export async function load({ fetch }) {
     }>,
     meta: {
       pageSource,
+      supportedContexts: ['svg', 'canvas'],
     },
   };
 }
diff --git a/packages/layerchart/src/routes/docs/performance/dimension_arrays/+page.svelte b/packages/layerchart/src/routes/docs/performance/dimension_arrays/+page.svelte
index 5094d0d4b..05c7b71d1 100644
--- a/packages/layerchart/src/routes/docs/performance/dimension_arrays/+page.svelte
+++ b/packages/layerchart/src/routes/docs/performance/dimension_arrays/+page.svelte
@@ -6,12 +6,13 @@
   import { zip } from 'd3-array';
 
   import Preview from '$lib/docs/Preview.svelte';
+  import { shared } from '../../shared.svelte.js';
 
   const { data } = $props();
 
   let example = $state<'single'>('single');
 
-  let renderContext = $state<'svg' | 'canvas'>('svg');
+  let renderContext = $derived(shared.renderContext as 'svg' | 'canvas');
   let motion = $state(true);
   let show = $state(true);
 
@@ -27,13 +28,6 @@
 
 <div class="grid gap-4">
   <div class="flex gap-3">
-    <Field label="Render context">
-      <ToggleGroup bind:value={renderContext} variant="outline">
-        <ToggleOption value="svg">Svg</ToggleOption>
-        <ToggleOption value="canvas">Canvas</ToggleOption>
-      </ToggleGroup>
-    </Field>
-
     <Field label="Motion">
       <ToggleGroup bind:value={motion} variant="outline">
         <ToggleOption value={true}>Yes</ToggleOption>
diff --git a/packages/layerchart/src/routes/docs/performance/dimension_arrays/+page.ts b/packages/layerchart/src/routes/docs/performance/dimension_arrays/+page.ts
index 98c018206..f276a082a 100644
--- a/packages/layerchart/src/routes/docs/performance/dimension_arrays/+page.ts
+++ b/packages/layerchart/src/routes/docs/performance/dimension_arrays/+page.ts
@@ -13,6 +13,7 @@ export async function load({ fetch }) {
     meta: {
       description: 'Individual arrays per dimension, similar to uplot',
       pageSource,
+      supportedContexts: ['svg', 'canvas'],
       hideTableOfContents: true,
     },
   };
diff --git a/packages/layerchart/src/routes/docs/performance/dimension_arrays_processed/+page.svelte b/packages/layerchart/src/routes/docs/performance/dimension_arrays_processed/+page.svelte
index 4a3c6b5de..64a7cb2a3 100644
--- a/packages/layerchart/src/routes/docs/performance/dimension_arrays_processed/+page.svelte
+++ b/packages/layerchart/src/routes/docs/performance/dimension_arrays_processed/+page.svelte
@@ -6,12 +6,13 @@
   import { zip } from 'd3-array';
 
   import Preview from '$lib/docs/Preview.svelte';
+  import { shared } from '../../shared.svelte.js';
 
   const { data } = $props();
 
   let example = $state<'single'>('single');
 
-  let renderContext = $state<'svg' | 'canvas'>('svg');
+  let renderContext = $derived(shared.renderContext as 'svg' | 'canvas');
   let motion = $state(true);
   let show = $state(true);
 
@@ -33,13 +34,6 @@
 
 <div class="grid gap-4">
   <div class="flex gap-3">
-    <Field label="Render context">
-      <ToggleGroup bind:value={renderContext} variant="outline">
-        <ToggleOption value="svg">Svg</ToggleOption>
-        <ToggleOption value="canvas">Canvas</ToggleOption>
-      </ToggleGroup>
-    </Field>
-
     <Field label="Motion">
       <ToggleGroup bind:value={motion} variant="outline">
         <ToggleOption value={true}>Yes</ToggleOption>
diff --git a/packages/layerchart/src/routes/docs/performance/dimension_arrays_processed/+page.ts b/packages/layerchart/src/routes/docs/performance/dimension_arrays_processed/+page.ts
index 9a1437f9a..3a41720f5 100644
--- a/packages/layerchart/src/routes/docs/performance/dimension_arrays_processed/+page.ts
+++ b/packages/layerchart/src/routes/docs/performance/dimension_arrays_processed/+page.ts
@@ -14,6 +14,7 @@ export async function load({ fetch }) {
       description:
         'Individual arrays per dimension, similar to uplot.  Pre-processed before passed to LineChart',
       pageSource,
+      supportedContexts: ['svg', 'canvas'],
       hideTableOfContents: true,
     },
   };
diff --git a/packages/layerchart/src/routes/docs/performance/series_arrays/+page.svelte b/packages/layerchart/src/routes/docs/performance/series_arrays/+page.svelte
index ceefd2d9e..27eff73da 100644
--- a/packages/layerchart/src/routes/docs/performance/series_arrays/+page.svelte
+++ b/packages/layerchart/src/routes/docs/performance/series_arrays/+page.svelte
@@ -5,12 +5,13 @@
   import { format } from '@layerstack/utils';
 
   import Preview from '$lib/docs/Preview.svelte';
+  import { shared } from '../../shared.svelte.js';
 
   const { data } = $props();
 
   let example = $state<'single'>('single');
 
-  let renderContext = $state<'svg' | 'canvas'>('svg');
+  let renderContext = $derived(shared.renderContext as 'svg' | 'canvas');
   let motion = $state(true);
   let show = $state(true);
 
@@ -26,13 +27,6 @@
 
 <div class="grid gap-4">
   <div class="flex gap-3">
-    <Field label="Render context">
-      <ToggleGroup bind:value={renderContext} variant="outline">
-        <ToggleOption value="svg">Svg</ToggleOption>
-        <ToggleOption value="canvas">Canvas</ToggleOption>
-      </ToggleGroup>
-    </Field>
-
     <Field label="Motion">
       <ToggleGroup bind:value={motion} variant="outline">
         <ToggleOption value={true}>Yes</ToggleOption>
diff --git a/packages/layerchart/src/routes/docs/performance/series_arrays/+page.ts b/packages/layerchart/src/routes/docs/performance/series_arrays/+page.ts
index 688cf06b8..fbc7ab17b 100644
--- a/packages/layerchart/src/routes/docs/performance/series_arrays/+page.ts
+++ b/packages/layerchart/src/routes/docs/performance/series_arrays/+page.ts
@@ -21,6 +21,7 @@ export async function load({ fetch }) {
     meta: {
       description: 'Array per series, each with `x` / `y` items',
       pageSource,
+      supportedContexts: ['svg', 'canvas'],
       hideTableOfContents: true,
     },
   };
diff --git a/packages/layerchart/src/routes/docs/performance/streaming/+page.svelte b/packages/layerchart/src/routes/docs/performance/streaming/+page.svelte
index 74886cf57..8d6f9c236 100644
--- a/packages/layerchart/src/routes/docs/performance/streaming/+page.svelte
+++ b/packages/layerchart/src/routes/docs/performance/streaming/+page.svelte
@@ -3,8 +3,9 @@
   import { Button, ButtonGroup, Field, TextField, ToggleGroup, ToggleOption } from 'svelte-ux';
   import { format } from '@layerstack/utils';
   import { TimerState } from '@layerstack/svelte-state';
+  import { shared } from '../../shared.svelte.js';
 
-  let renderContext = $state<'svg' | 'canvas'>('canvas');
+  let renderContext = $derived(shared.renderContext as 'svg' | 'canvas');
   let motion = $state(true);
   let show = $state(true);
 
@@ -93,13 +94,6 @@
 
 <div class="grid gap-4">
   <div class="flex gap-3">
-    <Field label="Render context">
-      <ToggleGroup bind:value={renderContext} variant="outline">
-        <ToggleOption value="svg">Svg</ToggleOption>
-        <ToggleOption value="canvas">Canvas</ToggleOption>
-      </ToggleGroup>
-    </Field>
-
     <Field label="Motion">
       <ToggleGroup bind:value={motion} variant="outline">
         <ToggleOption value={true}>Yes</ToggleOption>
diff --git a/packages/layerchart/src/routes/docs/performance/streaming/+page.ts b/packages/layerchart/src/routes/docs/performance/streaming/+page.ts
new file mode 100644
index 000000000..e799c3dde
--- /dev/null
+++ b/packages/layerchart/src/routes/docs/performance/streaming/+page.ts
@@ -0,0 +1,11 @@
+import pageSource from './+page.svelte?raw';
+
+export async function load() {
+  return {
+    meta: {
+      pageSource,
+      supportedContexts: ['svg', 'canvas'],
+      hideTableOfContents: true,
+    },
+  };
+}
diff --git a/packages/layerchart/src/routes/docs/performance/wide_data/+page.svelte b/packages/layerchart/src/routes/docs/performance/wide_data/+page.svelte
index 628320a33..431158386 100644
--- a/packages/layerchart/src/routes/docs/performance/wide_data/+page.svelte
+++ b/packages/layerchart/src/routes/docs/performance/wide_data/+page.svelte
@@ -5,12 +5,13 @@
   import { format } from '@layerstack/utils';
 
   import Preview from '$lib/docs/Preview.svelte';
+  import { shared } from '../../shared.svelte.js';
 
   const { data } = $props();
 
   let example = $state<'single'>('single');
 
-  let renderContext = $state<'svg' | 'canvas'>('svg');
+  let renderContext = $derived(shared.renderContext as 'svg' | 'canvas');
   let motion = $state(true);
   let show = $state(true);
 
@@ -26,13 +27,6 @@
 
 <div class="grid gap-4">
   <div class="flex gap-3">
-    <Field label="Render context">
-      <ToggleGroup bind:value={renderContext} variant="outline">
-        <ToggleOption value="svg">Svg</ToggleOption>
-        <ToggleOption value="canvas">Canvas</ToggleOption>
-      </ToggleGroup>
-    </Field>
-
     <Field label="Motion">
       <ToggleGroup bind:value={motion} variant="outline">
         <ToggleOption value={true}>Yes</ToggleOption>
diff --git a/packages/layerchart/src/routes/docs/performance/wide_data/+page.ts b/packages/layerchart/src/routes/docs/performance/wide_data/+page.ts
index aef8a575e..411936f4e 100644
--- a/packages/layerchart/src/routes/docs/performance/wide_data/+page.ts
+++ b/packages/layerchart/src/routes/docs/performance/wide_data/+page.ts
@@ -14,6 +14,7 @@ export async function load({ fetch }) {
     meta: {
       description: 'Wide data (property per series)',
       pageSource,
+      supportedContexts: ['svg', 'canvas'],
       hideTableOfContents: true,
     },
   };
diff --git a/packages/layerchart/src/routes/docs/performance/wide_data_processed/+page.svelte b/packages/layerchart/src/routes/docs/performance/wide_data_processed/+page.svelte
index 224d9b604..145f3cd71 100644
--- a/packages/layerchart/src/routes/docs/performance/wide_data_processed/+page.svelte
+++ b/packages/layerchart/src/routes/docs/performance/wide_data_processed/+page.svelte
@@ -5,12 +5,13 @@
   import { format } from '@layerstack/utils';
 
   import Preview from '$lib/docs/Preview.svelte';
+  import { shared } from '../../shared.svelte.js';
 
   const { data } = $props();
 
   let example = $state<'single'>('single');
 
-  let renderContext = $state<'svg' | 'canvas'>('svg');
+  let renderContext = $derived(shared.renderContext as 'svg' | 'canvas');
   let motion = $state(true);
   let show = $state(true);
 
@@ -33,13 +34,6 @@
 
 <div class="grid gap-4">
   <div class="flex gap-3">
-    <Field label="Render context">
-      <ToggleGroup bind:value={renderContext} variant="outline">
-        <ToggleOption value="svg">Svg</ToggleOption>
-        <ToggleOption value="canvas">Canvas</ToggleOption>
-      </ToggleGroup>
-    </Field>
-
     <Field label="Motion">
       <ToggleGroup bind:value={motion} variant="outline">
         <ToggleOption value={true}>Yes</ToggleOption>
diff --git a/packages/layerchart/src/routes/docs/performance/wide_data_processed/+page.ts b/packages/layerchart/src/routes/docs/performance/wide_data_processed/+page.ts
index d218798f4..daa8c576a 100644
--- a/packages/layerchart/src/routes/docs/performance/wide_data_processed/+page.ts
+++ b/packages/layerchart/src/routes/docs/performance/wide_data_processed/+page.ts
@@ -14,6 +14,7 @@ export async function load({ fetch }) {
     meta: {
       description: 'Wide data (property per series).  Pre-processed before passed to LineChart',
       pageSource,
+      supportedContexts: ['svg', 'canvas'],
       hideTableOfContents: true,
     },
   };
diff --git a/packages/layerchart/src/routes/docs/shared.svelte.ts b/packages/layerchart/src/routes/docs/shared.svelte.ts
new file mode 100644
index 000000000..7d8ea8c81
--- /dev/null
+++ b/packages/layerchart/src/routes/docs/shared.svelte.ts
@@ -0,0 +1,7 @@
+import type { ComponentProps } from 'svelte';
+import { Layer } from 'layerchart';
+
+// Shared state for the docs layout
+export const shared = $state<{ renderContext: ComponentProps<typeof Layer>['type'] }>({
+  renderContext: 'svg',
+});
diff --git a/packages/layerchart/src/routes/docs/tools/GeojsonPreview/+page.svelte b/packages/layerchart/src/routes/docs/tools/GeojsonPreview/+page.svelte
index 3a446e3e6..9a8435ab3 100644
--- a/packages/layerchart/src/routes/docs/tools/GeojsonPreview/+page.svelte
+++ b/packages/layerchart/src/routes/docs/tools/GeojsonPreview/+page.svelte
@@ -15,7 +15,7 @@
   import { schemeCategory10 } from 'd3-scale-chromatic';
   import { color } from 'd3-color';
 
-  import { Canvas, Chart, GeoPath, GeoTile, Svg, Tooltip } from 'layerchart';
+  import { Chart, GeoPath, GeoTile, Layer, Tooltip } from 'layerchart';
   import TransformControls from '$lib/components/TransformControls.svelte';
   import {
     EmptyMessage,
@@ -28,6 +28,7 @@
 
   import TilesetField from '$lib/docs/TilesetField.svelte';
   import Json from '$lib/docs/Json.svelte';
+  import { shared } from '../../shared.svelte.js';
 
   let geojsonStr = $state('');
   let geojson = $state<GeoJSON.FeatureCollection>();
@@ -99,18 +100,18 @@
       >
         {#snippet children({ context })}
           {#if projection === geoMercator && serviceUrl}
-            <Svg>
+            <Layer type={shared.renderContext}>
               <!-- technique: https://observablehq.com/@d3/seamless-zoomable-map-tiles -->
               <GeoTile url={serviceUrl} zoomDelta={-100} />
               <GeoTile url={serviceUrl} zoomDelta={-4} />
               <GeoTile url={serviceUrl} zoomDelta={-1} />
               <GeoTile url={serviceUrl} {zoomDelta} />
-            </Svg>
+            </Layer>
           {/if}
 
           <TransformControls />
 
-          <Canvas>
+          <Layer type={shared.renderContext}>
             {#if geojson?.features}
               {#each geojson?.features as feature}
                 <GeoPath
@@ -121,7 +122,7 @@
                 />
               {/each}
             {/if}
-          </Canvas>
+          </Layer>
 
           <Tooltip.Root>
             {#snippet children({ data })}
diff --git a/packages/layerchart/src/routes/docs/tools/GeojsonPreview/+page.ts b/packages/layerchart/src/routes/docs/tools/GeojsonPreview/+page.ts
index 6691e1376..a9ab2775f 100644
--- a/packages/layerchart/src/routes/docs/tools/GeojsonPreview/+page.ts
+++ b/packages/layerchart/src/routes/docs/tools/GeojsonPreview/+page.ts
@@ -4,6 +4,7 @@ export async function load({ url }) {
   return {
     meta: {
       pageSource,
+      supportedContexts: ['svg', 'canvas'],
       hideTableOfContents: true,
     },
   };
diff --git a/packages/layerchart/src/routes/docs/tools/ShapefilePreview/+page.svelte b/packages/layerchart/src/routes/docs/tools/ShapefilePreview/+page.svelte
index 3a639b93a..7084b90de 100644
--- a/packages/layerchart/src/routes/docs/tools/ShapefilePreview/+page.svelte
+++ b/packages/layerchart/src/routes/docs/tools/ShapefilePreview/+page.svelte
@@ -11,7 +11,7 @@
     type GeoProjection,
   } from 'd3-geo';
 
-  import { Canvas, Chart, GeoPath } from 'layerchart';
+  import { Chart, GeoPath, Layer } from 'layerchart';
   import {
     Button,
     ButtonGroup,
@@ -26,7 +26,7 @@
   import { mdiChevronDown } from '@mdi/js';
 
   import { goto } from '$app/navigation';
-
+  import { shared } from '../../shared.svelte.js';
   let { data } = $props();
 
   const geojson = $derived(data.geojson);
@@ -106,9 +106,9 @@
           fitGeojson: geojson,
         }}
       >
-        <Canvas>
+        <Layer type={shared.renderContext}>
           <GeoPath {geojson} fill="white" />
-        </Canvas>
+        </Layer>
       </Chart>
     {:else}
       <EmptyMessage class="h-full">Please specify a file</EmptyMessage>
diff --git a/packages/layerchart/src/routes/docs/tools/ShapefilePreview/+page.ts b/packages/layerchart/src/routes/docs/tools/ShapefilePreview/+page.ts
index 45e0e6273..f46cefe3b 100644
--- a/packages/layerchart/src/routes/docs/tools/ShapefilePreview/+page.ts
+++ b/packages/layerchart/src/routes/docs/tools/ShapefilePreview/+page.ts
@@ -8,6 +8,7 @@ export async function load({ url }) {
     geojson: file ? await read(file) : null,
     meta: {
       pageSource,
+      supportedContexts: ['svg', 'canvas'],
       hideTableOfContents: true,
     },
   };
diff --git a/packages/layerchart/src/routes/docs/tools/TopojsonPreview/+page.svelte b/packages/layerchart/src/routes/docs/tools/TopojsonPreview/+page.svelte
index fc918037c..0fdc9e90d 100644
--- a/packages/layerchart/src/routes/docs/tools/TopojsonPreview/+page.svelte
+++ b/packages/layerchart/src/routes/docs/tools/TopojsonPreview/+page.svelte
@@ -17,7 +17,7 @@
   import { feature } from 'topojson-client';
   import type { GeometryCollection, Topology } from 'topojson-specification';
 
-  import { Canvas, Chart, GeoPath, GeoTile, Svg, Tooltip } from 'layerchart';
+  import { Chart, GeoPath, GeoTile, Layer, Tooltip } from 'layerchart';
   import TransformControls from '$lib/components/TransformControls.svelte';
   import {
     CopyButton,
@@ -31,6 +31,7 @@
 
   import TilesetField from '$lib/docs/TilesetField.svelte';
   import Json from '$lib/docs/Json.svelte';
+  import { shared } from '../../shared.svelte.js';
 
   let topojsonStr = $state('');
   let topojson = $state<Topology<Record<string, GeometryCollection<{ name: string }>>>>();
@@ -107,18 +108,18 @@
       >
         {#snippet children({ context })}
           {#if projection === geoMercator && serviceUrl}
-            <Svg>
+            <Layer type={shared.renderContext}>
               <!-- technique: https://observablehq.com/@d3/seamless-zoomable-map-tiles -->
               <GeoTile url={serviceUrl} zoomDelta={-100} />
               <GeoTile url={serviceUrl} zoomDelta={-4} />
               <GeoTile url={serviceUrl} zoomDelta={-1} />
               <GeoTile url={serviceUrl} {zoomDelta} />
-            </Svg>
+            </Layer>
           {/if}
 
           <TransformControls />
 
-          <Canvas>
+          <Layer type={shared.renderContext}>
             {#if geojson?.features}
               {#each geojson.features as feature}
                 <GeoPath
@@ -129,7 +130,7 @@
                 />
               {/each}
             {/if}
-          </Canvas>
+          </Layer>
 
           <Tooltip.Root>
             {#snippet children({ data })}
diff --git a/packages/layerchart/src/routes/docs/tools/TopojsonPreview/+page.ts b/packages/layerchart/src/routes/docs/tools/TopojsonPreview/+page.ts
index 6691e1376..a9ab2775f 100644
--- a/packages/layerchart/src/routes/docs/tools/TopojsonPreview/+page.ts
+++ b/packages/layerchart/src/routes/docs/tools/TopojsonPreview/+page.ts
@@ -4,6 +4,7 @@ export async function load({ url }) {
   return {
     meta: {
       pageSource,
+      supportedContexts: ['svg', 'canvas'],
       hideTableOfContents: true,
     },
   };
diff --git a/packages/layerchart/src/routes/getting-started/+page.svelte b/packages/layerchart/src/routes/getting-started/+page.svelte
index 538b9d72b..1327d89fe 100644
--- a/packages/layerchart/src/routes/getting-started/+page.svelte
+++ b/packages/layerchart/src/routes/getting-started/+page.svelte
@@ -101,7 +101,7 @@
   <Code
     source={'<' +
       `script>
-  import { Chart, Svg, Axis, Bars } from 'layerchart';
+  import { Chart, Layer, Axis, Bars } from 'layerchart';
 </script>`}
     language="svelte"
   />