From fc0b95fc75942c1b9e334a9b918e992a28d834e1 Mon Sep 17 00:00:00 2001
From: mohith2883 <88938356+mohith2883@users.noreply.github.com>
Date: Wed, 1 Oct 2025 19:18:15 +0530
Subject: [PATCH 1/9] docs: migrate guides from v1 to v2 Starlight

---
 .../docs/guides/background-removal.mdx        |  75 ++++++
 .../docs/guides/image-optimization.mdx        |  73 ++++++
 .../content/docs/guides/image-overlays.mdx    | 121 ++++++++++
 .../content/docs/guides/image-underlays.mdx   |  77 +++++++
 .../src/content/docs/guides/placeholders.mdx  | 160 +++++++++++++
 .../content/docs/guides/responsive-images.mdx |  88 +++++++
 .../content/docs/guides/social-media-card.mdx | 216 ++++++++++++++++++
 .../src/content/docs/guides/text-overlays.mdx | 131 +++++++++++
 .../guides/uploading-images-and-videos.mdx    |  54 +++++
 vercel.json                                   |  40 ----
 10 files changed, 995 insertions(+), 40 deletions(-)
 create mode 100644 packages/docs/src/content/docs/guides/background-removal.mdx
 create mode 100644 packages/docs/src/content/docs/guides/image-optimization.mdx
 create mode 100644 packages/docs/src/content/docs/guides/image-overlays.mdx
 create mode 100644 packages/docs/src/content/docs/guides/image-underlays.mdx
 create mode 100644 packages/docs/src/content/docs/guides/placeholders.mdx
 create mode 100644 packages/docs/src/content/docs/guides/responsive-images.mdx
 create mode 100644 packages/docs/src/content/docs/guides/social-media-card.mdx
 create mode 100644 packages/docs/src/content/docs/guides/text-overlays.mdx
 create mode 100644 packages/docs/src/content/docs/guides/uploading-images-and-videos.mdx

