diff --git a/docs/src/content/components/Text.md b/docs/src/content/components/Text.md
index 8077a1008..f6f814aa6 100644
--- a/docs/src/content/components/Text.md
+++ b/docs/src/content/components/Text.md
@@ -34,3 +34,11 @@ Note you can change the rendering layer with the toggle at the top of the page.
 The text will smartly orientate based on the direction (clockwise / counter-clockwise) and location (top, bottom, left, right) of the arc
 
 :example{ component="Arc" name="label-direction" }
+
+:::note
+Only supported in `Svg` layers.
+:::
+
+<!-- ### Word wrap with explicit `\n`
+
+:example{ name="word-wrap-with-explicit-n" } -->
diff --git a/docs/src/content/utils/cls.md b/docs/src/content/utils/cls.md
index 77084a6d4..d11edff91 100644
--- a/docs/src/content/utils/cls.md
+++ b/docs/src/content/utils/cls.md
@@ -11,15 +11,26 @@ related:
   ]
 ---
 
+## Usage
+
+### [clsx()](https://github.com/lukeed/clsx)
+
+```svelte live
 <script lang="ts">
-  import Example from '$lib/components/Example.svelte';
-  import { cls } from '@layerstack/tailwind';
+	import { cls } from '@layerstack/tailwind';
 </script>
 
-## Usage
+<div class={cls('text-center p-2 bg-error-500', true && 'bg-success-500')}>
+	{`class={cls('bg-error-500', true && 'bg-success-500')}`}<br />becomes<br />class="bg-success-500"
+</div>
+```
 
-### cls()
+### [twMerge()](https://github.com/dcastil/tailwind-merge)
+
+```svelte live
+<script lang="ts">
+	import { cls } from '@layerstack/tailwind';
+</script>
 
-<div class={cls('grid place-items-center rounded p-2 bg-error-500', true && 'bg-success-500')}>clsx allows for conditional class additions<br />tailwind-merge dedups overlapping classes</div>
-<br />
-<Example name="cls" resize={false} showcode />
+<div class={cls('text-center p-2 bg-red-500 bg-info-500')}>last class wins with tailwind-merge</div>
+```
\ No newline at end of file
diff --git a/docs/src/content/utils/format.md b/docs/src/content/utils/format.md
index 622278c0d..e07677ef3 100644
--- a/docs/src/content/utils/format.md
+++ b/docs/src/content/utils/format.md
@@ -9,14 +9,26 @@ related:
   ]
 ---
 
-<script lang="ts">
-  import Example from '$lib/components/Example.svelte';
-</script>
-
 ## Usage
 
 ### format()
 
-> <a href="https://www.layerstack.dev/docs/utils/format" target="_blank">Full API</a>
+:::note
+[Full Layerstack API](https://www.layerstack.dev/docs/utils/format)
+:::
+
+```svelte live
+<script lang="ts">
+	import { format } from '@layerstack/utils';
+</script>
 
-<Example name="format" resize={false} showcode />
+{format(1234.56, 'integer')}<br />
+{format(1234.56, 'decimal')}<br />
+{format(1234.56, 'currency')}<br />
+{format(1234.56, 'currency', { currency: 'EUR' })}<br />
+{format(0.5678, 'percent')}<br />
+{format(0.5678, 'percentRound')}<br />
+{format(1_234_567, 'metric')}<br />
+{format(new Date(), 'day', { variant: 'short' })}<br />
+{format(new Date(), 'custom', { custom: 'eee, MMMM do' })}<br />
+```
diff --git a/docs/src/content/utils/pivot.md b/docs/src/content/utils/pivot.md
index d55789cb4..84c3a42ff 100644
--- a/docs/src/content/utils/pivot.md
+++ b/docs/src/content/utils/pivot.md
@@ -5,16 +5,12 @@ layers: []
 related: []
 ---
 
-<script lang="ts">
-  import Example from '$lib/components/Example.svelte';
-</script>
-
 ## Usage
 
 ### pivotLonger (columns to rows)
 
-<Example name="pivot-longer" noResize />
+:example{name="pivot-longer" noResize }
 
 ### pivotWider (rows to columns)
 
-<Example name="pivot-wider" noResize />
+:example{name="pivot-wider" noResize }
\ No newline at end of file
diff --git a/docs/src/content/utils/string.md b/docs/src/content/utils/string.md
index 9c9b1446d..0b0b335ca 100644
--- a/docs/src/content/utils/string.md
+++ b/docs/src/content/utils/string.md
@@ -12,23 +12,35 @@ related:
   ]
 ---
 
-<script lang="ts">
-  import Example from '$lib/components/Example.svelte';
- 	import { truncate, toTitleCase } from '@layerstack/utils';
-</script>
-
 ## Usage
 
