diff --git a/packages/angular/bin/build.sh b/packages/angular/bin/build.sh
index 86a39d2..64ea160 100755
--- a/packages/angular/bin/build.sh
+++ b/packages/angular/bin/build.sh
@@ -8,7 +8,7 @@ cd "$(dirname "$0")/.."
 cp ./util/trusted-resource-url-pipe.ts ./src/trusted-resource-url-pipe.ts
 
 # Array of files to process
-files=('./src/direct-template.ts' './src/sign-document.ts' './src/create-document.ts' './src/create-template.ts')
+files=('./src/direct-template.ts' './src/sign-document.ts' './src/create-document.ts' './src/create-template.ts' './src/update-document.ts' './src/update-template.ts')
 
 # Detect OS type
 OS_TYPE=$(uname)
diff --git a/packages/angular/src/index.ts b/packages/angular/src/index.ts
index b403bbc..a0c0d77 100644
--- a/packages/angular/src/index.ts
+++ b/packages/angular/src/index.ts
@@ -1,5 +1,9 @@
 export { default as EmbedDirectTemplate } from './direct-template';
 export { default as EmbedSignDocument } from './sign-document';
+export { default as EmbedCreateDocumentV1 } from './create-document';
+export { default as EmbedCreateTemplateV1 } from './create-template';
+export { default as EmbedUpdateDocumentV1 } from './update-document';
+export { default as EmbedUpdateTemplateV1 } from './update-template';
 export { default as unstable_EmbedCreateDocument } from './create-document';
 export { default as unstable_EmbedCreateTemplate } from './create-template';
 export { default as unstable_EmbedUpdateDocument } from './update-document';
diff --git a/packages/angular/src/update-document.ts b/packages/angular/src/update-document.ts
index 38f937d..e030bc2 100644
--- a/packages/angular/src/update-document.ts
+++ b/packages/angular/src/update-document.ts
@@ -1,3 +1,4 @@
+import { TrustedResourceUrlPipe } from "./trusted-resource-url-pipe";
 import { Component, ViewChild, ElementRef, Input } from "@angular/core";
 import { CommonModule } from "@angular/common";
 
@@ -18,7 +19,8 @@ export type EmbedUpdateDocumentProps = {
     allowConfigureTimezone?: boolean;
     allowConfigureRedirectUrl?: boolean;
     allowConfigureCommunication?: boolean;
-  }; // Additional props to be passed to the iframe, used for testing out features
+  };
+  onlyEditFields?: boolean | undefined; // Additional props to be passed to the iframe, used for testing out features
   // prior to being added to the main props
 
   additionalProps?: Record<string, string | number | boolean> | undefined;
@@ -33,7 +35,7 @@ import { CssVars } from "./css-vars";
 @Component({
   selector: "embed-update-document, EmbedUpdateDocument",
   template: `
-    <iframe #__iframe [class]="className" [attr.src]="src"></iframe>
+    <iframe #__iframe [class]="className" [attr.src]="src | trustedResourceUrl"></iframe>
   `,
   styles: [
     `
@@ -43,7 +45,7 @@ import { CssVars } from "./css-vars";
     `,
   ],
   standalone: true,
-  imports: [CommonModule],
+  imports: [CommonModule, TrustedResourceUrlPipe],
 })
 export default class EmbedUpdateDocument {
   @Input() host!: EmbedUpdateDocumentProps["host"];
@@ -53,6 +55,7 @@ export default class EmbedUpdateDocument {
   @Input() css!: EmbedUpdateDocumentProps["css"];
   @Input() cssVars!: EmbedUpdateDocumentProps["cssVars"];
   @Input() darkModeDisabled!: EmbedUpdateDocumentProps["darkModeDisabled"];
+  @Input() onlyEditFields!: EmbedUpdateDocumentProps["onlyEditFields"];
   @Input() additionalProps!: EmbedUpdateDocumentProps["additionalProps"];
   @Input() documentId!: EmbedUpdateDocumentProps["documentId"];
   @Input() onDocumentUpdated!: EmbedUpdateDocumentProps["onDocumentUpdated"];
@@ -71,6 +74,7 @@ export default class EmbedUpdateDocument {
           css: this.css,
           cssVars: this.cssVars,
           darkModeDisabled: this.darkModeDisabled,
+          onlyEditFields: this.onlyEditFields,
           ...this.additionalProps,
         })
       )
diff --git a/packages/angular/src/update-template.ts b/packages/angular/src/update-template.ts
index 4bd1a31..15cca38 100644
--- a/packages/angular/src/update-template.ts
+++ b/packages/angular/src/update-template.ts
@@ -1,3 +1,4 @@
+import { TrustedResourceUrlPipe } from "./trusted-resource-url-pipe";
 import { Component, ViewChild, ElementRef, Input } from "@angular/core";
 import { CommonModule } from "@angular/common";
 
@@ -18,7 +19,8 @@ export type EmbedUpdateTemplateProps = {
     allowConfigureTimezone?: boolean;
     allowConfigureRedirectUrl?: boolean;
     allowConfigureCommunication?: boolean;
-  }; // Additional props to be passed to the iframe, used for testing out features
+  };
+  onlyEditFields?: boolean | undefined; // Additional props to be passed to the iframe, used for testing out features
   // prior to being added to the main props
 
   additionalProps?: Record<string, string | number | boolean> | undefined;
@@ -33,7 +35,7 @@ import { CssVars } from "./css-vars";
 @Component({
   selector: "embed-update-template, EmbedUpdateTemplate",
   template: `
-    <iframe #__iframe [class]="className" [attr.src]="src"></iframe>
+    <iframe #__iframe [class]="className" [attr.src]="src | trustedResourceUrl"></iframe>
   `,
   styles: [
     `
@@ -43,7 +45,7 @@ import { CssVars } from "./css-vars";
     `,
   ],
   standalone: true,
-  imports: [CommonModule],
+  imports: [CommonModule, TrustedResourceUrlPipe],
 })
 export default class EmbedUpdateTemplate {
   @Input() host!: EmbedUpdateTemplateProps["host"];
@@ -52,6 +54,7 @@ export default class EmbedUpdateTemplate {
   @Input() css!: EmbedUpdateTemplateProps["css"];
   @Input() cssVars!: EmbedUpdateTemplateProps["cssVars"];
   @Input() darkModeDisabled!: EmbedUpdateTemplateProps["darkModeDisabled"];
+  @Input() onlyEditFields!: EmbedUpdateTemplateProps["onlyEditFields"];
   @Input() additionalProps!: EmbedUpdateTemplateProps["additionalProps"];
   @Input() templateId!: EmbedUpdateTemplateProps["templateId"];
   @Input() presignToken!: EmbedUpdateTemplateProps["presignToken"];
@@ -70,6 +73,7 @@ export default class EmbedUpdateTemplate {
           css: this.css,
           cssVars: this.cssVars,
           darkModeDisabled: this.darkModeDisabled,
+          onlyEditFields: this.onlyEditFields,
           ...this.additionalProps,
         })
       )
diff --git a/packages/mitosis/src/index.ts b/packages/mitosis/src/index.ts
index 4ae4cab..b8c116c 100644
--- a/packages/mitosis/src/index.ts
+++ b/packages/mitosis/src/index.ts
@@ -1,5 +1,11 @@
 export { default as EmbedDirectTemplate } from './direct-template.lite';
 export { default as EmbedSignDocument } from './sign-document.lite';
+
+export { default as EmbedCreateDocumentV1 } from './create-document.lite';
+export { default as EmbedCreateTemplateV1 } from './create-template.lite';
+export { default as EmbedUpdateDocumentV1 } from './update-document.lite';
+export { default as EmbedUpdateTemplateV1 } from './update-template.lite';
+
 export { default as unstable_EmbedCreateDocument } from './create-document.lite';
 export { default as unstable_EmbedCreateTemplate } from './create-template.lite';
 export { default as unstable_EmbedUpdateDocument } from './update-document.lite';
diff --git a/packages/mitosis/src/update-document.lite.tsx b/packages/mitosis/src/update-document.lite.tsx
index a2c6f96..9658859 100644
--- a/packages/mitosis/src/update-document.lite.tsx
+++ b/packages/mitosis/src/update-document.lite.tsx
@@ -24,6 +24,8 @@ export type EmbedUpdateDocumentProps = {
     allowConfigureCommunication?: boolean;
   };
 
+  onlyEditFields?: boolean | undefined;
+
   // Additional props to be passed to the iframe, used for testing out features
   // prior to being added to the main props
   additionalProps?: Record<string, string | number | boolean> | undefined;
@@ -49,6 +51,7 @@ export default function EmbedUpdateDocument(props: EmbedUpdateDocumentProps) {
             css: props.css,
             cssVars: props.cssVars,
             darkModeDisabled: props.darkModeDisabled,
+            onlyEditFields: props.onlyEditFields,
             ...props.additionalProps,
           }),
         ),
diff --git a/packages/mitosis/src/update-template.lite.tsx b/packages/mitosis/src/update-template.lite.tsx
index 401bb3e..0142323 100644
--- a/packages/mitosis/src/update-template.lite.tsx
+++ b/packages/mitosis/src/update-template.lite.tsx
@@ -24,6 +24,8 @@ export type EmbedUpdateTemplateProps = {
     allowConfigureCommunication?: boolean;
   };
 
+  onlyEditFields?: boolean | undefined;
+
   // Additional props to be passed to the iframe, used for testing out features
   // prior to being added to the main props
   additionalProps?: Record<string, string | number | boolean> | undefined;
@@ -47,6 +49,7 @@ export default function EmbedUpdateTemplate(props: EmbedUpdateTemplateProps) {
             css: props.css,
             cssVars: props.cssVars,
             darkModeDisabled: props.darkModeDisabled,
+            onlyEditFields: props.onlyEditFields,
             ...props.additionalProps,
           }),
         ),
diff --git a/packages/preact/src/index.ts b/packages/preact/src/index.ts
index b403bbc..a0c0d77 100644
--- a/packages/preact/src/index.ts
+++ b/packages/preact/src/index.ts
@@ -1,5 +1,9 @@
 export { default as EmbedDirectTemplate } from './direct-template';
 export { default as EmbedSignDocument } from './sign-document';
+export { default as EmbedCreateDocumentV1 } from './create-document';
+export { default as EmbedCreateTemplateV1 } from './create-template';
+export { default as EmbedUpdateDocumentV1 } from './update-document';
+export { default as EmbedUpdateTemplateV1 } from './update-template';
 export { default as unstable_EmbedCreateDocument } from './create-document';
 export { default as unstable_EmbedCreateTemplate } from './create-template';
 export { default as unstable_EmbedUpdateDocument } from './update-document';
diff --git a/packages/preact/src/update-document.tsx b/packages/preact/src/update-document.tsx
index 4b483a3..6856f5f 100644
--- a/packages/preact/src/update-document.tsx
+++ b/packages/preact/src/update-document.tsx
@@ -19,7 +19,8 @@ export type EmbedUpdateDocumentProps = {
     allowConfigureTimezone?: boolean;
     allowConfigureRedirectUrl?: boolean;
     allowConfigureCommunication?: boolean;
-  }; // Additional props to be passed to the iframe, used for testing out features
+  };
+  onlyEditFields?: boolean | undefined; // Additional props to be passed to the iframe, used for testing out features
   // prior to being added to the main props
 
   additionalProps?: Record<string, string | number | boolean> | undefined;
@@ -43,6 +44,7 @@ function EmbedUpdateDocument(props: EmbedUpdateDocumentProps) {
           css: props.css,
           cssVars: props.cssVars,
           darkModeDisabled: props.darkModeDisabled,
+          onlyEditFields: props.onlyEditFields,
           ...props.additionalProps,
         })
       )
