diff --git a/docs/src/app.postcss b/docs/src/app.postcss
index c09c5652..384f4358 100644
--- a/docs/src/app.postcss
+++ b/docs/src/app.postcss
@@ -53,3 +53,5 @@
 [data-theme='night'] {
   --searchbox-bg: rgba(249,250,251,.1);
 }
+
+
diff --git a/docs/src/docs/components/cldogimage/usage.md b/docs/src/docs/components/cldogimage/usage.md
index 7d0a44a9..982932a1 100644
--- a/docs/src/docs/components/cldogimage/usage.md
+++ b/docs/src/docs/components/cldogimage/usage.md
@@ -6,6 +6,7 @@ order: 1
 <script>
     import Callout from '$lib/components/Callout.svelte'
     import { CldOgImage, CldImage } from 'svelte-cloudinary'
+    import Video from '$lib/components/Video.svelte'
 </script>
 
 <CldOgImage
@@ -123,6 +124,12 @@ The CldOgImage component uses the same API as [CldImage](/CldImage/configuration
 </Callout>
 
 
+## Watch & Learn
+<Video
+title="Dynamic Social Cards in Svelte with Svelte Cloudinary - Dev Hints"
+url="https://www.youtube.com/watch?v=KsOtGDCocFs"
+/>
+
 ## Learn More about CldOgImage
 * [Configuration](/CldOgImage/configuration)
 * [Examples](/CldOgImage/examples)
diff --git a/docs/src/docs/components/clduploadwidget/configuration.md b/docs/src/docs/components/clduploadwidget/configuration.md
index 9e20af06..62379f1b 100644
--- a/docs/src/docs/components/clduploadwidget/configuration.md
+++ b/docs/src/docs/components/clduploadwidget/configuration.md
@@ -2,33 +2,512 @@
 title: CldUploadWidget/Configuration
 order: 2
 ---
+<script>
+    import Table from '$lib/components/Table.svelte'
+    import Callout from '$lib/components/Callout.svelte'
+</script>
 
 # CldUploadWidget Configuration
 
-## Props
+## Configuration
 
-| Prop Name          | Type               | Example                                |
-|--------------------|--------------------|----------------------------------------|
-| onError            | function           | `function (error, widget) { }`         |
-| onUpload           | function           | `function (result, widget) { }`        |
-| options            | object             | `{ encryption: {...} }`                |
-| signatureEndpoint  | string             | `"/api/sign-cloudinary-params.js"`     |
-| uploadPreset       | string             | `"my-upload-preset"`                   |
+<Table
+  columns={[
+    {
+      id: 'prop',
+      title: 'Prop'
+    },
+    {
+      id: 'type',
+      title: 'Type'
+    },
+    {
+      id: 'example',
+      title: 'Example'
+    },
+    {
+      id: 'more'
+    }
+  ]}
+  data={[
+    {
+      prop: 'children',
+      type: 'function',
+      example: '<code>{(options) => {}}</code>',
+      more: '',
+    },
+    {
+      prop: 'options',
+      type: 'object',
+      example: '<code>{encryption: {...}}</code>',
+      more: '<a className="whitespace-nowrap" href="https://cloudinary.com/documentation/upload_widget_reference#parameters">More Info</a>'
+    },
+    {
+      prop: 'signatureEndpoint',
+      type: 'string',
+      example: '<code>{`/api/sign-cloudinary-params.js`}</code>',
+      more: '<a className="whitespace-nowrap" href="/clduploadwidget/signed-uploads">More Info</a>'
+    },
+    {
+      prop: 'uploadPreset',
+      type: 'string',
+      example: '<code>{`my-upload-preset`}</code>',
+      more: '<a className="whitespace-nowrap" href="https://cloudinary.com/documentation/upload_presets">More Info</a>'
+    },
+  ]}
+/>
 
-## Composing Widget UI
+### `children`
 
-CldUploadWidget uses a `slot` to render a component and exposes a function and two state variables.
+A function that returns a React component that receives instance methods and options for the widget.
 
-| Prop Name          | Type               | Usage                                |
-|--------------------|--------------------|----------------------------------------|
-| open            | function           | You call this function to trigger the widget opening action |
-| widget           | object           | Gives you access to the cloudinary widget object |
-| isLoading            | boolean             | Let you know if the process status |
+```svelte
+'<script>
+  import { CldUploadWidget } from 'svelte-cloudinary'
+</script>
 
+<CldUploadWidget uploadPreset="<Upload Preset>" let:open>
+      <button class="button" on:click={open}>
+        Upload
+      </button>
+</CldUploadWidget>
+```
+
+### `options`
+
+Parameters used to customize and configure the Upload Widget instance. These options are passed in
+directly to the Upload Widget, exposing all available parameters through the `options` object.
+
+```js
+options={{
+  sources: ['local', 'url', 'unsplash'],
+  multiple: true,
+  maxFiles: 5
+}}
+```
+
+[Learn more about Upload Widget parameters](https://cloudinary.com/documentation/upload_widget_reference#parameters) on the Cloudinary docs.
+
+### `signatureEndpoint`
+
+An API endpoint used to sign the parameters generated during upload.
+
+```jsx copy showLineNumbers
+signatureEndpoint="/api/sign-cloudinary-params"
+```
+
+[Learn more about generating signatures](https://cloudinary.com/documentation/upload_images#generating_authentication_signatures) on the Cloudinary docs.
+
+### `uploadPreset`
+
+```js
+uploadPreset="my-upload-preset"
+```
+
+[Learn more about upload presets](https://cloudinary.com/documentation/upload_presets) on the Cloudinary docs.
+
+
+## Events
+
+<Table
+  columns={[
+    {
+      id: 'prop',
+      title: 'Prop'
+    },
+    {
+      id: 'type',
+      title: 'Type'
+    },
+    {
+      id: 'example',
+      title: 'Example'
+    },
+    {
+      id: 'more',
+    },
+  ]}
+  data={[
+    {
+      prop: 'onAbort',
+      type: 'function',
+      example: '<code>(results, options) => { }</code>',
+      more: '<a className="whitespace-nowrap" href="https://cloudinary.com/documentation/upload_widget_reference#abort">More Info</a>'
+    },
+    {
+      prop: 'onBatchCancelled',
+      type: 'function',
+      example: '<code>(results, options) => { }</code>',
+      more: '<a className="whitespace-nowrap" href="https://cloudinary.com/documentation/upload_widget_reference#batch_cancelled">More Info</a>'
+    },
+    {
+      prop: 'onClose',
+      type: 'function',
+      example: '<code>(widget) => { }</code>',
+      more: '<a className="whitespace-nowrap" href="https://cloudinary.com/documentation/upload_widget_reference#close_event">More Info</a>'
+    },
+    {
+      prop: 'onDisplayChanged',
+      type: 'function',
+      example: '<code>(results, options) => { }</code>',
+      more: '<a className="whitespace-nowrap" href="https://cloudinary.com/documentation/upload_widget_reference#display_changed">More Info</a>'
+    },
+    {
+      prop: 'onError',
+      type: 'function',
+      example: '<code>(error, widget) => { }</code>',
+      more: ''
+    },
+    {
+      prop: 'onOpen',
+      type: 'function',
+      example: '<code>(widget) => { }</code>',
+      more: '',
+    },
+    {
+      prop: 'onPublicId',
+      type: 'function',
+      example: '<code>(results, options) => { }</code>',
+      more: '<a className="whitespace-nowrap" href="https://cloudinary.com/documentation/upload_widget_reference#publicid">More Info</a>',
+    },
+    {
+      prop: 'onQueuesEnd',
+      type: 'function',
+      example: '<code>(results, options) => { }</code>',
+      more: '<a className="whitespace-nowrap" href="https://cloudinary.com/documentation/upload_widget_reference#queues_end">More Info</a>'
+    },
+    {
+      prop: 'onQueuesStart',
+      type: 'function',
+      example: '<code>(results, options) => { }</code>',
+      more: '<a className="whitespace-nowrap" href="https://cloudinary.com/documentation/upload_widget_reference#queues_start">More Info</a>'
+    },
+    {
+      prop: 'onRetry',
+      type: 'function',
+      example: '<code>(results, options) => { }</code>',
+      more: '<a className="whitespace-nowrap" href="https://cloudinary.com/documentation/upload_widget_reference#retry">More Info</a>'
+    },
+    {
+      prop: 'onShowCompleted',
+      type: 'function',
+      example: '<code>(results, options) => { }</code>',
+      more: '<a className="whitespace-nowrap" href="https://cloudinary.com/documentation/upload_widget_reference#show_completed">More Info</a>'
+    },
+    {
+      prop: 'onSourceChanged',
+      type: 'function',
+      example: '<code>(results, options) => { }</code>',
+      more: '<a className="whitespace-nowrap" href="https://cloudinary.com/documentation/upload_widget_reference#source_changed">More Info</a>'
+    },
+    {
+      prop: 'onSuccess',
+      type: 'function',
+      example: '<code>(results, options) => { }</code>',
+      more: '<a className="whitespace-nowrap" href="https://cloudinary.com/documentation/upload_widget_reference#success">More Info</a>'
+    },
+    {
+      prop: 'onTags',
+      type: 'function',
+      example: '<code>(results, options) => { }</code>',
+      more: '<a className="whitespace-nowrap" href="https://cloudinary.com/documentation/upload_widget_reference#tags">More Info</a>'
+    },
+    {
+      prop: 'onUpload',
+      type: 'function',
+      example: '<code>(results, widget) => { }</code>',
+    },
+    {
+      prop: 'onUploadAdded',
+      type: 'function',
+      example: '<code>(results, options) => { }</code>',
+      more: '<a className="whitespace-nowrap" href="https://cloudinary.com/documentation/upload_widget_reference#upload_added">More Info</a>'
+    },
+  ]}
+/>
+
+To learn more about the event callbacks and when they trigger, see: https://cloudinary.com/documentation/upload_widget_reference#events
+
+**Example**
+
+```jsx copy showLineNumbers
+<CldUploadWidget
+  ...
+  onSuccess={(results) => {
+    console.log('Public ID', results.info.public_id);
+  }}
+/>
+```
+
+### Callback Parameters
 
-```jsx
-<CldUploadWidget let:widget let:open let:isLoading>
-// Here is your UI
+Most of the callbacks provide a set of options that give access to the results, options, and widget instance.
+
+
+<Table
+  columns={[
+    {
+      id: 'prop',
+      title: 'Prop'
+    },
+    {
+      id: 'type',
+      title: 'Type'
+    },
+    {
+      id: 'description',
+      title: 'Description'
+    },
+  ]}
+  data={[
+    {
+      prop: 'error',
+      type: 'string',
+      description: 'If an error occurs, an explanation of what failed.'
+    },
+    {
+      prop: 'options',
+      type: 'object',
+      description: 'Instance methods and the widget instance.'
+    },
+    {
+      prop: 'results',
+      type: 'object',
+      description: 'The event that drove the callback and the info pertaining to the event (such as a resource).'
+    },
+  ]}
+/>
+
+<Callout emoji={false}>
+Future releases will work to create a more consistent interface between older methods and more recently added methods.
+</Callout>
+
+**Example**
+
+```jsx copy showLineNumbers
+<CldUploadWidget
+  ...
+  onSuccess={(results) => {
+    console.log('Public ID', results.info.public_id);
+  }}
+/>
+```
+
+#### `options`
+
+<Table
+  columns={[
+    {
+      id: 'prop',
+      title: 'Prop'
+    },
+    {
+      id: 'type',
+      title: 'Type'
+    },
+    {
+      id: 'description',
+      title: 'Description'
+    },
+  ]}
+  data={[
+    {
+      prop: 'widget',
+      type: 'Widget Instance',
+      description: 'The Cloudinary Upload Widget instance being rendered.'
+    },
+    {
+      prop: '[Instance Methods]',
+      type: 'Function',
+      description: '<span>See <a href="#instance-methods">Instance Methods</a> below</span>'
+    },
+  ]}
+/>
+
+
+#### `results`
+
+The event and results that were returned from the event.
+
+<Table
+  columns={[
+    {
+      id: 'prop',
+      title: 'Prop'
+    },
+    {
+      id: 'type',
+      title: 'Type'
+    },
+    {
+      id: 'description',
+      title: 'Description'
+    },
+  ]}
+  data={[
+    {
+      prop: 'event',
+      type: 'string',
+      description: 'The event that triggered the callback.'
+    },
+    {
+      prop: 'info',
+      type: 'string | object',
+      description: 'Information pertaining to the triggered event, such as the resulting uploaded resource.'
+    },
+  ]}
+/>
+
+A common use of results could be to retrieve an uploaded asset, which would be made available in the `info` property
+from the resulting event. If the result is a resource, the shape will include some of the following details.
+
+**Example**
+
+```js copy showLineNumbers
+{
+  height: 400;
+  public_id: 'mypublicid';
+  secure_url: 'https://res.cloudinary.com/.../mypublicid';
+  width: 400;
+  ...
+}
+```
+
+## Child Function Parameters
+
+By passing in a function as the child of the Upload Widget, you're able to gain access to the widget, results, and instance methods to interface directly with the widget.
+
+<Table
+  columns={[
+    {
+      id: 'prop',
+      title: 'Prop'
+    },
+    {
+      id: 'type',
+      title: 'Type'
+    },
+    {
+      id: 'description',
+      title: 'Description'
+    },
+  ]}
+  data={[
+    {
+      prop: 'cloudinary',
+      type: 'Cloudinary',
+      description: 'The Cloudinary instance which creates and manages the Widget instance.'
+    },
+    {
+      prop: 'error',
+      type: 'string',
+      description: 'The error, if any, produced by an upload widget action.'
+    },
+    {
+      prop: 'isLoading',
+      type: 'boolean',
+      description: 'Designates whether the upload widget is loading and initializing.'
+    },
+    {
+      prop: 'results',
+      type: 'object',
+      description: 'The event that triggered the results and information related to that event, which can include upload results.'
+    },
+    {
+      prop: 'widget',
+      type: 'Widget',
+      description: 'The widget instance attached to the current component.'
+    },
+    {
+      prop: '[Instance Methods]',
+      type: 'Function',
+      description: '<span>See <a href="#instance-methods">Instance Methods</a> below</span>'
+    },
+  ]}
+/>
+
+**Example**
+
+```jsx copy showLineNumbers
+<CldUploadWidget>
+  {({ cloudinary, widget, open }) => {
+    // Return UI
+  }}
 </CldUploadWidget>
 ```
 
+## Instance Methods
+
+The Upload Widget exposes instance methods that gives the ability to have greater control and flexbility over
+the upload experience.
+
+They're exposed either through event handler callback or child function parameters.
+
+<Table
+  columns={[
+    {
+      id: 'prop',
+      title: 'Prop'
+    },
+    {
+      id: 'type',
+      title: 'Type'
+    },
+    {
+      id: 'description',
+      title: 'Description'
+    },
+  ]}
+  data={[
+    {
+      prop: 'close',
+      type: 'function',
+      description: 'Closes and resets the widget to its initial state without removing it from memory.'
+    },
+    {
+      prop: 'destroy',
+      type: 'function',
+      description: 'Hides a previously rendered widget while retaining its current state in memory.'
+    },
+    {
+      prop: 'hide',
+      type: 'function',
+      description: 'Closes the widget and completely removes it from the DOM. Returns a promise that resolves upon cleanup completion.'
+    },
+    {
+      prop: 'isDestroyed',
+      type: 'function',
+      description: 'Returns whether the destroy method was called on this instance.'
+    },
+    {
+      prop: 'isMinimized',
+      type: 'function',
+      description: 'Returns whether the widget is currently minimized.'
+    },
+    {
+      prop: 'isShowing',
+      type: 'function',
+      description: 'Returns whether the widget is currently visible.'
+    },
+    {
+      prop: 'minimize',
+      type: 'function',
+      description: 'Minimizes the widget.'
+    },
+    {
+      prop: 'open',
+      type: 'function',
+      description: 'Renders an existing widget currently in memory, but that is not currently displayed.'
+    },
+    {
+      prop: 'show',
+      type: 'function',
+      description: 'Renders a previously hidden widget.'
+    },
+    {
+      prop: 'update',
+      type: 'function',
+      description: 'Updates a widget currently in memory with new options.'
+    },
+  ]}
+/>
diff --git a/docs/src/docs/components/clduploadwidget/signed-uploads.md b/docs/src/docs/components/clduploadwidget/signed-uploads.md
new file mode 100644
index 00000000..4f50191b
--- /dev/null
+++ b/docs/src/docs/components/clduploadwidget/signed-uploads.md
@@ -0,0 +1,90 @@
+---
+title: CldUploadWidget/Signed Uploads
+order: 4
+---
+
+<script>
+    import CodeBlock from '$lib/components/CodeBlock.svelte'
+    import Callout from '$lib/components/Callout.svelte'
+    import { CldUploadWidget } from 'svelte-cloudinary'
+	import { env } from '$env/dynamic/public';
+    let infoUpload
+	let infoUploadSecure
+
+</script>
+# Signing CldUploadWidget Uploads
+
+Signing requests is an easy way to provide enhanced security for your file uploads. This helps
+deter people from making unauthenticated uploads to your cloud.
+
+## Configuring Signed Uploads
+
+Setting up CldUploadWidget to sign uploads is as simple as passing an API endpoint as a prop:
+
+```svelte
+
+<script>
+  import { CldUploadWidget } from 'svelte-cloudinary';
+</script>
+
+<CldUploadWidget signatureEndpoint="<API Endpoint (ex: /api/sign-cloudinary-params)>" let:open>
+    <button on:click={open}>
+      Upload an Image
+    </button>
+</CldUploadWidget>
+```
+
+However, that API endpoint needs to return a specific shape in order to properly communicate
+with the CldUpload Widget.
+
+## API Endpoint to Sign Requests
+
+When working in SvelteKit, we gain access to a server environment through both somewhat traditional means
+and serverless functions.
+
+This means, we can use the [Cloudinary Node SDK](https://cloudinary.com/documentation/node_integration)
+in order to easily sign our requests.
+
+To start off, install the Cloudinary Node SDK with:
+
+```shell
+
+npm install cloudinary
+```
+
+In order to sign our requests, we'll need to use our Cloudinary API Key and Secret, so set additional
+environment variables:
+
+```
+VITE_PUBLIC_CLOUDINARY_API_KEY="<Your API Key>"
+CLOUDINARY_API_SECRET="<Your API Secret>"
+```
+
+Then, we want to create a new API endpoint, using a `+server.js` file.
+
+
+<CodeBlock>
+
+```js
+
+import { v2 as cloudinary } from "cloudinary";
+import { env } from '$env/dynamic/private';
+import { error, json } from "@sveltejs/kit";
+
+export const POST = (async ({ request }) => {
+	const body = await request.json()
+	const { paramsToSign } = body;
+	try {
+		const signature = cloudinary.utils.api_sign_request(
+			paramsToSign,
+			env.CLOUDINARY_API_SECRET
+		);
+		return json({ signature })
+	} catch (e) {
+		console.error(e)
+		throw error(500, (e as Error).message)
+	}
+});
+
+```
+</CodeBlock>
diff --git a/docs/src/docs/components/clduploadwidget/usage.md b/docs/src/docs/components/clduploadwidget/usage.md
index 18ac88b3..a25fe259 100644
--- a/docs/src/docs/components/clduploadwidget/usage.md
+++ b/docs/src/docs/components/clduploadwidget/usage.md
@@ -6,9 +6,10 @@ order: 1
 <script>
     import Callout from '$lib/components/Callout.svelte'
     import { CldUploadWidget } from 'svelte-cloudinary'
-	import { env } from '$env/dynamic/public';
+    import { env } from '$env/dynamic/public';
+    import Video from '$lib/components/Video.svelte'
     let infoUpload
-	let infoUploadSecure
+    let infoUploadSecure
 
 </script>
 
@@ -130,7 +131,11 @@ See a full example of an API endpoint used with the Svelte Cloudinary docs: http
     <p>URL: { infoUploadSecure?.secure_url }</p>
 </div>
 
-
+## Watch & Learn
+<Video
+title=""
+url="https://www.youtube.com/watch?v=UqnLbIzRnnI"
+/>
 
 ## Learn More about CldUploadWidget
 * [Configuration](/clduploadwidget/configuration)
diff --git a/docs/src/docs/meta.json b/docs/src/docs/meta.json
index 081d9a91..a5434d7e 100644
--- a/docs/src/docs/meta.json
+++ b/docs/src/docs/meta.json
@@ -51,7 +51,8 @@
           "children": [
             "usage",
             "configuration",
-            "examples"
+            "examples",
+            "signed-uploads"
           ]
         },
         {
diff --git a/docs/src/lib/components/CopyCodeInjector.svelte b/docs/src/lib/components/CopyCodeInjector.svelte
new file mode 100644
index 00000000..ed92e339
--- /dev/null
+++ b/docs/src/lib/components/CopyCodeInjector.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	onMount(() => {
+		// will add a children to any <pre> element with class language-*
+		let pres: HTMLCollection = document.getElementsByTagName('pre');
+		for (let _ of pres) {
+			const pre = _ as HTMLPreElement;
+			if (![...pre.classList].some((el) => el.startsWith('language-'))) {
+				continue;
+			}
+			const text = pre.innerText;
+			pre.classList.add('relative');
+			let copyButton = document.createElement('button');
+			copyButton.addEventListener('click', () => {
+				navigator.clipboard.writeText(text);
+				copyButton.innerHTML = 'Copied 👍';
+				setTimeout(() => {
+					copyButton.innerHTML = 'Copy';
+				}, 1500);
+			});
+			copyButton.className =
+				'copy absolute top-0 right-0 mt-2 mr-2 bcu-button variant-ringed-primary';
+			copyButton.innerText = 'Copy';
+			pre.appendChild(copyButton);
+		}
+	});
+</script>
+
+<slot />
diff --git a/docs/src/lib/components/Layout.svelte b/docs/src/lib/components/Layout.svelte
index ddc81085..37eb7bde 100644
--- a/docs/src/lib/components/Layout.svelte
+++ b/docs/src/lib/components/Layout.svelte
@@ -1,7 +1,9 @@
 <script lang="ts">
 	import { CldOgImage } from 'svelte-cloudinary';
+	import CopyCodeInjector from './CopyCodeInjector.svelte';
 	export let title;
 	const renderTitle = title.replace('/', ' ');
+
 </script>
 
 <svelte:head>
@@ -61,4 +63,6 @@
 	]}
 />
 
-<slot />
+<CopyCodeInjector>
+	<slot />
+</CopyCodeInjector>
diff --git a/svelte-cloudinary/src/lib/components/CldUploadButton.svelte b/svelte-cloudinary/src/lib/components/CldUploadButton.svelte
index ddc73c64..82aac25f 100644
--- a/svelte-cloudinary/src/lib/components/CldUploadButton.svelte
+++ b/svelte-cloudinary/src/lib/components/CldUploadButton.svelte
@@ -2,22 +2,45 @@
 	import type { HTMLButtonAttributes } from 'svelte/elements';
 	import CldUploadWidget from './CldUploadWidget.svelte';
 	import type { CldUploadWidgetProps } from './CldUploadWidgetTypes.ts';
-	import { invariant } from '$lib/util.js';
 
 	type $$Props = CldUploadWidgetProps & HTMLButtonAttributes;
 	// destructure the props
 	const {
-		uploadPreset,
-		signatureEndpoint,
+		children,
 		onError,
-		onUpload,
-		options,
 		onOpen,
+		onUpload,
+		onAbort,
+		onBatchCancelled,
 		onClose,
+		onDisplayChanged,
+		onPublicId,
+		onQueuesEnd,
+		onQueuesStart,
+		onRetry,
+		onShowCompleted,
+		onSourceChanged,
+		onSuccess,
+		onTags,
+		onUploadAdded,
+		options,
+		signatureEndpoint,
+		uploadPreset,
 		...buttonProps
 	} = $$props as $$Props;
 
 	let baseProps: CldUploadWidgetProps = {
+		onAbort,
+		onBatchCancelled,
+		onDisplayChanged,
+		onPublicId,
+		onQueuesEnd,
+		onQueuesStart,
+		onRetry,
+		onShowCompleted,
+		onSourceChanged,
+		onSuccess,
+		onUploadAdded,
 		onClose,
 		onOpen,
 		options,
@@ -26,13 +49,11 @@
 		uploadPreset,
 		signatureEndpoint
 	};
-	// @ts-expect-error the $$slots and $$scope attributes inside the buttonsProps object
 	// appears because of the spread operator on line 39
 	// this attributes should not be passed to the button html elements since are not valid attributes
-	delete buttonProps['$$slots']
+	delete buttonProps['$$slots'];
 	// @ts-expect-error
-	delete buttonProps['$$scope']
-
+	delete buttonProps['$$scope'];
 </script>
 
 <CldUploadWidget {...baseProps} let:open let:isLoading>
diff --git a/svelte-cloudinary/src/lib/components/CldUploadWidget.svelte b/svelte-cloudinary/src/lib/components/CldUploadWidget.svelte
index 593e4890..e781403d 100644
--- a/svelte-cloudinary/src/lib/components/CldUploadWidget.svelte
+++ b/svelte-cloudinary/src/lib/components/CldUploadWidget.svelte
@@ -3,12 +3,17 @@
 	import { triggerOnIdle, loadCloudinary } from '$lib/util.js';
 	import { checkCloudinaryCloudName } from '$lib/cloudinary.js';
 	import type {
-		ResultsEvents,
-		UploadWidget,
 		CldUploadWidgetProps,
-
-		ResultCallback
-
+		CldUploadWidgetInstanceMethods,
+		CldUploadWidgetCloseInstanceMethodOptions,
+		CldUploadWidgetDetsroyInstanceMethodOptions,
+		CldUploadWidgetOpenWidgetSources,
+		CldUploadWidgetOpenInstanceMethodOptions,
+		CldUploadEventCallback,
+		CldUploadWidgetError,
+		CldUploadWidgetResults,
+		CldUploadWidgetWidgetInstance,
+		CldUploadWidgetCloudinaryInstance,
 	} from './CldUploadWidgetTypes.ts';
 
 	type $$Props = CldUploadWidgetProps;
@@ -18,11 +23,27 @@
 		$$props as $$Props;
 
 	// References
-	let cloudinary: typeof window.cloudinary;
-	let widget: UploadWidget;
+	let cloudinary: CldUploadWidgetCloudinaryInstance;
+	let widget: CldUploadWidgetWidgetInstance;
 	const signed = !!signatureEndpoint;
 	const WIDGET_WATCHED_EVENTS = ['success', 'display-changed'];
 
+	const WIDGET_EVENTS: { [key: string]: string } = {
+		abort: 'onAbort',
+		'batch-cancelled': 'onBatchCancelled',
+		// 'close': 'onClose', // TODO: should follow other event patterns
+		'display-changed': 'onDisplayChanged',
+		publicid: 'onPublicId',
+		'queues-end': 'onQueuesEnd',
+		'queues-start': 'onQueuesStart',
+		retry: 'onRetry',
+		'show-completed': 'onShowCompleted',
+		'source-changed': 'onSourceChanged',
+		success: 'onSuccess',
+		tags: 'onTags',
+		'upload-added': 'onUploadAdded'
+	};
+
 	// Validation
 	checkCloudinaryCloudName(import.meta.env.VITE_PUBLIC_CLOUDINARY_CLOUD_NAME);
 
@@ -86,46 +107,36 @@
 	 */
 
 	function createWidget() {
-		const resultCallback: ResultCallback = (uploadError, uploadResult) => {
-			// The callback is a bit more chatty than failed or success so
-			// only trigger when one of those are the case. You can additionally
-			// create a separate handler such as onEvent and trigger it on
-			// ever occurrence
-			if (uploadError != null){
-				handleError(uploadError)
-			}
-
-			if (WIDGET_WATCHED_EVENTS.includes(uploadResult?.event)) {
-				handleResults(uploadResult)
-			}
+		 return cloudinary?.createUploadWidget(uploadOptions, (uploadError: CldUploadWidgetError, uploadResult: CldUploadWidgetResults) => {
+      if ( uploadError && uploadError !== null ) {
+        handleError(uploadError);
+      }
 
-		}
-		return cloudinary?.createUploadWidget(uploadOptions, resultCallback)
-	}
+      if ( typeof uploadResult?.event === 'string' ) {
+        if ( WIDGET_WATCHED_EVENTS.includes(uploadResult?.event) ) {
+          handleResults(uploadResult);
+        }
 
-	/**
-	 * open
-	 * @description When triggered, uses the current widget instance to open the upload modal
-	 */
+        const widgetEvent = WIDGET_EVENTS[uploadResult.event] as keyof typeof $$props;
 
-	function open() {
-		if (!widget) {
-			widget = createWidget();
-		}
-
-		widget?.open();
-
-		if (typeof onOpen === 'function') {
-			onOpen(widget);
-		}
+        if ( typeof widgetEvent === 'string' && typeof $$props[widgetEvent] === 'function' && typeof $$props[widgetEvent] ) {
+          const callback = $$props[widgetEvent] as CldUploadEventCallback;
+          callback(uploadResult, {
+            widget,
+            ...instanceMethods
+          });
+        }
+      }
+    });
 	}
 
+
 	function onLoadingError() {
 		console.error(`Failed to load Cloudinary Upload Widget`);
 	}
 	// Side effects
 
-	function handleResults(results: ResultsEvents) {
+	function handleResults(results: CldUploadWidgetResults) {
 		if (results != null) {
 			const isSuccess = results.event === 'success';
 			const isClosed = results.event === 'display-changed' && results.info === 'hidden';
@@ -145,14 +156,101 @@
 		}
 	}
 	onMount(() => {
-		if(!window.cloudinary?.createUploadWidget) {
-			return loadCloudinary({ onLoad: handleOnLoad, onError: handleError })
+		if (!window.cloudinary?.createUploadWidget) {
+			return loadCloudinary({ onLoad: handleOnLoad, onError: handleError });
 		}
 		return handleOnLoad();
 	});
 
-</script>
+	/**
+	 * Instance Methods
+	 * Gives the ability to interface directly with the Upload Widget instance methods like open and close
+	 * https://cloudinary.com/documentation/upload_widget_reference#instance_methods
+	 */
 
+	function invokeInstanceMethod<TMethod extends keyof CldUploadWidgetInstanceMethods>(
+		method: TMethod,
+		options: Parameters<CldUploadWidgetInstanceMethods[TMethod]> = [] as Parameters<
+			CldUploadWidgetInstanceMethods[TMethod]
+		>
+	) {
+		if (!widget) {
+			widget = createWidget();
+		}
+
+		if (typeof widget?.[method] === 'function') {
+			return widget?.[method](...options);
+		}
+	}
 
-<slot {open} {widget} {cloudinary} {isLoading} data-testid="slot"/>
+	function close(options?: CldUploadWidgetCloseInstanceMethodOptions) {
+		invokeInstanceMethod('close', [options]);
+	}
+
+	function destroy(options?: CldUploadWidgetDetsroyInstanceMethodOptions) {
+		return invokeInstanceMethod('destroy', [options]);
+	}
+
+	function hide() {
+		invokeInstanceMethod('hide');
+	}
+
+	function isDestroyed() {
+		return invokeInstanceMethod('isDestroyed');
+	}
+
+	function isMinimized() {
+		return invokeInstanceMethod('isMinimized');
+	}
+
+	function isShowing() {
+		return invokeInstanceMethod('isShowing');
+	}
+
+	function minimize() {
+		invokeInstanceMethod('minimize');
+	}
+
+	/**
+	 * open
+	 * @description When triggered, uses the current widget instance to open the upload modal
+	 * user can pass custom parameters to customize the experience, check more
+	 * https://cloudinary.com/documentation/upload_widget_reference#open
+	 * widgetSource can only be string | null
+	 * options can be a Map or undefined
+	*/
+	function open(
+		widgetSource?: CldUploadWidgetOpenWidgetSources,
+		options?: CldUploadWidgetOpenInstanceMethodOptions
+	) {
+		invokeInstanceMethod('open', [typeof widgetSource === 'string' ? widgetSource : null , options]);
+
+		if (typeof onOpen === 'function') {
+			onOpen(widget);
+		}
+	}
+
+
+	function show() {
+		invokeInstanceMethod('show');
+	}
+
+	function update() {
+		invokeInstanceMethod('update');
+	}
+
+	const instanceMethods: CldUploadWidgetInstanceMethods = {
+		close,
+		destroy,
+		hide,
+		isDestroyed,
+		isMinimized,
+		isShowing,
+		minimize,
+		open,
+		show,
+		update
+	};
+</script>
 
+<slot {widget} {cloudinary} {isLoading} {...instanceMethods} data-testid="slot" />
diff --git a/svelte-cloudinary/src/lib/components/CldUploadWidgetTypes.ts b/svelte-cloudinary/src/lib/components/CldUploadWidgetTypes.ts
index 24c1329c..23e50292 100644
--- a/svelte-cloudinary/src/lib/components/CldUploadWidgetTypes.ts
+++ b/svelte-cloudinary/src/lib/components/CldUploadWidgetTypes.ts
@@ -1,26 +1,125 @@
+// TODO: widget needs to be typed
+
+export type CldUploadWidgetCloudinaryInstance = any;
+export type CldUploadWidgetWidgetInstance = any;
+
+type CustomURL = `https://${string}.${string}`;
+
+export interface CldUploadWidgetResults {
+  event?: string;
+  info?: string | object;
+}
+
+export type CldUploadWidgetDetsroyInstanceMethodOptions = {
+  removeThumbnails: boolean;
+}
+
+export type CldUploadWidgetCloseInstanceMethodOptions = {
+  quiet: boolean;
+}
+
+export type CldUploadWidgetOpenInstanceMethodOptions = {
+  files: CustomURL[];
+}
+
+export type CldUploadWidgetOpenWidgetSources =
+  | 'local'
+  | 'url'
+  | 'camera'
+  | 'image_search'
+  | 'google_drive'
+  | 'dropbox'
+  | 'facebook'
+  | 'instagram'
+  | 'shutterstock'
+  | 'getty'
+  | 'istock'
+  | 'unsplash'
+  | null;
+
+type CldUploadWidgetUpdateInstanceMethodOptions = Omit<
+  CldUploadWidgetPropsOptions,
+  "secure" | "uploadSignature" | "getTags" | "preBatch" | "inlineContainer" | "fieldName"
+> & {
+  cloudName: string;
+  uploadPreset: string;
+}
+
+export interface CldUploadWidgetInstanceMethods {
+  close: (options?: CldUploadWidgetCloseInstanceMethodOptions) => void;
+  destroy: (options?: CldUploadWidgetDetsroyInstanceMethodOptions) => Promise<void>;
+  hide: () => void;
+  isDestroyed: () => boolean;
+  isMinimized: () => boolean;
+  isShowing: () => boolean;
+  minimize: () => void;
+  open: (widgetSource?: CldUploadWidgetOpenWidgetSources, options?: CldUploadWidgetOpenInstanceMethodOptions) => void;
+  show: () => void;
+  update: (options: CldUploadWidgetUpdateInstanceMethodOptions) => void;
+}
+
+export type CldUploadWidgetError = {
+  status: string;
+  statusText: string;
+} | string | null;
+
+export interface CldUploadWidgetProps {
+  onError?: CldUploadEventCallbackError;
+  onOpen?: CldUploadEventCallbackWidgetOnly;
+  onUpload?: CldUploadEventCallbackNoOptions;
+  onAbort?: CldUploadEventCallback;
+  onBatchCancelled?: CldUploadEventCallback;
+  onClose?: CldUploadEventCallbackWidgetOnly;
+  onDisplayChanged?: CldUploadEventCallback;
+  onPublicId?: CldUploadEventCallback;
+  onQueuesEnd?: CldUploadEventCallback;
+  onQueuesStart?: CldUploadEventCallback;
+  onRetry?: CldUploadEventCallback;
+  onShowCompleted?: CldUploadEventCallback;
+  onSourceChanged?: CldUploadEventCallback;
+  onSuccess?: CldUploadEventCallback;
+  onTags?: CldUploadEventCallback;
+  onUploadAdded?: CldUploadEventCallback;
+  options?: CldUploadWidgetPropsOptions;
+  signatureEndpoint?: URL | RequestInfo;
+  uploadPreset?: string;
+}
+
+export type CldUploadWidgetPropsChildren = {
+  cloudinary: CldUploadWidgetCloudinaryInstance;
+  widget: CldUploadWidgetWidgetInstance;
+
+  error?: CldUploadWidgetError;
+  isLoading?: boolean;
+  results?: CldUploadWidgetResults;
+} & CldUploadWidgetInstanceMethods;
+
+// Parameters sourced from:
+// https://cloudinary.com/documentation/upload_widget_reference#parameters
+
 export interface CldUploadWidgetPropsOptions {
   // Widget
 
   encryption?: {
     key: string;
     iv: string;
-  };
+  }
   defaultSource?: string;
   maxFiles?: number;
   multiple?: boolean;
   sources?: Array<
-    | 'camera'
-    | 'dropbox'
-    | 'facebook'
-    | 'gettyimages'
-    | 'google_drive'
-    | 'image_search'
-    | 'instagram'
-    | 'istock'
-    | 'local'
-    | 'shutterstock'
-    | 'unsplash'
-    | 'url'
+    "camera"
+    | "dropbox"
+    | "facebook"
+    | "gettyimages"
+    | "google_drive"
+    | "image_search"
+    | "instagram"
+    | "istock"
+    | "local"
+    | "shutterstock"
+    | "unsplash"
+    | "url"
   >;
 
   // Cropping
@@ -100,100 +199,12 @@ export interface CldUploadWidgetPropsOptions {
   showUploadMoreButton?: boolean;
   singleUploadAutoClose?: boolean;
 }
-export type ResultsEvents =
-  | { event: 'abort'; info: { ids: string[]; all: boolean } }
-  | { event: 'batch-cancelled'; info: { reason: 'MAX_EXCEEDED' | 'INVALID_PUBLIC_ID' } }
-  | { event: 'close' }
-  | { event: 'display-changed'; info: 'show' | 'hidden' | 'minimized' | 'expanded' }
-  | { event: 'publicid'; info: { id: string } }
-  | { event: 'queues-end'; info: Record<string, unknown> }
-  | { event: 'queues-start' }
-  | {
-    event: 'retry';
-    info: {
-      ids: string[];
-      all: boolean;
-    };
-  }
-  | {
-    event: 'show-completed';
-    info: {
-      items: [
-        {
-          id: string;
-          name: string;
-          size: number;
-          type: string;
-          done: boolean;
-          progress: number;
-          file: Record<string, unknown>;
-          uploadInfo: Record<string, unknown>;
-        }
-      ];
-    };
-  }
-  | {
-    event: 'source-changed';
-    info: { source: string };
-  }
-  | {
-    event: 'success';
-    info: Record<string, unknown>;
-  }
-  | {
-    event: 'tags';
-    info: {
-      tags: string[];
-    }; //tags currently in the field
-  }
-  | {
-    event: 'upload-added';
-    info: {
-      file: {
-        lastModified: string;
-        lastModifiedDate: string;
-        name: string;
-        size: number;
-        type: string;
-      };
-      publicId: 'public-id';
-    };
-  };
-export interface UploadWidget {
-  open: (_?: any, { files }?: { files?: [URL] }) => void;
-  close: ({ quiet }: { quiet: boolean }) => void;
-  update: (options: CldUploadWidgetPropsOptions) => void;
-  hide: () => void;
-  show: () => void;
-  minimize: () => void;
-  destroy: ({ removeThumbnails }: { removeThumbnails: boolean }) => void;
-  isShowing: () => boolean;
-  isMinimized: () => boolean;
-  isDestroyed: () => boolean;
-}
-
-export type CldUploadWidgetProps = {
-  onError?: (error: UploadError, widget?: UploadWidget) => void;
-  onUpload?: (result: ResultsEvents, widget?: UploadWidget) => void;
-  options?: CldUploadWidgetPropsOptions;
-  onOpen?: (widget?: UploadWidget) => void;
-  onClose?: (widget?: UploadWidget) => void;
-  uploadPreset?: string;
-  signatureEndpoint?: string;
-}
 
-/* From the docs:
-* The callback method has the following signature function(error, result) where error is either null if successful
-* or an error message if there was a failure,
-*/
-type UploadError = {
-  status: string;
-  statusText: string;
-} | null
-export type ResultCallback = (error: UploadError, result: ResultsEvents) => void;
-export type CreateUploadWidgetProps = {
-  cloudName: string;
-  uploadPreset?: string; // @TODO this should be optional if signature is present
-  apiKey?: string;
-} & CldUploadWidgetPropsOptions;
+export type CldUploadEventCallback = (results: CldUploadWidgetResults, widget: CldUploadEventCallbackWidget) => void;
+export type CldUploadEventCallbackNoOptions = (results: CldUploadWidgetResults, widget: CldUploadWidgetWidgetInstance) => void;
+export type CldUploadEventCallbackWidgetOnly = (widget: CldUploadWidgetWidgetInstance) => void;
+export type CldUploadEventCallbackError = (error: CldUploadWidgetError, widget: CldUploadWidgetWidgetInstance) => void;
 
+export type CldUploadEventCallbackWidget = {
+  widget: CldUploadWidgetWidgetInstance;
+} & CldUploadWidgetInstanceMethods;