Watermark & Signature

Available in the Full edition.

Mark every photo as protected and sign it. The logo in the toolbar is not part of this: see Your logo.

A bakery photo with a free watermark tiled over it in a grid, its text changed to © Lume Bistrô and its spacing set to 73 in the Watermark tool, the signature Ana Lima in the bottom-right corner, and the host's name Lume Bistrô left of the toolbar

Add the Marks

watermark says the photo is protected. signature says whose it is. Each takes a text or an image src (exactly one), and a lock. A text is written in one of Annotate’s nine fonts, the one its font names ('inter' by default), and only that font loads. Unless the mark is fixed, the user can pick another font for it.

import { EmbedEditor } from '@embededitor/full/react';

const PhotoEditor = ({ photo }: { photo: string }) => (
	<EmbedEditor
		signature={{ text: '© Ana Lima 2026' }}
		src={photo}
		watermark={{ lock: 'required', text: '© Lume Studio' }}
	/>
);

export default PhotoEditor;

import { mountEditor } from '@embededitor/full/standalone';

mountEditor(document.getElementById('editor'), {
	signature: { text: '© Ana Lima 2026' },
	src: '/photos/sunset.jpg',
	watermark: { lock: 'required', text: '© Lume Studio' }
});

Locks

`lock`	The user
`'fixed'`	Sees it and can’t change it.
`'required'`	Adjusts it (size, place, opacity, a text’s font…) but can’t hide it or change its text.
`'free'`	Adjusts it, edits its text, or hides it.

The watermark defaults to 'fixed', the signature to 'free'. With every mark fixed, the editor shows no tool for them. A text mark that isn’t fixed shows its font’s “Aa” in the mark’s tool, which opens Annotate’s Font menu: the nine fonts three by three, each name written in its own. The one picked redraws the mark at once, as one step, and is saved in the state. A free text mark’s words are edited in a text box that takes the tool row’s place in the menu, Cancel and Done beside it, while the mark follows every letter on the photo. Done or Enter keeps the text; Cancel or Esc gives it up; an empty text goes back to yours.

Watermark

Field	Values	Default
`text` or `src`	A text (1 to 80 characters, one line), or an image: anything `src` takes, SVG included	—
`lock`	`'fixed'`, `'required'`, `'free'`	`'fixed'`
`layout`	`'grid'` (tiled over the photo in rows) or `'single'` (one mark, centered)	`'grid'`
`size`	Height in % of the output’s shorter side: 1 to 20 in a grid, 4 to 60 single	grid: text 4, image 8 · single: text 12, image 24
`spacing`	The gap between a grid’s marks, 0 to 100	`50`
`angle`	Degrees, −90 to 90	grid −30 · single 0
`opacity`	10 to 100	`35`
`color`	`'auto'` (white or black, as the photo under it reads) or a hex, `rgb()`, `hsl()` or CSS name	`'auto'`

An image watermark is drawn as a silhouette in the mark’s color. The user can switch between grid and single unless the mark is fixed. The size and angle you give are those of layout: once the user switches, the other layout starts at its own defaults, and each layout keeps what the user gave it.

Signature

Field	Values	Default
`text` or `src`	As the watermark’s	—
`lock`	`'fixed'`, `'required'`, `'free'`	`'free'`
`position`	`'auto'` (the emptiest corner) or `'top-left'`, `'top'`, `'top-right'`, `'left'`, `'center'`, `'right'`, `'bottom-left'`, `'bottom'`, `'bottom-right'`	`'bottom-right'`
`size`	Height in % of the output’s shorter side, 2 to 40	text 3.5, image 14
`margin`	Distance to the edges in % of the shorter side, 0 to 20 (none at the center)	`4`
`opacity`	10 to 100	`100`
`color`	As the watermark’s, for a text. A logo keeps its own colors	`'auto'`

Where They Sit

Marks belong to the output: the watermark covers it whole, and the signature keeps its point through crop, rotation, resize and frame.
They’re drawn last, over the annotations and the frame.
Changes to the props apply live. The user’s adjustments win for as long as the lock allows.
What the user changes is saved under marks in the saved state. The marks themselves come back from your props.

When a Mark Can’t Load

onLoadError receives MARK_FAILED when a mark’s image or the letter of a text mark can’t load.

Mark	What happens
Fixed or required	Save, Copy and Share stay off, and a banner offers Try Again. `onProcessError` gets `MARK_FAILED` if Save can’t draw it.
Free	Left out of the file, with a notice.

processImage takes watermark and signature too, and rejects with MARK_FAILED for a fixed or required mark that can’t load.

Process Without UI

Stamp marks on photos in code.

Errors

Every error code.

Get Started

Frameworks

Ways to Show It

Features

Customization

Saving

Resources

Add the Marks

Locks

Watermark

Signature

Where They Sit

When a Mark Can’t Load

Process Without UI

Errors

​Add the Marks

​Locks

​Watermark

​Signature

​Where They Sit

​When a Mark Can’t Load

Process Without UI

Errors

Add the Marks

Locks

Watermark

Signature

Where They Sit

When a Mark Can’t Load