Live playground

Add a watermark to an image.

Use the sample or choose your own image, adjust the text and logo, then save the result. Everything runs in this browser tab.

Images are not uploaded

1Choose content
2Adjust the look
3Save or copy code

Live preview

Result

Update preview automatically

Alpine lake sample waiting for the Web SDK render

ReadyDimensions —Time —

Image URLThe image URL will appear here

Save image

What do you want to add?

One-click examplesKeep adjusting after choosing one

Background

Choose local background

Local images never leave your device. Selected files are cleared when you refresh.

Text settingsWatermark text

Color#FFFFFFFont size 42 pxText opacity 85%

Blend mode

Bold

Text outlineOutline color#101828Outline width 2 px

Layout

Position, rotation, and tile spacing

Rotation −7°

Position

X offsetY offset

Logo settings

Choose local logo

Opacity 100%Scale 72%

Blend mode

Layout

Position, rotation, and tile spacing

Rotation 0°

Position

X offsetY offset

Save settings

Format

Quality 92

Quality is most visible in JPEG output; browsers usually ignore it for PNG.

Core 2 · Cross-runtime invisible traces

Keep the image clean. Recover a short ID later.

Write a short locator into the pixels, then authenticate it with the same key. Use it for distribution tracing—not as DRM or proof that an image was never edited.

Waiting to embed

Short ID (up to 12 UTF-8 bytes)Demo key

Strength

Which image should be verified?

Run detection on

This page exposes its demo key, so do not copy it into production. Use random locators and manage keys on a trusted server or controlled client.

Batch distribution code

const embedded = await Marker.embedInvisibleMany(
  recipients.map((recipient) => ({
    image: { src: source },
    payload: recipient.locator,
    key,
    strength: 'robust',
  })),
  { concurrency: 4, signal, onProgress }
);

const verified = await Marker.detectInvisibleMany(
  embedded.flatMap((result) =>
    result.status === 'fulfilled'
      ? [{ image: { src: result.value.uri }, key, search: 'robust' }]
      : []
  )
);

Compose signed Content Credentials

This is a workflow example only. The playground never sends images to a signing service; use your own trusted server.

const signed = await Marker.embedInvisibleWithCredentials({
  watermark: { image: { src: source }, payload: locator, key },
  claim: { title: 'distribution-copy.png', format: 'image/png' },
  adapter: yourServerAdapter,
});

const credentials = await Marker.verifyContentCredentials({
  image: signed.signedImage,
  adapter: yourServerAdapter,
});

Open the C2PA service example

Optional package · Editor 0.1.0

Manipulate Recipe v2 directly

This demo is driven by the Editor controller: drag, scale, rotate, reorder, lock, and undo layers, then render a real result through Core 2.0.

Drag any layer to start editing.

This complete component uses the same sourceSize for the interactive surface, Core preview, and original export.

import * as React from 'react';
import { Button, Image, StyleSheet, View } from 'react-native';
import {
  ImageMarkerEditor,
  ImageMarkerEditorController,
  ImageMarkerEditorToolbar,
} from 'react-native-image-marker-editor';
import { createCoreEditorAdapter } from 'react-native-image-marker-editor/core-adapter';
import { ImageFormat } from 'react-native-image-marker';

const background = require('./background.jpg');
const logo = require('./logo.png');
const sourceSize = { width: 1920, height: 1080 };
const adapter = createCoreEditorAdapter(1024);

export function WatermarkEditor() {
  const controller = React.useMemo(
    () =>
      new ImageMarkerEditorController({
        schemaVersion: 2,
        layers: [
          {
            id: 'title',
            type: 'text',
            text: 'IMAGE MARKER 2.0',
            position: { X: 160, Y: 120 },
            style: { color: '#FFFFFF', fontSize: 64, bold: true },
          },
          {
            id: 'logo',
            type: 'image',
            src: logo,
            position: { X: 1280, Y: 720 },
            scale: 0.4,
          },
        ],
        output: { saveFormat: ImageFormat.png },
      }),
    []
  );
  const [resultUri, setResultUri] = React.useState<string>();

  const preview = async () => {
    const result = await adapter.renderPreview({
      recipe: controller.exportRecipe(),
      input: { backgroundImage: { src: background } },
      sourceSize,
    });
    setResultUri(result.uri);
  };

  const exportOriginal = async () => {
    const result = await adapter.exportOriginal({
      recipe: controller.exportRecipe(),
      input: { backgroundImage: { src: background } },
      sourceSize,
    });
    setResultUri(result.final.uri);
  };

  return (
    <View>
      <ImageMarkerEditorToolbar controller={controller} />
      <ImageMarkerEditor
        background={
          <Image
            resizeMode="contain"
            source={background}
            style={StyleSheet.absoluteFill}
          />
        }
        controller={controller}
        sourceSize={sourceSize}
        width={360}
        height={203}
      />
      <Button title="Render Core preview" onPress={preview} />
      <Button title="Export original" onPress={exportOriginal} />
      {resultUri && (
        <Image
          resizeMode="contain"
          source={{ uri: resultUri }}
          style={{ width: 360, height: 203 }}
        />
      )}
    </View>
  );
}

Repository usage guide Editor API reference

Live Recipe v2

Try every core workflow

Text watermark
Logo watermark
Text + logo
Single or tiled
Opacity and outline
Layer blend modes
Position and rotation
Variable and conditional Recipe
Invisible trace watermark
Interactive layer editor
Content Credentials adapter
PNG, JPEG, and Web Blob

Use this result in your project

The code below already includes your current settings.