diff --git a/packages/preact/src/update-template.tsx b/packages/preact/src/update-template.tsx
index 8c5b33f..1d93416 100644
--- a/packages/preact/src/update-template.tsx
+++ b/packages/preact/src/update-template.tsx
@@ -19,7 +19,8 @@ export type EmbedUpdateTemplateProps = {
     allowConfigureTimezone?: boolean;
     allowConfigureRedirectUrl?: boolean;
     allowConfigureCommunication?: boolean;
-  }; // Additional props to be passed to the iframe, used for testing out features
+  };
+  onlyEditFields?: boolean | undefined; // Additional props to be passed to the iframe, used for testing out features
   // prior to being added to the main props
 
   additionalProps?: Record<string, string | number | boolean> | undefined;
@@ -42,6 +43,7 @@ function EmbedUpdateTemplate(props: EmbedUpdateTemplateProps) {
           css: props.css,
           cssVars: props.cssVars,
           darkModeDisabled: props.darkModeDisabled,
+          onlyEditFields: props.onlyEditFields,
           ...props.additionalProps,
         })
       )
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index b403bbc..a0c0d77 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -1,5 +1,9 @@
 export { default as EmbedDirectTemplate } from './direct-template';
 export { default as EmbedSignDocument } from './sign-document';
+export { default as EmbedCreateDocumentV1 } from './create-document';
+export { default as EmbedCreateTemplateV1 } from './create-template';
+export { default as EmbedUpdateDocumentV1 } from './update-document';
+export { default as EmbedUpdateTemplateV1 } from './update-template';
 export { default as unstable_EmbedCreateDocument } from './create-document';
 export { default as unstable_EmbedCreateTemplate } from './create-template';
 export { default as unstable_EmbedUpdateDocument } from './update-document';
diff --git a/packages/react/src/update-document.tsx b/packages/react/src/update-document.tsx
index adf1475..88b5500 100644
--- a/packages/react/src/update-document.tsx
+++ b/packages/react/src/update-document.tsx
@@ -19,7 +19,8 @@ export type EmbedUpdateDocumentProps = {
     allowConfigureTimezone?: boolean;
     allowConfigureRedirectUrl?: boolean;
     allowConfigureCommunication?: boolean;
-  }; // Additional props to be passed to the iframe, used for testing out features
+  };
+  onlyEditFields?: boolean | undefined; // Additional props to be passed to the iframe, used for testing out features
   // prior to being added to the main props
 
   additionalProps?: Record<string, string | number | boolean> | undefined;
@@ -43,6 +44,7 @@ function EmbedUpdateDocument(props: EmbedUpdateDocumentProps) {
           css: props.css,
           cssVars: props.cssVars,
           darkModeDisabled: props.darkModeDisabled,
+          onlyEditFields: props.onlyEditFields,
           ...props.additionalProps,
         })
       )
diff --git a/packages/react/src/update-template.tsx b/packages/react/src/update-template.tsx
index 6d5599a..2814187 100644
--- a/packages/react/src/update-template.tsx
+++ b/packages/react/src/update-template.tsx
@@ -19,7 +19,8 @@ export type EmbedUpdateTemplateProps = {
     allowConfigureTimezone?: boolean;
     allowConfigureRedirectUrl?: boolean;
     allowConfigureCommunication?: boolean;
-  }; // Additional props to be passed to the iframe, used for testing out features
+  };
+  onlyEditFields?: boolean | undefined; // Additional props to be passed to the iframe, used for testing out features
   // prior to being added to the main props
 
   additionalProps?: Record<string, string | number | boolean> | undefined;
@@ -42,6 +43,7 @@ function EmbedUpdateTemplate(props: EmbedUpdateTemplateProps) {
           css: props.css,
           cssVars: props.cssVars,
           darkModeDisabled: props.darkModeDisabled,
+          onlyEditFields: props.onlyEditFields,
           ...props.additionalProps,
         })
       )
diff --git a/packages/solid/src/index.ts b/packages/solid/src/index.ts
index b403bbc..a0c0d77 100644
--- a/packages/solid/src/index.ts
+++ b/packages/solid/src/index.ts
@@ -1,5 +1,9 @@
 export { default as EmbedDirectTemplate } from './direct-template';
 export { default as EmbedSignDocument } from './sign-document';
+export { default as EmbedCreateDocumentV1 } from './create-document';
+export { default as EmbedCreateTemplateV1 } from './create-template';
+export { default as EmbedUpdateDocumentV1 } from './update-document';
+export { default as EmbedUpdateTemplateV1 } from './update-template';
 export { default as unstable_EmbedCreateDocument } from './create-document';
 export { default as unstable_EmbedCreateTemplate } from './create-template';
 export { default as unstable_EmbedUpdateDocument } from './update-document';
diff --git a/packages/solid/src/update-document.tsx b/packages/solid/src/update-document.tsx
index 47bd431..e02e3b7 100644
--- a/packages/solid/src/update-document.tsx
+++ b/packages/solid/src/update-document.tsx
@@ -17,7 +17,8 @@ export type EmbedUpdateDocumentProps = {
     allowConfigureTimezone?: boolean;
     allowConfigureRedirectUrl?: boolean;
     allowConfigureCommunication?: boolean;
-  }; // Additional props to be passed to the iframe, used for testing out features
+  };
+  onlyEditFields?: boolean | undefined; // Additional props to be passed to the iframe, used for testing out features
   // prior to being added to the main props
 
   additionalProps?: Record<string, string | number | boolean> | undefined;
@@ -41,6 +42,7 @@ function EmbedUpdateDocument(props: EmbedUpdateDocumentProps) {
           css: props.css,
           cssVars: props.cssVars,
           darkModeDisabled: props.darkModeDisabled,
+          onlyEditFields: props.onlyEditFields,
           ...props.additionalProps,
         })
       )
diff --git a/packages/solid/src/update-template.tsx b/packages/solid/src/update-template.tsx
index fb51020..b104158 100644
--- a/packages/solid/src/update-template.tsx
+++ b/packages/solid/src/update-template.tsx
@@ -17,7 +17,8 @@ export type EmbedUpdateTemplateProps = {
     allowConfigureTimezone?: boolean;
     allowConfigureRedirectUrl?: boolean;
     allowConfigureCommunication?: boolean;
-  }; // Additional props to be passed to the iframe, used for testing out features
+  };
+  onlyEditFields?: boolean | undefined; // Additional props to be passed to the iframe, used for testing out features
   // prior to being added to the main props
 
   additionalProps?: Record<string, string | number | boolean> | undefined;
@@ -40,6 +41,7 @@ function EmbedUpdateTemplate(props: EmbedUpdateTemplateProps) {
           css: props.css,
           cssVars: props.cssVars,
           darkModeDisabled: props.darkModeDisabled,
+          onlyEditFields: props.onlyEditFields,
           ...props.additionalProps,
         })
       )
diff --git a/packages/svelte/src/index.ts b/packages/svelte/src/index.ts
index 2d3f905..4934f8e 100644
--- a/packages/svelte/src/index.ts
+++ b/packages/svelte/src/index.ts
@@ -1,5 +1,9 @@
 export { default as EmbedDirectTemplate } from './direct-template.svelte';
 export { default as EmbedSignDocument } from './sign-document.svelte';
+export { default as EmbedCreateDocumentV1 } from './create-document.svelte';
+export { default as EmbedCreateTemplateV1 } from './create-template.svelte';
+export { default as EmbedUpdateDocumentV1 } from './update-document.svelte';
+export { default as EmbedUpdateTemplateV1 } from './update-template.svelte';
 export { default as unstable_EmbedCreateDocument } from './create-document.svelte';
 export { default as unstable_EmbedCreateTemplate } from './create-template.svelte';
 export { default as unstable_EmbedUpdateDocument } from './update-document.svelte';
diff --git a/packages/svelte/src/update-document.svelte b/packages/svelte/src/update-document.svelte
index c1b4eff..50908cc 100644
--- a/packages/svelte/src/update-document.svelte
+++ b/packages/svelte/src/update-document.svelte
@@ -16,7 +16,8 @@
       allowConfigureTimezone?: boolean;
       allowConfigureRedirectUrl?: boolean;
       allowConfigureCommunication?: boolean;
-    }; // Additional props to be passed to the iframe, used for testing out features
+    };
+    onlyEditFields?: boolean | undefined; // Additional props to be passed to the iframe, used for testing out features
     // prior to being added to the main props
 
     additionalProps?: Record<string, string | number | boolean> | undefined;
@@ -40,6 +41,8 @@
   export let cssVars: EmbedUpdateDocumentProps["cssVars"] = undefined;
   export let darkModeDisabled: EmbedUpdateDocumentProps["darkModeDisabled"] =
     undefined;
+  export let onlyEditFields: EmbedUpdateDocumentProps["onlyEditFields"] =
+    undefined;
   export let additionalProps: EmbedUpdateDocumentProps["additionalProps"] =
     undefined;
   export let documentId: EmbedUpdateDocumentProps["documentId"];
@@ -70,6 +73,7 @@
           css: css,
           cssVars: cssVars,
           darkModeDisabled: darkModeDisabled,
+          onlyEditFields: onlyEditFields,
           ...additionalProps,
         })
       )
diff --git a/packages/svelte/src/update-template.svelte b/packages/svelte/src/update-template.svelte
index 8648246..eec2a4d 100644
--- a/packages/svelte/src/update-template.svelte
+++ b/packages/svelte/src/update-template.svelte
@@ -16,7 +16,8 @@
       allowConfigureTimezone?: boolean;
       allowConfigureRedirectUrl?: boolean;
       allowConfigureCommunication?: boolean;
-    }; // Additional props to be passed to the iframe, used for testing out features
+    };
+    onlyEditFields?: boolean | undefined; // Additional props to be passed to the iframe, used for testing out features
     // prior to being added to the main props
 
     additionalProps?: Record<string, string | number | boolean> | undefined;
@@ -39,6 +40,8 @@
   export let cssVars: EmbedUpdateTemplateProps["cssVars"] = undefined;
   export let darkModeDisabled: EmbedUpdateTemplateProps["darkModeDisabled"] =
     undefined;
+  export let onlyEditFields: EmbedUpdateTemplateProps["onlyEditFields"] =
+    undefined;
   export let additionalProps: EmbedUpdateTemplateProps["additionalProps"] =
     undefined;
   export let templateId: EmbedUpdateTemplateProps["templateId"];
@@ -69,6 +72,7 @@
           css: css,
           cssVars: cssVars,
           darkModeDisabled: darkModeDisabled,
+          onlyEditFields: onlyEditFields,
           ...additionalProps,
         })
       )
diff --git a/packages/vue/src/index.ts b/packages/vue/src/index.ts
index 49bbd38..b100df9 100644
--- a/packages/vue/src/index.ts
+++ b/packages/vue/src/index.ts
@@ -1,5 +1,9 @@
 export { default as EmbedDirectTemplate } from './direct-template.vue';
 export { default as EmbedSignDocument } from './sign-document.vue';
+export { default as EmbedCreateDocumentV1 } from './create-document.vue';
+export { default as EmbedCreateTemplateV1 } from './create-template.vue';
+export { default as EmbedUpdateDocumentV1 } from './update-document.vue';
+export { default as EmbedUpdateTemplateV1 } from './update-template.vue';
 export { default as unstable_EmbedCreateDocument } from './create-document.vue';
 export { default as unstable_EmbedCreateTemplate } from './create-template.vue';
 export { default as unstable_EmbedUpdateDocument } from './update-document.vue';
diff --git a/packages/vue/src/update-document.vue b/packages/vue/src/update-document.vue
index 2c24085..9748318 100644
--- a/packages/vue/src/update-document.vue
+++ b/packages/vue/src/update-document.vue
@@ -24,7 +24,8 @@ export type EmbedUpdateDocumentProps = {
     allowConfigureTimezone?: boolean;
     allowConfigureRedirectUrl?: boolean;
     allowConfigureCommunication?: boolean;
-  }; // Additional props to be passed to the iframe, used for testing out features
+  };
+  onlyEditFields?: boolean | undefined; // Additional props to be passed to the iframe, used for testing out features
   // prior to being added to the main props
 
   additionalProps?: Record<string, string | number | boolean> | undefined;
