# Watermark

- Human documentation: [https://docs.univer.ai/guides/docs/features/watermark](https://docs.univer.ai/guides/docs/features/watermark)

- Agent Markdown: [https://docs.univer.ai/guides/docs/features/watermark.md](https://docs.univer.ai/guides/docs/features/watermark.md)

- Requested language: `en-US`

- Content language: `en-US`

- Documentation version: `1.0.0-rc.0`

- Source: [docs/features/watermark.mdx](https://github.com/dream-num/documentation/blob/dev/content/guides/docs/features/watermark.mdx)

---

#### Package metadata

```json
{
  "plugins": [
    {
      "client": "@univerjs/watermark",
      "facade": "@univerjs/watermark/facade"
    }
  ],
  "server": false
}
```

Watermark feature aims to provide a flexible and secure watermark solution for web pages or applications. With this feature, developers can dynamically generate text or image watermarks on the page to prevent unauthorized use or dissemination of content, and it supports various configurations.

> Interactive example: [Open the playground](/playground/docs/watermark)

## Preset Mode

Watermark does not provide a preset, but it supports mixing with its plugins.

### Installation

#### npm

```bash
npm install @univerjs/watermark
```

#### pnpm

```bash
pnpm add @univerjs/watermark
```

#### yarn

```bash
yarn add @univerjs/watermark
```

#### bun

```bash
bun add @univerjs/watermark
```

### Usage

```typescript
import { UniverWatermarkPlugin } from '@univerjs/watermark' // [!code ++]

import '@univerjs/watermark/facade' // [!code ++]

const { univerAPI } = createUniver({
  // ...
  presets: [
    UniverDocsCorePreset(),
  ],
  plugins: [
    [UniverWatermarkPlugin, { // [!code ++]
      textWatermarkSettings: { // [!code ++]
        content: 'Hello, Univer!', // [!code ++]
        fontSize: 36, // [!code ++]
      }, // [!code ++]
    }], // [!code ++]
  ],
})
```

## Plugin Mode

### Installation

#### npm

```bash
npm install @univerjs/watermark
```

#### pnpm

```bash
pnpm add @univerjs/watermark
```

#### yarn

```bash
yarn add @univerjs/watermark
```

#### bun

```bash
bun add @univerjs/watermark
```

### Usage

```typescript
import { UniverWatermarkPlugin } from '@univerjs/watermark' // [!code ++]

import '@univerjs/watermark/facade' // [!code ++]

const univer = new Univer({
  // ...
})

univer.registerPlugin(UniverWatermarkPlugin, { // [!code ++]
  textWatermarkSettings: { // [!code ++]
    content: 'Hello, Univer!', // [!code ++]
    fontSize: 36, // [!code ++]
  }, // [!code ++]
}) // [!code ++]
```

### Plugins and Configuration

#### @univerjs/watermark

This plugin provides the core implementation of watermark functionality. It allows developers to add text or image watermarks to applications and offers various configuration options to customize the appearance and behavior of the watermark. It provides the `UniverWatermarkPlugin` plugin.

Reference: [@univerjs/watermark](https://docs.univer.ai/reference/packages/plugins/univerjs/watermark.md)

## Facade API

### Importing

> [!INFO: Plugin mode note]
> Only plugin mode requires manually importing the Facade package. Preset mode already includes the corresponding Facade package, so no extra import is needed.

```typescript
import '@univerjs/watermark/facade'
```

### Set Watermark

```typescript
univerAPI.addWatermark('text', { content: 'hello', repeat: true })
```

### Remove Watermark

```typescript
univerAPI.deleteWatermark()
```