diff --git a/packages/docs/src/content/docs/guides/background-removal.mdx b/packages/docs/src/content/docs/guides/background-removal.mdx
new file mode 100644
index 00000000..0651f44b
--- /dev/null
+++ b/packages/docs/src/content/docs/guides/background-removal.mdx
@@ -0,0 +1,75 @@
+---
+title: Guides/Background Removal
+order: 1
+---
+
+<script>
+
+import Callout from '$lib/components/Callout.svelte'
+import { Tabs, Tab} from '$lib/components/Tabs'
+import { CldOgImage, CldImage } from 'svelte-cloudinary'
+
+</script>
+
+# Removing a Background from an Image
+
+The CldImage component allows you to easily remove backgrounds from images using the `removeBackground` prop.
+
+<Callout emoji={false}>
+  Removing backgrounds require enabling the <a href="https://cloudinary.com/documentation/cloudinary_ai_background_removal_addon">Cloudinary AI Background Removal Add-On</a> which includes a free tier for getting started.
+</Callout>
+
+## Example
+
+<div style="max-width: 500px; margin: 0 auto">
+    <CldImage
+      width={960}
+      height={600}
+      src={`images/turtle`}
+      sizes="(max-width: 480px) 100vw, 50vw"
+      removeBackground
+      alt=""
+    />
+</div>
+
+<Tabs>
+  <Tab type="code" open title="CldImage">
+
+```svelte
+<script>
+	import { CldImage } from 'svelte-cloudinary';
+</script>
+
+<CldImage
+	width="960"
+	height="600"
+	src="images/turtle"
+	sizes="100vw"
+	removeBackground
+	alt="Turtle"
+/>
+```
+
+  </Tab>
+  <Tab title="getCldImageUrl">
+
+```html
+<script>
+	import { getCldImageUrl } from 'svelte-cloudinary';
+
+	const cldUrl = getCldImageUrl({
+		width: 960,
+		height: 600,
+		src: 'images/turtle',
+		removeBackground: true
+	});
+</script>
+```
+
+  </Tab>
+</Tabs>
+
+## Learn More
+
+- [CldImage](/cldimage/usage)
+- [getCldImageUrl](/getcldimageurl/usage)
\ No newline at end of file
diff --git a/packages/docs/src/content/docs/guides/image-optimization.mdx b/packages/docs/src/content/docs/guides/image-optimization.mdx
new file mode 100644
index 00000000..e8c341e8
--- /dev/null
+++ b/packages/docs/src/content/docs/guides/image-optimization.mdx
@@ -0,0 +1,73 @@
+---
+title: Guides/Image Optimization
+order: 2
+---
+
+<script>
+
+import Callout from '$lib/components/Callout.svelte'
+import Video from '$lib/components/Video.svelte'
+import { Tabs, Tab} from '$lib/components/Tabs'
+import { CldOgImage, CldImage } from 'svelte-cloudinary'
+
+</script>
+
+# Optimizing Images in Svelte/SvelteKit
+
+Automatically optimize images using the CldImage component. By default, CldImage opts you in to automatic optimization including delivering the most optimal format for the browser (WebP, AVIF).
+
+You can further optimize delivery by using [responsive sizing](/guides/responsive-images) by using the `sizes` prop.
+
+## Example
+
+<div style="max-width: 500px; margin: 0 auto">
+  <CldImage
+    width="960"
+    height="600"
+    src={`images/turtle`}
+    sizes="100vw"
+    alt="Turtle"
+  />
+</div>
+
+<Tabs tabs={['CldImage', 'getCldImageUrl']}>
+<Tab type="code" open title="CldImage">
+
+```svelte
+<script>
+	import { CldImage } from 'svelte-cloudinary';
+</script>
+
+<CldImage width="960" height="600" src="images/turtle" sizes="100vw" alt="Turtle" />
+```
+
+  </Tab>
+  <Tab type="code" title="getCldImageUrl">
+
+```svelte
+<script>
+	import { getCldImageUrl } from 'svelte-cloudinary';
+
+	getCldImageUrl({
+		width: 960,
+		height: 600,
+		src: 'images/turtle'
+	});
+</script>
+```
+
+  </Tab>
+</Tabs>
+
+## Watch & Learn
+
+<Video
+  title="Optimize Images, Responsive Sizing, & AI Cropping in Svelte with Svelte Cloudinary"
+  url="https://www.youtube.com/watch?v=Vr3H3XREkbw"
+/>
+
+## Learn More
+
+- [Responsive Images](/guides/responsive-images)
+- [CldImage](/cldimage/usage)
+- [getCldImageUrl](/getcldimageurl/usage)
\ No newline at end of file
diff --git a/packages/docs/src/content/docs/guides/image-overlays.mdx b/packages/docs/src/content/docs/guides/image-overlays.mdx
new file mode 100644
index 00000000..2aaf0d51
--- /dev/null
+++ b/packages/docs/src/content/docs/guides/image-overlays.mdx
@@ -0,0 +1,121 @@
+---
+title: Guides/Image Overlays
+order: 3
+---
+
+<script>
+
+import Callout from '$lib/components/Callout.svelte'
+import Video from '$lib/components/Video.svelte'
+import { Tabs, Tab} from '$lib/components/Tabs'
+import { CldOgImage, CldImage } from 'svelte-cloudinary'
+
+</script>
+
+# Overlaying Images
+
+You can add images on top of other images by using image-based overlays.
+
+## Example
+
+<div style="max-width: 500px; margin: 0 auto">
+  <CldImage
+    width="960"
+    height="600"
+    src={`images/turtle`}
+    sizes="100vw"
+    overlays={[{
+      publicId: 'images/earth',
+      position: {
+        x: 50,
+        y: 50,
+        gravity: 'north_west',
+      },
+      effects: [
+        {
+          crop: 'fill',
+          gravity: 'auto',
+          width: 500,
+          height: 500
+        }
+      ]
+    }]}
+    alt="Turtle with earth"
+  />
+</div>
+
+<Tabs tabs={['CldImage', 'getCldImageUrl']}>
+<Tab type="code" open title="CldImage">
+
+```svelte
+<script>
+	import { CldImage } from 'svelte-cloudinary';
+</script>
+
+<CldImage
+	width="960"
+	height="600"
+	src="images/turtle"
+	sizes="100vw"
+	overlays={[
+		{
+			publicId: 'images/earth',
+			position: {
+				x: 50,
+				y: 50,
+				gravity: 'north_west'
+			},
+			effects: [
+				{
+					crop: 'fill',
+					gravity: 'auto',
+					width: 500,
+					height: 500
+				}
+			]
+		}
+	]}
+	alt="Turtle with earth"
+/>
+```
+
+  </Tab>
+  <Tab type="code" title="getCldImageUrl">
+
+```svelte
+<script>
+	import { getCldImageUrl } from 'svelte-cloudinary';
+
+	const cldUrl = getCldImageUrl({
+		width: 960,
+		height: 600,
+		src: 'images/turtle',
+		overlays: [
+			{
+				publicId: 'images/earth',
+				position: {
+					x: 50,
+					y: 50,
+					gravity: 'north_west'
+				},
+				effects: [
+					{
+						crop: 'fill',
+						gravity: 'auto',
+						width: 500,
+						height: 500
+					}
+				]
+			}
+		]
+	});
+</script>
+```
+
+  </Tab>
+</Tabs>
+
+## Learn More
+
+- [CldImage](/cldimage/usage)
+- [getCldImageUrl](/getcldimageurl/usage)
\ No newline at end of file
diff --git a/packages/docs/src/content/docs/guides/image-underlays.mdx b/packages/docs/src/content/docs/guides/image-underlays.mdx
new file mode 100644
index 00000000..4775362a
--- /dev/null
+++ b/packages/docs/src/content/docs/guides/image-underlays.mdx
@@ -0,0 +1,77 @@
+---
+title: Guides/Image Underlays
+order: 4
+---
+
+<script>
+
+import Callout from '$lib/components/Callout.svelte'
+import Video from '$lib/components/Video.svelte'
+import { Tabs, Tab} from '$lib/components/Tabs'
+import { CldOgImage, CldImage } from 'svelte-cloudinary'
+
+</script>
+
+# Adding Layers Under Images
+
+Underlays function very similar to overlays in terms of options, however they **do not support text**.
+
+See the examples above under Overlays to learn more about the available configurations.
+
+## Example
+
+<div style="max-width: 500px; margin: 0 auto">
+  <CldImage
+    width="960"
+    height="600"
+    src={`images/turtle`}
+    sizes="100vw"
+    removeBackground
+    underlay="images/galaxy"
+    alt="Turtle swimming in a galaxy"
+  />
+</div>
+
+<Tabs tabs={['CldImage', 'getCldImageUrl']}>
+<Tab type="code" open title="CldImage">
+
+```svelte
+<script>
+	import { CldImage } from 'svelte-cloudinary';
+</script>
+
+<CldImage
+	width="960"
+	height="600"
+	src="images/turtle"
+	sizes="100vw"
+	removeBackground
+	underlay="images/galaxy"
+	alt="Turtle swimming in a galaxy"
+/>
+```
+
+  </Tab>
+  <Tab type="code" title="getCldImageUrl">
+
+```svelte
+<script>
+	import { getCldImageUrl } from 'svelte-cloudinary';
+
+	const cldUrl = getCldImageUrl({
+		width: 960,
+		height: 600,
+		src: 'images/turtle',
+		removeBackground: true,
+		underlay: 'images/galaxy'
+	});
+</script>
+```
+
+  </Tab>
+</Tabs>
+
+## Learn More
+
+- [CldImage](/cldimage/usage)
+- [getCldImageUrl](/getcldimageurl/usage)
\ No newline at end of file
diff --git a/packages/docs/src/content/docs/guides/placeholders.mdx b/packages/docs/src/content/docs/guides/placeholders.mdx
new file mode 100644
index 00000000..4b9ea770
--- /dev/null
+++ b/packages/docs/src/content/docs/guides/placeholders.mdx
@@ -0,0 +1,160 @@
+---
+title: Guides/Placeholders
+---
+
+<script>
+
+import Callout from '$lib/components/Callout.svelte'
+import Video from '$lib/components/Video.svelte'
+import { Tabs, Tab} from '$lib/components/Tabs'
+import HeaderImage  from '$lib/components/HeaderImage.svelte'
+import CodeBlock from '$lib/components/CodeBlock.svelte'
+import { CldOgImage, CldImage } from 'svelte-cloudinary'
+
+</script>
+
+# Display Placeholder While Image is Loading
+
+CldImage wraps the Unpic Image component, thus giving us access to the placeholder API
+which can display an SVG image while the image itself is loading.
+
+This helps for providing a great user experience, rather than an empty space, to help
+let the visitor know that image is loading.
+
+To do this, we have several options:
+
+- `placeholder="blur"` coupled with a `blurDataURL`
+- `placeholder="..."` with the contents being a data URL
+
+## Blurred Images
+
+To achieve a blurred image effect, we can first convert our Cloudinary image to a Data URL
+then pass it in to our CldImage component.
+
+<HeaderImage>
+  <CldImage
+    width="800"
+    height="600"
+    crop="fill"
+    src={`images/mountain`}
+    sizes="100w"
+    placeholder="blur"
+    blurDataURL="data:image/jpeg;base64,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"
+    alt="Mountains"
+  />
+</HeaderImage>
+
+    Inside of the SvelteKit app, we can utilize server side code to generate a data URL from our image.
+
+<CodeBlock>
+
+```js
+
+import { getCldImageUrl } from 'svelte-cloudinary';
+
+export const load = () => {
+  const imageUrl = getCldImageUrl({
+    src: '<Your Public ID>',
+    width: 100, // Resize the original file to a smaller size
+  });
+  const response = await fetch(imageUrl);
+  const arrayBuffer = await response.arrayBuffer();
+  const buffer = Buffer.from(arrayBuffer);
+  const base64 = buffer.toString("base64");
+  const dataUrl = `data:${response.type};base64,${base64}`;
+  return {
+     dataUrl
+  }
+}
+```
+
+</CodeBlock>
+
+    Then when rendering CldImage, utilize the `dataUrl` using `placeholder` and `blurDataURL`:
+
+```svelte
+<script>
+	import { CldImage } from 'svelte-cloudinary';
+	export let data;
+</script>
+
+<CldImage
+	src="<Your Public ID>"
+	width="600"
+	height="400"
+	alt="Decriptive text"
+	placeholder="blur"
+	blurDataURL={data.dataUrl}
+/>
+```
+
+## Shimmer
+
+In a similar fashion, we can create a shimmer effect when
+our images are loading.
+
+<HeaderImage>
+  <CldImage
+    width="800"
+    height="600"
+    crop="fill"
+    src={`images/mountain`}
+    sizes="100w"
+    placeholder="data:image/svg+xml;base64,CiAgICA8c3ZnIHdpZHRoPSI2MDAiIGhlaWdodD0iNDAwIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgICA8ZGVmcz4KICAgICAgICA8bGluZWFyR3JhZGllbnQgaWQ9ImciPgogICAgICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iIzMzMyIgb2Zmc2V0PSIyMCUiIC8+CiAgICAgICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjMjIyIiBvZmZzZXQ9IjUwJSIgLz4KICAgICAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiMzMzMiIG9mZnNldD0iNzAlIiAvPgogICAgICAgIDwvbGluZWFyR3JhZGllbnQ+CiAgICAgIDwvZGVmcz4KICAgICAgPHJlY3Qgd2lkdGg9IjYwMCIgaGVpZ2h0PSI0MDAiIGZpbGw9IiMzMzMiIC8+CiAgICAgIDxyZWN0IGlkPSJyIiB3aWR0aD0iNjAwIiBoZWlnaHQ9IjQwMCIgZmlsbD0idXJsKCNnKSIgLz4KICAgICAgPGFuaW1hdGUgeGxpbms6aHJlZj0iI3IiIGF0dHJpYnV0ZU5hbWU9IngiIGZyb209Ii02MDAiIHRvPSI2MDAiIGR1cj0iMXMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAgLz4KICAgIDwvc3ZnPg=="
+    alt="Mountains"
+  />
+</HeaderImage>
+
+Inside of the SvelteKit app you can use a server side code `+page.server.js` to generate a data URL from our image.
+
+<CodeBlock>
+
+```js
+export const load = () => {
+	const shimmer = (w: number, h: number) => `
+    <svg width="${w}" height="${h}" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+      <defs>
+        <linearGradient id="g">
+          <stop stop-color="#333" offset="20%" />
+          <stop stop-color="#222" offset="50%" />
+          <stop stop-color="#333" offset="70%" />
+        </linearGradient>
+      </defs>
+      <rect width="${w}" height="${h}" fill="#333" />
+      <rect id="r" width="${w}" height="${h}" fill="url(#g)" />
+      <animate xlink:href="#r" attributeName="x" from="-${w}" to="${w}" dur="1s" repeatCount="indefinite"  />
+    </svg>`;
+
+	const toBase64 = (str: string) =>
+		typeof window === 'undefined' ? Buffer.from(str).toString('base64') : window.btoa(str);
+
+	const dataUrl = `data:image/svg+xml;base64,${toBase64(shimmer(600, 400))}`;
+	return {
+		dataUrl
+	};
+};
+```
+
+</CodeBlock>
+
+    Then when rendering CldImage, utilize the `dataUrl` using `placeholder`:
+
+```svelte
+<script>
+	import { CldImage } from 'svelte-cloudinary';
+	export let data;
+</script>
+
+<CldImage
+	src="<Your Public ID>"
+	width="600"
+	height="400"
+	alt="Decriptive text"
+	placeholder={data.dataUrl}
+/>
+```
+
+## Learn More
+
+- [CldImage](/cldimage/usage)
+- [getCldImageUrl](/getcldimageurl/usage)
\ No newline at end of file
diff --git a/packages/docs/src/content/docs/guides/responsive-images.mdx b/packages/docs/src/content/docs/guides/responsive-images.mdx
new file mode 100644
index 00000000..0692d9da
--- /dev/null
+++ b/packages/docs/src/content/docs/guides/responsive-images.mdx
@@ -0,0 +1,88 @@
+---
+title: Guides/Responsive Images
+---
+
+<script>
+
+import Callout from '$lib/components/Callout.svelte'
+import Video from '$lib/components/Video.svelte'
+import { Tabs, Tab} from '$lib/components/Tabs'
+import HeaderImage  from '$lib/components/HeaderImage.svelte'
+import CodeBlock from '$lib/components/CodeBlock.svelte'
+import { CldOgImage, CldImage } from 'svelte-cloudinary'
+
+</script>
+
+# Responsive Images
+
+The [CldImage](/cldimage/usage) component takes advantage of responsive images generated using the [Unpic component](https://unpic.pics/img/svelte/).
+
+Using the `sizes` prop, you can configure exactly the sizes you need for your application:
+
+```svelte
+<script>
+  import { CldImage } from 'svelte-cloudinary';
+</script>
+
+<CldImage
+  ...
+  sizes="(max-width: 768px) 100vw,
+          (max-width: 1200px) 50vw,
+          33vw"
+```
+
+Which would give you roughly full width images on mobile, a 2-column layout on tablets, and 3-column layout on desktop views.
+
+To ensure that the responsive images can effectively determine all appropriate sizes for the images, use the actual image width and height when specifying the dimension props.
+
+### Responsive Images & CldImage
+
+The only caveat to this is when using cropping modes in Cloudinary.
+
+In an example such as:
+
+```svelte
+<script>
+	import { CldImage } from 'svelte-cloudinary';
+</script>
+
+<CldImage
+	...
+	width="600"
+	height="600"
+	sizes="(max-width: 480px) 100vw, 50vw"
+	crop="thumb"
+	gravity="faces"
+/>
+```
+
+Using cropping, we're setting a width of 600px and a height of 600px, telling Cloudinary we want to take our original image, crop it to that size, then position the focal point to the face in the image detected using AI.
+
+From a responsive standpoint, we're stating that we want full width images on anything less than 480px and half-width images on anything above.
+
+The challenge here is when cropping the image, we're cropping it to 600px, which is smaller than some of the sizes we want to responsively serve. We don't want to responsively change that cropped size, otherwise we would change the cropping results due to the crop attempting to grab different portions of the image depending on the size.
+
+To avoid attempting to load upscaled images, resulting in blurry or grainy images as well as more bandwidth used on a device, any responsive size that is greater than the set width will not be generated and instead, we'll deliver an image at the size specifiy (in this example, 600x600).
+
+For instance, in the above, the resulting responive image in the HTML may look like:
+
+```jsx copy
+
+<img
+  sizes="(max-width: 480px) 100vw, 50vw"
+  srcset="
+    https://res.cloudinary.com/svelte-cloudinary/image/upload/c_thumb,w_600,h_600,g_faces/c_scale,w_384/f_auto/q_auto/v1/images/woman-headphones 384w,
+    https://res.cloudinary.com/svelte-cloudinary/image/upload/c_thumb,w_600,h_600,g_faces/f_auto/q_auto/v1/images/woman-headphones 640w,
+    https://res.cloudinary.com/svelte-cloudinary/image/upload/c_thumb,w_600,h_600,g_faces/f_auto/q_auto/v1/images/woman-headphones 750w,
+    https://res.cloudinary.com/svelte-cloudinary/image/upload/c_thumb,w_600,h_600,g_faces/f_auto/q_auto/v1/images/woman-headphones 828w,
+    https://res.cloudinary.com/svelte-cloudinary/image/upload/c_thumb,w_600,h_600,g_faces/f_auto/q_auto/v1/images/woman-headphones 1080w,
+    https://res.cloudinary.com/svelte-cloudinary/image/upload/c_thumb,w_600,h_600,g_faces/f_auto/q_auto/v1/images/woman-headphones 1200w,
+    https://res.cloudinary.com/svelte-cloudinary/image/upload/c_thumb,w_600,h_600,g_faces/f_auto/q_auto/v1/images/woman-headphones 1920w,
+    https://res.cloudinary.com/svelte-cloudinary/image/upload/c_thumb,w_600,h_600,g_faces/f_auto/q_auto/v1/images/woman-headphones 2048w,
+    https://res.cloudinary.com/svelte-cloudinary/image/upload/c_thumb,w_600,h_600,g_faces/f_auto/q_auto/v1/images/woman-headphones 3840w
+  " ... />
+```
+
+Notice that all of the URLs are the same except for the first one, as it's smaller than 600px.
+
+When the browser attempts to load these responsive images, it will effectively ignore the same URLs, only having loaded it once if resizing the browser.
\ No newline at end of file
diff --git a/packages/docs/src/content/docs/guides/social-media-card.mdx b/packages/docs/src/content/docs/guides/social-media-card.mdx
new file mode 100644
index 00000000..1fe3e9e3
--- /dev/null
+++ b/packages/docs/src/content/docs/guides/social-media-card.mdx
@@ -0,0 +1,216 @@
+---
+title: Guides/Social Media Cards
+---
+
+<script>
+
+import Callout from '$lib/components/Callout.svelte'
+import Video from '$lib/components/Video.svelte'
+import { Tabs, Tab} from '$lib/components/Tabs'
+import HeaderImage  from '$lib/components/HeaderImage.svelte'
+import CodeBlock from '$lib/components/CodeBlock.svelte'
+import { CldOgImage, CldImage } from 'svelte-cloudinary'
+
+</script>
+
+# Generating Social Media Cards
+
+<Callout emoji={false}>
+  CldOgImage does not render an `&lt;img&gt;` tag, meaning it can't be visually embedded on a page. The following examples make use of the `&lt;CldImage&gt;` tag to showcase what's possible.
+</Callout>
+
+## Example
+
+<div style="max-width: 500px; margin: 0 auto">
+  <CldImage
+    width="2400"
+    height="1200"
+    crop="fill"
+    gravity="auto"
+    src={`images/white`}
+    sizes="100w"
+    overlays={[
+      {
+        publicId: 'images/mountain',
+        position: {
+          x: 0,
+          y: 0,
+          gravity: 'north_east',
+        },
+        effects: [
+          {
+            crop: 'fill',
+            gravity: 'auto',
+            width: 800,
+            height: 1200
+          }
+        ]
+      },
+      {
+        width: 1400,
+        crop: 'fit',
+        text: {
+          color: 'black',
+          fontFamily: 'Source Sans Pro',
+          fontSize: 160,
+          fontWeight: 'bold',
+          text: 'Svelte Cloudinary'
+        },
+        position: {
+          x: 100,
+          y: -100,
+          gravity: 'west',
+        },
+      },
+      {
+        width: 1400,
+        crop: 'fit',
+        text: {
+          color: 'black',
+          fontFamily: 'Source Sans Pro',
+          fontSize: 80,
+          text: 'Get the power of Cloudinary in a Svelte project with Svelte Cloudinary!'
+        },
+        position: {
+          x: 100,
+          y: 100,
+          gravity: 'west',
+        },
+      },
+    ]}
+    alt="Svelte Cloudinary with picture of a mountain"
+  />
+</div>
+
+<Tabs tabs={['CldOgImage', 'getCldOgImageUrl']}>
+<Tab type="code" open title="CldOgImage">
+
+```svelte
+<script>
+	import { CldImage } from 'svelte-cloudinary';
+</script>
+
+<CldOgImage
+	src="images/white"
+	overlays={[
+		{
+			publicId: 'images/mountain',
+			position: {
+				x: 0,
+				y: 0,
+				gravity: 'north_east'
+			},
+			effects: [
+				{
+					crop: 'fill',
+					gravity: 'auto',
+					width: 800,
+					height: 1200
+				}
+			]
+		},
+		{
+			width: 1400,
+			crop: 'fit',
+			text: {
+				color: 'black',
+				fontFamily: 'Source Sans Pro',
+				fontSize: 160,
+				fontWeight: 'bold',
+				text: 'Svelte Cloudinary'
+			},
+			position: {
+				x: 100,
+				y: -100,
+				gravity: 'west'
+			}
+		},
+		{
+			width: 1400,
+			crop: 'fit',
+			text: {
+				color: 'black',
+				fontFamily: 'Source Sans Pro',
+				fontSize: 80,
+				text: 'Get the power of Cloudinary in a Svelte project with Svelte Cloudinary!'
+			},
+			position: {
+				x: 100,
+				y: 100,
+				gravity: 'west'
+			}
+		}
+	]}
+	twitterTitle="Svelte Cloudinary"
+	alt="Svelte Cloudinary with picture of a mountain"
+/>
+```
+
+  </Tab>
+  <Tab type="code" title="getCldOgImageUrl">
+
+```svelte
+<script>
+	import { getCldOgImageUrl } from 'svelte-cloudinary';
+
+	const cldUrl = getCldOgImageUrl({
+		src: 'images/white',
+		overlays: [
+			{
+				publicId: 'images/mountain',
+				position: {
+					x: 0,
+					y: 0,
+					gravity: 'north_east'
+				},
+				effects: [
+					{
+						crop: 'fill',
+						gravity: 'auto',
+						width: 800,
+						height: 1200
+					}
+				]
+			},
+			{
+				width: 1400,
+				crop: 'fit',
+				text: {
+					color: 'black',
+					fontFamily: 'Source Sans Pro',
+					fontSize: 160,
+					fontWeight: 'bold',
+					text: 'Svelte Cloudinary'
+				},
+				position: {
+					x: 100,
+					y: -100,
+					gravity: 'west'
+				}
+			},
+			{
+				width: 1400,
+				crop: 'fit',
+				text: {
+					color: 'black',
+					fontFamily: 'Source Sans Pro',
+					fontSize: 80,
+					text: 'Get the power of Cloudinary in a Svelte project with Svelte Cloudinary!'
+				},
+				position: {
+					x: 100,
+					y: 100,
+					gravity: 'west'
+				}
+			}
+		]
+	});
+</script>
+```
+
+  </Tab>
+</Tabs>
+
+## Learn More
+
+- [CldOgImage Configuration](/cldogimage/configuration)
\ No newline at end of file
diff --git a/packages/docs/src/content/docs/guides/text-overlays.mdx b/packages/docs/src/content/docs/guides/text-overlays.mdx
new file mode 100644
index 00000000..e9927dee
--- /dev/null
+++ b/packages/docs/src/content/docs/guides/text-overlays.mdx
@@ -0,0 +1,131 @@
+---
+title: Guides/Text Overlays
+---
+
+<script>
+
+import Callout from '$lib/components/Callout.svelte'
+import Video from '$lib/components/Video.svelte'
+import { Tabs, Tab} from '$lib/components/Tabs'
+import HeaderImage  from '$lib/components/HeaderImage.svelte'
+import CodeBlock from '$lib/components/CodeBlock.svelte'
+import { CldOgImage, CldImage } from 'svelte-cloudinary'
+
+</script>
+
+# Adding Text to an Image
+
+You can add text on top of your image with text-based overlays.
+
+## Example
+
+<div style="max-width: 500px; margin: 0 auto">
+  <CldImage
+    width="1335"
+    height="891"
+    src={`images/sneakers`}
+    sizes="100vw"
+    overlays={[{
+      width: 2670 - 20,
+      crop: 'fit',
+      position: {
+        x: 140,
+        y: 140,
+        angle: -20,
+        gravity: 'south_east',
+      },
+      text: {
+        color: 'blueviolet',
+        fontFamily: 'Source Sans Pro',
+        fontSize: 160,
+        fontWeight: 'bold',
+        textDecoration: 'underline',
+        letterSpacing: 14,
+        text: 'Cool Beans'
+      }
+    }]}
+    alt="Sneakers with Cool Beans"
+  />
+</div>
+
+<Tabs tabs={['CldImage', 'getCldImageUrl']}>
+<Tab type="code" open title="CldImage">
+
+```svelte
+<script>
+	import { CldImage } from 'svelte-cloudinary';
+</script>
+
+<CldImage
+	width="1335"
+	height="891"
+	src="images/sneakers"
+	sizes="100vw"
+	overlays={[
+		{
+			width: 2670 - 20,
+			crop: 'fit',
+			position: {
+				x: 140,
+				y: 140,
+				angle: -20,
+				gravity: 'south_east'
+			},
+			text: {
+				color: 'blueviolet',
+				fontFamily: 'Source Sans Pro',
+				fontSize: 160,
+				fontWeight: 'bold',
+				textDecoration: 'underline',
+				letterSpacing: 14,
+				text: 'Cool Beans'
+			}
+		}
+	]}
+	alt="Sneakers with Cool Beans"
+/>
+```
+
+  </Tab>
+  <Tab type="code" title="getCldImageUrl">
+
+```svelte
+<script>
+	import { getCldImageUrl } from 'svelte-cloudinary';
+
+	const cldUrl = getCldImageUrl({
+		width: 1335,
+		height: 891,
+		src: 'images/sneakers',
+		overlays: [
+			{
+				width: 2670 - 20,
+				crop: 'fit',
+				position: {
+					x: 140,
+					y: 140,
+					angle: -20,
+					gravity: 'south_east'
+				},
+				text: {
+					color: 'blueviolet',
+					fontFamily: 'Source Sans Pro',
+					fontSize: 160,
+					fontWeight: 'bold',
+					textDecoration: 'underline',
+					letterSpacing: 14,
+					text: 'Cool Beans'
+				}
+			}
+		]
+	});
+</script>
+```
+
+  </Tab>
+</Tabs>
+
+## Learn More
+
+- [CldImage](/cldimage/usage)
+- [getCldImageUrl](/getcldimageurl/usage)
\ No newline at end of file
diff --git a/packages/docs/src/content/docs/guides/uploading-images-and-videos.mdx b/packages/docs/src/content/docs/guides/uploading-images-and-videos.mdx
new file mode 100644
index 00000000..97a15f61
--- /dev/null
+++ b/packages/docs/src/content/docs/guides/uploading-images-and-videos.mdx
@@ -0,0 +1,54 @@
+---
+title: Guides/Uploading Images and Videos
+order: 9
+---
+
+<script>
+	import { PUBLIC_CLOUDINARY_UNSIGNED_UPLOAD_PRESET } from '$env/static/public';
+	import { CldUploadButton, CldImage } from 'svelte-cloudinary'
+	import Callout from '$lib/components/Callout.svelte'
+
+	let resource
+</script>
+
+# Uploading Images & Videos
+
+Use the [CldUploadButton](/clduploadbutton/usage) or [CldUploadWidget](/clduploadwidget/usage) components to add upload capabilities to your app.
+
+The components utilize the [Cloudinary Upload Widget](https://cloudinary.com/documentation/upload_widget), built for Svelte.
+
+## Example
+
+<CldUploadButton
+class="cldbutton"
+onUpload={(result, widget) => {
+resource = result?.info;
+widget.close();
+}}
+uploadPreset={PUBLIC_CLOUDINARY_UNSIGNED_UPLOAD_PRESET}
+/>
+{#if resource?.resource_type === 'image'}
+<CldImage width={resource.width} height={resource.height} src={resource?.public_id} alt="Uploaded Asset" />
+{/if}
+
+{#if resource?.resource_type === 'video'}
+<video controls width={resource.width} height={resource.height} src={resource?.secure_url} alt="Uploaded Asset" />
+{/if}
+
+```svelte
+<script>
+	import { CldUploadButton } from 'svelte-cloudinary';
+</script>
+
+<CldUploadButton
+	onUpload={onUploadCallback}
+	signatureEndpoint="<Endpoint (ex: /api/sign-cloudinary-params)>"
+	uploadPreset="<Upload Preset>"
+>
+	Upload to Cloudinary
+</CldUploadButton>
+```
+
+## Learn More
+
+- [CldUploadButton](/clduploadbutton/usage)
\ No newline at end of file
diff --git a/vercel.json b/vercel.json
index 0ff0df24..7b907c4f 100644
--- a/vercel.json
+++ b/vercel.json
@@ -77,46 +77,6 @@
             "source": "/getcldogimageurl/examples",
             "destination": "/missing"
         },
-        {
-            "source": "/guides",
-            "destination": "/missing"
-        },
-        {
-            "source": "/guides/background-removal",
-            "destination": "/missing"
-        },
-        {
-            "source": "/guides/image-optimization",
-            "destination": "/missing"
-        },
-        {
-            "source": "/guides/image-overlays",
-            "destination": "/missing"
-        },
-        {
-            "source": "/guides/image-underlays",
-            "destination": "/missing"
-        },
-        {
-            "source": "/guides/placeholders",
-            "destination": "/missing"
-        },
-        {
-            "source": "/guides/responsive-images",
-            "destination": "/missing"
-        },
-        {
-            "source": "/guides/social-media-cards",
-            "destination": "/missing"
-        },
-        {
-            "source": "/guides/text-overlays",
-            "destination": "/missing"
-        },
-        {
-            "source": "/guides/uploading-images-and-videos",
-            "destination": "/missing"
-        },
         {
             "source": "/templates",
             "destination": "/missing"

From 265f4842aafb7a09ffcc01649fa323decbb5af93 Mon Sep 17 00:00:00 2001
From: mohith2883 <88938356+mohith2883@users.noreply.github.com>
Date: Sun, 5 Oct 2025 07:43:56 +0530
Subject: [PATCH 2/9] docs: migrate guides from v1 to v2 Starlight

---
 .../docs/src/content/docs/guides/background-removal.mdx   | 8 --------
 .../docs/src/content/docs/guides/image-optimization.mdx   | 2 ++
 packages/docs/src/content/docs/guides/placeholders.mdx    | 2 ++
 3 files changed, 4 insertions(+), 8 deletions(-)

diff --git a/packages/docs/src/content/docs/guides/background-removal.mdx b/packages/docs/src/content/docs/guides/background-removal.mdx
index 0651f44b..e62fbd48 100644
--- a/packages/docs/src/content/docs/guides/background-removal.mdx
+++ b/packages/docs/src/content/docs/guides/background-removal.mdx
@@ -1,15 +1,7 @@
 ---
 title: Guides/Background Removal
-order: 1
 ---
 
-<script>
-
-import Callout from '$lib/components/Callout.svelte'
-import { Tabs, Tab} from '$lib/components/Tabs'
-import { CldOgImage, CldImage } from 'svelte-cloudinary'
-
-</script>
 
 # Removing a Background from an Image
 
diff --git a/packages/docs/src/content/docs/guides/image-optimization.mdx b/packages/docs/src/content/docs/guides/image-optimization.mdx
index e8c341e8..bce07c15 100644
--- a/packages/docs/src/content/docs/guides/image-optimization.mdx
+++ b/packages/docs/src/content/docs/guides/image-optimization.mdx
@@ -59,12 +59,14 @@ You can further optimize delivery by using [responsive sizing](/guides/responsiv
   </Tab>
 </Tabs>
 
+<!--
 ## Watch & Learn
 
 <Video
   title="Optimize Images, Responsive Sizing, & AI Cropping in Svelte with Svelte Cloudinary"
   url="https://www.youtube.com/watch?v=Vr3H3XREkbw"
 />
+-->
 
 ## Learn More
 
diff --git a/packages/docs/src/content/docs/guides/placeholders.mdx b/packages/docs/src/content/docs/guides/placeholders.mdx
index 4b9ea770..4b179f54 100644
--- a/packages/docs/src/content/docs/guides/placeholders.mdx
+++ b/packages/docs/src/content/docs/guides/placeholders.mdx
@@ -31,6 +31,7 @@ To do this, we have several options:
 To achieve a blurred image effect, we can first convert our Cloudinary image to a Data URL
 then pass it in to our CldImage component.
 
+<!--
 <HeaderImage>
   <CldImage
     width="800"
@@ -43,6 +44,7 @@ then pass it in to our CldImage component.
     alt="Mountains"
   />
 </HeaderImage>
+-->
 
     Inside of the SvelteKit app, we can utilize server side code to generate a data URL from our image.
 

From 4aa58a663556c71f4664e331aa073d08cd630a03 Mon Sep 17 00:00:00 2001
From: mohith2883 <88938356+mohith2883@users.noreply.github.com>
Date: Mon, 6 Oct 2025 17:03:15 +0530
Subject: [PATCH 3/9] docs: migrate guides from v1 to v2 Starlight

---
 .../docs/src/content/docs/guides/background-removal.mdx   | 3 ---
 packages/docs/src/content/docs/guides/placeholders.mdx    | 8 ++++----
 2 files changed, 4 insertions(+), 7 deletions(-)

diff --git a/packages/docs/src/content/docs/guides/background-removal.mdx b/packages/docs/src/content/docs/guides/background-removal.mdx
index e62fbd48..abedd645 100644
--- a/packages/docs/src/content/docs/guides/background-removal.mdx
+++ b/packages/docs/src/content/docs/guides/background-removal.mdx
@@ -24,9 +24,6 @@ The CldImage component allows you to easily remove backgrounds from images using
     />
 </div>
 
-<Tabs>
-  <Tab type="code" open title="CldImage">
-
 ```svelte
 <script>
 	import { CldImage } from 'svelte-cloudinary';
diff --git a/packages/docs/src/content/docs/guides/placeholders.mdx b/packages/docs/src/content/docs/guides/placeholders.mdx
index 4b179f54..06aa8727 100644
--- a/packages/docs/src/content/docs/guides/placeholders.mdx
+++ b/packages/docs/src/content/docs/guides/placeholders.mdx
@@ -48,7 +48,7 @@ then pass it in to our CldImage component.
 
     Inside of the SvelteKit app, we can utilize server side code to generate a data URL from our image.
 
-<CodeBlock>
+
 
 ```js
 
@@ -70,7 +70,7 @@ export const load = () => {
 }
 ```
 
-</CodeBlock>
+
 
     Then when rendering CldImage, utilize the `dataUrl` using `placeholder` and `blurDataURL`:
 
@@ -109,7 +109,7 @@ our images are loading.
 
 Inside of the SvelteKit app you can use a server side code `+page.server.js` to generate a data URL from our image.
 
-<CodeBlock>
+
 
 ```js
 export const load = () => {
@@ -137,7 +137,7 @@ export const load = () => {
 };
 ```
 
-</CodeBlock>
+
 
     Then when rendering CldImage, utilize the `dataUrl` using `placeholder`:
 

From 625c12efb8caf1c19119cce54e4e27a977d79acc Mon Sep 17 00:00:00 2001
From: mohith2883 <88938356+mohith2883@users.noreply.github.com>
Date: Fri, 10 Oct 2025 18:04:05 +0530
Subject: [PATCH 4/9] updated

---
 .../docs/src/content/docs/guides/background-removal.mdx  | 9 ++-------
 .../docs/src/content/docs/guides/image-optimization.mdx  | 1 -
 packages/docs/src/content/docs/guides/image-overlays.mdx | 1 -
 .../docs/src/content/docs/guides/image-underlays.mdx     | 1 -
 .../content/docs/guides/uploading-images-and-videos.mdx  | 1 -
 5 files changed, 2 insertions(+), 11 deletions(-)

diff --git a/packages/docs/src/content/docs/guides/background-removal.mdx b/packages/docs/src/content/docs/guides/background-removal.mdx
index abedd645..0fab20ae 100644
--- a/packages/docs/src/content/docs/guides/background-removal.mdx
+++ b/packages/docs/src/content/docs/guides/background-removal.mdx
@@ -2,6 +2,7 @@
 title: Guides/Background Removal
 ---
 
+import { CldImage } from 'svelte-cloudinary';
 
 # Removing a Background from an Image
 
@@ -25,9 +26,6 @@ The CldImage component allows you to easily remove backgrounds from images using
 </div>
 
 ```svelte
-<script>
-	import { CldImage } from 'svelte-cloudinary';
-</script>
 
 <CldImage
 	width="960"
@@ -39,13 +37,10 @@ The CldImage component allows you to easily remove backgrounds from images using
 />
 ```
 
-  </Tab>
-  <Tab title="getCldImageUrl">
 
 ```html
 <script>
-	import { getCldImageUrl } from 'svelte-cloudinary';
-
+	
 	const cldUrl = getCldImageUrl({
 		width: 960,
 		height: 600,
diff --git a/packages/docs/src/content/docs/guides/image-optimization.mdx b/packages/docs/src/content/docs/guides/image-optimization.mdx
index bce07c15..35a41ba5 100644
--- a/packages/docs/src/content/docs/guides/image-optimization.mdx
+++ b/packages/docs/src/content/docs/guides/image-optimization.mdx
@@ -1,6 +1,5 @@
 ---
 title: Guides/Image Optimization
-order: 2
 ---
 
 <script>
diff --git a/packages/docs/src/content/docs/guides/image-overlays.mdx b/packages/docs/src/content/docs/guides/image-overlays.mdx
index 2aaf0d51..b0387493 100644
--- a/packages/docs/src/content/docs/guides/image-overlays.mdx
+++ b/packages/docs/src/content/docs/guides/image-overlays.mdx
@@ -1,6 +1,5 @@
 ---
 title: Guides/Image Overlays
-order: 3
 ---
 
 <script>
diff --git a/packages/docs/src/content/docs/guides/image-underlays.mdx b/packages/docs/src/content/docs/guides/image-underlays.mdx
index 4775362a..445b2dfb 100644
--- a/packages/docs/src/content/docs/guides/image-underlays.mdx
+++ b/packages/docs/src/content/docs/guides/image-underlays.mdx
@@ -1,6 +1,5 @@
 ---
 title: Guides/Image Underlays
-order: 4
 ---
 
 <script>
diff --git a/packages/docs/src/content/docs/guides/uploading-images-and-videos.mdx b/packages/docs/src/content/docs/guides/uploading-images-and-videos.mdx
index 97a15f61..1ed5e5aa 100644
--- a/packages/docs/src/content/docs/guides/uploading-images-and-videos.mdx
+++ b/packages/docs/src/content/docs/guides/uploading-images-and-videos.mdx
@@ -1,6 +1,5 @@
 ---
 title: Guides/Uploading Images and Videos
-order: 9
 ---
 
 <script>

From 8fdc250669f95c66b09440453809dbbe438f7730 Mon Sep 17 00:00:00 2001
From: "Willow (GHOST)" <git@willow.sh>
Date: Wed, 4 Mar 2026 05:55:41 +0000
Subject: [PATCH 5/9] chore: update formatting and slight wording

---
 packages/docs/astro.config.mjs                |   7 +-
 .../docs/guides/background-removal.mdx        |  67 ++--
 .../docs/guides/image-optimization.mdx        |  74 -----
 .../content/docs/guides/image-overlays.mdx    | 145 ++++-----
 .../content/docs/guides/image-underlays.mdx   |  73 ++---
 .../src/content/docs/guides/placeholders.mdx  | 162 ----------
 .../content/docs/guides/responsive-images.mdx |  30 +-
 .../content/docs/guides/social-media-card.mdx | 293 +++++++++---------
 .../src/content/docs/guides/text-overlays.mdx | 160 +++++-----
 .../guides/uploading-images-and-videos.mdx    |  53 ----
 10 files changed, 349 insertions(+), 715 deletions(-)
 delete mode 100644 packages/docs/src/content/docs/guides/image-optimization.mdx
 delete mode 100644 packages/docs/src/content/docs/guides/placeholders.mdx
 delete mode 100644 packages/docs/src/content/docs/guides/uploading-images-and-videos.mdx

diff --git a/packages/docs/astro.config.mjs b/packages/docs/astro.config.mjs
index f98bf4c8..eaaf9a61 100644
--- a/packages/docs/astro.config.mjs
+++ b/packages/docs/astro.config.mjs
@@ -158,12 +158,7 @@ export default defineConfig({
 				},
 				{
 					label: 'Guides',
-					items: [
-						{
-							label: 'Custom Domain',
-							link: '/guides/custom-domain',
-						},
-					],
+					autogenerate: { directory: 'guides' },
 				},
 				{
 					label: 'Migrate',
diff --git a/packages/docs/src/content/docs/guides/background-removal.mdx b/packages/docs/src/content/docs/guides/background-removal.mdx
index 0fab20ae..fe9c6757 100644
--- a/packages/docs/src/content/docs/guides/background-removal.mdx
+++ b/packages/docs/src/content/docs/guides/background-removal.mdx
@@ -1,31 +1,36 @@
 ---
-title: Guides/Background Removal
+title: Background Removal
 ---
 
+import { Tabs, TabItem } from '@astrojs/starlight/components';
 import { CldImage } from 'svelte-cloudinary';
 
 # Removing a Background from an Image
 
 The CldImage component allows you to easily remove backgrounds from images using the `removeBackground` prop.
 
-<Callout emoji={false}>
-  Removing backgrounds require enabling the <a href="https://cloudinary.com/documentation/cloudinary_ai_background_removal_addon">Cloudinary AI Background Removal Add-On</a> which includes a free tier for getting started.
-</Callout>
+:::note
+Removing backgrounds require enabling the [Cloudinary AI Background Removal Add-On](https://cloudinary.com/documentation/cloudinary_ai_background_removal_addon) - a free tier is available!
+:::
 
 ## Example
 
-<div style="max-width: 500px; margin: 0 auto">
-    <CldImage
-      width={960}
-      height={600}
-      src={`images/turtle`}
-      sizes="(max-width: 480px) 100vw, 50vw"
-      removeBackground
-      alt=""
-    />
-</div>
+<CldImage
+	width={960}
+	height={600}
+	src="images/turtle"
+	sizes="(max-width: 480px) 100vw, 50vw"
+	removeBackground
+	alt="turtle image"
+/>
 
-```svelte
+<Tabs syncKey="image-api">
+<TabItem label="<CldImage />">
+
+```svelte {10}
+<script>
+	import { CldImage } from 'svelte-cloudinary';
+</script>
 
 <CldImage
 	width="960"
@@ -33,27 +38,23 @@ The CldImage component allows you to easily remove backgrounds from images using
 	src="images/turtle"
 	sizes="100vw"
 	removeBackground
-	alt="Turtle"
-/>
+	alt="Turtle" />
 ```
 
+</TabItem>
 
-```html
-<script>
-	
-	const cldUrl = getCldImageUrl({
-		width: 960,
-		height: 600,
-		src: 'images/turtle',
-		removeBackground: true
-	});
-</script>
-```
+<TabItem label="getCldImageUrl()">
 
-  </Tab>
-</Tabs>
+```ts {5}
+import { getCldImageUrl } from 'svelte-cloudinary';
 
-## Learn More
+const url = getCldImageUrl({
+	src: 'images/turtle',
+	removeBackground: true,
+	width: 960,
+	height: 600,
+});
+```
 
-- [CldImage](/cldimage/usage)
-- [getCldImageUrl](/getcldimageurl/usage)
\ No newline at end of file
+</TabItem>
+</Tabs>
diff --git a/packages/docs/src/content/docs/guides/image-optimization.mdx b/packages/docs/src/content/docs/guides/image-optimization.mdx
deleted file mode 100644
index 35a41ba5..00000000
--- a/packages/docs/src/content/docs/guides/image-optimization.mdx
+++ /dev/null
@@ -1,74 +0,0 @@
----
-title: Guides/Image Optimization
----
-
-<script>
-
-import Callout from '$lib/components/Callout.svelte'
-import Video from '$lib/components/Video.svelte'
-import { Tabs, Tab} from '$lib/components/Tabs'
-import { CldOgImage, CldImage } from 'svelte-cloudinary'
-
-</script>
-
-# Optimizing Images in Svelte/SvelteKit
-
-Automatically optimize images using the CldImage component. By default, CldImage opts you in to automatic optimization including delivering the most optimal format for the browser (WebP, AVIF).
-
-You can further optimize delivery by using [responsive sizing](/guides/responsive-images) by using the `sizes` prop.
-
-## Example
-
-<div style="max-width: 500px; margin: 0 auto">
-  <CldImage
-    width="960"
-    height="600"
-    src={`images/turtle`}
-    sizes="100vw"
-    alt="Turtle"
-  />
-</div>
-
-<Tabs tabs={['CldImage', 'getCldImageUrl']}>
-<Tab type="code" open title="CldImage">
-
-```svelte
-<script>
-	import { CldImage } from 'svelte-cloudinary';
-</script>
-
-<CldImage width="960" height="600" src="images/turtle" sizes="100vw" alt="Turtle" />
-```
-
-  </Tab>
-  <Tab type="code" title="getCldImageUrl">
-
-```svelte
-<script>
-	import { getCldImageUrl } from 'svelte-cloudinary';
-
-	getCldImageUrl({
-		width: 960,
-		height: 600,
-		src: 'images/turtle'
-	});
-</script>
-```
-
-  </Tab>
-</Tabs>
-
-<!--
-## Watch & Learn
-
-<Video
-  title="Optimize Images, Responsive Sizing, & AI Cropping in Svelte with Svelte Cloudinary"
-  url="https://www.youtube.com/watch?v=Vr3H3XREkbw"
-/>
--->
-
-## Learn More
-
-- [Responsive Images](/guides/responsive-images)
-- [CldImage](/cldimage/usage)
-- [getCldImageUrl](/getcldimageurl/usage)
\ No newline at end of file
diff --git a/packages/docs/src/content/docs/guides/image-overlays.mdx b/packages/docs/src/content/docs/guides/image-overlays.mdx
index b0387493..db3ca38a 100644
--- a/packages/docs/src/content/docs/guides/image-overlays.mdx
+++ b/packages/docs/src/content/docs/guides/image-overlays.mdx
@@ -1,15 +1,9 @@
 ---
-title: Guides/Image Overlays
+title: Image Overlays
 ---
 
-<script>
-
-import Callout from '$lib/components/Callout.svelte'
-import Video from '$lib/components/Video.svelte'
-import { Tabs, Tab} from '$lib/components/Tabs'
-import { CldOgImage, CldImage } from 'svelte-cloudinary'
-
-</script>
+import { Tabs, TabItem } from '@astrojs/starlight/components';
+import { CldOgImage, CldImage } from 'svelte-cloudinary';
 
 # Overlaying Images
 
@@ -17,36 +11,36 @@ You can add images on top of other images by using image-based overlays.
 
 ## Example
 
-<div style="max-width: 500px; margin: 0 auto">
-  <CldImage
-    width="960"
-    height="600"
-    src={`images/turtle`}
-    sizes="100vw"
-    overlays={[{
-      publicId: 'images/earth',
-      position: {
-        x: 50,
-        y: 50,
-        gravity: 'north_west',
-      },
-      effects: [
-        {
-          crop: 'fill',
-          gravity: 'auto',
-          width: 500,
-          height: 500
-        }
-      ]
-    }]}
-    alt="Turtle with earth"
-  />
-</div>
+<CldImage
+	width="960"
+	height="600"
+	src="images/turtle"
+	sizes="100vw"
+	alt="Turtle with earth"
+	overlays={[
+		{
+			publicId: 'images/earth',
+			position: {
+				x: 50,
+				y: 50,
+				gravity: 'north_west',
+			},
+			effects: [
+				{
+					crop: 'fill',
+					gravity: 'auto',
+					width: 500,
+					height: 500,
+				},
+			],
+		},
+	]}
+/>
 
-<Tabs tabs={['CldImage', 'getCldImageUrl']}>
-<Tab type="code" open title="CldImage">
+<Tabs syncKey="image-api">
+<TabItem label="<CldImage />">
 
-```svelte
+```svelte {11-27}
 <script>
 	import { CldImage } from 'svelte-cloudinary';
 </script>
@@ -56,65 +50,58 @@ You can add images on top of other images by using image-based overlays.
 	height="600"
 	src="images/turtle"
 	sizes="100vw"
+	alt="Turtle with earth"
 	overlays={[
 		{
 			publicId: 'images/earth',
 			position: {
 				x: 50,
 				y: 50,
-				gravity: 'north_west'
+				gravity: 'north_west',
 			},
 			effects: [
 				{
 					crop: 'fill',
 					gravity: 'auto',
 					width: 500,
-					height: 500
-				}
-			]
-		}
-	]}
-	alt="Turtle with earth"
-/>
+					height: 500,
+				},
+			],
+		},
+	]} />
 ```
 
-  </Tab>
-  <Tab type="code" title="getCldImageUrl">
+</TabItem>
 
-```svelte
-<script>
-	import { getCldImageUrl } from 'svelte-cloudinary';
+<TabItem label="getCldImageUrl()">
+
+```ts {7-24}
+import { getCldImageUrl } from 'svelte-cloudinary';
 
-	const cldUrl = getCldImageUrl({
-		width: 960,
-		height: 600,
-		src: 'images/turtle',
-		overlays: [
-			{
-				publicId: 'images/earth',
-				position: {
-					x: 50,
-					y: 50,
-					gravity: 'north_west'
+const url = getCldImageUrl({
+	width: 960,
+	height: 600,
+	src: 'images/turtle',
+	overlays: [
+		{
+			publicId: 'images/earth',
+			position: {
+				x: 50,
+				y: 50,
+				gravity: 'north_west',
+			},
+			effects: [
+				{
+					crop: 'fill',
+					gravity: 'auto',
+					width: 500,
+					height: 500,
 				},
-				effects: [
-					{
-						crop: 'fill',
-						gravity: 'auto',
-						width: 500,
-						height: 500
-					}
-				]
-			}
-		]
-	});
-</script>
+			],
+		},
+	],
+});
 ```
 
-  </Tab>
+</TabItem>
 </Tabs>
-
-## Learn More
-
-- [CldImage](/cldimage/usage)
-- [getCldImageUrl](/getcldimageurl/usage)
\ No newline at end of file
diff --git a/packages/docs/src/content/docs/guides/image-underlays.mdx b/packages/docs/src/content/docs/guides/image-underlays.mdx
index 445b2dfb..70caed99 100644
--- a/packages/docs/src/content/docs/guides/image-underlays.mdx
+++ b/packages/docs/src/content/docs/guides/image-underlays.mdx
@@ -1,15 +1,9 @@
 ---
-title: Guides/Image Underlays
+title: Image Underlays
 ---
 
-<script>
-
-import Callout from '$lib/components/Callout.svelte'
-import Video from '$lib/components/Video.svelte'
-import { Tabs, Tab} from '$lib/components/Tabs'
-import { CldOgImage, CldImage } from 'svelte-cloudinary'
-
-</script>
+import { Tabs, TabItem } from '@astrojs/starlight/components';
+import { CldOgImage, CldImage } from 'svelte-cloudinary';
 
 # Adding Layers Under Images
 
@@ -19,22 +13,20 @@ See the examples above under Overlays to learn more about the available configur
 
 ## Example
 
-<div style="max-width: 500px; margin: 0 auto">
-  <CldImage
-    width="960"
-    height="600"
-    src={`images/turtle`}
-    sizes="100vw"
-    removeBackground
-    underlay="images/galaxy"
-    alt="Turtle swimming in a galaxy"
-  />
-</div>
+<CldImage
+	width="960"
+	height="600"
+	src="images/turtle"
+	sizes="100vw"
+	removeBackground
+	underlay="images/galaxy"
+	alt="Turtle swimming in a galaxy"
+/>
 
-<Tabs tabs={['CldImage', 'getCldImageUrl']}>
-<Tab type="code" open title="CldImage">
+<Tabs syncKey="image-api">
+<TabItem label="<CldImage />">
 
-```svelte
+```svelte {10-11}
 <script>
 	import { CldImage } from 'svelte-cloudinary';
 </script>
@@ -46,31 +38,24 @@ See the examples above under Overlays to learn more about the available configur
 	sizes="100vw"
 	removeBackground
 	underlay="images/galaxy"
-	alt="Turtle swimming in a galaxy"
-/>
+	alt="Turtle swimming in a galaxy" />
 ```
 
-  </Tab>
-  <Tab type="code" title="getCldImageUrl">
+</TabItem>
 
-```svelte
-<script>
-	import { getCldImageUrl } from 'svelte-cloudinary';
+<TabItem label="getCldImageUrl()">
 
-	const cldUrl = getCldImageUrl({
-		width: 960,
-		height: 600,
-		src: 'images/turtle',
-		removeBackground: true,
-		underlay: 'images/galaxy'
-	});
-</script>
+```ts {7-8}
+import { getCldImageUrl } from 'svelte-cloudinary';
+
+const url = getCldImageUrl({
+	width: 960,
+	height: 600,
+	src: 'images/turtle',
+	removeBackground: true,
+	underlay: 'images/galaxy',
+});
 ```
 
-  </Tab>
+</TabItem>
 </Tabs>
-
-## Learn More
-
-- [CldImage](/cldimage/usage)
-- [getCldImageUrl](/getcldimageurl/usage)
\ No newline at end of file
diff --git a/packages/docs/src/content/docs/guides/placeholders.mdx b/packages/docs/src/content/docs/guides/placeholders.mdx
deleted file mode 100644
index 06aa8727..00000000
--- a/packages/docs/src/content/docs/guides/placeholders.mdx
+++ /dev/null
@@ -1,162 +0,0 @@
----
-title: Guides/Placeholders
----
-
-<script>
-
-import Callout from '$lib/components/Callout.svelte'
-import Video from '$lib/components/Video.svelte'
-import { Tabs, Tab} from '$lib/components/Tabs'
-import HeaderImage  from '$lib/components/HeaderImage.svelte'
-import CodeBlock from '$lib/components/CodeBlock.svelte'
-import { CldOgImage, CldImage } from 'svelte-cloudinary'
-
-</script>
-
-# Display Placeholder While Image is Loading
-
-CldImage wraps the Unpic Image component, thus giving us access to the placeholder API
-which can display an SVG image while the image itself is loading.
-
-This helps for providing a great user experience, rather than an empty space, to help
-let the visitor know that image is loading.
-
-To do this, we have several options:
-
-- `placeholder="blur"` coupled with a `blurDataURL`
-- `placeholder="..."` with the contents being a data URL
-
-## Blurred Images
-
-To achieve a blurred image effect, we can first convert our Cloudinary image to a Data URL
-then pass it in to our CldImage component.
-
-<!--
-<HeaderImage>
-  <CldImage
-    width="800"
-    height="600"
-    crop="fill"
-    src={`images/mountain`}
-    sizes="100w"
-    placeholder="blur"
-    blurDataURL="data:image/jpeg;base64,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"
-    alt="Mountains"
-  />
-</HeaderImage>
--->
-
-    Inside of the SvelteKit app, we can utilize server side code to generate a data URL from our image.
-
-
-
-```js
-
-import { getCldImageUrl } from 'svelte-cloudinary';
-
-export const load = () => {
-  const imageUrl = getCldImageUrl({
-    src: '<Your Public ID>',
-    width: 100, // Resize the original file to a smaller size
-  });
-  const response = await fetch(imageUrl);
-  const arrayBuffer = await response.arrayBuffer();
-  const buffer = Buffer.from(arrayBuffer);
-  const base64 = buffer.toString("base64");
-  const dataUrl = `data:${response.type};base64,${base64}`;
-  return {
-     dataUrl
-  }
-}
-```
-
-
-
-    Then when rendering CldImage, utilize the `dataUrl` using `placeholder` and `blurDataURL`:
-
-```svelte
-<script>
-	import { CldImage } from 'svelte-cloudinary';
-	export let data;
-</script>
-
-<CldImage
-	src="<Your Public ID>"
-	width="600"
-	height="400"
-	alt="Decriptive text"
-	placeholder="blur"
-	blurDataURL={data.dataUrl}
-/>
-```
-
-## Shimmer
-
-In a similar fashion, we can create a shimmer effect when
-our images are loading.
-
-<HeaderImage>
-  <CldImage
-    width="800"
-    height="600"
-    crop="fill"
-    src={`images/mountain`}
-    sizes="100w"
-    placeholder="data:image/svg+xml;base64,CiAgICA8c3ZnIHdpZHRoPSI2MDAiIGhlaWdodD0iNDAwIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgICA8ZGVmcz4KICAgICAgICA8bGluZWFyR3JhZGllbnQgaWQ9ImciPgogICAgICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iIzMzMyIgb2Zmc2V0PSIyMCUiIC8+CiAgICAgICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjMjIyIiBvZmZzZXQ9IjUwJSIgLz4KICAgICAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiMzMzMiIG9mZnNldD0iNzAlIiAvPgogICAgICAgIDwvbGluZWFyR3JhZGllbnQ+CiAgICAgIDwvZGVmcz4KICAgICAgPHJlY3Qgd2lkdGg9IjYwMCIgaGVpZ2h0PSI0MDAiIGZpbGw9IiMzMzMiIC8+CiAgICAgIDxyZWN0IGlkPSJyIiB3aWR0aD0iNjAwIiBoZWlnaHQ9IjQwMCIgZmlsbD0idXJsKCNnKSIgLz4KICAgICAgPGFuaW1hdGUgeGxpbms6aHJlZj0iI3IiIGF0dHJpYnV0ZU5hbWU9IngiIGZyb209Ii02MDAiIHRvPSI2MDAiIGR1cj0iMXMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAgLz4KICAgIDwvc3ZnPg=="
-    alt="Mountains"
-  />
-</HeaderImage>
-
-Inside of the SvelteKit app you can use a server side code `+page.server.js` to generate a data URL from our image.
-
-
-
-```js
-export const load = () => {
-	const shimmer = (w: number, h: number) => `
-    <svg width="${w}" height="${h}" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-      <defs>
-        <linearGradient id="g">
-          <stop stop-color="#333" offset="20%" />
-          <stop stop-color="#222" offset="50%" />
-          <stop stop-color="#333" offset="70%" />
-        </linearGradient>
-      </defs>
-      <rect width="${w}" height="${h}" fill="#333" />
-      <rect id="r" width="${w}" height="${h}" fill="url(#g)" />
-      <animate xlink:href="#r" attributeName="x" from="-${w}" to="${w}" dur="1s" repeatCount="indefinite"  />
-    </svg>`;
-
-	const toBase64 = (str: string) =>
-		typeof window === 'undefined' ? Buffer.from(str).toString('base64') : window.btoa(str);
-
-	const dataUrl = `data:image/svg+xml;base64,${toBase64(shimmer(600, 400))}`;
-	return {
-		dataUrl
-	};
-};
-```
-
-
-
-    Then when rendering CldImage, utilize the `dataUrl` using `placeholder`:
-
-```svelte
-<script>
-	import { CldImage } from 'svelte-cloudinary';
-	export let data;
-</script>
-
-<CldImage
-	src="<Your Public ID>"
-	width="600"
-	height="400"
-	alt="Decriptive text"
-	placeholder={data.dataUrl}
-/>
-```
-
-## Learn More
-
-- [CldImage](/cldimage/usage)
-- [getCldImageUrl](/getcldimageurl/usage)
\ No newline at end of file
diff --git a/packages/docs/src/content/docs/guides/responsive-images.mdx b/packages/docs/src/content/docs/guides/responsive-images.mdx
index 0692d9da..3274a15b 100644
--- a/packages/docs/src/content/docs/guides/responsive-images.mdx
+++ b/packages/docs/src/content/docs/guides/responsive-images.mdx
@@ -1,34 +1,22 @@
 ---
-title: Guides/Responsive Images
+title: Responsive Images
 ---
 
-<script>
-
-import Callout from '$lib/components/Callout.svelte'
-import Video from '$lib/components/Video.svelte'
-import { Tabs, Tab} from '$lib/components/Tabs'
-import HeaderImage  from '$lib/components/HeaderImage.svelte'
-import CodeBlock from '$lib/components/CodeBlock.svelte'
-import { CldOgImage, CldImage } from 'svelte-cloudinary'
-
-</script>
+import { CldOgImage, CldImage } from 'svelte-cloudinary';
 
-# Responsive Images
-
-The [CldImage](/cldimage/usage) component takes advantage of responsive images generated using the [Unpic component](https://unpic.pics/img/svelte/).
+The CldImage component takes advantage of responsive images generated using the Unpic component.
 
 Using the `sizes` prop, you can configure exactly the sizes you need for your application:
 
 ```svelte
 <script>
-  import { CldImage } from 'svelte-cloudinary';
+	import { CldImage } from 'svelte-cloudinary';
 </script>
 
 <CldImage
-  ...
-  sizes="(max-width: 768px) 100vw,
+	sizes="(max-width: 768px) 100vw,
           (max-width: 1200px) 50vw,
-          33vw"
+          33vw" />
 ```
 
 Which would give you roughly full width images on mobile, a 2-column layout on tablets, and 3-column layout on desktop views.
@@ -52,8 +40,7 @@ In an example such as:
 	height="600"
 	sizes="(max-width: 480px) 100vw, 50vw"
 	crop="thumb"
-	gravity="faces"
-/>
+	gravity="faces" />
 ```
 
 Using cropping, we're setting a width of 600px and a height of 600px, telling Cloudinary we want to take our original image, crop it to that size, then position the focal point to the face in the image detected using AI.
@@ -67,7 +54,6 @@ To avoid attempting to load upscaled images, resulting in blurry or grainy image
 For instance, in the above, the resulting responive image in the HTML may look like:
 
 ```jsx copy
-
 <img
   sizes="(max-width: 480px) 100vw, 50vw"
   srcset="
@@ -85,4 +71,4 @@ For instance, in the above, the resulting responive image in the HTML may look l
 
 Notice that all of the URLs are the same except for the first one, as it's smaller than 600px.
 
-When the browser attempts to load these responsive images, it will effectively ignore the same URLs, only having loaded it once if resizing the browser.
\ No newline at end of file
+When the browser attempts to load these responsive images, it will effectively ignore the same URLs, only having loaded it once if resizing the browser.
diff --git a/packages/docs/src/content/docs/guides/social-media-card.mdx b/packages/docs/src/content/docs/guides/social-media-card.mdx
index 1fe3e9e3..2c7e6cf6 100644
--- a/packages/docs/src/content/docs/guides/social-media-card.mdx
+++ b/packages/docs/src/content/docs/guides/social-media-card.mdx
@@ -1,113 +1,105 @@
 ---
-title: Guides/Social Media Cards
+title: Social Media Cards
 ---
 
-<script>
-
-import Callout from '$lib/components/Callout.svelte'
-import Video from '$lib/components/Video.svelte'
-import { Tabs, Tab} from '$lib/components/Tabs'
-import HeaderImage  from '$lib/components/HeaderImage.svelte'
-import CodeBlock from '$lib/components/CodeBlock.svelte'
-import { CldOgImage, CldImage } from 'svelte-cloudinary'
-
-</script>
+import { Tabs, TabItem } from '@astrojs/starlight/components';
+import { CldOgImage, CldImage } from 'svelte-cloudinary';
 
-# Generating Social Media Cards
-
-<Callout emoji={false}>
-  CldOgImage does not render an `&lt;img&gt;` tag, meaning it can't be visually embedded on a page. The following examples make use of the `&lt;CldImage&gt;` tag to showcase what's possible.
-</Callout>
+:::note
+CldOgImage does not render an `<img>` tag, meaning it can't be
+visually embedded on a page. The following examples make use of the
+`<CldImage>` tag to showcase what's possible.
+:::
 
 ## Example
 
-<div style="max-width: 500px; margin: 0 auto">
-  <CldImage
-    width="2400"
-    height="1200"
-    crop="fill"
-    gravity="auto"
-    src={`images/white`}
-    sizes="100w"
-    overlays={[
-      {
-        publicId: 'images/mountain',
-        position: {
-          x: 0,
-          y: 0,
-          gravity: 'north_east',
-        },
-        effects: [
-          {
-            crop: 'fill',
-            gravity: 'auto',
-            width: 800,
-            height: 1200
-          }
-        ]
-      },
-      {
-        width: 1400,
-        crop: 'fit',
-        text: {
-          color: 'black',
-          fontFamily: 'Source Sans Pro',
-          fontSize: 160,
-          fontWeight: 'bold',
-          text: 'Svelte Cloudinary'
-        },
-        position: {
-          x: 100,
-          y: -100,
-          gravity: 'west',
-        },
-      },
-      {
-        width: 1400,
-        crop: 'fit',
-        text: {
-          color: 'black',
-          fontFamily: 'Source Sans Pro',
-          fontSize: 80,
-          text: 'Get the power of Cloudinary in a Svelte project with Svelte Cloudinary!'
-        },
-        position: {
-          x: 100,
-          y: 100,
-          gravity: 'west',
-        },
-      },
-    ]}
-    alt="Svelte Cloudinary with picture of a mountain"
-  />
-</div>
+<CldImage
+	width="2400"
+	height="1200"
+	crop="fill"
+	gravity="auto"
+	src="images/white"
+	sizes="100w"
+	overlays={[
+		{
+			publicId: 'images/mountain',
+			position: {
+				x: 0,
+				y: 0,
+				gravity: 'north_east',
+			},
+			effects: [
+				{
+					crop: 'fill',
+					gravity: 'auto',
+					width: 800,
+					height: 1200,
+				},
+			],
+		},
+		{
+			width: 1400,
+			crop: 'fit',
+			text: {
+				color: 'black',
+				fontFamily: 'Source Sans Pro',
+				fontSize: 160,
+				fontWeight: 'bold',
+				text: 'Svelte Cloudinary',
+			},
+			position: {
+				x: 100,
+				y: -100,
+				gravity: 'west',
+			},
+		},
+		{
+			width: 1400,
+			crop: 'fit',
+			text: {
+				color: 'black',
+				fontFamily: 'Source Sans Pro',
+				fontSize: 80,
+				text: 'Get the power of Cloudinary in a Svelte project with Svelte Cloudinary!',
+			},
+			position: {
+				x: 100,
+				y: 100,
+				gravity: 'west',
+			},
+		},
+	]}
+	alt="Svelte Cloudinary with picture of a mountain"
+/>
 
-<Tabs tabs={['CldOgImage', 'getCldOgImageUrl']}>
-<Tab type="code" open title="CldOgImage">
+<Tabs syncKey="image-api">
+<TabItem label="<CldImage />">
 
-```svelte
+```svelte {6}
 <script>
 	import { CldImage } from 'svelte-cloudinary';
 </script>
 
 <CldOgImage
 	src="images/white"
+	twitterTitle="Svelte Cloudinary"
+	alt="Svelte Cloudinary with picture of a mountain"
 	overlays={[
 		{
 			publicId: 'images/mountain',
 			position: {
 				x: 0,
 				y: 0,
-				gravity: 'north_east'
+				gravity: 'north_east',
 			},
 			effects: [
 				{
 					crop: 'fill',
 					gravity: 'auto',
 					width: 800,
-					height: 1200
-				}
-			]
+					height: 1200,
+				},
+			],
 		},
 		{
 			width: 1400,
@@ -117,13 +109,13 @@ import { CldOgImage, CldImage } from 'svelte-cloudinary'
 				fontFamily: 'Source Sans Pro',
 				fontSize: 160,
 				fontWeight: 'bold',
-				text: 'Svelte Cloudinary'
+				text: 'Svelte Cloudinary',
 			},
 			position: {
 				x: 100,
 				y: -100,
-				gravity: 'west'
-			}
+				gravity: 'west',
+			},
 		},
 		{
 			width: 1400,
@@ -132,85 +124,78 @@ import { CldOgImage, CldImage } from 'svelte-cloudinary'
 				color: 'black',
 				fontFamily: 'Source Sans Pro',
 				fontSize: 80,
-				text: 'Get the power of Cloudinary in a Svelte project with Svelte Cloudinary!'
+				text: 'Get the power of Cloudinary in a Svelte project with Svelte Cloudinary!',
 			},
 			position: {
 				x: 100,
 				y: 100,
-				gravity: 'west'
-			}
-		}
-	]}
-	twitterTitle="Svelte Cloudinary"
-	alt="Svelte Cloudinary with picture of a mountain"
-/>
+				gravity: 'west',
+			},
+		},
+	]} />
 ```
 
-  </Tab>
-  <Tab type="code" title="getCldOgImageUrl">
+</TabItem>
 
-```svelte
-<script>
-	import { getCldOgImageUrl } from 'svelte-cloudinary';
+<TabItem label="getCldImageUrl()">
 
-	const cldUrl = getCldOgImageUrl({
-		src: 'images/white',
-		overlays: [
-			{
-				publicId: 'images/mountain',
-				position: {
-					x: 0,
-					y: 0,
-					gravity: 'north_east'
-				},
-				effects: [
-					{
-						crop: 'fill',
-						gravity: 'auto',
-						width: 800,
-						height: 1200
-					}
-				]
+```ts {3}
+import { getCldOgImageUrl } from 'svelte-cloudinary';
+
+// You're responsible for adding the correct meta tags
+const url = getCldOgImageUrl({
+	src: 'images/white',
+	overlays: [
+		{
+			publicId: 'images/mountain',
+			position: {
+				x: 0,
+				y: 0,
+				gravity: 'north_east',
 			},
-			{
-				width: 1400,
-				crop: 'fit',
-				text: {
-					color: 'black',
-					fontFamily: 'Source Sans Pro',
-					fontSize: 160,
-					fontWeight: 'bold',
-					text: 'Svelte Cloudinary'
+			effects: [
+				{
+					crop: 'fill',
+					gravity: 'auto',
+					width: 800,
+					height: 1200,
 				},
-				position: {
-					x: 100,
-					y: -100,
-					gravity: 'west'
-				}
+			],
+		},
+		{
+			width: 1400,
+			crop: 'fit',
+			text: {
+				color: 'black',
+				fontFamily: 'Source Sans Pro',
+				fontSize: 160,
+				fontWeight: 'bold',
+				text: 'Svelte Cloudinary',
 			},
-			{
-				width: 1400,
-				crop: 'fit',
-				text: {
-					color: 'black',
-					fontFamily: 'Source Sans Pro',
-					fontSize: 80,
-					text: 'Get the power of Cloudinary in a Svelte project with Svelte Cloudinary!'
-				},
-				position: {
-					x: 100,
-					y: 100,
-					gravity: 'west'
-				}
-			}
-		]
-	});
-</script>
+			position: {
+				x: 100,
+				y: -100,
+				gravity: 'west',
+			},
+		},
+		{
+			width: 1400,
+			crop: 'fit',
+			text: {
+				color: 'black',
+				fontFamily: 'Source Sans Pro',
+				fontSize: 80,
+				text: 'Get the power of Cloudinary in a Svelte project with Svelte Cloudinary!',
+			},
+			position: {
+				x: 100,
+				y: 100,
+				gravity: 'west',
+			},
+		},
+	],
+});
 ```
 
-  </Tab>
+</TabItem>
 </Tabs>
-
-## Learn More
-
-- [CldOgImage Configuration](/cldogimage/configuration)
\ No newline at end of file
diff --git a/packages/docs/src/content/docs/guides/text-overlays.mdx b/packages/docs/src/content/docs/guides/text-overlays.mdx
index e9927dee..c3114a12 100644
--- a/packages/docs/src/content/docs/guides/text-overlays.mdx
+++ b/packages/docs/src/content/docs/guides/text-overlays.mdx
@@ -1,57 +1,48 @@
 ---
-title: Guides/Text Overlays
+title: Text Overlays
 ---
 
-<script>
-
-import Callout from '$lib/components/Callout.svelte'
-import Video from '$lib/components/Video.svelte'
-import { Tabs, Tab} from '$lib/components/Tabs'
-import HeaderImage  from '$lib/components/HeaderImage.svelte'
-import CodeBlock from '$lib/components/CodeBlock.svelte'
-import { CldOgImage, CldImage } from 'svelte-cloudinary'
-
-</script>
-
-# Adding Text to an Image
+import { Tabs, TabItem } from '@astrojs/starlight/components';
+import { CldOgImage, CldImage } from 'svelte-cloudinary';
 
 You can add text on top of your image with text-based overlays.
 
 ## Example
 
-<div style="max-width: 500px; margin: 0 auto">
-  <CldImage
-    width="1335"
-    height="891"
-    src={`images/sneakers`}
+<CldImage
+	width="1335"
+	height="891"
+	src="images/sneakers"
     sizes="100vw"
-    overlays={[{
-      width: 2670 - 20,
-      crop: 'fit',
-      position: {
-        x: 140,
-        y: 140,
-        angle: -20,
-        gravity: 'south_east',
-      },
-      text: {
-        color: 'blueviolet',
-        fontFamily: 'Source Sans Pro',
-        fontSize: 160,
-        fontWeight: 'bold',
-        textDecoration: 'underline',
-        letterSpacing: 14,
-        text: 'Cool Beans'
-      }
-    }]}
-    alt="Sneakers with Cool Beans"
-  />
-</div>
+	alt="Sneakers with Cool Beans"
+	overlays={[
+		{
+			width: 2670 - 20,
+			crop: 'fit',
+			position: {
+				x: 140,
+				y: 140,
+				angle: -20,
+				gravity: 'south_east',
+			},
+			text: {
+				color: 'blueviolet',
+				fontFamily: 'Source Sans Pro',
+				fontSize: 160,
+				fontWeight: 'bold',
+				textDecoration: 'underline',
+				letterSpacing: 14,
+				text: 'Cool Beans',
+			},
+		},
+	]}
 
-<Tabs tabs={['CldImage', 'getCldImageUrl']}>
-<Tab type="code" open title="CldImage">
+/>
+
+<Tabs syncKey="image-api">
+<TabItem label="<CldImage />">
 
-```svelte
+```svelte {11-30}
 <script>
 	import { CldImage } from 'svelte-cloudinary';
 </script>
@@ -61,6 +52,7 @@ You can add text on top of your image with text-based overlays.
 	height="891"
 	src="images/sneakers"
 	sizes="100vw"
+	alt="Sneakers with Cool Beans"
 	overlays={[
 		{
 			width: 2670 - 20,
@@ -69,7 +61,7 @@ You can add text on top of your image with text-based overlays.
 				x: 140,
 				y: 140,
 				angle: -20,
-				gravity: 'south_east'
+				gravity: 'south_east',
 			},
 			text: {
 				color: 'blueviolet',
@@ -78,54 +70,46 @@ You can add text on top of your image with text-based overlays.
 				fontWeight: 'bold',
 				textDecoration: 'underline',
 				letterSpacing: 14,
-				text: 'Cool Beans'
-			}
-		}
-	]}
-	alt="Sneakers with Cool Beans"
-/>
+				text: 'Cool Beans',
+			},
+		},
+	]} />
 ```
 
-  </Tab>
-  <Tab type="code" title="getCldImageUrl">
+</TabItem>
 
-```svelte
-<script>
-	import { getCldImageUrl } from 'svelte-cloudinary';
+<TabItem label="getCldImageUrl()">
 
-	const cldUrl = getCldImageUrl({
-		width: 1335,
-		height: 891,
-		src: 'images/sneakers',
-		overlays: [
-			{
-				width: 2670 - 20,
-				crop: 'fit',
-				position: {
-					x: 140,
-					y: 140,
-					angle: -20,
-					gravity: 'south_east'
-				},
-				text: {
-					color: 'blueviolet',
-					fontFamily: 'Source Sans Pro',
-					fontSize: 160,
-					fontWeight: 'bold',
-					textDecoration: 'underline',
-					letterSpacing: 14,
-					text: 'Cool Beans'
-				}
-			}
-		]
-	});
-</script>
+```ts {7-27}
+import { getCldImageUrl } from 'svelte-cloudinary';
+
+const url = getCldImageUrl({
+	width: 1335,
+	height: 891,
+	src: 'images/sneakers',
+	overlays: [
+		{
+			width: 2670 - 20,
+			crop: 'fit',
+			position: {
+				x: 140,
+				y: 140,
+				angle: -20,
+				gravity: 'south_east',
+			},
+			text: {
+				color: 'blueviolet',
+				fontFamily: 'Source Sans Pro',
+				fontSize: 160,
+				fontWeight: 'bold',
+				textDecoration: 'underline',
+				letterSpacing: 14,
+				text: 'Cool Beans',
+			},
+		},
+	],
+});
 ```
 
-  </Tab>
+</TabItem>
 </Tabs>
-
-## Learn More
-
-- [CldImage](/cldimage/usage)
-- [getCldImageUrl](/getcldimageurl/usage)
\ No newline at end of file
diff --git a/packages/docs/src/content/docs/guides/uploading-images-and-videos.mdx b/packages/docs/src/content/docs/guides/uploading-images-and-videos.mdx
deleted file mode 100644
index 1ed5e5aa..00000000
--- a/packages/docs/src/content/docs/guides/uploading-images-and-videos.mdx
+++ /dev/null
@@ -1,53 +0,0 @@
----
-title: Guides/Uploading Images and Videos
----
-
-<script>
-	import { PUBLIC_CLOUDINARY_UNSIGNED_UPLOAD_PRESET } from '$env/static/public';
-	import { CldUploadButton, CldImage } from 'svelte-cloudinary'
-	import Callout from '$lib/components/Callout.svelte'
-
-	let resource
-</script>
-
-# Uploading Images & Videos
-
-Use the [CldUploadButton](/clduploadbutton/usage) or [CldUploadWidget](/clduploadwidget/usage) components to add upload capabilities to your app.
-
-The components utilize the [Cloudinary Upload Widget](https://cloudinary.com/documentation/upload_widget), built for Svelte.
-
-## Example
-
-<CldUploadButton
-class="cldbutton"
-onUpload={(result, widget) => {
-resource = result?.info;
-widget.close();
-}}
-uploadPreset={PUBLIC_CLOUDINARY_UNSIGNED_UPLOAD_PRESET}
-/>
-{#if resource?.resource_type === 'image'}
-<CldImage width={resource.width} height={resource.height} src={resource?.public_id} alt="Uploaded Asset" />
-{/if}
-
-{#if resource?.resource_type === 'video'}
-<video controls width={resource.width} height={resource.height} src={resource?.secure_url} alt="Uploaded Asset" />
-{/if}
-
-```svelte
-<script>
-	import { CldUploadButton } from 'svelte-cloudinary';
-</script>
-
-<CldUploadButton
-	onUpload={onUploadCallback}
-	signatureEndpoint="<Endpoint (ex: /api/sign-cloudinary-params)>"
-	uploadPreset="<Upload Preset>"
->
-	Upload to Cloudinary
-</CldUploadButton>
-```
-
-## Learn More
-
-- [CldUploadButton](/clduploadbutton/usage)
\ No newline at end of file

From 24147f2270ebb6cabb0e6f03f034cd6b2bfe077f Mon Sep 17 00:00:00 2001
From: "Willow (GHOST)" <git@willow.sh>
Date: Wed, 4 Mar 2026 06:36:46 +0000
Subject: [PATCH 6/9] chore: get rest of guides running

---
 packages/docs/astro.config.mjs                |   1 +
 .../src/content/docs/guides/placeholders.mdx  | 131 ++++++++++++++++++
 .../guides/uploading-images-and-videos.mdx    |  19 +++
 packages/docs/src/lib/examples/Upload.svelte  |  33 +++++
 4 files changed, 184 insertions(+)
 create mode 100644 packages/docs/src/content/docs/guides/placeholders.mdx
 create mode 100644 packages/docs/src/content/docs/guides/uploading-images-and-videos.mdx
 create mode 100644 packages/docs/src/lib/examples/Upload.svelte

diff --git a/packages/docs/astro.config.mjs b/packages/docs/astro.config.mjs
index eaaf9a61..f64edea9 100644
--- a/packages/docs/astro.config.mjs
+++ b/packages/docs/astro.config.mjs
@@ -177,6 +177,7 @@ export default defineConfig({
 		optimizeDeps: {
 			exclude: ['svelte-cloudinary'],
 		},
+		envPrefix: ['PUBLIC', 'VITE'],
 		plugins: [
 			{
 				// https://github.com/sveltejs/svelte/issues/9288#issuecomment-1748034687
diff --git a/packages/docs/src/content/docs/guides/placeholders.mdx b/packages/docs/src/content/docs/guides/placeholders.mdx
new file mode 100644
index 00000000..1ea82e96
--- /dev/null
+++ b/packages/docs/src/content/docs/guides/placeholders.mdx
@@ -0,0 +1,131 @@
+---
+title: Placeholders
+---
+
+import { Tabs, TabItem } from '@astrojs/starlight/components';
+import { CldOgImage, CldImage } from 'svelte-cloudinary';
+
+CldImage wraps the Unpic Image component, thus giving us access to the placeholder API
+which can display an SVG image while the image itself is loading.
+
+This helps for providing a great user experience, rather than an empty space, to help
+let the visitor know that image is loading.
+
+To do this, we have several options:
+
+- `placeholder="blur"` coupled with a `blurDataURL`
+- `placeholder="..."` with the contents being a data URL
+
+## Blurred Images
+
+To achieve a blurred image effect, we can first convert our Cloudinary image to a Data URL
+then pass it in to our CldImage component.
+
+<CldImage
+	width="800"
+	height="600"
+	crop="fill"
+	src="images/mountain"
+	sizes="100w"
+	placeholder="blur"
+	blurDataURL="data:image/jpeg;base64,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"
+	alt="Mountains"
+/>
+
+Inside of the SvelteKit app, we can utilize server side code to generate a data URL from our image.
+
+```js
+
+import { getCldImageUrl } from 'svelte-cloudinary';
+
+export const load = () => {
+  const imageUrl = getCldImageUrl({
+    src: '<Your Public ID>',
+    width: 100, // Resize the original file to a smaller size
+  });
+  const response = await fetch(imageUrl);
+  const arrayBuffer = await response.arrayBuffer();
+  const buffer = Buffer.from(arrayBuffer);
+  const base64 = buffer.toString("base64");
+  const dataUrl = `data:${response.type};base64,${base64}`;
+  return {
+     dataUrl
+  }
+}
+```
+
+Then when rendering CldImage, utilize the `dataUrl` using `placeholder` and `blurDataURL`:
+
+```svelte
+<script>
+	import { CldImage } from 'svelte-cloudinary';
+	export let data;
+</script>
+
+<CldImage
+	src="<Your Public ID>"
+	width="600"
+	height="400"
+	alt="Decriptive text"
+	placeholder="blur"
+	blurDataURL={data.dataUrl} />
+```
+
+## Shimmer
+
+In a similar fashion, we can create a shimmer effect when
+our images are loading.
+
+<CldImage
+	width="800"
+	height="600"
+	crop="fill"
+	src="images/mountain"
+	sizes="100w"
+	placeholder="data:image/svg+xml;base64,CiAgICA8c3ZnIHdpZHRoPSI2MDAiIGhlaWdodD0iNDAwIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgICA8ZGVmcz4KICAgICAgICA8bGluZWFyR3JhZGllbnQgaWQ9ImciPgogICAgICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iIzMzMyIgb2Zmc2V0PSIyMCUiIC8+CiAgICAgICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjMjIyIiBvZmZzZXQ9IjUwJSIgLz4KICAgICAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiMzMzMiIG9mZnNldD0iNzAlIiAvPgogICAgICAgIDwvbGluZWFyR3JhZGllbnQ+CiAgICAgIDwvZGVmcz4KICAgICAgPHJlY3Qgd2lkdGg9IjYwMCIgaGVpZ2h0PSI0MDAiIGZpbGw9IiMzMzMiIC8+CiAgICAgIDxyZWN0IGlkPSJyIiB3aWR0aD0iNjAwIiBoZWlnaHQ9IjQwMCIgZmlsbD0idXJsKCNnKSIgLz4KICAgICAgPGFuaW1hdGUgeGxpbms6aHJlZj0iI3IiIGF0dHJpYnV0ZU5hbWU9IngiIGZyb209Ii02MDAiIHRvPSI2MDAiIGR1cj0iMXMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAgLz4KICAgIDwvc3ZnPg=="
+	alt="Mountains"
+/>
+
+Inside of the SvelteKit app you can use a server side code `+page.server.js` to generate a data URL from our image.
+
+```js
+export const load = () => {
+	const shimmer = (w: number, h: number) => `
+    <svg width="${w}" height="${h}" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+      <defs>
+        <linearGradient id="g">
+          <stop stop-color="#333" offset="20%" />
+          <stop stop-color="#222" offset="50%" />
+          <stop stop-color="#333" offset="70%" />
+        </linearGradient>
+      </defs>
+      <rect width="${w}" height="${h}" fill="#333" />
+      <rect id="r" width="${w}" height="${h}" fill="url(#g)" />
+      <animate xlink:href="#r" attributeName="x" from="-${w}" to="${w}" dur="1s" repeatCount="indefinite"  />
+    </svg>`;
+
+	const toBase64 = (str: string) =>
+		typeof window === 'undefined' ? Buffer.from(str).toString('base64') : window.btoa(str);
+
+	const dataUrl = `data:image/svg+xml;base64,${toBase64(shimmer(600, 400))}`;
+	return {
+		dataUrl
+	};
+};
+```
+
+Then when rendering CldImage, utilize the `dataUrl` using `placeholder`:
+
+```svelte
+<script>
+	import { CldImage } from 'svelte-cloudinary';
+	export let data;
+</script>
+
+<CldImage
+	src="<Your Public ID>"
+	width="600"
+	height="400"
+	alt="Decriptive text"
+	placeholder={data.dataUrl} />
+```
diff --git a/packages/docs/src/content/docs/guides/uploading-images-and-videos.mdx b/packages/docs/src/content/docs/guides/uploading-images-and-videos.mdx
new file mode 100644
index 00000000..7af54054
--- /dev/null
+++ b/packages/docs/src/content/docs/guides/uploading-images-and-videos.mdx
@@ -0,0 +1,19 @@
+---
+title: Uploading Images and Videos
+---
+
+import uploadCode from '$lib/examples/Upload.svelte?raw';
+import { Code } from '@astrojs/starlight/components';
+import Upload from '$lib/examples/Upload.svelte';
+
+# Uploading Images & Videos
+
+Use the [CldUploadButton](/clduploadbutton/usage) or [CldUploadWidget](/clduploadwidget/usage) components to add upload capabilities to your app.
+
+The components utilize the [Cloudinary Upload Widget](https://cloudinary.com/documentation/upload_widget), built for Svelte.
+
+## Example
+
+<Upload client:load />
+
+<Code code={uploadCode} lang="svelte" />
diff --git a/packages/docs/src/lib/examples/Upload.svelte b/packages/docs/src/lib/examples/Upload.svelte
new file mode 100644
index 00000000..c4f79422
--- /dev/null
+++ b/packages/docs/src/lib/examples/Upload.svelte
@@ -0,0 +1,33 @@
+<script lang="ts">
+	import {
+		type CloudinaryUploadWidgetInfo,
+		CldUploadButton,
+		CldVideoPlayer,
+		CldImage,
+	} from 'svelte-cloudinary';
+
+	let info = $state<CloudinaryUploadWidgetInfo | null>(null);
+</script>
+
+<CldUploadButton
+	onUpload={(result, widget) => {
+		if (typeof result.info === 'object') {
+			info = result.info;
+			widget.close();
+		}
+	}} />
+
+{#if info?.resource_type === 'video'}
+	<CldVideoPlayer
+		width={info.width}
+		height={info.height}
+		src={info.public_id} />
+{:else if info}
+	<CldImage
+		width={info.width}
+		height={info.height}
+		src={info.public_id}
+		alt="Uploaded Asset" />
+{:else}
+	<p>Try uploading something!</p>
+{/if}

From bd529c5aaa8965fd3fcdb2769eb8603161fab67f Mon Sep 17 00:00:00 2001
From: "Willow (GHOST)" <git@willow.sh>
Date: Wed, 4 Mar 2026 06:52:16 +0000
Subject: [PATCH 7/9] chore: update redirects

---
 vercel.json | 40 ----------------------------------------
 1 file changed, 40 deletions(-)

diff --git a/vercel.json b/vercel.json
index 7172e2cc..aec43f6a 100644
--- a/vercel.json
+++ b/vercel.json
@@ -77,46 +77,6 @@
 			"source": "/getcldogimageurl/examples",
 			"destination": "/missing"
 		},
-		{
-			"source": "/guides",
-			"destination": "/missing"
-		},
-		{
-			"source": "/guides/background-removal",
-			"destination": "/missing"
-		},
-		{
-			"source": "/guides/image-optimization",
-			"destination": "/missing"
-		},
-		{
-			"source": "/guides/image-overlays",
-			"destination": "/missing"
-		},
-		{
-			"source": "/guides/image-underlays",
-			"destination": "/missing"
-		},
-		{
-			"source": "/guides/placeholders",
-			"destination": "/missing"
-		},
-		{
-			"source": "/guides/responsive-images",
-			"destination": "/missing"
-		},
-		{
-			"source": "/guides/social-media-cards",
-			"destination": "/missing"
-		},
-		{
-			"source": "/guides/text-overlays",
-			"destination": "/missing"
-		},
-		{
-			"source": "/guides/uploading-images-and-videos",
-			"destination": "/missing"
-		},
 		{
 			"source": "/templates",
 			"destination": "/missing"

From 23cc806cc4b24ed29bf2977b595f614add5a46d5 Mon Sep 17 00:00:00 2001
From: "Willow (GHOST)" <git@willow.sh>
Date: Wed, 4 Mar 2026 06:52:51 +0000
Subject: [PATCH 8/9] fix: file name

---
 .../docs/guides/{social-media-card.mdx => social-media-cards.mdx} | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename packages/docs/src/content/docs/guides/{social-media-card.mdx => social-media-cards.mdx} (100%)

diff --git a/packages/docs/src/content/docs/guides/social-media-card.mdx b/packages/docs/src/content/docs/guides/social-media-cards.mdx
similarity index 100%
rename from packages/docs/src/content/docs/guides/social-media-card.mdx
rename to packages/docs/src/content/docs/guides/social-media-cards.mdx

From a6dd86d68711d067c1d086862c12c54727eb2b6e Mon Sep 17 00:00:00 2001
From: "Willow (GHOST)" <git@willow.sh>
Date: Wed, 4 Mar 2026 07:26:40 +0000
Subject: [PATCH 9/9] docs: update content

---
 .../docs/guides/background-removal.mdx        |  21 ++-
 .../content/docs/guides/image-overlays.mdx    | 107 --------------
 .../content/docs/guides/image-underlays.mdx   |  17 +--
 .../{text-overlays.mdx => overlays.mdx}       |  96 +++++++++----
 .../src/content/docs/guides/placeholders.mdx  | 131 ------------------
 .../content/docs/guides/responsive-images.mdx |  71 +++-------
 .../docs/guides/social-media-cards.mdx        |  94 ++++++-------
 .../guides/uploading-images-and-videos.mdx    |  13 +-
 packages/docs/src/lib/examples/Upload.svelte  |  18 +--
 vercel.json                                   |   8 ++
 10 files changed, 171 insertions(+), 405 deletions(-)
 delete mode 100644 packages/docs/src/content/docs/guides/image-overlays.mdx
 rename packages/docs/src/content/docs/guides/{text-overlays.mdx => overlays.mdx} (52%)
 delete mode 100644 packages/docs/src/content/docs/guides/placeholders.mdx

diff --git a/packages/docs/src/content/docs/guides/background-removal.mdx b/packages/docs/src/content/docs/guides/background-removal.mdx
index fe9c6757..a7cbb457 100644
--- a/packages/docs/src/content/docs/guides/background-removal.mdx
+++ b/packages/docs/src/content/docs/guides/background-removal.mdx
@@ -1,27 +1,23 @@
 ---
 title: Background Removal
+description: Learn how to use Cloudinary to remove a background from your image.
 ---
 
 import { Tabs, TabItem } from '@astrojs/starlight/components';
 import { CldImage } from 'svelte-cloudinary';
 
-# Removing a Background from an Image
-
-The CldImage component allows you to easily remove backgrounds from images using the `removeBackground` prop.
-
 :::note
-Removing backgrounds require enabling the [Cloudinary AI Background Removal Add-On](https://cloudinary.com/documentation/cloudinary_ai_background_removal_addon) - a free tier is available!
+The Cloudinary AI Background Removal add-on is required to use this feature.
 :::
 
-## Example
+You can use the `removeBackground` option to generatively remove the background from an image, for example:
 
 <CldImage
-	width={960}
-	height={600}
+	width="960"
+	height="600"
 	src="images/turtle"
-	sizes="(max-width: 480px) 100vw, 50vw"
-	removeBackground
 	alt="turtle image"
+	removeBackground
 />
 
 <Tabs syncKey="image-api">
@@ -36,9 +32,8 @@ Removing backgrounds require enabling the [Cloudinary AI Background Removal Add-
 	width="960"
 	height="600"
 	src="images/turtle"
-	sizes="100vw"
-	removeBackground
-	alt="Turtle" />
+	alt="turtle image"
+	removeBackground />
 ```
 
 </TabItem>
diff --git a/packages/docs/src/content/docs/guides/image-overlays.mdx b/packages/docs/src/content/docs/guides/image-overlays.mdx
deleted file mode 100644
index db3ca38a..00000000
--- a/packages/docs/src/content/docs/guides/image-overlays.mdx
+++ /dev/null
@@ -1,107 +0,0 @@
----
-title: Image Overlays
----
-
-import { Tabs, TabItem } from '@astrojs/starlight/components';
-import { CldOgImage, CldImage } from 'svelte-cloudinary';
-
-# Overlaying Images
-
-You can add images on top of other images by using image-based overlays.
-
-## Example
-
-<CldImage
-	width="960"
-	height="600"
-	src="images/turtle"
-	sizes="100vw"
-	alt="Turtle with earth"
-	overlays={[
-		{
-			publicId: 'images/earth',
-			position: {
-				x: 50,
-				y: 50,
-				gravity: 'north_west',
-			},
-			effects: [
-				{
-					crop: 'fill',
-					gravity: 'auto',
-					width: 500,
-					height: 500,
-				},
-			],
-		},
-	]}
-/>
-
-<Tabs syncKey="image-api">
-<TabItem label="<CldImage />">
-
-```svelte {11-27}
-<script>
-	import { CldImage } from 'svelte-cloudinary';
-</script>
-
-<CldImage
-	width="960"
-	height="600"
-	src="images/turtle"
-	sizes="100vw"
-	alt="Turtle with earth"
-	overlays={[
-		{
-			publicId: 'images/earth',
-			position: {
-				x: 50,
-				y: 50,
-				gravity: 'north_west',
-			},
-			effects: [
-				{
-					crop: 'fill',
-					gravity: 'auto',
-					width: 500,
-					height: 500,
-				},
-			],
-		},
-	]} />
-```
-
-</TabItem>
-
-<TabItem label="getCldImageUrl()">
-
-```ts {7-24}
-import { getCldImageUrl } from 'svelte-cloudinary';
-
-const url = getCldImageUrl({
-	width: 960,
-	height: 600,
-	src: 'images/turtle',
-	overlays: [
-		{
-			publicId: 'images/earth',
-			position: {
-				x: 50,
-				y: 50,
-				gravity: 'north_west',
-			},
-			effects: [
-				{
-					crop: 'fill',
-					gravity: 'auto',
-					width: 500,
-					height: 500,
-				},
-			],
-		},
-	],
-});
-```
-
-</TabItem>
-</Tabs>
diff --git a/packages/docs/src/content/docs/guides/image-underlays.mdx b/packages/docs/src/content/docs/guides/image-underlays.mdx
index 70caed99..d971e332 100644
--- a/packages/docs/src/content/docs/guides/image-underlays.mdx
+++ b/packages/docs/src/content/docs/guides/image-underlays.mdx
@@ -1,32 +1,27 @@
 ---
 title: Image Underlays
+description: Learn how to use Cloudinary to programatically place images under images.
 ---
 
 import { Tabs, TabItem } from '@astrojs/starlight/components';
 import { CldOgImage, CldImage } from 'svelte-cloudinary';
 
-# Adding Layers Under Images
-
-Underlays function very similar to overlays in terms of options, however they **do not support text**.
-
-See the examples above under Overlays to learn more about the available configurations.
-
-## Example
+An image underlay allows you to place one image under another (it doesn't work with text). For example we can remove the background from this turtle image, then underlay an image of space:
 
 <CldImage
 	width="960"
 	height="600"
 	src="images/turtle"
 	sizes="100vw"
+	alt="Turtle swimming in a galaxy"
 	removeBackground
 	underlay="images/galaxy"
-	alt="Turtle swimming in a galaxy"
 />
 
 <Tabs syncKey="image-api">
 <TabItem label="<CldImage />">
 
-```svelte {10-11}
+```svelte {11-12}
 <script>
 	import { CldImage } from 'svelte-cloudinary';
 </script>
@@ -36,9 +31,9 @@ See the examples above under Overlays to learn more about the available configur
 	height="600"
 	src="images/turtle"
 	sizes="100vw"
+	alt="Turtle swimming in a galaxy"
 	removeBackground
-	underlay="images/galaxy"
-	alt="Turtle swimming in a galaxy" />
+	underlay="images/galaxy" />
 ```
 
 </TabItem>
diff --git a/packages/docs/src/content/docs/guides/text-overlays.mdx b/packages/docs/src/content/docs/guides/overlays.mdx
similarity index 52%
rename from packages/docs/src/content/docs/guides/text-overlays.mdx
rename to packages/docs/src/content/docs/guides/overlays.mdx
index c3114a12..1772cbc1 100644
--- a/packages/docs/src/content/docs/guides/text-overlays.mdx
+++ b/packages/docs/src/content/docs/guides/overlays.mdx
@@ -1,21 +1,36 @@
 ---
-title: Text Overlays
+title: Overlays
+description: Learn how to use Cloudinary to programatically place images/text on top of other images/text.
 ---
 
 import { Tabs, TabItem } from '@astrojs/starlight/components';
 import { CldOgImage, CldImage } from 'svelte-cloudinary';
 
-You can add text on top of your image with text-based overlays.
-
-## Example
+You can use the overlays feature to stack images or text on top of each other, for example:
 
 <CldImage
-	width="1335"
-	height="891"
-	src="images/sneakers"
-    sizes="100vw"
-	alt="Sneakers with Cool Beans"
+	width="960"
+	height="600"
+	src="images/turtle"
+	sizes="100vw"
+	alt="Turtle with earth"
 	overlays={[
+		{
+			publicId: 'images/earth',
+			position: {
+				x: 50,
+				y: 50,
+				gravity: 'north_west',
+			},
+			effects: [
+				{
+					crop: 'fill',
+					gravity: 'auto',
+					width: 500,
+					height: 500,
+				},
+			],
+		},
 		{
 			width: 2670 - 20,
 			crop: 'fit',
@@ -28,32 +43,47 @@ You can add text on top of your image with text-based overlays.
 			text: {
 				color: 'blueviolet',
 				fontFamily: 'Source Sans Pro',
-				fontSize: 160,
+				fontSize: 80,
 				fontWeight: 'bold',
 				textDecoration: 'underline',
 				letterSpacing: 14,
-				text: 'Cool Beans',
+				text: 'Svelte x Cloudinary',
 			},
 		},
 	]}
-
 />
 
 <Tabs syncKey="image-api">
 <TabItem label="<CldImage />">
 
-```svelte {11-30}
+```svelte {11-47}
 <script>
 	import { CldImage } from 'svelte-cloudinary';
 </script>
 
 <CldImage
-	width="1335"
-	height="891"
-	src="images/sneakers"
+	width="960"
+	height="600"
+	src="images/turtle"
 	sizes="100vw"
-	alt="Sneakers with Cool Beans"
+	alt="Turtle with earth"
 	overlays={[
+		{
+			publicId: 'images/earth',
+			position: {
+				x: 50,
+				y: 50,
+				gravity: 'north_west',
+			},
+			effects: [
+				{
+					crop: 'fill',
+					gravity: 'auto',
+					width: 500,
+					height: 500,
+				},
+			],
+		},
 		{
 			width: 2670 - 20,
 			crop: 'fit',
@@ -66,11 +96,11 @@ You can add text on top of your image with text-based overlays.
 			text: {
 				color: 'blueviolet',
 				fontFamily: 'Source Sans Pro',
-				fontSize: 160,
+				fontSize: 80,
 				fontWeight: 'bold',
 				textDecoration: 'underline',
 				letterSpacing: 14,
-				text: 'Cool Beans',
+				text: 'Svelte x Cloudinary',
 			},
 		},
 	]} />
@@ -80,14 +110,30 @@ You can add text on top of your image with text-based overlays.
 
 <TabItem label="getCldImageUrl()">
 
-```ts {7-27}
+```ts {7-43}
 import { getCldImageUrl } from 'svelte-cloudinary';
 
 const url = getCldImageUrl({
-	width: 1335,
-	height: 891,
-	src: 'images/sneakers',
+	width: 960,
+	height: 600,
+	src: 'images/turtle',
 	overlays: [
+		{
+			publicId: 'images/earth',
+			position: {
+				x: 50,
+				y: 50,
+				gravity: 'north_west',
+			},
+			effects: [
+				{
+					crop: 'fill',
+					gravity: 'auto',
+					width: 500,
+					height: 500,
+				},
+			],
+		},
 		{
 			width: 2670 - 20,
 			crop: 'fit',
@@ -100,11 +146,11 @@ const url = getCldImageUrl({
 			text: {
 				color: 'blueviolet',
 				fontFamily: 'Source Sans Pro',
-				fontSize: 160,
+				fontSize: 80,
 				fontWeight: 'bold',
 				textDecoration: 'underline',
 				letterSpacing: 14,
-				text: 'Cool Beans',
+				text: 'Svelte x Cloudinary',
 			},
 		},
 	],
diff --git a/packages/docs/src/content/docs/guides/placeholders.mdx b/packages/docs/src/content/docs/guides/placeholders.mdx
deleted file mode 100644
index 1ea82e96..00000000
--- a/packages/docs/src/content/docs/guides/placeholders.mdx
+++ /dev/null
@@ -1,131 +0,0 @@
----
-title: Placeholders
----
-
-import { Tabs, TabItem } from '@astrojs/starlight/components';
-import { CldOgImage, CldImage } from 'svelte-cloudinary';
-
-CldImage wraps the Unpic Image component, thus giving us access to the placeholder API
-which can display an SVG image while the image itself is loading.
-
-This helps for providing a great user experience, rather than an empty space, to help
-let the visitor know that image is loading.
-
-To do this, we have several options:
-
-- `placeholder="blur"` coupled with a `blurDataURL`
-- `placeholder="..."` with the contents being a data URL
-
-## Blurred Images
-
-To achieve a blurred image effect, we can first convert our Cloudinary image to a Data URL
-then pass it in to our CldImage component.
-
-<CldImage
-	width="800"
-	height="600"
-	crop="fill"
-	src="images/mountain"
-	sizes="100w"
-	placeholder="blur"
-	blurDataURL="data:image/jpeg;base64,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"
-	alt="Mountains"
-/>
-
-Inside of the SvelteKit app, we can utilize server side code to generate a data URL from our image.
-
-```js
-
-import { getCldImageUrl } from 'svelte-cloudinary';
-
-export const load = () => {
-  const imageUrl = getCldImageUrl({
-    src: '<Your Public ID>',
-    width: 100, // Resize the original file to a smaller size
-  });
-  const response = await fetch(imageUrl);
-  const arrayBuffer = await response.arrayBuffer();
-  const buffer = Buffer.from(arrayBuffer);
-  const base64 = buffer.toString("base64");
-  const dataUrl = `data:${response.type};base64,${base64}`;
-  return {
-     dataUrl
-  }
-}
-```
-
-Then when rendering CldImage, utilize the `dataUrl` using `placeholder` and `blurDataURL`:
-
-```svelte
-<script>
-	import { CldImage } from 'svelte-cloudinary';
-	export let data;
-</script>
-
-<CldImage
-	src="<Your Public ID>"
-	width="600"
-	height="400"
-	alt="Decriptive text"
-	placeholder="blur"
-	blurDataURL={data.dataUrl} />
-```
-
-## Shimmer
-
-In a similar fashion, we can create a shimmer effect when
-our images are loading.
-
-<CldImage
-	width="800"
-	height="600"
-	crop="fill"
-	src="images/mountain"
-	sizes="100w"
-	placeholder="data:image/svg+xml;base64,CiAgICA8c3ZnIHdpZHRoPSI2MDAiIGhlaWdodD0iNDAwIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgICA8ZGVmcz4KICAgICAgICA8bGluZWFyR3JhZGllbnQgaWQ9ImciPgogICAgICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iIzMzMyIgb2Zmc2V0PSIyMCUiIC8+CiAgICAgICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjMjIyIiBvZmZzZXQ9IjUwJSIgLz4KICAgICAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiMzMzMiIG9mZnNldD0iNzAlIiAvPgogICAgICAgIDwvbGluZWFyR3JhZGllbnQ+CiAgICAgIDwvZGVmcz4KICAgICAgPHJlY3Qgd2lkdGg9IjYwMCIgaGVpZ2h0PSI0MDAiIGZpbGw9IiMzMzMiIC8+CiAgICAgIDxyZWN0IGlkPSJyIiB3aWR0aD0iNjAwIiBoZWlnaHQ9IjQwMCIgZmlsbD0idXJsKCNnKSIgLz4KICAgICAgPGFuaW1hdGUgeGxpbms6aHJlZj0iI3IiIGF0dHJpYnV0ZU5hbWU9IngiIGZyb209Ii02MDAiIHRvPSI2MDAiIGR1cj0iMXMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAgLz4KICAgIDwvc3ZnPg=="
-	alt="Mountains"
-/>
-
-Inside of the SvelteKit app you can use a server side code `+page.server.js` to generate a data URL from our image.
-
-```js
-export const load = () => {
-	const shimmer = (w: number, h: number) => `
-    <svg width="${w}" height="${h}" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-      <defs>
-        <linearGradient id="g">
-          <stop stop-color="#333" offset="20%" />
-          <stop stop-color="#222" offset="50%" />
-          <stop stop-color="#333" offset="70%" />
-        </linearGradient>
-      </defs>
-      <rect width="${w}" height="${h}" fill="#333" />
-      <rect id="r" width="${w}" height="${h}" fill="url(#g)" />
-      <animate xlink:href="#r" attributeName="x" from="-${w}" to="${w}" dur="1s" repeatCount="indefinite"  />
-    </svg>`;
-
-	const toBase64 = (str: string) =>
-		typeof window === 'undefined' ? Buffer.from(str).toString('base64') : window.btoa(str);
-
-	const dataUrl = `data:image/svg+xml;base64,${toBase64(shimmer(600, 400))}`;
-	return {
-		dataUrl
-	};
-};
-```
-
-Then when rendering CldImage, utilize the `dataUrl` using `placeholder`:
-
-```svelte
-<script>
-	import { CldImage } from 'svelte-cloudinary';
-	export let data;
-</script>
-
-<CldImage
-	src="<Your Public ID>"
-	width="600"
-	height="400"
-	alt="Decriptive text"
-	placeholder={data.dataUrl} />
-```
diff --git a/packages/docs/src/content/docs/guides/responsive-images.mdx b/packages/docs/src/content/docs/guides/responsive-images.mdx
index 3274a15b..5cc667e6 100644
--- a/packages/docs/src/content/docs/guides/responsive-images.mdx
+++ b/packages/docs/src/content/docs/guides/responsive-images.mdx
@@ -1,33 +1,23 @@
 ---
 title: Responsive Images
+description: Learn how to use Cloudinary to generate performant responsive images.
 ---
 
 import { CldOgImage, CldImage } from 'svelte-cloudinary';
 
-The CldImage component takes advantage of responsive images generated using the Unpic component.
+Responsive images are great for performance since the browser can load a smaller image on a smaller device, where the drop in quality isn't noticable. This will increase page load times and general user experience for everyone, as they get both a noticably high quality image and faster page load.
 
-Using the `sizes` prop, you can configure exactly the sizes you need for your application:
-
-```svelte
-<script>
-	import { CldImage } from 'svelte-cloudinary';
-</script>
+You can configure specifically the image sizes you want, using a media query like synax, with the `sizes` prop/option. Cloudinary will generate the necessary sizes on the fly, as usual!
 
 <CldImage
+	width="960"
+	height="600"
+	src="images/turtle"
 	sizes="(max-width: 768px) 100vw,
-          (max-width: 1200px) 50vw,
-          33vw" />
-```
-
-Which would give you roughly full width images on mobile, a 2-column layout on tablets, and 3-column layout on desktop views.
-
-To ensure that the responsive images can effectively determine all appropriate sizes for the images, use the actual image width and height when specifying the dimension props.
-
-### Responsive Images & CldImage
-
-The only caveat to this is when using cropping modes in Cloudinary.
-
-In an example such as:
+        (max-width: 1200px) 50vw,
+        33vw"
+	alt="turtle image"
+/>
 
 ```svelte
 <script>
@@ -35,40 +25,11 @@ In an example such as:
 </script>
 
 <CldImage
-	...
-	width="600"
+	width="960"
 	height="600"
-	sizes="(max-width: 480px) 100vw, 50vw"
-	crop="thumb"
-	gravity="faces" />
-```
-
-Using cropping, we're setting a width of 600px and a height of 600px, telling Cloudinary we want to take our original image, crop it to that size, then position the focal point to the face in the image detected using AI.
-
-From a responsive standpoint, we're stating that we want full width images on anything less than 480px and half-width images on anything above.
-
-The challenge here is when cropping the image, we're cropping it to 600px, which is smaller than some of the sizes we want to responsively serve. We don't want to responsively change that cropped size, otherwise we would change the cropping results due to the crop attempting to grab different portions of the image depending on the size.
-
-To avoid attempting to load upscaled images, resulting in blurry or grainy images as well as more bandwidth used on a device, any responsive size that is greater than the set width will not be generated and instead, we'll deliver an image at the size specifiy (in this example, 600x600).
-
-For instance, in the above, the resulting responive image in the HTML may look like:
-
-```jsx copy
-<img
-  sizes="(max-width: 480px) 100vw, 50vw"
-  srcset="
-    https://res.cloudinary.com/svelte-cloudinary/image/upload/c_thumb,w_600,h_600,g_faces/c_scale,w_384/f_auto/q_auto/v1/images/woman-headphones 384w,
-    https://res.cloudinary.com/svelte-cloudinary/image/upload/c_thumb,w_600,h_600,g_faces/f_auto/q_auto/v1/images/woman-headphones 640w,
-    https://res.cloudinary.com/svelte-cloudinary/image/upload/c_thumb,w_600,h_600,g_faces/f_auto/q_auto/v1/images/woman-headphones 750w,
-    https://res.cloudinary.com/svelte-cloudinary/image/upload/c_thumb,w_600,h_600,g_faces/f_auto/q_auto/v1/images/woman-headphones 828w,
-    https://res.cloudinary.com/svelte-cloudinary/image/upload/c_thumb,w_600,h_600,g_faces/f_auto/q_auto/v1/images/woman-headphones 1080w,
-    https://res.cloudinary.com/svelte-cloudinary/image/upload/c_thumb,w_600,h_600,g_faces/f_auto/q_auto/v1/images/woman-headphones 1200w,
-    https://res.cloudinary.com/svelte-cloudinary/image/upload/c_thumb,w_600,h_600,g_faces/f_auto/q_auto/v1/images/woman-headphones 1920w,
-    https://res.cloudinary.com/svelte-cloudinary/image/upload/c_thumb,w_600,h_600,g_faces/f_auto/q_auto/v1/images/woman-headphones 2048w,
-    https://res.cloudinary.com/svelte-cloudinary/image/upload/c_thumb,w_600,h_600,g_faces/f_auto/q_auto/v1/images/woman-headphones 3840w
-  " ... />
+	src="images/turtle"
+	sizes="(max-width: 768px) 100vw,
+        (max-width: 1200px) 50vw,
+        33vw"
+	alt="turtle image" />
 ```
-
-Notice that all of the URLs are the same except for the first one, as it's smaller than 600px.
-
-When the browser attempts to load these responsive images, it will effectively ignore the same URLs, only having loaded it once if resizing the browser.
diff --git a/packages/docs/src/content/docs/guides/social-media-cards.mdx b/packages/docs/src/content/docs/guides/social-media-cards.mdx
index 2c7e6cf6..6e0d4d61 100644
--- a/packages/docs/src/content/docs/guides/social-media-cards.mdx
+++ b/packages/docs/src/content/docs/guides/social-media-cards.mdx
@@ -1,18 +1,15 @@
 ---
 title: Social Media Cards
+description: Learn how to use Cloudinary to generate dynamic social media cards.
 ---
 
 import { Tabs, TabItem } from '@astrojs/starlight/components';
 import { CldOgImage, CldImage } from 'svelte-cloudinary';
 
 :::note
-CldOgImage does not render an `<img>` tag, meaning it can't be
-visually embedded on a page. The following examples make use of the
-`<CldImage>` tag to showcase what's possible.
+CldOgImage does not render an `<img>` tag, meaning it can't be visually embedded on a page. The following examples make use of the `<CldImage>` tag to showcase what's possible.
 :::
 
-## Example
-
 <CldImage
 	width="2400"
 	height="1200"
@@ -20,9 +17,10 @@ visually embedded on a page. The following examples make use of the
 	gravity="auto"
 	src="images/white"
 	sizes="100w"
+	alt="Svelte Cloudinary with picture of a mountain"
 	overlays={[
 		{
-			publicId: 'images/mountain',
+			publicId: `images/mountain`,
 			position: {
 				x: 0,
 				y: 0,
@@ -32,50 +30,50 @@ visually embedded on a page. The following examples make use of the
 				{
 					crop: 'fill',
 					gravity: 'auto',
-					width: 800,
-					height: 1200,
+					width: '0.33',
+					height: '1.0',
 				},
 			],
+			flags: ['relative'],
 		},
 		{
-			width: 1400,
+			width: 700,
 			crop: 'fit',
 			text: {
 				color: 'black',
 				fontFamily: 'Source Sans Pro',
-				fontSize: 160,
+				fontSize: 80,
 				fontWeight: 'bold',
-				text: 'Svelte Cloudinary',
+				text: 'Next Cloudinary',
 			},
 			position: {
-				x: 100,
-				y: -100,
+				x: 80,
+				y: -50,
 				gravity: 'west',
 			},
 		},
 		{
-			width: 1400,
+			width: 700,
 			crop: 'fit',
 			text: {
 				color: 'black',
 				fontFamily: 'Source Sans Pro',
-				fontSize: 80,
-				text: 'Get the power of Cloudinary in a Svelte project with Svelte Cloudinary!',
+				fontSize: 40,
+				text: 'Get the power of Cloudinary in a Next.js project with Next Cloudinary!',
 			},
 			position: {
-				x: 100,
-				y: 100,
+				x: 80,
+				y: 50,
 				gravity: 'west',
 			},
 		},
 	]}
-	alt="Svelte Cloudinary with picture of a mountain"
 />
 
 <Tabs syncKey="image-api">
 <TabItem label="<CldImage />">
 
-```svelte {6}
+```svelte {9-58}
 <script>
 	import { CldImage } from 'svelte-cloudinary';
 </script>
@@ -86,7 +84,7 @@ visually embedded on a page. The following examples make use of the
 	alt="Svelte Cloudinary with picture of a mountain"
 	overlays={[
 		{
-			publicId: 'images/mountain',
+			publicId: `images/mountain`,
 			position: {
 				x: 0,
 				y: 0,
@@ -96,39 +94,40 @@ visually embedded on a page. The following examples make use of the
 				{
 					crop: 'fill',
 					gravity: 'auto',
-					width: 800,
-					height: 1200,
+					width: '0.33',
+					height: '1.0',
 				},
 			],
+			flags: ['relative'],
 		},
 		{
-			width: 1400,
+			width: 700,
 			crop: 'fit',
 			text: {
 				color: 'black',
 				fontFamily: 'Source Sans Pro',
-				fontSize: 160,
+				fontSize: 80,
 				fontWeight: 'bold',
-				text: 'Svelte Cloudinary',
+				text: 'Next Cloudinary',
 			},
 			position: {
-				x: 100,
-				y: -100,
+				x: 80,
+				y: -50,
 				gravity: 'west',
 			},
 		},
 		{
-			width: 1400,
+			width: 700,
 			crop: 'fit',
 			text: {
 				color: 'black',
 				fontFamily: 'Source Sans Pro',
-				fontSize: 80,
-				text: 'Get the power of Cloudinary in a Svelte project with Svelte Cloudinary!',
+				fontSize: 40,
+				text: 'Get the power of Cloudinary in a Next.js project with Next Cloudinary!',
 			},
 			position: {
-				x: 100,
-				y: 100,
+				x: 80,
+				y: 50,
 				gravity: 'west',
 			},
 		},
@@ -139,7 +138,7 @@ visually embedded on a page. The following examples make use of the
 
 <TabItem label="getCldImageUrl()">
 
-```ts {3}
+```ts {6-55}
 import { getCldOgImageUrl } from 'svelte-cloudinary';
 
 // You're responsible for adding the correct meta tags
@@ -147,7 +146,7 @@ const url = getCldOgImageUrl({
 	src: 'images/white',
 	overlays: [
 		{
-			publicId: 'images/mountain',
+			publicId: `images/mountain`,
 			position: {
 				x: 0,
 				y: 0,
@@ -157,39 +156,40 @@ const url = getCldOgImageUrl({
 				{
 					crop: 'fill',
 					gravity: 'auto',
-					width: 800,
-					height: 1200,
+					width: '0.33',
+					height: '1.0',
 				},
 			],
+			flags: ['relative'],
 		},
 		{
-			width: 1400,
+			width: 700,
 			crop: 'fit',
 			text: {
 				color: 'black',
 				fontFamily: 'Source Sans Pro',
-				fontSize: 160,
+				fontSize: 80,
 				fontWeight: 'bold',
-				text: 'Svelte Cloudinary',
+				text: 'Next Cloudinary',
 			},
 			position: {
-				x: 100,
-				y: -100,
+				x: 80,
+				y: -50,
 				gravity: 'west',
 			},
 		},
 		{
-			width: 1400,
+			width: 700,
 			crop: 'fit',
 			text: {
 				color: 'black',
 				fontFamily: 'Source Sans Pro',
-				fontSize: 80,
-				text: 'Get the power of Cloudinary in a Svelte project with Svelte Cloudinary!',
+				fontSize: 40,
+				text: 'Get the power of Cloudinary in a Next.js project with Next Cloudinary!',
 			},
 			position: {
-				x: 100,
-				y: 100,
+				x: 80,
+				y: 50,
 				gravity: 'west',
 			},
 		},
diff --git a/packages/docs/src/content/docs/guides/uploading-images-and-videos.mdx b/packages/docs/src/content/docs/guides/uploading-images-and-videos.mdx
index 7af54054..39ee3178 100644
--- a/packages/docs/src/content/docs/guides/uploading-images-and-videos.mdx
+++ b/packages/docs/src/content/docs/guides/uploading-images-and-videos.mdx
@@ -1,19 +1,18 @@
 ---
 title: Uploading Images and Videos
+description: Learn how to use Cloudinary to enable users to upload images and/or videos.
 ---
 
 import uploadCode from '$lib/examples/Upload.svelte?raw';
 import { Code } from '@astrojs/starlight/components';
 import Upload from '$lib/examples/Upload.svelte';
 
-# Uploading Images & Videos
+You can use the upload widget, or as a shortcut the upload button, to enable the users to upload images and/or videos.
 
-Use the [CldUploadButton](/clduploadbutton/usage) or [CldUploadWidget](/clduploadwidget/usage) components to add upload capabilities to your app.
-
-The components utilize the [Cloudinary Upload Widget](https://cloudinary.com/documentation/upload_widget), built for Svelte.
-
-## Example
+:::caution
+Starlight (the documentation framework we use) messes with the upload widget, we're working on a fix but it'll work fine with your Svelte/SvelteKit websites!
+:::
 
 <Upload client:load />
 
-<Code code={uploadCode} lang="svelte" />
+<Code lang="svelte" code={uploadCode} />
diff --git a/packages/docs/src/lib/examples/Upload.svelte b/packages/docs/src/lib/examples/Upload.svelte
index c4f79422..cb4555b3 100644
--- a/packages/docs/src/lib/examples/Upload.svelte
+++ b/packages/docs/src/lib/examples/Upload.svelte
@@ -9,14 +9,6 @@
 	let info = $state<CloudinaryUploadWidgetInfo | null>(null);
 </script>
 
-<CldUploadButton
-	onUpload={(result, widget) => {
-		if (typeof result.info === 'object') {
-			info = result.info;
-			widget.close();
-		}
-	}} />
-
 {#if info?.resource_type === 'video'}
 	<CldVideoPlayer
 		width={info.width}
@@ -29,5 +21,13 @@
 		src={info.public_id}
 		alt="Uploaded Asset" />
 {:else}
-	<p>Try uploading something!</p>
+	<p>Click the button below to try uploading something:</p>
 {/if}
+
+<CldUploadButton
+	onUpload={(result, widget) => {
+		if (typeof result.info === 'object') {
+			info = result.info;
+			widget.close();
+		}
+	}} />
diff --git a/vercel.json b/vercel.json
index aec43f6a..de6f5734 100644
--- a/vercel.json
+++ b/vercel.json
@@ -73,6 +73,14 @@
 			"source": "/getcldogimageurl/configuration",
 			"destination": "/helpers/getcldogimageurl/configuration"
 		},
+		{
+			"source": "/guides/images-overlays",
+			"destination": "/guides/overlays"
+		},
+		{
+			"source": "/guides/text-overlays",
+			"destination": "/guides/overlays"
+		},
 		{
 			"source": "/getcldogimageurl/examples",
 			"destination": "/missing"