@@ -55,6 +56,7 @@ const src = computed(() => {
         css: props.css,
         cssVars: props.cssVars,
         darkModeDisabled: props.darkModeDisabled,
+        onlyEditFields: props.onlyEditFields,
         ...props.additionalProps,
       })
     )
diff --git a/packages/vue/src/update-template.vue b/packages/vue/src/update-template.vue
index 98ab3df..4e26eda 100644
--- a/packages/vue/src/update-template.vue
+++ b/packages/vue/src/update-template.vue
@@ -24,7 +24,8 @@ export type EmbedUpdateTemplateProps = {
     allowConfigureTimezone?: boolean;
     allowConfigureRedirectUrl?: boolean;
     allowConfigureCommunication?: boolean;
-  }; // Additional props to be passed to the iframe, used for testing out features
+  };
+  onlyEditFields?: boolean | undefined; // Additional props to be passed to the iframe, used for testing out features
   // prior to being added to the main props
 
   additionalProps?: Record<string, string | number | boolean> | undefined;
@@ -54,6 +55,7 @@ const src = computed(() => {
         css: props.css,
         cssVars: props.cssVars,
         darkModeDisabled: props.darkModeDisabled,
+        onlyEditFields: props.onlyEditFields,
         ...props.additionalProps,
       })
     )
diff --git a/playground/.env.example b/playground/.env.example
index ceaedfc..5dfadf4 100644
--- a/playground/.env.example
+++ b/playground/.env.example
@@ -1 +1,2 @@
-VITE_EMBED_HOST="https://app.documenso.com"
\ No newline at end of file
+VITE_EMBED_HOST="https://app.documenso.com"
+VITE_API_KEY=""
\ No newline at end of file
diff --git a/playground/src/App.tsx b/playground/src/App.tsx
index a795a9b..3ee7b85 100644
--- a/playground/src/App.tsx
+++ b/playground/src/App.tsx
@@ -1,7 +1,13 @@
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 
 import './App.css';
+import CreateDocumentEmbedding from './components/embeddings/create-document';
+import CreateTemplateEmbedding from './components/embeddings/create-template';
+import DirectTemplateEmbedding from './components/embeddings/direct-template';
 import MultiSignEmbedding from './components/embeddings/multisign';
