# How the Docuseal Embedded Signing Form Works with React, Vue, and Angular SDKs

> Learn how the Docuseal embedded signing form leverages React, Vue, and Angular SDKs to provide seamless document signing experiences through iframe integration and postMessage communication.

- Repository: [DocuSeal/docuseal](https://github.com/docusealco/docuseal)
- Tags: how-to-guide
- Published: 2026-05-05

---

**The Docuseal embedded signing form operates as a lightweight iframe wrapper that delegates document rendering and signature capture to Docuseal’s backend while exposing framework-native callbacks via cross-window postMessage communication.**

The docusealco/docuseal repository provides official SDKs for React, Vue, and Angular that simplify integrating digital signature workflows into existing applications. These SDKs deliver an **embedded signing form** component that handles authentication, pre-filled data, and real-time event communication without requiring host applications to manage complex document state. Each framework-specific package wraps a consistent iframe-based architecture, offering type-safe interfaces that map directly to the underlying embedding API documented in the repository's markdown guides.

## Architecture of the Embedded Signing Form

### Iframe-Based Rendering

At its core, every SDK component creates an `<iframe>` element pointing to Docuseal’s public signing endpoints (`/d/{slug}` for templates or `/s/{slug}` for submissions). The `src` attribute is passed via framework-specific prop binding (React props, Vue `v-bind`, Angular property binding), allowing the host application to specify the signing URL dynamically. According to the source documentation in [`docs/embedding/signing-form-react.md`](https://github.com/docusealco/docuseal/blob/main/docs/embedding/signing-form-react.md), [`docs/embedding/signing-form-vue.md`](https://github.com/docusealco/docuseal/blob/main/docs/embedding/signing-form-vue.md), and [`docs/embedding/signing-form-angular.md`](https://github.com/docusealco/docuseal/blob/main/docs/embedding/signing-form-angular.md), this approach isolates the document rendering logic from the host application while maintaining visual integration through configurable CSS injection.

### Authentication and Pre-fill

When backend-generated JWT tokens are required, the component applies them as a `data-token` attribute on the iframe element. The embedded form validates this token against Docuseal’s backend, enabling secure pre-fill of signer fields, enforcement of preview modes, or document locking. This mechanism ensures that sensitive signing logic remains server-side while the frontend SDK merely transports the authentication context.

### Cross-Window Communication

The iframe posts structured messages (`init`, `load`, `complete`, `decline`) to the parent window using `window.postMessage`. Each SDK registers event listeners and translates these messages into framework-native callbacks:

- **React:** Props named `onComplete`, `onLoad`, `onInit`, and `onDecline`
- **Vue:** Events prefixed with `@` (e.g., `@complete`, `@load`, `@init`, `@decline`)
- **Angular:** Output event bindings such as `onComplete` and `onLoad`

This decoupling allows the host application to react to signature completion or declines without directly manipulating the iframe DOM.

## Framework-Specific SDK Implementations

### React Integration (@docuseal/react)

The React SDK exports a `DocusealForm` component that accepts props mirroring the embedding API schema. Developers import the package from `@docuseal/react` and bind callback handlers directly to component props:

```jsx
import React from "react"
import { DocusealForm } from '@docuseal/react'

export function App() {
  return (
    <div className="app">
      <DocusealForm
        src="https://docuseal.com/d/{{template_slug}}"
        email="{{signer_email}}"
        onComplete={(data) => console.log(data)}
      />
    </div>
  )
}

```

The component forwards these props to the iframe via data attributes, as documented in [`docs/embedding/signing-form-react.md`](https://github.com/docusealco/docuseal/blob/main/docs/embedding/signing-form-react.md).

### Vue Integration (@docuseal/vue)

For Vue applications, the SDK provides a template-ready component emitting standard Vue events. The implementation in [`docs/embedding/signing-form-vue.md`](https://github.com/docusealco/docuseal/blob/main/docs/embedding/signing-form-vue.md) demonstrates attribute binding with the `:` shorthand and event handling via `@` directives:

```vue
<template>
  <DocusealForm
    :src="'https://docuseal.com/d/{{template_slug}}'"
    :email="'{{signer_email}}'"
    @complete="onFormComplete"
  />
</template>

<script>
import { DocusealForm } from '@docuseal/vue'

export default {
  name: 'App',
  components: { DocusealForm },
  methods: {
    onFormComplete(data) {
      console.log(data)
    }
  }
}
</script>

```

### Angular Integration (@docuseal/angular)

The Angular package exposes a standalone `DocusealFormComponent` available via `@docuseal/angular`. Following the pattern in [`docs/embedding/signing-form-angular.md`](https://github.com/docusealco/docuseal/blob/main/docs/embedding/signing-form-angular.md), developers use property binding syntax to configure the iframe source and listen to output events:

```typescript
import { Component } from '@angular/core';
import { DocusealFormComponent } from '@docuseal/angular';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [DocusealFormComponent],
  template: `
    <div class="app">
      <docuseal-form
        [src]="'https://docuseal.com/d/{{template_slug}}'"
        [email]="'{{signer_email}}'">
      </docuseal-form>
    </div>
  `
})
export class AppComponent {}

```

## Configuration and Styling Options

Beyond basic source binding, all three SDKs expose identical configuration landscapes. Visual customizations including `logo`, `language`, `fieldOrdering`, and `autoscroll` are passed as component properties, which the SDKs translate into query parameters or data attributes on the iframe. The `customCss` (React) or `custom-css` (Vue/Angular) attribute accepts CSS strings that the embedded form applies internally, enabling brand consistency without modifying Docuseal’s core codebase.

## Summary

- The **embedded signing form** uses an iframe pointing to `/d/{slug}` or `/s/{slug}` endpoints, rendered via thin SDK wrappers in React, Vue, and Angular.
- Authentication relies on JWT tokens passed through the `data-token` attribute, enabling secure pre-fill and access control.
- Cross-window `postMessage` communication translates iframe events (`init`, `load`, `complete`, `decline`) into framework-specific callbacks.
- Configuration options including `customCss`, `language`, and `logo` are standardized across all SDKs and documented in `docs/embedding/signing-form-*.md`.
- The actual component implementations live in the `@docuseal/react`, `@docuseal/vue`, and `@docuseal/angular` npm packages.

## Frequently Asked Questions

### How does authentication work in the embedded signing form?

The host application generates a JWT token on the backend and passes it to the SDK component via the `token` prop or attribute. The SDK applies this as a `data-token` attribute on the iframe, which the Docuseal backend validates to authorize the signing session and optionally pre-fill signer data according to the token payload.

### Can I customize the appearance of the embedded form to match my brand?

Yes. All SDKs support a `customCss` (React) or `custom-css` (Vue/Angular) property that injects custom CSS into the iframe. You can also configure visual elements like `logo`, `backgroundColor`, and `language` through standard component props as defined in the embedding documentation.

### What events does the embedded signing form emit to the parent application?

The iframe posts four primary message types via `window.postMessage`: `init` when the form initializes, `load` when the document renders, `complete` when the signer finishes, and `decline` if the signer rejects the document. Each SDK surfaces these as framework-native callbacks or events for React, Vue, and Angular respectively.

### Do I need to handle document rendering or signature validation in my frontend code?

No. The SDK delegates all document rendering, field validation, and signature capture to Docuseal’s backend service through the iframe. The host application only manages the wrapper component configuration and responds to lifecycle callbacks emitted by the embedded form.