---
title: Svelte
description: Embed Documenso signing in your Svelte application using the official SDK.
---

import { Tab, Tabs } from 'fumadocs-ui/components/tabs';

## Installation

<Tabs items={['npm', 'yarn', 'pnpm']}>
  <Tab value="npm">``` npm install @documenso/embed-svelte ```</Tab>
  <Tab value="yarn">``` yarn add @documenso/embed-svelte ```</Tab>
  <Tab value="pnpm">``` pnpm add @documenso/embed-svelte ```</Tab>
</Tabs>

---

## Direct Template

```svelte
<script lang="ts">
  import { EmbedDirectTemplate } from '@documenso/embed-svelte';

  const token = 'your-template-token';

  function onCompleted(data: { documentId: number }) {
    console.log('Signed:', data.documentId);
  }
</script>

<EmbedDirectTemplate
  {token}
  name="John Doe"
  email="john@example.com"
  lockEmail={true}
  externalId="order-12345"
  onDocumentReady={() => console.log('Ready')}
  onDocumentCompleted={onCompleted}
  onDocumentError={() => console.error('Error')}
/>
```

---

## Signing Token

```svelte
<script lang="ts">
  import { EmbedSignDocument } from '@documenso/embed-svelte';

  export let token: string;

  function onCompleted(data: { documentId: number }) {
    console.log('Signed:', data.documentId);
  }
</script>

<EmbedSignDocument
  {token}
  onDocumentCompleted={onCompleted}
/>
```

---

## Styling (Platform Plan)

```svelte
<script lang="ts">
  import { EmbedDirectTemplate } from '@documenso/embed-svelte';

  const token = 'your-token';

  const customCss = `
    .documenso-embed {
      border-radius: 8px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
  `;

  const cssVars = {
    primary: '#0000FF',
    background: '#F5F5F5',
    radius: '8px',
  };
</script>

<EmbedDirectTemplate
  {token}
  css={customCss}
  cssVars={cssVars}
  darkModeDisabled={true}
/>
```

See [CSS Variables](/docs/developers/embedding/css-variables) for all available variables.

---

## See Also

- [Embedding Overview](/docs/developers/embedding) - Props reference and concepts
- [CSS Variables](/docs/developers/embedding/css-variables) - Customize appearance
- [Editor](/docs/developers/embedding/editor) - Embed document creation