+import SignDocumentEmbedding from './components/embeddings/sign-document';
+import UpdateDocumentEmbedding from './components/embeddings/update-document';
+import UpdateTemplateEmbedding from './components/embeddings/update-template';
 
 export default function App() {
   return (
@@ -13,14 +19,44 @@ export default function App() {
         </p>
       </div>
 
-      <Tabs defaultValue="multi-sign" className="mt-8 w-full">
+      <Tabs defaultValue="sign-document" className="mt-8 w-full">
         <TabsList className="mb-2">
+          <TabsTrigger value="sign-document">Sign Document</TabsTrigger>
+          <TabsTrigger value="direct-template">Direct Template</TabsTrigger>
           <TabsTrigger value="multi-sign">Multi Sign</TabsTrigger>
+          <TabsTrigger value="create-document">Create Document</TabsTrigger>
+          <TabsTrigger value="update-document">Update Document</TabsTrigger>
+          <TabsTrigger value="create-template">Create Template</TabsTrigger>
+          <TabsTrigger value="update-template">Update Template</TabsTrigger>
         </TabsList>
 
+        <TabsContent value="sign-document" className="mt-6">
+          <SignDocumentEmbedding />
+        </TabsContent>
+
+        <TabsContent value="direct-template" className="mt-6">
+          <DirectTemplateEmbedding />
+        </TabsContent>
+
         <TabsContent value="multi-sign" className="mt-6">
           <MultiSignEmbedding />
         </TabsContent>
+
+        <TabsContent value="create-document" className="mt-6">
+          <CreateDocumentEmbedding />
+        </TabsContent>
+
+        <TabsContent value="update-document" className="mt-6">
+          <UpdateDocumentEmbedding />
+        </TabsContent>
+
+        <TabsContent value="create-template" className="mt-6">
+          <CreateTemplateEmbedding />
+        </TabsContent>
+
+        <TabsContent value="update-template" className="mt-6">
+          <UpdateTemplateEmbedding />
+        </TabsContent>
       </Tabs>
     </div>
   );
diff --git a/playground/src/components/embeddings/create-document.tsx b/playground/src/components/embeddings/create-document.tsx
new file mode 100644
index 0000000..592d8fb
--- /dev/null
+++ b/playground/src/components/embeddings/create-document.tsx
@@ -0,0 +1,443 @@
+import { useState } from 'react';
+
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Checkbox } from '@/components/ui/checkbox';
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import { Separator } from '@/components/ui/separator';
+import { Textarea } from '@/components/ui/textarea';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+import { unstable_EmbedCreateDocument as EmbedCreateDocument } from '@documenso/embed-react';
+
+const formSchema = z
+  .object({
+    useApiKey: z.boolean(),
+    apiKey: z.string().optional(),
+    presignToken: z.string().optional(),
+    externalId: z.string().optional(),
+    allowConfigureSignatureTypes: z.boolean().optional(),
+    allowConfigureLanguage: z.boolean().optional(),
+    allowConfigureDateFormat: z.boolean().optional(),
+    allowConfigureTimezone: z.boolean().optional(),
+    allowConfigureRedirectUrl: z.boolean().optional(),
+    allowConfigureCommunication: z.boolean().optional(),
+    darkModeDisabled: z.boolean().optional(),
+    css: z.string().optional(),
+  })
+  .refine(
+    (data) => {
+      if (data.useApiKey) {
+        return !!data.apiKey && data.apiKey.length > 0;
+      }
+      return !!data.presignToken && data.presignToken.length > 0;
+    },
+    {
+      message: 'Either API key or presign token is required',
+      path: ['apiKey'],
+    },
+  );
+
+type FormData = z.infer<typeof formSchema>;
+
+export default function CreateDocumentEmbedding() {
+  const host = import.meta.env.VITE_EMBED_HOST || 'https://app.documenso.com';
+  const [showEmbed, setShowEmbed] = useState(false);
+  const [embedConfig, setEmbedConfig] = useState<
+    (Omit<FormData, 'useApiKey' | 'apiKey'> & { presignToken: string }) | null
+  >(null);
+  const [isGenerating, setIsGenerating] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const form = useForm<FormData>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      useApiKey: true,
+      apiKey: '',
+      presignToken: '',
+      externalId: '',
+      allowConfigureSignatureTypes: true,
+      allowConfigureLanguage: true,
+      allowConfigureDateFormat: true,
+      allowConfigureTimezone: true,
+      allowConfigureRedirectUrl: true,
+      allowConfigureCommunication: true,
+      darkModeDisabled: false,
+      css: '',
+    },
+  });
+
+  const generatePresignToken = async (apiKey: string) => {
+    const response = await fetch(`${host}/api/v2-beta/embedding/create-presign-token`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${apiKey}`,
+      },
+      body: JSON.stringify({
+        expiresIn: 60,
+      }),
+    });
+
+    if (!response.ok) {
+      const errorData = await response.json().catch(() => ({ message: 'Failed to parse error' }));
+      throw new Error(errorData.message || `Failed to generate presign token: ${response.status}`);
+    }
+
+    const data = await response.json();
+    return data.token;
+  };
+
+  const onSubmit = async (data: FormData) => {
+    setIsGenerating(true);
+    setError(null);
+
+    try {
+      let token = data.presignToken || '';
+
+      if (data.useApiKey && data.apiKey) {
+        token = await generatePresignToken(data.apiKey);
+      }
+
+      setEmbedConfig({ ...data, presignToken: token });
+      setShowEmbed(true);
+      console.log('Generating Create Document embedding');
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to generate token');
+      console.error('Error generating presign token:', err);
+    } finally {
+      setIsGenerating(false);
+    }
+  };
+
+  const handleClear = () => {
+    form.reset();
+    setShowEmbed(false);
+    setEmbedConfig(null);
+    setError(null);
+  };
+
+  const useApiKey = form.watch('useApiKey');
+  const watchedValue = useApiKey ? form.watch('apiKey') : form.watch('presignToken');
+
+  return (
+    <div className="space-y-6">
+      <Form {...form}>
+        <form onSubmit={form.handleSubmit(onSubmit)}>
+          <Card>
+            <CardHeader>
+              <CardTitle>Create Document Configurator</CardTitle>
+              <CardDescription>
+                Configure your document authoring embedding parameters
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <FormField
+                control={form.control}
+                name="useApiKey"
+                render={({ field }) => (
+                  <FormItem className="flex flex-row items-start space-x-3 space-y-0">
+                    <FormControl>
+                      <Checkbox checked={field.value} onCheckedChange={field.onChange} />
+                    </FormControl>
+                    <div className="space-y-1 leading-none">
+                      <FormLabel>Use API Key to Generate Token</FormLabel>
+                      <FormDescription>
+                        Check this to automatically generate a presign token from your API key
+                      </FormDescription>
+                    </div>
+                  </FormItem>
+                )}
+              />
+
+              {useApiKey ? (
+                <FormField
+                  control={form.control}
+                  name="apiKey"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>API Key</FormLabel>
+                      <FormControl>
+                        <Input
+                          type="password"
+                          placeholder="Enter your API key..."
+                          className="font-mono text-sm"
+                          {...field}
+                        />
+                      </FormControl>
+                      <FormDescription>
+                        Your Documenso API key to generate a presign token
+                      </FormDescription>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              ) : (
+                <FormField
+                  control={form.control}
+                  name="presignToken"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>Presign Token</FormLabel>
+                      <FormControl>
+                        <Input
+                          type="password"
+                          placeholder="Enter presign token..."
+                          className="font-mono text-sm"
+                          {...field}
+                        />
+                      </FormControl>
+                      <FormDescription>
+                        A presign token generated from your backend server
+                      </FormDescription>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              )}
+
+              <FormField
+                control={form.control}
+                name="externalId"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>External ID (Optional)</FormLabel>
+                    <FormControl>
+                      <Input
+                        placeholder="Enter external ID..."
+                        className="font-mono text-sm"
+                        {...field}
+                      />
+                    </FormControl>
+                    <FormDescription>Unique identifier for tracking this document</FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <Separator />
+
+              <div className="space-y-3">
+                <div className="text-sm font-medium">Feature Configuration</div>
+
+                <FormField
+                  control={form.control}
+                  name="allowConfigureSignatureTypes"
+                  render={({ field }) => (
+                    <FormItem className="flex flex-row items-start space-x-3 space-y-0">
+                      <FormControl>
+                        <Checkbox checked={field.value} onCheckedChange={field.onChange} />
+                      </FormControl>
+                      <div className="space-y-1 leading-none">
+                        <FormLabel>Allow Configure Signature Types</FormLabel>
+                        <FormDescription>
+                          Allow users to configure signature field types
+                        </FormDescription>
+                      </div>
+                    </FormItem>
+                  )}
+                />
+
+                <FormField
+                  control={form.control}
+                  name="allowConfigureLanguage"
+                  render={({ field }) => (
+                    <FormItem className="flex flex-row items-start space-x-3 space-y-0">
+                      <FormControl>
+                        <Checkbox checked={field.value} onCheckedChange={field.onChange} />
+                      </FormControl>
+                      <div className="space-y-1 leading-none">
+                        <FormLabel>Allow Configure Language</FormLabel>
+                        <FormDescription>
+                          Allow users to configure document language
+                        </FormDescription>
+                      </div>
+                    </FormItem>
+                  )}
+                />
+
+                <FormField
+                  control={form.control}
+                  name="allowConfigureDateFormat"
+                  render={({ field }) => (
+                    <FormItem className="flex flex-row items-start space-x-3 space-y-0">
+                      <FormControl>
+                        <Checkbox checked={field.value} onCheckedChange={field.onChange} />
+                      </FormControl>
+                      <div className="space-y-1 leading-none">
+                        <FormLabel>Allow Configure Date Format</FormLabel>
+                        <FormDescription>Allow users to configure date format</FormDescription>
+                      </div>
+                    </FormItem>
+                  )}
+                />
+
+                <FormField
+                  control={form.control}
+                  name="allowConfigureTimezone"
+                  render={({ field }) => (
+                    <FormItem className="flex flex-row items-start space-x-3 space-y-0">
+                      <FormControl>
+                        <Checkbox checked={field.value} onCheckedChange={field.onChange} />
+                      </FormControl>
+                      <div className="space-y-1 leading-none">
+                        <FormLabel>Allow Configure Timezone</FormLabel>
+                        <FormDescription>Allow users to configure timezone</FormDescription>
+                      </div>
+                    </FormItem>
+                  )}
+                />
+
+                <FormField
+                  control={form.control}
+                  name="allowConfigureRedirectUrl"
+                  render={({ field }) => (
+                    <FormItem className="flex flex-row items-start space-x-3 space-y-0">
+                      <FormControl>
+                        <Checkbox checked={field.value} onCheckedChange={field.onChange} />
+                      </FormControl>
+                      <div className="space-y-1 leading-none">
+                        <FormLabel>Allow Configure Redirect URL</FormLabel>
+                        <FormDescription>Allow users to set redirect URL</FormDescription>
+                      </div>
+                    </FormItem>
+                  )}
+                />
+
+                <FormField
+                  control={form.control}
+                  name="allowConfigureCommunication"
+                  render={({ field }) => (
+                    <FormItem className="flex flex-row items-start space-x-3 space-y-0">
+                      <FormControl>
+                        <Checkbox checked={field.value} onCheckedChange={field.onChange} />
+                      </FormControl>
+                      <div className="space-y-1 leading-none">
+                        <FormLabel>Allow Configure Communication</FormLabel>
+                        <FormDescription>
+                          Allow users to configure email notifications
+                        </FormDescription>
+                      </div>
+                    </FormItem>
+                  )}
+                />
+              </div>
+
+              <Separator />
+
+              <FormField
+                control={form.control}
+                name="darkModeDisabled"
+                render={({ field }) => (
+                  <FormItem className="flex flex-row items-start space-x-3 space-y-0">
+                    <FormControl>
+                      <Checkbox checked={field.value} onCheckedChange={field.onChange} />
+                    </FormControl>
+                    <div className="space-y-1 leading-none">
+                      <FormLabel>Disable Dark Mode</FormLabel>
+                      <FormDescription>Force light mode only</FormDescription>
+                    </div>
+                  </FormItem>
+                )}
+              />
+
+              <Separator />
+
+              <FormField
+                control={form.control}
+                name="css"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Custom CSS (Optional)</FormLabel>
+                    <FormControl>
+                      <Textarea
+                        placeholder="Enter custom CSS..."
+                        rows={4}
+                        className="font-mono text-sm"
+                        {...field}
+                      />
+                    </FormControl>
+                    <FormDescription>Add custom CSS to style the embedded editor</FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <Separator />
+
+              {error && (
+                <div className="rounded-md border border-red-200 bg-red-50 p-3 text-sm text-red-800">
+                  {error}
+                </div>
+              )}
+
+              <div className="flex gap-2">
+                <Button
+                  type="submit"
+                  className="flex-1"
+                  disabled={!form.formState.isValid || isGenerating}
+                >
+                  {isGenerating ? 'Generating Token...' : 'Generate Embedding'}
+                </Button>
+                <Button type="button" variant="outline" onClick={handleClear}>
+                  Clear
+                </Button>
+              </div>
+            </CardContent>
+          </Card>
+        </form>
+      </Form>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Create Document Embedding</CardTitle>
+          <CardDescription>Embedded authoring view will appear here</CardDescription>
+        </CardHeader>
+        <CardContent className="p-0">
+          <div className="border-muted-foreground/25 m-6 flex min-h-[600px] items-center justify-center rounded-lg border-2 border-dashed">
+            {showEmbed && embedConfig ? (
+              <EmbedCreateDocument
+                className="h-[800px] w-full"
+                host={host}
+                presignToken={embedConfig.presignToken}
+                externalId={embedConfig.externalId}
+                features={{
+                  allowConfigureSignatureTypes: embedConfig.allowConfigureSignatureTypes,
+                  allowConfigureLanguage: embedConfig.allowConfigureLanguage,
+                  allowConfigureDateFormat: embedConfig.allowConfigureDateFormat,
+                  allowConfigureTimezone: embedConfig.allowConfigureTimezone,
+                  allowConfigureRedirectUrl: embedConfig.allowConfigureRedirectUrl,
+                  allowConfigureCommunication: embedConfig.allowConfigureCommunication,
+                }}
+                darkModeDisabled={embedConfig.darkModeDisabled}
+                css={embedConfig.css}
+                onDocumentCreated={(data) => console.log('Document created:', data)}
+              />
+            ) : watchedValue ? (
+              <div className="space-y-2 text-center">
+                <div className="text-muted-foreground text-sm">
+                  Ready to generate embedding iframe
+                </div>
+              </div>
+            ) : (
+              <div className="text-muted-foreground text-sm">
+                Configure {useApiKey ? 'API key' : 'presign token'} above to generate the embedding
+              </div>
+            )}
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
diff --git a/playground/src/components/embeddings/create-template.tsx b/playground/src/components/embeddings/create-template.tsx
new file mode 100644
index 0000000..fff4de2
--- /dev/null
+++ b/playground/src/components/embeddings/create-template.tsx
@@ -0,0 +1,443 @@
+import { useState } from 'react';
+
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Checkbox } from '@/components/ui/checkbox';
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import { Separator } from '@/components/ui/separator';
+import { Textarea } from '@/components/ui/textarea';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+import { unstable_EmbedCreateTemplate as EmbedCreateTemplate } from '@documenso/embed-react';
+
+const formSchema = z
+  .object({
+    useApiKey: z.boolean(),
+    apiKey: z.string().optional(),
+    presignToken: z.string().optional(),
+    externalId: z.string().optional(),
+    allowConfigureSignatureTypes: z.boolean().optional(),
+    allowConfigureLanguage: z.boolean().optional(),
+    allowConfigureDateFormat: z.boolean().optional(),
+    allowConfigureTimezone: z.boolean().optional(),
+    allowConfigureRedirectUrl: z.boolean().optional(),
+    allowConfigureCommunication: z.boolean().optional(),
+    darkModeDisabled: z.boolean().optional(),
+    css: z.string().optional(),
+  })
+  .refine(
+    (data) => {
+      if (data.useApiKey) {
+        return !!data.apiKey && data.apiKey.length > 0;
+      }
+      return !!data.presignToken && data.presignToken.length > 0;
+    },
+    {
+      message: 'Either API key or presign token is required',
+      path: ['apiKey'],
+    },
+  );
+
+type FormData = z.infer<typeof formSchema>;
+
+export default function CreateTemplateEmbedding() {
+  const host = import.meta.env.VITE_EMBED_HOST || 'https://app.documenso.com';
+  const [showEmbed, setShowEmbed] = useState(false);
+  const [embedConfig, setEmbedConfig] = useState<
+    (Omit<FormData, 'useApiKey' | 'apiKey'> & { presignToken: string }) | null
+  >(null);
+  const [isGenerating, setIsGenerating] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const form = useForm<FormData>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      useApiKey: true,
+      apiKey: '',
+      presignToken: '',
+      externalId: '',
+      allowConfigureSignatureTypes: true,
+      allowConfigureLanguage: true,
+      allowConfigureDateFormat: true,
+      allowConfigureTimezone: true,
+      allowConfigureRedirectUrl: true,
+      allowConfigureCommunication: true,
+      darkModeDisabled: false,
+      css: '',
+    },
+  });
+
+  const generatePresignToken = async (apiKey: string) => {
+    const response = await fetch(`${host}/api/v2-beta/embedding/create-presign-token`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${apiKey}`,
+      },
+      body: JSON.stringify({
+        expiresIn: 60,
+      }),
+    });
+
+    if (!response.ok) {
+      const errorData = await response.json().catch(() => ({ message: 'Failed to parse error' }));
+      throw new Error(errorData.message || `Failed to generate presign token: ${response.status}`);
+    }
+
+    const data = await response.json();
+    return data.token;
+  };
+
+  const onSubmit = async (data: FormData) => {
+    setIsGenerating(true);
+    setError(null);
+
+    try {
+      let token = data.presignToken || '';
+
+      if (data.useApiKey && data.apiKey) {
+        token = await generatePresignToken(data.apiKey);
+      }
+
+      setEmbedConfig({ ...data, presignToken: token });
+      setShowEmbed(true);
+      console.log('Generating Create Template embedding');
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to generate token');
+      console.error('Error generating presign token:', err);
+    } finally {
+      setIsGenerating(false);
+    }
+  };
+
+  const handleClear = () => {
+    form.reset();
+    setShowEmbed(false);
+    setEmbedConfig(null);
+    setError(null);
+  };
+
+  const useApiKey = form.watch('useApiKey');
+  const watchedValue = useApiKey ? form.watch('apiKey') : form.watch('presignToken');
+
+  return (
+    <div className="space-y-6">
+      <Form {...form}>
+        <form onSubmit={form.handleSubmit(onSubmit)}>
+          <Card>
+            <CardHeader>
+              <CardTitle>Create Template Configurator</CardTitle>
+              <CardDescription>
+                Configure your template authoring embedding parameters
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <FormField
+                control={form.control}
+                name="useApiKey"
+                render={({ field }) => (
+                  <FormItem className="flex flex-row items-start space-x-3 space-y-0">
+                    <FormControl>
+                      <Checkbox checked={field.value} onCheckedChange={field.onChange} />
+                    </FormControl>
+                    <div className="space-y-1 leading-none">
+                      <FormLabel>Use API Key to Generate Token</FormLabel>
+                      <FormDescription>
+                        Check this to automatically generate a presign token from your API key
+                      </FormDescription>
+                    </div>
+                  </FormItem>
+                )}
+              />
+
+              {useApiKey ? (
+                <FormField
+                  control={form.control}
+                  name="apiKey"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>API Key</FormLabel>
+                      <FormControl>
+                        <Input
+                          type="password"
+                          placeholder="Enter your API key..."
+                          className="font-mono text-sm"
+                          {...field}
+                        />
+                      </FormControl>
+                      <FormDescription>
+                        Your Documenso API key to generate a presign token
+                      </FormDescription>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              ) : (
+                <FormField
+                  control={form.control}
+                  name="presignToken"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>Presign Token</FormLabel>
+                      <FormControl>
+                        <Input
+                          type="password"
+                          placeholder="Enter presign token..."
+                          className="font-mono text-sm"
+                          {...field}
+                        />
+                      </FormControl>
+                      <FormDescription>
+                        A presign token generated from your backend server
+                      </FormDescription>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              )}
+
+              <FormField
+                control={form.control}
+                name="externalId"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>External ID (Optional)</FormLabel>
+                    <FormControl>
+                      <Input
+                        placeholder="Enter external ID..."
+                        className="font-mono text-sm"
+                        {...field}
+                      />
+                    </FormControl>
+                    <FormDescription>Unique identifier for tracking this template</FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <Separator />
+
+              <div className="space-y-3">
+                <div className="text-sm font-medium">Feature Configuration</div>
+
+                <FormField
+                  control={form.control}
+                  name="allowConfigureSignatureTypes"
+                  render={({ field }) => (
+                    <FormItem className="flex flex-row items-start space-x-3 space-y-0">
+                      <FormControl>
+                        <Checkbox checked={field.value} onCheckedChange={field.onChange} />
+                      </FormControl>
+                      <div className="space-y-1 leading-none">
+                        <FormLabel>Allow Configure Signature Types</FormLabel>
+                        <FormDescription>
+                          Allow users to configure signature field types
+                        </FormDescription>
+                      </div>
+                    </FormItem>
+                  )}
+                />
+
+                <FormField
+                  control={form.control}
+                  name="allowConfigureLanguage"
+                  render={({ field }) => (
+                    <FormItem className="flex flex-row items-start space-x-3 space-y-0">
+                      <FormControl>
+                        <Checkbox checked={field.value} onCheckedChange={field.onChange} />
+                      </FormControl>
+                      <div className="space-y-1 leading-none">
+                        <FormLabel>Allow Configure Language</FormLabel>
+                        <FormDescription>
+                          Allow users to configure document language
+                        </FormDescription>
+                      </div>
+                    </FormItem>
+                  )}
+                />
+
+                <FormField
+                  control={form.control}
+                  name="allowConfigureDateFormat"
+                  render={({ field }) => (
+                    <FormItem className="flex flex-row items-start space-x-3 space-y-0">
+                      <FormControl>
+                        <Checkbox checked={field.value} onCheckedChange={field.onChange} />
+                      </FormControl>
+                      <div className="space-y-1 leading-none">
+                        <FormLabel>Allow Configure Date Format</FormLabel>
+                        <FormDescription>Allow users to configure date format</FormDescription>
+                      </div>
+                    </FormItem>
+                  )}
+                />
+
+                <FormField
+                  control={form.control}
+                  name="allowConfigureTimezone"
+                  render={({ field }) => (
+                    <FormItem className="flex flex-row items-start space-x-3 space-y-0">
+                      <FormControl>
+                        <Checkbox checked={field.value} onCheckedChange={field.onChange} />
+                      </FormControl>
+                      <div className="space-y-1 leading-none">
+                        <FormLabel>Allow Configure Timezone</FormLabel>
+                        <FormDescription>Allow users to configure timezone</FormDescription>
+                      </div>
+                    </FormItem>
+                  )}
+                />
+
+                <FormField
+                  control={form.control}
+                  name="allowConfigureRedirectUrl"
+                  render={({ field }) => (
+                    <FormItem className="flex flex-row items-start space-x-3 space-y-0">
+                      <FormControl>
+                        <Checkbox checked={field.value} onCheckedChange={field.onChange} />
+                      </FormControl>
+                      <div className="space-y-1 leading-none">
+                        <FormLabel>Allow Configure Redirect URL</FormLabel>
+                        <FormDescription>Allow users to set redirect URL</FormDescription>
+                      </div>
+                    </FormItem>
+                  )}
+                />
+
+                <FormField
+                  control={form.control}
+                  name="allowConfigureCommunication"
+                  render={({ field }) => (
+                    <FormItem className="flex flex-row items-start space-x-3 space-y-0">
+                      <FormControl>
+                        <Checkbox checked={field.value} onCheckedChange={field.onChange} />
+                      </FormControl>
+                      <div className="space-y-1 leading-none">
+                        <FormLabel>Allow Configure Communication</FormLabel>
+                        <FormDescription>
+                          Allow users to configure email notifications
+                        </FormDescription>
+                      </div>
+                    </FormItem>
+                  )}
+                />
+              </div>
+
+              <Separator />
+
+              <FormField
+                control={form.control}
+                name="darkModeDisabled"
+                render={({ field }) => (
+                  <FormItem className="flex flex-row items-start space-x-3 space-y-0">
+                    <FormControl>
+                      <Checkbox checked={field.value} onCheckedChange={field.onChange} />
+                    </FormControl>
+                    <div className="space-y-1 leading-none">
+                      <FormLabel>Disable Dark Mode</FormLabel>
+                      <FormDescription>Force light mode only</FormDescription>
+                    </div>
+                  </FormItem>
+                )}
+              />
+
+              <Separator />
+
+              <FormField
+                control={form.control}
+                name="css"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Custom CSS (Optional)</FormLabel>
+                    <FormControl>
+                      <Textarea
+                        placeholder="Enter custom CSS..."
+                        rows={4}
+                        className="font-mono text-sm"
+                        {...field}
+                      />
+                    </FormControl>
+                    <FormDescription>Add custom CSS to style the embedded editor</FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <Separator />
+
+              {error && (
+                <div className="rounded-md border border-red-200 bg-red-50 p-3 text-sm text-red-800">
+                  {error}
+                </div>
+              )}
+
+              <div className="flex gap-2">
+                <Button
+                  type="submit"
+                  className="flex-1"
+                  disabled={!form.formState.isValid || isGenerating}
+                >
+                  {isGenerating ? 'Generating Token...' : 'Generate Embedding'}
+                </Button>
+                <Button type="button" variant="outline" onClick={handleClear}>
+                  Clear
+                </Button>
+              </div>
+            </CardContent>
+          </Card>
+        </form>
+      </Form>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Create Template Embedding</CardTitle>
+          <CardDescription>Embedded authoring view will appear here</CardDescription>
+        </CardHeader>
+        <CardContent className="p-0">
+          <div className="border-muted-foreground/25 m-6 flex min-h-[600px] items-center justify-center rounded-lg border-2 border-dashed">
+            {showEmbed && embedConfig ? (
+              <EmbedCreateTemplate
+                className="h-[800px] w-full"
+                host={host}
+                presignToken={embedConfig.presignToken}
+                externalId={embedConfig.externalId}
+                features={{
+                  allowConfigureSignatureTypes: embedConfig.allowConfigureSignatureTypes,
+                  allowConfigureLanguage: embedConfig.allowConfigureLanguage,
+                  allowConfigureDateFormat: embedConfig.allowConfigureDateFormat,
+                  allowConfigureTimezone: embedConfig.allowConfigureTimezone,
+                  allowConfigureRedirectUrl: embedConfig.allowConfigureRedirectUrl,
+                  allowConfigureCommunication: embedConfig.allowConfigureCommunication,
+                }}
+                darkModeDisabled={embedConfig.darkModeDisabled}
+                css={embedConfig.css}
+                onTemplateCreated={(data) => console.log('Template created:', data)}
+              />
+            ) : watchedValue ? (
+              <div className="space-y-2 text-center">
+                <div className="text-muted-foreground text-sm">
+                  Ready to generate embedding iframe
+                </div>
+              </div>
+            ) : (
+              <div className="text-muted-foreground text-sm">
+                Configure {useApiKey ? 'API key' : 'presign token'} above to generate the embedding
+              </div>
+            )}
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
diff --git a/playground/src/components/embeddings/direct-template.tsx b/playground/src/components/embeddings/direct-template.tsx
new file mode 100644
index 0000000..ec9bacf
--- /dev/null
+++ b/playground/src/components/embeddings/direct-template.tsx
@@ -0,0 +1,280 @@
+import { useState } from 'react';
+
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Checkbox } from '@/components/ui/checkbox';
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import { Separator } from '@/components/ui/separator';
+import { Textarea } from '@/components/ui/textarea';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+import { EmbedDirectTemplate } from '@documenso/embed-react';
+
+const formSchema = z.object({
+  token: z.string().min(1, 'Template token is required'),
+  externalId: z.string().optional(),
+  email: z.string().email('Invalid email').optional().or(z.literal('')),
+  lockEmail: z.boolean().optional(),
+  name: z.string().optional(),
+  lockName: z.boolean().optional(),
+  darkModeDisabled: z.boolean().optional(),
+  css: z.string().optional(),
+});
+
+type FormData = z.infer<typeof formSchema>;
+
+export default function DirectTemplateEmbedding() {
+  const host = import.meta.env.VITE_EMBED_HOST || 'https://app.documenso.com';
+  const [showEmbed, setShowEmbed] = useState(false);
+  const [embedConfig, setEmbedConfig] = useState<FormData | null>(null);
+
+  const form = useForm<FormData>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      token: '',
+      externalId: '',
+      email: '',
+      lockEmail: false,
+      name: '',
+      lockName: false,
+      darkModeDisabled: false,
+      css: '',
+    },
+  });
+
+  const onSubmit = (data: FormData) => {
+    setEmbedConfig(data);
+    setShowEmbed(true);
+    console.log('Generating Direct Template embedding with config:', data);
+  };
+
+  const handleClear = () => {
+    form.reset();
+    setShowEmbed(false);
+    setEmbedConfig(null);
+  };
+
+  const watchedToken = form.watch('token');
+
+  return (
+    <div className="space-y-6">
+      <Form {...form}>
+        <form onSubmit={form.handleSubmit(onSubmit)}>
+          <Card>
+            <CardHeader>
+              <CardTitle>Direct Template Configurator</CardTitle>
+              <CardDescription>Configure your direct template embedding parameters</CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <FormField
+                control={form.control}
+                name="token"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Template Token</FormLabel>
+                    <FormControl>
+                      <Input
+                        placeholder="Enter template token..."
+                        className="font-mono text-sm"
+                        {...field}
+                      />
+                    </FormControl>
+                    <FormDescription>The direct template token</FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="externalId"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>External ID (Optional)</FormLabel>
+                    <FormControl>
+                      <Input
+                        placeholder="Enter external ID..."
+                        className="font-mono text-sm"
+                        {...field}
+                      />
+                    </FormControl>
+                    <FormDescription>
+                      Unique identifier for tracking this template instance
+                    </FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <Separator />
+
+              <FormField
+                control={form.control}
+                name="email"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Email (Optional)</FormLabel>
+                    <FormControl>
+                      <Input placeholder="Pre-fill signer email..." {...field} />
+                    </FormControl>
+                    <FormDescription>Pre-fill the signer's email</FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="lockEmail"
+                render={({ field }) => (
+                  <FormItem className="flex flex-row items-start space-x-3 space-y-0">
+                    <FormControl>
+                      <Checkbox checked={field.value} onCheckedChange={field.onChange} />
+                    </FormControl>
+                    <div className="space-y-1 leading-none">
+                      <FormLabel>Lock Email</FormLabel>
+                      <FormDescription>
+                        Prevent the signer from changing their email
+                      </FormDescription>
+                    </div>
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="name"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Name (Optional)</FormLabel>
+                    <FormControl>
+                      <Input placeholder="Pre-fill signer name..." {...field} />
+                    </FormControl>
+                    <FormDescription>Pre-fill the signer's name</FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="lockName"
+                render={({ field }) => (
+                  <FormItem className="flex flex-row items-start space-x-3 space-y-0">
+                    <FormControl>
+                      <Checkbox checked={field.value} onCheckedChange={field.onChange} />
+                    </FormControl>
+                    <div className="space-y-1 leading-none">
+                      <FormLabel>Lock Name</FormLabel>
+                      <FormDescription>Prevent the signer from changing their name</FormDescription>
+                    </div>
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="darkModeDisabled"
+                render={({ field }) => (
+                  <FormItem className="flex flex-row items-start space-x-3 space-y-0">
+                    <FormControl>
+                      <Checkbox checked={field.value} onCheckedChange={field.onChange} />
+                    </FormControl>
+                    <div className="space-y-1 leading-none">
+                      <FormLabel>Disable Dark Mode</FormLabel>
+                      <FormDescription>Force light mode only</FormDescription>
+                    </div>
+                  </FormItem>
+                )}
+              />
+
+              <Separator />
+
+              <FormField
+                control={form.control}
+                name="css"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Custom CSS (Optional)</FormLabel>
+                    <FormControl>
+                      <Textarea
+                        placeholder="Enter custom CSS..."
+                        rows={4}
+                        className="font-mono text-sm"
+                        {...field}
+                      />
+                    </FormControl>
+                    <FormDescription>Add custom CSS to style the embedded template</FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <Separator />
+
+              <div className="flex gap-2">
+                <Button type="submit" className="flex-1" disabled={!form.formState.isValid}>
+                  Generate Embedding
+                </Button>
+                <Button type="button" variant="outline" onClick={handleClear}>
+                  Clear
+                </Button>
+              </div>
+            </CardContent>
+          </Card>
+        </form>
+      </Form>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Direct Template Embedding</CardTitle>
+          <CardDescription>Embedded view will appear here</CardDescription>
+        </CardHeader>
+        <CardContent className="p-0">
+          <div className="border-muted-foreground/25 m-6 flex min-h-[600px] items-center justify-center rounded-lg border-2 border-dashed">
+            {showEmbed && embedConfig ? (
+              <EmbedDirectTemplate
+                className="h-[800px] w-full"
+                host={host}
+                token={embedConfig.token}
+                externalId={embedConfig.externalId}
+                email={embedConfig.email}
+                lockEmail={embedConfig.lockEmail}
+                name={embedConfig.name}
+                lockName={embedConfig.lockName}
+                darkModeDisabled={embedConfig.darkModeDisabled}
+                css={embedConfig.css}
+                onDocumentReady={() => console.log('Document ready')}
+                onDocumentCompleted={(data) => console.log('Document completed:', data)}
+                onDocumentError={(error) => console.error('Document error:', error)}
+                onFieldSigned={() => console.log('Field signed')}
+                onFieldUnsigned={() => console.log('Field unsigned')}
+              />
+            ) : watchedToken ? (
+              <div className="space-y-2 text-center">
+                <div className="text-muted-foreground text-sm">
+                  Ready to generate embedding iframe
+                </div>
+              </div>
+            ) : (
+              <div className="text-muted-foreground text-sm">
+                Configure template token above to generate the embedding
+              </div>
+            )}
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
diff --git a/playground/src/components/embeddings/sign-document.tsx b/playground/src/components/embeddings/sign-document.tsx
new file mode 100644
index 0000000..93e0b2c
--- /dev/null
+++ b/playground/src/components/embeddings/sign-document.tsx
@@ -0,0 +1,243 @@
+import { useState } from 'react';
+
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Checkbox } from '@/components/ui/checkbox';
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import { Separator } from '@/components/ui/separator';
+import { Textarea } from '@/components/ui/textarea';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+import { EmbedSignDocument } from '@documenso/embed-react';
+
+const formSchema = z.object({
+  token: z.string().min(1, 'Signing token is required'),
+  name: z.string().optional(),
+  lockName: z.boolean().optional(),
+  allowDocumentRejection: z.boolean().optional(),
+  darkModeDisabled: z.boolean().optional(),
+  css: z.string().optional(),
+});
+
+type FormData = z.infer<typeof formSchema>;
+
+export default function SignDocumentEmbedding() {
+  const host = import.meta.env.VITE_EMBED_HOST || 'https://app.documenso.com';
+
+  const [showEmbed, setShowEmbed] = useState(false);
+  const [embedKey, setEmbedKey] = useState<number>(1);
+  const [embedConfig, setEmbedConfig] = useState<FormData | null>(null);
+
+  const form = useForm<FormData>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      token: '',
+      name: '',
+      lockName: false,
+      allowDocumentRejection: false,
+      darkModeDisabled: false,
+      css: '',
+    },
+  });
+
+  const onSubmit = (data: FormData) => {
+    setEmbedConfig(data);
+    setShowEmbed(true);
+    setEmbedKey((key) => key + 1);
+    console.log('Generating Sign Document embedding with config:', data);
+  };
+
+  const handleClear = () => {
+    form.reset();
+    setShowEmbed(false);
+    setEmbedConfig(null);
+  };
+
+  const watchedToken = form.watch('token');
+
+  return (
+    <div className="space-y-6">
+      <Form {...form}>
+        <form onSubmit={form.handleSubmit(onSubmit)}>
+          <Card>
+            <CardHeader>
+              <CardTitle>Sign Document Configurator</CardTitle>
+              <CardDescription>
+                Configure your document signing embedding parameters
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <FormField
+                control={form.control}
+                name="token"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Signing Token</FormLabel>
+                    <FormControl>
+                      <Input
+                        placeholder="Enter signing token..."
+                        className="font-mono text-sm"
+                        {...field}
+                      />
+                    </FormControl>
+                    <FormDescription>
+                      The token for the recipient to sign the document
+                    </FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <Separator />
+
+              <FormField
+                control={form.control}
+                name="name"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Name (Optional)</FormLabel>
+                    <FormControl>
+                      <Input placeholder="Pre-fill signer name..." {...field} />
+                    </FormControl>
+                    <FormDescription>Pre-fill the signer's name</FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="lockName"
+                render={({ field }) => (
+                  <FormItem className="flex flex-row items-start space-x-3 space-y-0">
+                    <FormControl>
+                      <Checkbox checked={field.value} onCheckedChange={field.onChange} />
+                    </FormControl>
+                    <div className="space-y-1 leading-none">
+                      <FormLabel>Lock Name</FormLabel>
+                      <FormDescription>Prevent the signer from changing their name</FormDescription>
+                    </div>
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="allowDocumentRejection"
+                render={({ field }) => (
+                  <FormItem className="flex flex-row items-start space-x-3 space-y-0">
+                    <FormControl>
+                      <Checkbox checked={field.value} onCheckedChange={field.onChange} />
+                    </FormControl>
+                    <div className="space-y-1 leading-none">
+                      <FormLabel>Allow Document Rejection</FormLabel>
+                      <FormDescription>Allow the signer to reject the document</FormDescription>
+                    </div>
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="darkModeDisabled"
+                render={({ field }) => (
+                  <FormItem className="flex flex-row items-start space-x-3 space-y-0">
+                    <FormControl>
+                      <Checkbox checked={field.value} onCheckedChange={field.onChange} />
+                    </FormControl>
+                    <div className="space-y-1 leading-none">
+                      <FormLabel>Disable Dark Mode</FormLabel>
+                      <FormDescription>Force light mode only</FormDescription>
+                    </div>
+                  </FormItem>
+                )}
+              />
+
+              <Separator />
+
+              <FormField
+                control={form.control}
+                name="css"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Custom CSS (Optional)</FormLabel>
+                    <FormControl>
+                      <Textarea
+                        placeholder="Enter custom CSS..."
+                        rows={4}
+                        className="font-mono text-sm"
+                        {...field}
+                      />
+                    </FormControl>
+                    <FormDescription>Add custom CSS to style the embedded document</FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <Separator />
+
+              <div className="flex gap-2">
+                <Button type="submit" className="flex-1" disabled={!form.formState.isValid}>
+                  Generate Embedding
+                </Button>
+                <Button type="button" variant="outline" onClick={handleClear}>
+                  Clear
+                </Button>
+              </div>
+            </CardContent>
+          </Card>
+        </form>
+      </Form>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Sign Document Embedding</CardTitle>
+          <CardDescription>Embedded view will appear here</CardDescription>
+        </CardHeader>
+        <CardContent className="p-0">
+          <div className="border-muted-foreground/25 m-6 flex min-h-[600px] items-center justify-center rounded-lg border-2 border-dashed">
+            {showEmbed && embedConfig ? (
+              <EmbedSignDocument
+                key={embedKey}
+                className="h-[800px] w-full"
+                host={host}
+                token={embedConfig.token}
+                name={embedConfig.name}
+                lockName={embedConfig.lockName}
+                allowDocumentRejection={embedConfig.allowDocumentRejection}
+                darkModeDisabled={embedConfig.darkModeDisabled}
+                css={embedConfig.css}
+                onDocumentReady={() => console.log('Document ready')}
+                onDocumentCompleted={(data) => console.log('Document completed:', data)}
+                onDocumentError={(error) => console.error('Document error:', error)}
+                onDocumentRejected={(data) => console.log('Document rejected:', data)}
+              />
+            ) : watchedToken ? (
+              <div className="space-y-2 text-center">
+                <div className="text-muted-foreground text-sm">
+                  Ready to generate embedding iframe
+                </div>
+              </div>
+            ) : (
+              <div className="text-muted-foreground text-sm">
+                Configure signing token above to generate the embedding
+              </div>
+            )}
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
diff --git a/playground/src/components/embeddings/update-document.tsx b/playground/src/components/embeddings/update-document.tsx
new file mode 100644
index 0000000..0dc9c61
--- /dev/null
+++ b/playground/src/components/embeddings/update-document.tsx
@@ -0,0 +1,489 @@
+import { useState } from 'react';
+
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Checkbox } from '@/components/ui/checkbox';
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import { Separator } from '@/components/ui/separator';
+import { Textarea } from '@/components/ui/textarea';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+import { unstable_EmbedUpdateDocument as EmbedUpdateDocument } from '@documenso/embed-react';
+
+const formSchema = z
+  .object({
+    useApiKey: z.boolean(),
+    apiKey: z.string().optional(),
+    presignToken: z.string().optional(),
+    documentId: z.coerce.number(),
+    externalId: z.string().optional(),
+    onlyEditFields: z.boolean().optional(),
+    allowConfigureSignatureTypes: z.boolean().optional(),
+    allowConfigureLanguage: z.boolean().optional(),
+    allowConfigureDateFormat: z.boolean().optional(),
+    allowConfigureTimezone: z.boolean().optional(),
+    allowConfigureRedirectUrl: z.boolean().optional(),
+    allowConfigureCommunication: z.boolean().optional(),
+    darkModeDisabled: z.boolean().optional(),
+    css: z.string().optional(),
+  })
+  .refine(
+    (data) => {
+      if (data.useApiKey) {
+        return !!data.apiKey && data.apiKey.length > 0;
+      }
+      return !!data.presignToken && data.presignToken.length > 0;
+    },
+    {
+      message: 'Either API key or presign token is required',
+      path: ['apiKey'],
+    },
+  );
+
+type FormData = z.infer<typeof formSchema>;
+
+export default function UpdateDocumentEmbedding() {
+  const host = import.meta.env.VITE_EMBED_HOST || 'https://app.documenso.com';
+  const [showEmbed, setShowEmbed] = useState(false);
+  const [embedConfig, setEmbedConfig] = useState<
+    (Omit<FormData, 'useApiKey' | 'apiKey'> & { presignToken: string }) | null
+  >(null);
+  const [isGenerating, setIsGenerating] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const form = useForm<FormData>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      useApiKey: true,
+      apiKey: '',
+      presignToken: '',
+      documentId: 1,
+      externalId: '',
+      onlyEditFields: false,
+      allowConfigureSignatureTypes: true,
+      allowConfigureLanguage: true,
+      allowConfigureDateFormat: true,
+      allowConfigureTimezone: true,
+      allowConfigureRedirectUrl: true,
+      allowConfigureCommunication: true,
+      darkModeDisabled: false,
+      css: '',
+    },
+  });
+
+  const generatePresignToken = async (apiKey: string) => {
+    const response = await fetch(`${host}/api/v2-beta/embedding/create-presign-token`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${apiKey}`,
+      },
+      body: JSON.stringify({
+        expiresIn: 60,
+      }),
+    });
+
+    if (!response.ok) {
+      const errorData = await response.json().catch(() => ({ message: 'Failed to parse error' }));
+      throw new Error(errorData.message || `Failed to generate presign token: ${response.status}`);
+    }
+
+    const data = await response.json();
+    return data.token;
+  };
+
+  const onSubmit = async (data: FormData) => {
+    setIsGenerating(true);
+    setError(null);
+
+    try {
+      let token = data.presignToken || '';
+
+      if (data.useApiKey && data.apiKey) {
+        token = await generatePresignToken(data.apiKey);
+      }
+
+      setEmbedConfig({ ...data, presignToken: token });
+      setShowEmbed(true);
+      console.log('Generating Create Document embedding');
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to generate token');
+      console.error('Error generating presign token:', err);
+    } finally {
+      setIsGenerating(false);
+    }
+  };
+
+  const handleClear = () => {
+    form.reset();
+    setShowEmbed(false);
+    setEmbedConfig(null);
+    setError(null);
+  };
+
+  const useApiKey = form.watch('useApiKey');
+  const watchedValue = useApiKey ? form.watch('apiKey') : form.watch('presignToken');
+
+  return (
+    <div className="space-y-6">
+      <Form {...form}>
+        <form onSubmit={form.handleSubmit(onSubmit)}>
+          <Card>
+            <CardHeader>
+              <CardTitle>Create Document Configurator</CardTitle>
+              <CardDescription>
+                Configure your document authoring embedding parameters
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <FormField
+                control={form.control}
+                name="useApiKey"
+                render={({ field }) => (
+                  <FormItem className="flex flex-row items-start space-x-3 space-y-0">
+                    <FormControl>
+                      <Checkbox checked={field.value} onCheckedChange={field.onChange} />
+                    </FormControl>
+                    <div className="space-y-1 leading-none">
+                      <FormLabel>Use API Key to Generate Token</FormLabel>
+                      <FormDescription>
+                        Check this to automatically generate a presign token from your API key
+                      </FormDescription>
+                    </div>
+                  </FormItem>
+                )}
+              />
+
+              {useApiKey ? (
+                <FormField
+                  control={form.control}
+                  name="apiKey"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>API Key</FormLabel>
+                      <FormControl>
+                        <Input
+                          type="password"
+                          placeholder="Enter your API key..."
+                          className="font-mono text-sm"
+                          {...field}
+                        />
+                      </FormControl>
+                      <FormDescription>
+                        Your Documenso API key to generate a presign token
+                      </FormDescription>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              ) : (
+                <FormField
+                  control={form.control}
+                  name="presignToken"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>Presign Token</FormLabel>
+                      <FormControl>
+                        <Input
+                          type="password"
+                          placeholder="Enter presign token..."
+                          className="font-mono text-sm"
+                          {...field}
+                        />
+                      </FormControl>
+                      <FormDescription>
+                        A presign token generated from your backend server
+                      </FormDescription>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              )}
+
+              <Separator />
+
+              <FormField
+                control={form.control}
+                name="documentId"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Document ID</FormLabel>
+                    <FormControl>
+                      <Input
+                        type="number"
+                        placeholder="Enter document ID..."
+                        className="font-mono text-sm"
+                        {...field}
+                      />
+                    </FormControl>
+                    <FormDescription>The ID of the document to update</FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <Separator />
+
+              <FormField
+                control={form.control}
+                name="externalId"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>External ID (Optional)</FormLabel>
+                    <FormControl>
+                      <Input
+                        placeholder="Enter external ID..."
+                        className="font-mono text-sm"
+                        {...field}
+                      />
+                    </FormControl>
+                    <FormDescription>Unique identifier for tracking this document</FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <Separator />
+
+              <div className="space-y-3">
+                <div className="text-sm font-medium">Feature Configuration</div>
+
+                <FormField
+                  control={form.control}
+                  name="allowConfigureSignatureTypes"
+                  render={({ field }) => (
+                    <FormItem className="flex flex-row items-start space-x-3 space-y-0">
+                      <FormControl>
+                        <Checkbox checked={field.value} onCheckedChange={field.onChange} />
+                      </FormControl>
+                      <div className="space-y-1 leading-none">
+                        <FormLabel>Allow Configure Signature Types</FormLabel>
+                        <FormDescription>
+                          Allow users to configure signature field types
+                        </FormDescription>
+                      </div>
+                    </FormItem>
+                  )}
+                />
+
+                <FormField
+                  control={form.control}
+                  name="onlyEditFields"
+                  render={({ field }) => (
+                    <FormItem className="flex flex-row items-start space-x-3 space-y-0">
+                      <FormControl>
+                        <Checkbox checked={field.value} onCheckedChange={field.onChange} />
+                      </FormControl>
+                      <div className="space-y-1 leading-none">
+                        <FormLabel>Only Edit Fields</FormLabel>
+                        <FormDescription>Allow users to only configure fields</FormDescription>
+                      </div>
+                    </FormItem>
+                  )}
+                />
+
+                <FormField
+                  control={form.control}
+                  name="allowConfigureLanguage"
+                  render={({ field }) => (
+                    <FormItem className="flex flex-row items-start space-x-3 space-y-0">
+                      <FormControl>
+                        <Checkbox checked={field.value} onCheckedChange={field.onChange} />
+                      </FormControl>
+                      <div className="space-y-1 leading-none">
+                        <FormLabel>Allow Configure Language</FormLabel>
+                        <FormDescription>
+                          Allow users to configure document language
+                        </FormDescription>
+                      </div>
+                    </FormItem>
+                  )}
+                />
+
+                <FormField
+                  control={form.control}
+                  name="allowConfigureDateFormat"
+                  render={({ field }) => (
+                    <FormItem className="flex flex-row items-start space-x-3 space-y-0">
+                      <FormControl>
+                        <Checkbox checked={field.value} onCheckedChange={field.onChange} />
+                      </FormControl>
+                      <div className="space-y-1 leading-none">
+                        <FormLabel>Allow Configure Date Format</FormLabel>
+                        <FormDescription>Allow users to configure date format</FormDescription>
+                      </div>
+                    </FormItem>
+                  )}
+                />
+
+                <FormField
+                  control={form.control}
+                  name="allowConfigureTimezone"
+                  render={({ field }) => (
+                    <FormItem className="flex flex-row items-start space-x-3 space-y-0">
+                      <FormControl>
+                        <Checkbox checked={field.value} onCheckedChange={field.onChange} />
+                      </FormControl>
+                      <div className="space-y-1 leading-none">
+                        <FormLabel>Allow Configure Timezone</FormLabel>
+                        <FormDescription>Allow users to configure timezone</FormDescription>
+                      </div>
+                    </FormItem>
+                  )}
+                />
+
+                <FormField
+                  control={form.control}
+                  name="allowConfigureRedirectUrl"
+                  render={({ field }) => (
+                    <FormItem className="flex flex-row items-start space-x-3 space-y-0">
+                      <FormControl>
+                        <Checkbox checked={field.value} onCheckedChange={field.onChange} />
+                      </FormControl>
+                      <div className="space-y-1 leading-none">
+                        <FormLabel>Allow Configure Redirect URL</FormLabel>
+                        <FormDescription>Allow users to set redirect URL</FormDescription>
+                      </div>
+                    </FormItem>
+                  )}
+                />
+
+                <FormField
+                  control={form.control}
+                  name="allowConfigureCommunication"
+                  render={({ field }) => (
+                    <FormItem className="flex flex-row items-start space-x-3 space-y-0">
+                      <FormControl>
+                        <Checkbox checked={field.value} onCheckedChange={field.onChange} />
+                      </FormControl>
+                      <div className="space-y-1 leading-none">
+                        <FormLabel>Allow Configure Communication</FormLabel>
+                        <FormDescription>
+                          Allow users to configure email notifications
+                        </FormDescription>
+                      </div>
+                    </FormItem>
+                  )}
+                />
+              </div>
+
+              <Separator />
+
+              <FormField
+                control={form.control}
+                name="darkModeDisabled"
+                render={({ field }) => (
+                  <FormItem className="flex flex-row items-start space-x-3 space-y-0">
+                    <FormControl>
+                      <Checkbox checked={field.value} onCheckedChange={field.onChange} />
+                    </FormControl>
+                    <div className="space-y-1 leading-none">
+                      <FormLabel>Disable Dark Mode</FormLabel>
+                      <FormDescription>Force light mode only</FormDescription>
+                    </div>
+                  </FormItem>
+                )}
+              />
+
+              <Separator />
+
+              <FormField
+                control={form.control}
+                name="css"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Custom CSS (Optional)</FormLabel>
+                    <FormControl>
+                      <Textarea
+                        placeholder="Enter custom CSS..."
+                        rows={4}
+                        className="font-mono text-sm"
+                        {...field}
+                      />
+                    </FormControl>
+                    <FormDescription>Add custom CSS to style the embedded editor</FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <Separator />
+
+              {error && (
+                <div className="rounded-md border border-red-200 bg-red-50 p-3 text-sm text-red-800">
+                  {error}
+                </div>
+              )}
+
+              <div className="flex gap-2">
+                <Button
+                  type="submit"
+                  className="flex-1"
+                  disabled={!form.formState.isValid || isGenerating}
+                >
+                  {isGenerating ? 'Generating Token...' : 'Generate Embedding'}
+                </Button>
+                <Button type="button" variant="outline" onClick={handleClear}>
+                  Clear
+                </Button>
+              </div>
+            </CardContent>
+          </Card>
+        </form>
+      </Form>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Create Document Embedding</CardTitle>
+          <CardDescription>Embedded authoring view will appear here</CardDescription>
+        </CardHeader>
+        <CardContent className="p-0">
+          <div className="border-muted-foreground/25 m-6 flex min-h-[600px] items-center justify-center rounded-lg border-2 border-dashed">
+            {showEmbed && embedConfig ? (
+              <EmbedUpdateDocument
+                className="h-[800px] w-full"
+                host={host}
+                documentId={embedConfig.documentId}
+                presignToken={embedConfig.presignToken}
+                externalId={embedConfig.externalId}
+                features={{
+                  allowConfigureSignatureTypes: embedConfig.allowConfigureSignatureTypes,
+                  allowConfigureLanguage: embedConfig.allowConfigureLanguage,
+                  allowConfigureDateFormat: embedConfig.allowConfigureDateFormat,
+                  allowConfigureTimezone: embedConfig.allowConfigureTimezone,
+                  allowConfigureRedirectUrl: embedConfig.allowConfigureRedirectUrl,
+                  allowConfigureCommunication: embedConfig.allowConfigureCommunication,
+                }}
+                onlyEditFields={embedConfig.onlyEditFields}
+                darkModeDisabled={embedConfig.darkModeDisabled}
+                css={embedConfig.css}
+                onDocumentUpdated={(data) => console.log('Document updated:', data)}
+              />
+            ) : watchedValue ? (
+              <div className="space-y-2 text-center">
+                <div className="text-muted-foreground text-sm">
+                  Ready to generate embedding iframe
+                </div>
+              </div>
+            ) : (
+              <div className="text-muted-foreground text-sm">
+                Configure {useApiKey ? 'API key' : 'presign token'} above to generate the embedding
+              </div>
+            )}
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
diff --git a/playground/src/components/embeddings/update-template.tsx b/playground/src/components/embeddings/update-template.tsx
new file mode 100644
index 0000000..7146eb5
--- /dev/null
+++ b/playground/src/components/embeddings/update-template.tsx
@@ -0,0 +1,489 @@
+import { useState } from 'react';
+
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Checkbox } from '@/components/ui/checkbox';
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import { Separator } from '@/components/ui/separator';
+import { Textarea } from '@/components/ui/textarea';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+import { unstable_EmbedUpdateTemplate as EmbedUpdateTemplate } from '@documenso/embed-react';
+
+const formSchema = z
+  .object({
+    useApiKey: z.boolean(),
+    apiKey: z.string().optional(),
+    presignToken: z.string().optional(),
+    templateId: z.coerce.number(),
+    externalId: z.string().optional(),
+    onlyEditFields: z.boolean().optional(),
+    allowConfigureSignatureTypes: z.boolean().optional(),
+    allowConfigureLanguage: z.boolean().optional(),
+    allowConfigureDateFormat: z.boolean().optional(),
+    allowConfigureTimezone: z.boolean().optional(),
+    allowConfigureRedirectUrl: z.boolean().optional(),
+    allowConfigureCommunication: z.boolean().optional(),
+    darkModeDisabled: z.boolean().optional(),
+    css: z.string().optional(),
+  })
+  .refine(
+    (data) => {
+      if (data.useApiKey) {
+        return !!data.apiKey && data.apiKey.length > 0;
+      }
+      return !!data.presignToken && data.presignToken.length > 0;
+    },
+    {
+      message: 'Either API key or presign token is required',
+      path: ['apiKey'],
+    },
+  );
+
+type FormData = z.infer<typeof formSchema>;
+
+export default function UpdateTemplateEmbedding() {
+  const host = import.meta.env.VITE_EMBED_HOST || 'https://app.documenso.com';
+  const [showEmbed, setShowEmbed] = useState(false);
+  const [embedConfig, setEmbedConfig] = useState<
+    (Omit<FormData, 'useApiKey' | 'apiKey'> & { presignToken: string }) | null
+  >(null);
+  const [isGenerating, setIsGenerating] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const form = useForm<FormData>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      useApiKey: true,
+      apiKey: '',
+      presignToken: '',
+      templateId: 1,
+      externalId: '',
+      onlyEditFields: false,
+      allowConfigureSignatureTypes: true,
+      allowConfigureLanguage: true,
+      allowConfigureDateFormat: true,
+      allowConfigureTimezone: true,
+      allowConfigureRedirectUrl: true,
+      allowConfigureCommunication: true,
+      darkModeDisabled: false,
+      css: '',
+    },
+  });
+
+  const generatePresignToken = async (apiKey: string) => {
+    const response = await fetch(`${host}/api/v2-beta/embedding/create-presign-token`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${apiKey}`,
+      },
+      body: JSON.stringify({
+        expiresIn: 60,
+      }),
+    });
+
+    if (!response.ok) {
+      const errorData = await response.json().catch(() => ({ message: 'Failed to parse error' }));
+      throw new Error(errorData.message || `Failed to generate presign token: ${response.status}`);
+    }
+
+    const data = await response.json();
+    return data.token;
+  };
+
+  const onSubmit = async (data: FormData) => {
+    setIsGenerating(true);
+    setError(null);
+
+    try {
+      let token = data.presignToken || '';
+
+      if (data.useApiKey && data.apiKey) {
+        token = await generatePresignToken(data.apiKey);
+      }
+
+      setEmbedConfig({ ...data, presignToken: token });
+      setShowEmbed(true);
+      console.log('Generating Update Template embedding');
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to generate token');
+      console.error('Error generating presign token:', err);
+    } finally {
+      setIsGenerating(false);
+    }
+  };
+
+  const handleClear = () => {
+    form.reset();
+    setShowEmbed(false);
+    setEmbedConfig(null);
+    setError(null);
+  };
+
+  const useApiKey = form.watch('useApiKey');
+  const watchedValue = useApiKey ? form.watch('apiKey') : form.watch('presignToken');
+
+  return (
+    <div className="space-y-6">
+      <Form {...form}>
+        <form onSubmit={form.handleSubmit(onSubmit)}>
+          <Card>
+            <CardHeader>
+              <CardTitle>Update Template Configurator</CardTitle>
+              <CardDescription>
+                Configure your template editing embedding parameters
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <FormField
+                control={form.control}
+                name="useApiKey"
+                render={({ field }) => (
+                  <FormItem className="flex flex-row items-start space-x-3 space-y-0">
+                    <FormControl>
+                      <Checkbox checked={field.value} onCheckedChange={field.onChange} />
+                    </FormControl>
+                    <div className="space-y-1 leading-none">
+                      <FormLabel>Use API Key to Generate Token</FormLabel>
+                      <FormDescription>
+                        Check this to automatically generate a presign token from your API key
+                      </FormDescription>
+                    </div>
+                  </FormItem>
+                )}
+              />
+
+              {useApiKey ? (
+                <FormField
+                  control={form.control}
+                  name="apiKey"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>API Key</FormLabel>
+                      <FormControl>
+                        <Input
+                          type="password"
+                          placeholder="Enter your API key..."
+                          className="font-mono text-sm"
+                          {...field}
+                        />
+                      </FormControl>
+                      <FormDescription>
+                        Your Documenso API key to generate a presign token
+                      </FormDescription>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              ) : (
+                <FormField
+                  control={form.control}
+                  name="presignToken"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>Presign Token</FormLabel>
+                      <FormControl>
+                        <Input
+                          type="password"
+                          placeholder="Enter presign token..."
+                          className="font-mono text-sm"
+                          {...field}
+                        />
+                      </FormControl>
+                      <FormDescription>
+                        A presign token generated from your backend server
+                      </FormDescription>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              )}
+
+              <Separator />
+
+              <FormField
+                control={form.control}
+                name="templateId"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Template ID</FormLabel>
+                    <FormControl>
+                      <Input
+                        type="number"
+                        placeholder="Enter template ID..."
+                        className="font-mono text-sm"
+                        {...field}
+                      />
+                    </FormControl>
+                    <FormDescription>The ID of the template to update</FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <Separator />
+
+              <FormField
+                control={form.control}
+                name="externalId"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>External ID (Optional)</FormLabel>
+                    <FormControl>
+                      <Input
+                        placeholder="Enter external ID..."
+                        className="font-mono text-sm"
+                        {...field}
+                      />
+                    </FormControl>
+                    <FormDescription>Unique identifier for tracking this template</FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <Separator />
+
+              <div className="space-y-3">
+                <div className="text-sm font-medium">Feature Configuration</div>
+
+                <FormField
+                  control={form.control}
+                  name="allowConfigureSignatureTypes"
+                  render={({ field }) => (
+                    <FormItem className="flex flex-row items-start space-x-3 space-y-0">
+                      <FormControl>
+                        <Checkbox checked={field.value} onCheckedChange={field.onChange} />
+                      </FormControl>
+                      <div className="space-y-1 leading-none">
+                        <FormLabel>Allow Configure Signature Types</FormLabel>
+                        <FormDescription>
+                          Allow users to configure signature field types
+                        </FormDescription>
+                      </div>
+                    </FormItem>
+                  )}
+                />
+
+                <FormField
+                  control={form.control}
+                  name="onlyEditFields"
+                  render={({ field }) => (
+                    <FormItem className="flex flex-row items-start space-x-3 space-y-0">
+                      <FormControl>
+                        <Checkbox checked={field.value} onCheckedChange={field.onChange} />
+                      </FormControl>
+                      <div className="space-y-1 leading-none">
+                        <FormLabel>Only Edit Fields</FormLabel>
+                        <FormDescription>Allow users to only configure fields</FormDescription>
+                      </div>
+                    </FormItem>
+                  )}
+                />
+
+                <FormField
+                  control={form.control}
+                  name="allowConfigureLanguage"
+                  render={({ field }) => (
+                    <FormItem className="flex flex-row items-start space-x-3 space-y-0">
+                      <FormControl>
+                        <Checkbox checked={field.value} onCheckedChange={field.onChange} />
+                      </FormControl>
+                      <div className="space-y-1 leading-none">
+                        <FormLabel>Allow Configure Language</FormLabel>
+                        <FormDescription>
+                          Allow users to configure document language
+                        </FormDescription>
+                      </div>
+                    </FormItem>
+                  )}
+                />
+
+                <FormField
+                  control={form.control}
+                  name="allowConfigureDateFormat"
+                  render={({ field }) => (
+                    <FormItem className="flex flex-row items-start space-x-3 space-y-0">
+                      <FormControl>
+                        <Checkbox checked={field.value} onCheckedChange={field.onChange} />
+                      </FormControl>
+                      <div className="space-y-1 leading-none">
+                        <FormLabel>Allow Configure Date Format</FormLabel>
+                        <FormDescription>Allow users to configure date format</FormDescription>
+                      </div>
+                    </FormItem>
+                  )}
+                />
+
+                <FormField
+                  control={form.control}
+                  name="allowConfigureTimezone"
+                  render={({ field }) => (
+                    <FormItem className="flex flex-row items-start space-x-3 space-y-0">
+                      <FormControl>
+                        <Checkbox checked={field.value} onCheckedChange={field.onChange} />
+                      </FormControl>
+                      <div className="space-y-1 leading-none">
+                        <FormLabel>Allow Configure Timezone</FormLabel>
+                        <FormDescription>Allow users to configure timezone</FormDescription>
+                      </div>
+                    </FormItem>
+                  )}
+                />
+
+                <FormField
+                  control={form.control}
+                  name="allowConfigureRedirectUrl"
+                  render={({ field }) => (
+                    <FormItem className="flex flex-row items-start space-x-3 space-y-0">
+                      <FormControl>
+                        <Checkbox checked={field.value} onCheckedChange={field.onChange} />
+                      </FormControl>
+                      <div className="space-y-1 leading-none">
+                        <FormLabel>Allow Configure Redirect URL</FormLabel>
+                        <FormDescription>Allow users to set redirect URL</FormDescription>
+                      </div>
+                    </FormItem>
+                  )}
+                />
+
+                <FormField
+                  control={form.control}
+                  name="allowConfigureCommunication"
+                  render={({ field }) => (
+                    <FormItem className="flex flex-row items-start space-x-3 space-y-0">
+                      <FormControl>
+                        <Checkbox checked={field.value} onCheckedChange={field.onChange} />
+                      </FormControl>
+                      <div className="space-y-1 leading-none">
+                        <FormLabel>Allow Configure Communication</FormLabel>
+                        <FormDescription>
+                          Allow users to configure email notifications
+                        </FormDescription>
+                      </div>
+                    </FormItem>
+                  )}
+                />
+              </div>
+
+              <Separator />
+
+              <FormField
+                control={form.control}
+                name="darkModeDisabled"
+                render={({ field }) => (
+                  <FormItem className="flex flex-row items-start space-x-3 space-y-0">
+                    <FormControl>
+                      <Checkbox checked={field.value} onCheckedChange={field.onChange} />
+                    </FormControl>
+                    <div className="space-y-1 leading-none">
+                      <FormLabel>Disable Dark Mode</FormLabel>
+                      <FormDescription>Force light mode only</FormDescription>
+                    </div>
+                  </FormItem>
+                )}
+              />
+
+              <Separator />
+
+              <FormField
+                control={form.control}
+                name="css"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Custom CSS (Optional)</FormLabel>
+                    <FormControl>
+                      <Textarea
+                        placeholder="Enter custom CSS..."
+                        rows={4}
+                        className="font-mono text-sm"
+                        {...field}
+                      />
+                    </FormControl>
+                    <FormDescription>Add custom CSS to style the embedded editor</FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <Separator />
+
+              {error && (
+                <div className="rounded-md border border-red-200 bg-red-50 p-3 text-sm text-red-800">
+                  {error}
+                </div>
+              )}
+
+              <div className="flex gap-2">
+                <Button
+                  type="submit"
+                  className="flex-1"
+                  disabled={!form.formState.isValid || isGenerating}
+                >
+                  {isGenerating ? 'Generating Token...' : 'Generate Embedding'}
+                </Button>
+                <Button type="button" variant="outline" onClick={handleClear}>
+                  Clear
+                </Button>
+              </div>
+            </CardContent>
+          </Card>
+        </form>
+      </Form>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Update Template Embedding</CardTitle>
+          <CardDescription>Embedded authoring view will appear here</CardDescription>
+        </CardHeader>
+        <CardContent className="p-0">
+          <div className="border-muted-foreground/25 m-6 flex min-h-[600px] items-center justify-center rounded-lg border-2 border-dashed">
+            {showEmbed && embedConfig ? (
+              <EmbedUpdateTemplate
+                className="h-[800px] w-full"
+                host={host}
+                templateId={embedConfig.templateId}
+                presignToken={embedConfig.presignToken}
+                externalId={embedConfig.externalId}
+                features={{
+                  allowConfigureSignatureTypes: embedConfig.allowConfigureSignatureTypes,
+                  allowConfigureLanguage: embedConfig.allowConfigureLanguage,
+                  allowConfigureDateFormat: embedConfig.allowConfigureDateFormat,
+                  allowConfigureTimezone: embedConfig.allowConfigureTimezone,
+                  allowConfigureRedirectUrl: embedConfig.allowConfigureRedirectUrl,
+                  allowConfigureCommunication: embedConfig.allowConfigureCommunication,
+                }}
+                darkModeDisabled={embedConfig.darkModeDisabled}
+                onlyEditFields={embedConfig.onlyEditFields}
+                css={embedConfig.css}
+                onTemplateUpdated={(data) => console.log('Template updated:', data)}
+              />
+            ) : watchedValue ? (
+              <div className="space-y-2 text-center">
+                <div className="text-muted-foreground text-sm">
+                  Ready to generate embedding iframe
+                </div>
+              </div>
+            ) : (
+              <div className="text-muted-foreground text-sm">
+                Configure {useApiKey ? 'API key' : 'presign token'} above to generate the embedding
+              </div>
+            )}
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}