> ## Documentation Index
> Fetch the complete documentation index at: https://webviewer-docs.mupdf.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Watermark API

The [`watermark`](#watermark) object is an instance accessible from the main [MuPDFWebViewer](/api-reference/introduction#initmupdfwebviewer) instance as follows:

```javascript theme={null}
const watermark = webViewer.watermark;
```

<Note>
  This assumes you have returned your instance name as `webViewer` from the [initMuPDFWebViewer()](/api-reference/introduction#initmupdfwebviewer) promise!
</Note>

## watermark

The `watermark` object has the following methods:

### create

```typescript theme={null}
create(config: { watermarks: (TextWatermark | ImageWatermark)[] }): Promise<undefined>;
```

#### Parameters

<ParamField body="config" type="object" required>
  An object containing an array of text or image watermarks.
</ParamField>

<Expandable title="config properties">
  <ParamField body="config.watermarks" type="(TextWatermark | ImageWatermark)[]" required>
    Array of text or image watermarks.
  </ParamField>
</Expandable>

<Expandable title="TextWatermark properties">
  <ParamField body="type" type="'Text'" required>
    Watermark type.
  </ParamField>

  <ParamField body="opacity" type="number" required>
    Opacity.
  </ParamField>

  <ParamField body="align" type="WatermarkAlignment">
    Watermark alignment.
  </ParamField>

  <ParamField body="rotate" type="number" required>
    Rotation angle.
  </ParamField>

  <ParamField body="x" type="number" required>
    X coordinate.
  </ParamField>

  <ParamField body="y" type="number" required>
    Y coordinate.
  </ParamField>

  <ParamField body="allowView" type="boolean">
    Whether visible in viewer.
  </ParamField>

  <ParamField body="allowPrint" type="boolean">
    Whether printed.
  </ParamField>

  <ParamField body="range" type="string">
    Page range.
  </ParamField>

  <ParamField body="text" type="string" required>
    Watermark text.
  </ParamField>

  <ParamField body="size" type="number" required>
    Font size.
  </ParamField>

  <ParamField body="color" type="string" required>
    Text color.
  </ParamField>

  <ParamField body="fontName" type="string" required>
    Font family name.
  </ParamField>

  <ParamField body="bold" type="boolean">
    Bold style.
  </ParamField>

  <ParamField body="italic" type="boolean">
    Italic style.
  </ParamField>

  <ParamField body="border" type="object">
    Optional border config.
  </ParamField>

  <ParamField body="repeatHeight" type="number">
    Vertical repeat interval.
  </ParamField>

  <ParamField body="repeatWidth" type="number">
    Horizontal repeat interval.
  </ParamField>
</Expandable>

<Expandable title="TextWatermark.border properties">
  <ParamField body="border.width" type="number">
    Border width.
  </ParamField>

  <ParamField body="border.height" type="number">
    Border height.
  </ParamField>

  <ParamField body="border.color" type="string" required>
    Border color.
  </ParamField>

  <ParamField body="border.strokeWidth" type="number" required>
    Border line width.
  </ParamField>

  <ParamField body="border.horizontalPadding" type="number">
    Horizontal padding.
  </ParamField>

  <ParamField body="border.verticalPadding" type="number">
    Vertical padding.
  </ParamField>
</Expandable>

<Expandable title="ImageWatermark properties">
  <ParamField body="type" type="'Image'" required>
    Watermark type.
  </ParamField>

  <ParamField body="opacity" type="number" required>
    Opacity.
  </ParamField>

  <ParamField body="align" type="WatermarkAlignment">
    Watermark alignment.
  </ParamField>

  <ParamField body="rotate" type="number" required>
    Rotation angle.
  </ParamField>

  <ParamField body="x" type="number" required>
    X coordinate.
  </ParamField>

  <ParamField body="y" type="number" required>
    Y coordinate.
  </ParamField>

  <ParamField body="allowView" type="boolean">
    Whether visible in viewer.
  </ParamField>

  <ParamField body="allowPrint" type="boolean">
    Whether printed.
  </ParamField>

  <ParamField body="range" type="string">
    Page range.
  </ParamField>

  <ParamField body="scale" type="number" required>
    Image scale.
  </ParamField>

  <ParamField body="imagePath" type="string" required>
    Image path.
  </ParamField>

  <ParamField body="repeatHeight" type="number">
    Vertical repeat interval.
  </ParamField>

  <ParamField body="repeatWidth" type="number">
    Horizontal repeat interval.
  </ParamField>
</Expandable>

#### Returns

<ResponseField name="result" type="Promise<undefined>" required>
  A Promise.
</ResponseField>

**Example**

```javascript theme={null}
webViewer.watermark.create({
  watermarks: [
    {
      type: 'Text',
      opacity: 0.2,
      align: 'CENTER',
      rotate: 45,
      x: 0,
      y: 0,
      text: 'CONFIDENTIAL',
      size: 32,
      color: '#ff0000',
      fontName: 'Helvetica',
      allowView: true,
      allowPrint: true
    },
    {
      type: 'Image',
      opacity: 0.4,
      align: 'BOTTOM_RIGHT',
      rotate: 0,
      x: 0,
      y: 0,
      scale: 0.5,
      imagePath: '/watermark.png'
    }
  ]
});
```

## Supporting Types

### `WatermarkAlignment`

```typescript theme={null}
export enum WatermarkAlignment {
  CENTER = 'CENTER',
  TOP_LEFT = 'TOP_LEFT',
  TOP = 'TOP',
  TOP_RIGHT = 'TOP_RIGHT',
  LEFT = 'LEFT',
  RIGHT = 'RIGHT',
  BOTTOM_LEFT = 'BOTTOM_LEFT',
  BOTTOM = 'BOTTOM',
  BOTTOM_RIGHT = 'BOTTOM_RIGHT'
}
```

### `TextWatermark`

```typescript theme={null}
export interface TextWatermark {
  type: 'Text';
  opacity: number;
  align?: WatermarkAlignment;
  rotate: number;
  x: number;
  y: number;
  allowView?: boolean;
  allowPrint?: boolean;
  range?: string;
  text: string;
  size: number;
  color: string;
  fontName: string;
  bold?: boolean;
  italic?: boolean;
  border?: {
    width?: number;
    height?: number;
    color: string;
    strokeWidth: number;
    horizontalPadding?: number;
    verticalPadding?: number;
  };
  repeatHeight?: number;
  repeatWidth?: number;
}
```

### `ImageWatermark`

```typescript theme={null}
export interface ImageWatermark {
  type: 'Image';
  opacity: number;
  align?: WatermarkAlignment;
  rotate: number;
  x: number;
  y: number;
  allowView?: boolean;
  allowPrint?: boolean;
  range?: string;
  scale: number;
  imagePath: string;
  repeatHeight?: number;
  repeatWidth?: number;
}
```