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

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, docs/embedding/signing-form-vue.md, and 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:

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.

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 demonstrates attribute binding with the : shorthand and event handling via @ directives:

<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, developers use property binding syntax to configure the iframe source and listen to output events:

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.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}