+:::note
+See [LayerStack](https://www.layerstack.dev/docs/utils/string) for full API documentation.
+:::
+
 ### truncate()
 
-> <a href="https://www.layerstack.dev/docs/utils/string" target="_blank">Full API</a>
+```svelte live
+<script lang="ts">
+	import { truncate } from '@layerstack/utils';
+
+	const str = 'This is a really long string of text.';
+</script>
+
+{truncate(str, 21)}
+```
 
-{truncate("This is a really long string of text.", 21)}
+:::note
+Truncation is also built into the [Text](/docs/components/Text) component via the `truncate` prop.
 
-<Example component="string" name="truncate" resize={false} showcode />
+:::
 
 ### toTitleCase()
 
-{toTitleCase("string of text")}
+```svelte live
+<script lang="ts">
+	import { toTitleCase } from '@layerstack/utils';
+</script>
 
-<Example component="string" name="toTitleCase" resize={false} showcode />
+{toTitleCase('string of text')}
+```
\ No newline at end of file
diff --git a/docs/src/examples/utils/cls/cls.svelte b/docs/src/examples/utils/cls/cls.svelte
deleted file mode 100644
index d73379367..000000000
--- a/docs/src/examples/utils/cls/cls.svelte
+++ /dev/null
@@ -1,14 +0,0 @@
-<script lang="ts">
-	import Code from '$lib/components/Code.svelte';
-
-	const clsSource = [
-		'<script lang="ts">',
-		"  import { cls } from '@layerstack/tailwind';",
-		'</' + 'script>',
-		'',
-		"<div class={cls('bg-error-500', true && 'bg-success-500')}>...</div>",
-		'// becomes <div class="bg-success-500"></div>'
-	].join('\n');
-</script>
-
-<Code source={clsSource} language="js" copyButton={false} />
diff --git a/docs/src/examples/utils/format/format.svelte b/docs/src/examples/utils/format/format.svelte
deleted file mode 100644
index 0ab885ae2..000000000
--- a/docs/src/examples/utils/format/format.svelte
+++ /dev/null
@@ -1,31 +0,0 @@
-<script lang="ts">
-	import { format } from '@layerstack/utils';
-
-	import Code from '$lib/components/Code.svelte';
-
-	const fmtSource =
-		` <script lang="ts">
-  import { format } from '@layerstack/utils';
-
-  format(1234.56, "integer");
-  format(1234.56, "decimal");
-  format(1234.56, "currency");
-  format(0.5678, "percent");
-  format(0.5678, "percentRound");
-  format(1_234_567, "metric");
-  format(new Date(), "day", { variant: "short" });
-  format(new Date(), "custom", { custom: "eee, MMMM do" });
-</` +
-		`script>
-`;
-</script>
-
-{format(1234.56, 'integer')}<br />
-{format(1234.56, 'decimal')}<br />
-{format(1234.56, 'currency')}<br />
-{format(0.5678, 'percent')}<br />
-{format(0.5678, 'percentRound')}<br />
-{format(1_234_567, 'metric')}<br />
-{format(new Date(), 'day', { variant: 'short' })}<br />
-{format(new Date(), 'custom', { custom: 'eee, MMMM do' })}<br />
-<Code source={fmtSource} language="js" copyButton={false} lang="ts" />
diff --git a/docs/src/examples/utils/string/toTitleCase.svelte b/docs/src/examples/utils/string/toTitleCase.svelte
deleted file mode 100644
index ede0708c5..000000000
--- a/docs/src/examples/utils/string/toTitleCase.svelte
+++ /dev/null
@@ -1,15 +0,0 @@
-<script lang="ts">
-	import Code from '$lib/components/Code.svelte';
-
-	const source =
-		` <script lang="ts">
-  import { toTitleCase } from '@layerstack/utils';
-
-	const str = 'string of text';
-	</` +
-		`script>
-
-	{toTitleCase(str)}`;
-</script>
-
-<Code {source} language="js" copyButton={false} lang="ts" />
diff --git a/docs/src/examples/utils/string/truncate.svelte b/docs/src/examples/utils/string/truncate.svelte
deleted file mode 100644
index 357e4a9a5..000000000
--- a/docs/src/examples/utils/string/truncate.svelte
+++ /dev/null
@@ -1,17 +0,0 @@
-<script lang="ts">
-	import Code from '$lib/components/Code.svelte';
-	import { truncate } from '@layerstack/utils';
-
-	const source =
-		`<script lang='ts'>
-		import { truncate } from '@layerstack/utils';
-
-		const str = 'This is a really long string of text.';
-	</` +
-		`script>
-	<div>{truncate(str, 21)}</div>`;
-
-	const str = 'This is a really long string of text.';
-</script>
-
-<Code {source} language="js" copyButton={false} lang="ts" />