diff --git a/.size-limit.js b/.size-limit.js
index 93858aec68..f5c70f02f7 100644
--- a/.size-limit.js
+++ b/.size-limit.js
@@ -8,7 +8,7 @@ export default [
 	{
 		name: 'ESM',
 		path: 'dist/lightweight-charts.production.mjs',
-		limit: '44.50 KB',
+		limit: '45.00 KB',
 		import: '*',
 		ignore: ['fancy-canvas'],
 		brotli: true,
@@ -16,7 +16,7 @@ export default [
 	{
 		name: 'ESM createChart',
 		path: 'dist/lightweight-charts.production.mjs',
-		limit: '41.30 KB',
+		limit: '45.00 KB',
 		import: '{ createChart }',
 		ignore: ['fancy-canvas'],
 		brotli: true,
@@ -24,7 +24,7 @@ export default [
 	{
 		name: 'ESM createChartEx',
 		path: 'dist/lightweight-charts.production.mjs',
-		limit: '40.00 KB',
+		limit: '45.00 KB',
 		import: '{ createChartEx }',
 		ignore: ['fancy-canvas'],
 		brotli: true,
@@ -32,7 +32,7 @@ export default [
 	{
 		name: 'ESM Standalone',
 		path: 'dist/lightweight-charts.standalone.production.mjs',
-		limit: '45.90 KB',
+		limit: '50.00 KB',
 		import: '*',
 		brotli: true,
 	},
@@ -45,7 +45,7 @@ export default [
 	{
 		name: 'Plugin: Text Watermark',
 		path: 'dist/lightweight-charts.production.mjs',
-		import: '{ TextWatermark }',
+		import: '{ createTextWatermark }',
 		ignore: ['fancy-canvas'],
 		limit: '2.00 KB',
 		brotli: true,
@@ -53,7 +53,7 @@ export default [
 	{
 		name: 'Plugin: Image Watermark',
 		path: 'dist/lightweight-charts.production.mjs',
-		import: '{ ImageWatermark }',
+		import: '{ createImageWatermark }',
 		ignore: ['fancy-canvas'],
 		limit: '2.00 KB',
 		brotli: true,
@@ -61,9 +61,9 @@ export default [
 	{
 		name: 'Plugin: Series Markers',
 		path: 'dist/lightweight-charts.production.mjs',
-		import: '{ createSeriesMarkersPrimitive }',
+		import: '{ createSeriesMarkers }',
 		ignore: ['fancy-canvas'],
-		limit: '3.90 KB',
+		limit: '4.08 KB',
 		brotli: true,
 	},
 ];
diff --git a/package.json b/package.json
index e63f6da591..fa6b1e5ff8 100644
--- a/package.json
+++ b/package.json
@@ -106,7 +106,7 @@
     "tslint-eslint-rules": "~5.4.0",
     "tslint-microsoft-contrib": "~6.2.0",
     "tsx": "~4.16.2",
-    "typescript": "~5.4.5",
+    "typescript": "~5.5.4",
     "yargs": "~17.7.2"
   },
   "scripts": {
diff --git a/src/index.ts b/src/index.ts
index 138ebfbb1a..df8518928a 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -24,9 +24,9 @@ export { createChart, createChartEx, defaultHorzScaleBehavior } from './api/crea
 /*
 	Plugins
 */
-export { TextWatermark } from './plugins/text-watermark/primitive';
-export { ImageWatermark } from './plugins/image-watermark/primitive';
-export { createSeriesMarkersPrimitive } from './plugins/series-markers/primitive';
+export { createTextWatermark } from './plugins/text-watermark/primitive';
+export { createImageWatermark } from './plugins/image-watermark/primitive';
+export { createSeriesMarkers } from './plugins/series-markers/wrapper';
 
 /**
  * Returns the current version as a string. For example `'3.3.0'`.
diff --git a/src/model/autoscale-info-impl.ts b/src/model/autoscale-info-impl.ts
index 469a6abc51..058f0b2f93 100644
--- a/src/model/autoscale-info-impl.ts
+++ b/src/model/autoscale-info-impl.ts
@@ -28,7 +28,7 @@ export class AutoscaleInfoImpl {
 		return this._margins;
 	}
 
-	public toRaw(): AutoscaleInfo | null {
+	public toRaw(): AutoscaleInfo {
 		return {
 			priceRange: this._priceRange === null ? null : this._priceRange.toRaw(),
 			margins: this._margins || undefined,
diff --git a/src/plugins/image-watermark/primitive.ts b/src/plugins/image-watermark/primitive.ts
index ed84aacd9c..29253ae50d 100644
--- a/src/plugins/image-watermark/primitive.ts
+++ b/src/plugins/image-watermark/primitive.ts
@@ -1,3 +1,4 @@
+import { IPaneApi } from '../../api/ipane-api';
 import {
 	IPanePrimitive,
 	PaneAttachedParameter,
@@ -5,9 +6,9 @@ import {
 
 import { DeepPartial } from '../../helpers/strict-type-checks';
 
-import { Time } from '../../model/horz-scale-behavior-time/types';
 import { IPanePrimitivePaneView } from '../../model/ipane-primitive';
 
+import { IPanePrimitiveWithOptions, PanePrimitiveWrapper } from '../pane-primitive-wrapper';
 import {
 	ImageWatermarkOptions,
 	imageWatermarkOptionsDefaults,
@@ -23,23 +24,7 @@ function mergeOptionsWithDefaults(
 	};
 }
 
-/**
- * A pane primitive for rendering a image watermark.
- *
- * @example
- * ```js
- * import { ImageWatermark } from 'lightweight-charts';
- *
- * const imageWatermark = new ImageWatermark('/images/my-image.png', {
- *   alpha: 0.5,
- *   padding: 20,
- * });
- *
- * const firstPane = chart.panes()[0];
- * firstPane.attachPrimitive(imageWatermark);
- * ```
- */
-export class ImageWatermark<T = Time> implements IPanePrimitive<T> {
+class ImageWatermark<T> implements IPanePrimitive<T> {
 	private _requestUpdate?: () => void;
 	private _paneViews: ImageWatermarkPaneView<T>[];
 	private _options: ImageWatermarkOptions;
@@ -109,3 +94,31 @@ export class ImageWatermark<T = Time> implements IPanePrimitive<T> {
 		);
 	}
 }
+
+/**
+ * Creates an image watermark.
+ *
+ * @param pane - Target pane.
+ * @param imageUrl - Image URL.
+ * @param options - Watermark options.
+ *
+ * @returns Image watermark wrapper.
+ *
+ * @example
+ * ```js
+ * import { createImageWatermark } from 'lightweight-charts';
+ *
+ * const firstPane = chart.panes()[0];
+ * const imageWatermark = createImageWatermark(firstPane, '/images/my-image.png', {
+ *   alpha: 0.5,
+ *   padding: 20,
+ * });
+ * // to change options
+ * imageWatermark.applyOptions({ padding: 10 });
+ * // to remove watermark from the pane
+ * imageWatermark.detach();
+ * ```
+ */
+export function createImageWatermark<T>(pane: IPaneApi<T>, imageUrl: string, options: DeepPartial<ImageWatermarkOptions>): PanePrimitiveWrapper<T, ImageWatermarkOptions, IPanePrimitiveWithOptions<T, ImageWatermarkOptions>> {
+	return new PanePrimitiveWrapper<T, ImageWatermarkOptions, IPanePrimitiveWithOptions<T, ImageWatermarkOptions>>(pane, new ImageWatermark(imageUrl, options));
+}
diff --git a/src/plugins/pane-primitive-wrapper.ts b/src/plugins/pane-primitive-wrapper.ts
new file mode 100644
index 0000000000..c3994bff7c
--- /dev/null
+++ b/src/plugins/pane-primitive-wrapper.ts
@@ -0,0 +1,43 @@
+import { IPaneApi } from '../api/ipane-api';
+import { IPanePrimitive } from '../api/ipane-primitive-api';
+
+import { DeepPartial } from '../helpers/strict-type-checks';
+
+import { IPrimitiveWrapper } from './primitive-wrapper-base';
+
+/**
+ * Interface for a primitive with options.
+ */
+export interface IPanePrimitiveWithOptions<T, K> extends IPanePrimitive<T> {
+	/**
+	 * @param options - Options to apply. The options are deeply merged with the current options.
+	 */
+	applyOptions?: (options: DeepPartial<K>) => void;
+}
+
+export class PanePrimitiveWrapper<T, Options = unknown, TPrimitive extends IPanePrimitiveWithOptions<T, Options> = IPanePrimitive<T>> implements IPrimitiveWrapper<T, Options> {
+	protected _primitive: TPrimitive;
+	protected _pane: IPaneApi<T>;
+
+	public constructor(pane: IPaneApi<T>, primitive: TPrimitive) {
+		this._pane = pane;
+		this._primitive = primitive;
+		this._attach();
+	}
+
+	public detach(): void {
+		this._pane.detachPrimitive(this._primitive);
+	}
+
+	public getPane(): IPaneApi<T> {
+		return this._pane;
+	}
+
+	public applyOptions(options: DeepPartial<Options>): void {
+		this._primitive.applyOptions?.(options);
+	}
+
+	private _attach(): void {
+		this._pane.attachPrimitive(this._primitive);
+	}
+}
diff --git a/src/plugins/primitive-wrapper-base.ts b/src/plugins/primitive-wrapper-base.ts
new file mode 100644
index 0000000000..474d638ec2
--- /dev/null
+++ b/src/plugins/primitive-wrapper-base.ts
@@ -0,0 +1,25 @@
+import { DeepPartial } from '../helpers/strict-type-checks';
+
+/**
+ * Interface for a primitive wrapper. It must be implemented to add some plugin to the chart.
+ */
+export interface IPrimitiveWrapper<T, Options = unknown> {
+	/**
+	 * @param options - Options to apply. The options are deeply merged with the current options.
+	 */
+	applyOptions(options: DeepPartial<Options>): void;
+	/**
+	 * Detaches the plugin from the pane/series.
+	 */
+	detach(): void;
+}
+
+/**
+ * Interface for a plugin that adds primitive with options.
+ */
+export interface IPrimitiveWithOptions<Options = unknown> {
+	/**
+	 * @param options - Options to apply. The options are deeply merged with the current options.
+	 */
+	applyOptions(options: DeepPartial<Options>): void;
+}
diff --git a/src/plugins/primitive-wrapper.ts b/src/plugins/primitive-wrapper.ts
new file mode 100644
index 0000000000..cbcc41a7c0
--- /dev/null
+++ b/src/plugins/primitive-wrapper.ts
@@ -0,0 +1,27 @@
+import { IPanePrimitive, PaneAttachedParameter } from '../api/ipane-primitive-api';
+
+import { DeepPartial } from '../helpers/strict-type-checks';
+
+export abstract class PrimitiveWrapper<T, Options = unknown> {
+	protected _primitive: IPanePrimitive<T>;
+	protected _options: Options;
+
+	public constructor(primitive: IPanePrimitive<T>, options: Options) {
+		this._primitive = primitive;
+		this._options = options;
+	}
+
+	public detach(): void {
+		this._primitive.detached?.();
+	}
+
+	public abstract applyOptions(options: DeepPartial<Options>): void;
+
+	protected _attachToPrimitive(params: PaneAttachedParameter<T>): void {
+		this._primitive.attached?.(params);
+	}
+
+	protected _requestUpdate(): void {
+		this._primitive.updateAllViews?.();
+	}
+}
diff --git a/src/plugins/series-markers/primitive.ts b/src/plugins/series-markers/primitive.ts
index 382451997d..d8debc4e63 100644
--- a/src/plugins/series-markers/primitive.ts
+++ b/src/plugins/series-markers/primitive.ts
@@ -19,8 +19,7 @@ import {
 	shapeMargin as calculateShapeMargin,
 } from './utils';
 
-class SeriesMarkersPrimitive<HorzScaleItem> implements ISeriesPrimitive<HorzScaleItem> {
-	private _attached: SeriesAttachedParameter<HorzScaleItem> | null = null;
+export class SeriesMarkersPrimitive<HorzScaleItem> implements ISeriesPrimitive<HorzScaleItem> {
 	private _paneView: SeriesMarkersPaneView<HorzScaleItem> | null = null;
 	private _markers: SeriesMarker<HorzScaleItem>[] = [];
 	private _indexedMarkers: InternalSeriesMarker<TimePointIndex>[] = [];
@@ -33,7 +32,6 @@ class SeriesMarkersPrimitive<HorzScaleItem> implements ISeriesPrimitive<HorzScal
 	private _markersPositions: MarkerPositions | null = null;
 
 	public attached(param: SeriesAttachedParameter<HorzScaleItem>): void {
-		this._attached = param;
 		this._recalculateMarkers();
 		this._chart = param.chart;
 		this._series = param.series;
@@ -50,12 +48,11 @@ class SeriesMarkersPrimitive<HorzScaleItem> implements ISeriesPrimitive<HorzScal
 	}
 
 	public detached(): void {
-		if (this._attached && this._dataChangedHandler) {
-			this._attached.series.unsubscribeDataChanged(this._dataChangedHandler);
+		if (this._series && this._dataChangedHandler) {
+			this._series.unsubscribeDataChanged(this._dataChangedHandler);
 		}
 		this._chart = null;
 		this._series = null;
-		this._attached = null;
 		this._paneView = null;
 		this._dataChangedHandler = null;
 	}
@@ -122,7 +119,7 @@ class SeriesMarkersPrimitive<HorzScaleItem> implements ISeriesPrimitive<HorzScal
 		return this._autoScaleMargins;
 	}
 
-	protected _getMarkerPositions(): MarkerPositions {
+	private _getMarkerPositions(): MarkerPositions {
 		if (this._markersPositions === null) {
 			this._markersPositions = this._markers.reduce(
 				(acc: MarkerPositions, marker: SeriesMarker<HorzScaleItem>) => {
@@ -187,43 +184,3 @@ class SeriesMarkersPrimitive<HorzScaleItem> implements ISeriesPrimitive<HorzScal
 	}
 }
 
-/**
- * A function to create a series markers primitive.
- *
- * @param series - The series to which the primitive will be attached.
- *
- * @param markers - An array of markers to be displayed on the series.
- *
- * @example
- * ```js
- * import { createSeriesMarkersPrimitive } from 'lightweight-charts';
- *
- *	const seriesMarkersPrimitive = createSeriesMarkersPrimitive(
- *		series,
- *		[
- *			{
- *				color: 'green',
- *				position: 'inBar',
- * 				shape: 'arrowDown',
- *				time: 1556880900,
- *			},
- *		]
- *	);
- *  // and then you can modify the markers
- *  // set it to empty array to remove all markers
- *  seriesMarkersPrimitive.setMarkers([]);
- *
- *  // `seriesMarkersPrimitive.markers()` returns current markers
- * ```
- */
-export function createSeriesMarkersPrimitive<HorzScaleItem>(
-	series: ISeriesApi<SeriesType, HorzScaleItem>,
-	markers?: SeriesMarker<HorzScaleItem>[]
-): SeriesMarkersPrimitive<HorzScaleItem> {
-	const primitive = new SeriesMarkersPrimitive<HorzScaleItem>();
-	if (markers) {
-		primitive.setMarkers(markers);
-	}
-	series.attachPrimitive(primitive);
-	return primitive;
-}
diff --git a/src/plugins/series-markers/types.ts b/src/plugins/series-markers/types.ts
index 71dea98fa0..cecae515d4 100644
--- a/src/plugins/series-markers/types.ts
+++ b/src/plugins/series-markers/types.ts
@@ -1,5 +1,3 @@
-import { Time } from '../../model/horz-scale-behavior-time/types';
-
 /**
  * Represents the position of a series marker relative to a bar.
  */
@@ -13,7 +11,7 @@ export type SeriesMarkerShape = 'circle' | 'square' | 'arrowUp' | 'arrowDown';
 /**
  * Represents a series marker.
  */
-export interface SeriesMarker<TimeType = Time> {
+export interface SeriesMarker<TimeType> {
 	/**
 	 * The time of the marker.
 	 */
@@ -44,11 +42,6 @@ export interface SeriesMarker<TimeType = Time> {
 	 * @defaultValue `1`
 	 */
 	size?: number;
-
-	/**
-	 * @internal
-	 */
-	originalTime: unknown;
 }
 
 export type MarkerPositions = Record<SeriesMarkerPosition, boolean>;
diff --git a/src/plugins/series-markers/utils.ts b/src/plugins/series-markers/utils.ts
index 97e0c81207..89e884ceaf 100644
--- a/src/plugins/series-markers/utils.ts
+++ b/src/plugins/series-markers/utils.ts
@@ -1,6 +1,6 @@
 import { ceiledEven, ceiledOdd } from '../../helpers/mathex';
 
-import { SeriesMarker, SeriesMarkerShape } from './types';
+import { SeriesMarkerShape } from './types';
 
 const enum Constants {
 	MinShapeSize = 12,
@@ -48,16 +48,3 @@ export function calculateAdjustedMargin(margin: number, hasSide: boolean, hasInB
 
 	return 0;
 }
-export function convertSeriesMarker<InTimeType, OutTimeType>(sm: SeriesMarker<InTimeType>, newTime: OutTimeType, originalTime?: unknown): SeriesMarker<OutTimeType> {
-	const { time: inTime, originalTime: inOriginalTime, ...values } = sm;
-	/* eslint-disable @typescript-eslint/consistent-type-assertions */
-	const res = {
-		time: newTime,
-		...values,
-	} as SeriesMarker<OutTimeType>;
-	/* eslint-enable @typescript-eslint/consistent-type-assertions */
-	if (originalTime !== undefined) {
-		res.originalTime = originalTime;
-	}
-	return res;
-}
diff --git a/src/plugins/series-markers/wrapper.ts b/src/plugins/series-markers/wrapper.ts
new file mode 100644
index 0000000000..be2c1ab5b2
--- /dev/null
+++ b/src/plugins/series-markers/wrapper.ts
@@ -0,0 +1,63 @@
+import { ISeriesApi } from '../../api/iseries-api';
+
+import { SeriesType } from '../../model/series-options';
+
+import { SeriesPrimitiveAdapter } from '../series-primitive-adapter';
+import { SeriesMarkersPrimitive } from './primitive';
+import { SeriesMarker } from './types';
+
+class SeriesMarkersPrimitiveWrapper<HorzScaleItem> extends SeriesPrimitiveAdapter<HorzScaleItem, unknown, SeriesMarkersPrimitive<HorzScaleItem>> {
+	public constructor(series: ISeriesApi<SeriesType, HorzScaleItem>, primitive: SeriesMarkersPrimitive<HorzScaleItem>, markers?: SeriesMarker<HorzScaleItem>[]) {
+		super(series, primitive);
+		if (markers) {
+			this.setMarkers(markers);
+		}
+	}
+	public setMarkers(markers: SeriesMarker<HorzScaleItem>[]): void {
+		this._primitive.setMarkers(markers);
+	}
+
+	public markers(): readonly SeriesMarker<HorzScaleItem>[] {
+		return this._primitive.markers();
+	}
+}
+
+/**
+ * A function to create a series markers primitive.
+ *
+ * @param series - The series to which the primitive will be attached.
+ *
+ * @param markers - An array of markers to be displayed on the series.
+ *
+ * @example
+ * ```js
+ * import { createSeriesMarkers } from 'lightweight-charts';
+ *
+ *	const seriesMarkersPrimitive = createSeriesMarkers(
+ *		series,
+ *		[
+ *			{
+ *				color: 'green',
+ *				position: 'inBar',
+ * 				shape: 'arrowDown',
+ *				time: 1556880900,
+ *			},
+ *		]
+ *	);
+ *  // and then you can modify the markers
+ *  // set it to empty array to remove all markers
+ *  seriesMarkersPrimitive.setMarkers([]);
+ *
+ *  // `seriesMarkersPrimitive.markers()` returns current markers
+ * ```
+ */
+export function createSeriesMarkers<HorzScaleItem>(
+	series: ISeriesApi<SeriesType, HorzScaleItem>,
+	markers?: SeriesMarker<HorzScaleItem>[]
+): SeriesMarkersPrimitiveWrapper<HorzScaleItem> {
+	const wrapper = new SeriesMarkersPrimitiveWrapper(series, new SeriesMarkersPrimitive<HorzScaleItem>());
+	if (markers) {
+		wrapper.setMarkers(markers);
+	}
+	return wrapper;
+}
diff --git a/src/plugins/series-primitive-adapter.ts b/src/plugins/series-primitive-adapter.ts
new file mode 100644
index 0000000000..dfa22350da
--- /dev/null
+++ b/src/plugins/series-primitive-adapter.ts
@@ -0,0 +1,47 @@
+import { ISeriesApi } from '../api/iseries-api';
+import { ISeriesPrimitive } from '../api/iseries-primitive-api';
+
+import { DeepPartial } from '../helpers/strict-type-checks';
+
+import { SeriesType } from '../model/series-options';
+
+import { IPrimitiveWrapper } from './primitive-wrapper-base';
+
+/**
+ * Interface for a primitive wrapper. It must be implemented to add some plugin to the chart.
+ */
+interface ISeriesPrimitiveWithOptions<T, Options = unknown> extends ISeriesPrimitive<T> {
+	/**
+	 * @param options - Options to apply. The options are deeply merged with the current options.
+	 */
+	applyOptions?: (options: DeepPartial<Options>) => void;
+}
+
+export class SeriesPrimitiveAdapter<T, Options = unknown, IPrimitive extends ISeriesPrimitiveWithOptions<T, Options> = ISeriesPrimitive<T>, TSeriesType extends SeriesType = SeriesType> implements IPrimitiveWrapper<T, Options> {
+	protected _primitive: IPrimitive;
+	protected _series: ISeriesApi<TSeriesType, T>;
+
+	public constructor(series: ISeriesApi<TSeriesType, T>, primitive: IPrimitive) {
+		this._series = series;
+		this._primitive = primitive;
+		this._attach();
+	}
+
+	public detach(): void {
+		this._series.detachPrimitive(this._primitive);
+	}
+
+	public getSeries(): ISeriesApi<TSeriesType, T> {
+		return this._series;
+	}
+
+	public applyOptions(options: DeepPartial<Options>): void {
+		if (this._primitive && this._primitive.applyOptions) {
+			this._primitive.applyOptions(options);
+		}
+	}
+
+	private _attach(): void {
+		this._series.attachPrimitive(this._primitive);
+	}
+}
diff --git a/src/plugins/text-watermark/primitive.ts b/src/plugins/text-watermark/primitive.ts
index 3892b5107f..1f60c17ff1 100644
--- a/src/plugins/text-watermark/primitive.ts
+++ b/src/plugins/text-watermark/primitive.ts
@@ -1,3 +1,4 @@
+import { IPaneApi } from '../../api/ipane-api';
 import {
 	IPanePrimitive,
 	PaneAttachedParameter,
@@ -5,9 +6,10 @@ import {
 
 import { DeepPartial } from '../../helpers/strict-type-checks';
 
-import { Time } from '../../model/horz-scale-behavior-time/types';
 import { IPanePrimitivePaneView } from '../../model/ipane-primitive';
 
+import { IPanePrimitiveWithOptions, PanePrimitiveWrapper } from '../pane-primitive-wrapper';
+import { IPrimitiveWithOptions } from '../primitive-wrapper-base';
 import {
 	TextWatermarkLineOptions,
 	textWatermarkLineOptionsDefaults,
@@ -35,34 +37,7 @@ function mergeOptionsWithDefaults(
 	};
 }
 
-/**
- * A pane primitive for rendering a text watermark.
- *
- * @example
- * ```js
- *  const textWatermark = new TextWatermark({
- * 	  horzAlign: 'center',
- * 	  vertAlign: 'center',
- * 	  lines: [
- * 	    {
- * 	      text: 'Hello',
- * 	      color: 'rgba(255,0,0,0.5)',
- * 	      fontSize: 100,
- * 	      fontStyle: 'bold',
- * 	    },
- * 	    {
- * 	      text: 'This is a text watermark',
- * 	      color: 'rgba(0,0,255,0.5)',
- * 	      fontSize: 50,
- * 	      fontStyle: 'italic',
- * 	      fontFamily: 'monospace',
- * 	    },
- * 	  ],
- *  });
- * chart.panes()[0].attachPrimitive(textWatermark);
- * ```
- */
-export class TextWatermark<T = Time> implements IPanePrimitive<T> {
+export class TextWatermark<T> implements IPanePrimitive<T>, IPrimitiveWithOptions<TextWatermarkOptions> {
 	public requestUpdate?: () => void;
 	private _paneViews: TextWatermarkPaneView[];
 	private _options: TextWatermarkOptions;
@@ -97,3 +72,46 @@ export class TextWatermark<T = Time> implements IPanePrimitive<T> {
 		}
 	}
 }
+
+/**
+ * Creates an image watermark.
+ *
+ * @param pane - Target pane.
+ * @param imageUrl - Image URL.
+ * @param options - Watermark options.
+ *
+ * @returns Image watermark wrapper.
+ *
+ * @example
+ * ```js
+ * import { createTextWatermark } from 'lightweight-charts';
+ *
+ * const firstPane = chart.panes()[0];
+ * const textWatermark = createTextWatermark(firstPane, {
+ * 	  horzAlign: 'center',
+ * 	  vertAlign: 'center',
+ * 	  lines: [
+ * 	    {
+ * 	      text: 'Hello',
+ * 	      color: 'rgba(255,0,0,0.5)',
+ * 	      fontSize: 100,
+ * 	      fontStyle: 'bold',
+ * 	    },
+ * 	    {
+ * 	      text: 'This is a text watermark',
+ * 	      color: 'rgba(0,0,255,0.5)',
+ * 	      fontSize: 50,
+ * 	      fontStyle: 'italic',
+ * 	      fontFamily: 'monospace',
+ * 	    },
+ * 	  ],
+ * });
+ * // to change options
+ * textWatermark.applyOptions({ horzAlign: 'left' });
+ * // to remove watermark from the pane
+ * textWatermark.detach();
+ * ```
+ */
+export function createTextWatermark<T>(pane: IPaneApi<T>, options: DeepPartial<TextWatermarkOptions>): PanePrimitiveWrapper<T, TextWatermarkOptions, IPanePrimitiveWithOptions<T, TextWatermarkOptions>> {
+	return new PanePrimitiveWrapper<T, TextWatermarkOptions, IPanePrimitiveWithOptions<T, TextWatermarkOptions>>(pane, new TextWatermark(options));
+}
diff --git a/src/plugins/types.ts b/src/plugins/types.ts
index b6f88ff426..143a49f69a 100644
--- a/src/plugins/types.ts
+++ b/src/plugins/types.ts
@@ -1,3 +1,7 @@
+import { ISeriesApi } from '../api/iseries-api';
+
+import { SeriesType } from '../model/series-options';
+
 /**
  * Represents a horizontal alignment.
  */
@@ -6,3 +10,11 @@ export type HorzAlign = 'left' | 'center' | 'right';
  * Represents a vertical alignment.
  */
 export type VertAlign = 'top' | 'center' | 'bottom';
+
+type DefaultOptionsType<T> = Record<string, string | number | boolean | T>;
+export interface IPluginApiBase<Options extends DefaultOptionsType<string>> {
+	series(): ISeriesApi<SeriesType>;
+	detach(): void;
+	options(): Options;
+	applyOptions(options: Options | Partial<Options>): void;
+}
diff --git a/tests/e2e/coverage/test-cases/plugins/text-watermark.js b/tests/e2e/coverage/test-cases/plugins/text-watermark.js
index 4c16bb78d5..9f995ae511 100644
--- a/tests/e2e/coverage/test-cases/plugins/text-watermark.js
+++ b/tests/e2e/coverage/test-cases/plugins/text-watermark.js
@@ -19,8 +19,8 @@ function beforeInteractions(container) {
 	const mainSeries = chart.addLineSeries();
 
 	mainSeries.setData(simpleData());
-
-	textWatermark = new LightweightCharts.TextWatermark({
+	const pane = chart.panes()[0];
+	textWatermark = LightweightCharts.createTextWatermark(pane, {
 		horzAlign: 'center',
 		vertAlign: 'center',
 		lines: [
@@ -40,9 +40,6 @@ function beforeInteractions(container) {
 		],
 	});
 
-	const pane = chart.panes()[0];
-	pane.attachPrimitive(textWatermark);
-
 	return Promise.resolve();
 }
 
diff --git a/tests/e2e/coverage/test-cases/series/markers.js b/tests/e2e/coverage/test-cases/series/markers.js
index a2df75665f..7a3ddd8ae6 100644
--- a/tests/e2e/coverage/test-cases/series/markers.js
+++ b/tests/e2e/coverage/test-cases/series/markers.js
@@ -15,7 +15,7 @@ function beforeInteractions(container) {
 
 	const data = generateLineData();
 	mainSeries.setData(data);
-	seriesMarkerPrimitives = LightweightCharts.createSeriesMarkersPrimitive(
+	seriesMarkerPrimitives = LightweightCharts.createSeriesMarkers(
 		mainSeries,
 		[
 			{ time: data[data.length - 7].time, position: 'belowBar', color: 'rgb(255, 0, 0)', shape: 'arrowUp', text: 'test' },
diff --git a/tests/e2e/graphics/test-cases/add-markers-with-autosize-enabled.js b/tests/e2e/graphics/test-cases/add-markers-with-autosize-enabled.js
index 2903831953..2de17a770b 100644
--- a/tests/e2e/graphics/test-cases/add-markers-with-autosize-enabled.js
+++ b/tests/e2e/graphics/test-cases/add-markers-with-autosize-enabled.js
@@ -70,7 +70,7 @@ function runTestCase(container) {
 			});
 		}
 	}
-	LightweightCharts.createSeriesMarkersPrimitive(
+	LightweightCharts.createSeriesMarkers(
 		series,
 		markers
 	);
diff --git a/tests/e2e/graphics/test-cases/api/series-markers.js b/tests/e2e/graphics/test-cases/api/series-markers.js
index abc7814508..45d41d831c 100644
--- a/tests/e2e/graphics/test-cases/api/series-markers.js
+++ b/tests/e2e/graphics/test-cases/api/series-markers.js
@@ -37,13 +37,14 @@ function runTestCase(container) {
 		{ time: '1990-04-30', position: 'aboveBar', color: 'red', shape: 'arrowDown' },
 	];
 
-	const markersPrimitive = LightweightCharts.createSeriesMarkersPrimitive(
+	const markersPrimitive = LightweightCharts.createSeriesMarkers(
 		series,
 		markers
 	);
 	const seriesApiMarkers = markersPrimitive.markers();
 
-	const textWatermark = new LightweightCharts.TextWatermark({
+	const pane = chart.panes()[0];
+	LightweightCharts.createTextWatermark(pane, {
 		lines: [
 			{
 				text: JSON.stringify(seriesApiMarkers[0]),
@@ -51,8 +52,6 @@ function runTestCase(container) {
 			},
 		],
 	});
-	const pane = chart.panes()[0];
-	pane.attachPrimitive(textWatermark);
 
 	console.assert(compare(markers, seriesApiMarkers), `seriesMarkersPrimitive.markers() should return exactly the same that was provided to series.setMarkers()\n${JSON.stringify(seriesApiMarkers)}\n${JSON.stringify(markers)}`);
 }
diff --git a/tests/e2e/graphics/test-cases/api/subscribe-crosshair-move.js b/tests/e2e/graphics/test-cases/api/subscribe-crosshair-move.js
index 9e03dda8a5..e5f6c773b7 100644
--- a/tests/e2e/graphics/test-cases/api/subscribe-crosshair-move.js
+++ b/tests/e2e/graphics/test-cases/api/subscribe-crosshair-move.js
@@ -14,7 +14,7 @@ function runTestCase(container) {
 
 	chart.timeScale().fitContent();
 
-	const textWatermark = new LightweightCharts.TextWatermark({
+	const textWatermark = LightweightCharts.createTextWatermark(chart.panes()[0], {
 		lines: [
 			{
 				text: '',
@@ -23,8 +23,6 @@ function runTestCase(container) {
 			},
 		],
 	});
-	const pane = chart.panes()[0];
-	pane.attachPrimitive(textWatermark);
 
 	chart.subscribeCrosshairMove(param => {
 		if (param.time) {
diff --git a/tests/e2e/graphics/test-cases/applying-options/make-series-hidden.js b/tests/e2e/graphics/test-cases/applying-options/make-series-hidden.js
index 6851630492..ea5eba465d 100644
--- a/tests/e2e/graphics/test-cases/applying-options/make-series-hidden.js
+++ b/tests/e2e/graphics/test-cases/applying-options/make-series-hidden.js
@@ -25,7 +25,7 @@ function runTestCase(container) {
 	});
 	const data = generateData();
 	lineSeries.setData(data);
-	LightweightCharts.createSeriesMarkersPrimitive(
+	LightweightCharts.createSeriesMarkers(
 		lineSeries,
 		[
 			{ time: data[data.length - 30].time, position: 'belowBar', color: 'orange', shape: 'arrowUp' },
diff --git a/tests/e2e/graphics/test-cases/applying-options/make-series-visible.js b/tests/e2e/graphics/test-cases/applying-options/make-series-visible.js
index 962604f235..ef91fa1b9c 100644
--- a/tests/e2e/graphics/test-cases/applying-options/make-series-visible.js
+++ b/tests/e2e/graphics/test-cases/applying-options/make-series-visible.js
@@ -26,7 +26,7 @@ function runTestCase(container) {
 	});
 	const data = generateData();
 	lineSeries.setData(data);
-	LightweightCharts.createSeriesMarkersPrimitive(
+	LightweightCharts.createSeriesMarkers(
 		lineSeries,
 		[
 			{ time: data[data.length - 30].time, position: 'belowBar', color: 'orange', shape: 'arrowUp' },
diff --git a/tests/e2e/graphics/test-cases/applying-options/watermark.js b/tests/e2e/graphics/test-cases/applying-options/watermark.js
index eddc3b25c5..1d1008ea58 100644
--- a/tests/e2e/graphics/test-cases/applying-options/watermark.js
+++ b/tests/e2e/graphics/test-cases/applying-options/watermark.js
@@ -33,7 +33,7 @@ function runTestCase(container) {
 
 	mainSeries.setData(generateData());
 
-	textWatermark = new LightweightCharts.TextWatermark({
+	textWatermark = LightweightCharts.createTextWatermark(chart.panes()[0], {
 		horzAlign: 'left',
 		vertAlign: 'bottom',
 		lines: [
@@ -44,8 +44,6 @@ function runTestCase(container) {
 			},
 		],
 	});
-	const pane = chart.panes()[0];
-	pane.attachPrimitive(textWatermark);
 
 	return new Promise(resolve => {
 		setTimeout(() => {
diff --git a/tests/e2e/graphics/test-cases/data-validation.js b/tests/e2e/graphics/test-cases/data-validation.js
index d360e31686..3ad780dc70 100644
--- a/tests/e2e/graphics/test-cases/data-validation.js
+++ b/tests/e2e/graphics/test-cases/data-validation.js
@@ -29,20 +29,6 @@ function runTestCase(container) {
 		// passed
 	}
 
-	try {
-		LightweightCharts.createSeriesMarkersPrimitive(
-			lineSeries,
-			[
-				{ time: 1 },
-				{ time: 0, value: 0 },
-			]
-		);
-
-		console.assert(false, 'should fail if series markers is not ordered');
-	} catch (e) {
-		// passed
-	}
-
 	try {
 		lineSeries.setData([
 			{ time: 0 },
@@ -96,7 +82,7 @@ function runTestCase(container) {
 	}
 
 	// should pass - several markers could be on the same bar
-	LightweightCharts.createSeriesMarkersPrimitive(
+	LightweightCharts.createSeriesMarkers(
 		lineSeries,
 		[
 			{
diff --git a/tests/e2e/graphics/test-cases/initial-options/watermark.js b/tests/e2e/graphics/test-cases/initial-options/watermark.js
index e48f1f7b7d..7442ed56f8 100644
--- a/tests/e2e/graphics/test-cases/initial-options/watermark.js
+++ b/tests/e2e/graphics/test-cases/initial-options/watermark.js
@@ -20,7 +20,7 @@ function runTestCase(container) {
 	const mainSeries = chart.addAreaSeries();
 	mainSeries.setData(generateData());
 
-	const textWatermark = new LightweightCharts.TextWatermark({
+	LightweightCharts.createTextWatermark(chart.panes()[0], {
 		visible: true,
 		lines: [
 			{
@@ -32,7 +32,4 @@ function runTestCase(container) {
 			},
 		],
 	});
-
-	const pane = chart.panes()[0];
-	pane.attachPrimitive(textWatermark);
 }
diff --git a/tests/e2e/graphics/test-cases/plugins/image-watermark.js b/tests/e2e/graphics/test-cases/plugins/image-watermark.js
index 0e2fd8a905..d2ed2d56c3 100644
--- a/tests/e2e/graphics/test-cases/plugins/image-watermark.js
+++ b/tests/e2e/graphics/test-cases/plugins/image-watermark.js
@@ -71,11 +71,8 @@ function runTestCase(container) {
 	const mainSeries = chart.addAreaSeries();
 	mainSeries.setData(generateData());
 
-	const imageWatermark = new LightweightCharts.ImageWatermark(imageDataUrl, {
+	LightweightCharts.createImageWatermark(chart.panes()[0], imageDataUrl, {
 		alpha: 0.5,
 		padding: 20,
 	});
-
-	const pane = chart.panes()[0];
-	pane.attachPrimitive(imageWatermark);
 }
diff --git a/tests/e2e/graphics/test-cases/series-markers/marker-in-gap-from-left.js b/tests/e2e/graphics/test-cases/series-markers/marker-in-gap-from-left.js
index a74067f0f4..713af824b9 100644
--- a/tests/e2e/graphics/test-cases/series-markers/marker-in-gap-from-left.js
+++ b/tests/e2e/graphics/test-cases/series-markers/marker-in-gap-from-left.js
@@ -25,7 +25,7 @@ function runTestCase(container) {
 		{ time: 1556892000, value: 132.24 },
 		{ time: 1556895600, value: 132.52 },
 	]);
-	LightweightCharts.createSeriesMarkersPrimitive(
+	LightweightCharts.createSeriesMarkers(
 		lineSeries,
 		[
 			{
diff --git a/tests/e2e/graphics/test-cases/series-markers/marker-in-gap.js b/tests/e2e/graphics/test-cases/series-markers/marker-in-gap.js
index 8c5395ee90..1434a7a471 100644
--- a/tests/e2e/graphics/test-cases/series-markers/marker-in-gap.js
+++ b/tests/e2e/graphics/test-cases/series-markers/marker-in-gap.js
@@ -25,7 +25,7 @@ function runTestCase(container) {
 		{ time: 1556895600, value: 132.52 },
 	]);
 
-	LightweightCharts.createSeriesMarkersPrimitive(
+	LightweightCharts.createSeriesMarkers(
 		lineSeries,
 		[
 			{
diff --git a/tests/e2e/graphics/test-cases/series-markers/series-arrow-markers.js b/tests/e2e/graphics/test-cases/series-markers/series-arrow-markers.js
index 49424c0355..f66e6213ed 100644
--- a/tests/e2e/graphics/test-cases/series-markers/series-arrow-markers.js
+++ b/tests/e2e/graphics/test-cases/series-markers/series-arrow-markers.js
@@ -30,7 +30,7 @@ function runTestCase(container) {
 	const data = generateData();
 	mainSeries.setData(data);
 
-	LightweightCharts.createSeriesMarkersPrimitive(
+	LightweightCharts.createSeriesMarkers(
 		mainSeries,
 		[
 			{ time: data[data.length - 30].time, position: 'belowBar', color: 'orange', shape: 'arrowUp' },
diff --git a/tests/e2e/graphics/test-cases/series-markers/series-circle-markers.js b/tests/e2e/graphics/test-cases/series-markers/series-circle-markers.js
index a1ce3388ee..fb3e7ce8b9 100644
--- a/tests/e2e/graphics/test-cases/series-markers/series-circle-markers.js
+++ b/tests/e2e/graphics/test-cases/series-markers/series-circle-markers.js
@@ -29,7 +29,7 @@ function runTestCase(container) {
 
 	const data = generateData();
 	mainSeries.setData(data);
-	LightweightCharts.createSeriesMarkersPrimitive(
+	LightweightCharts.createSeriesMarkers(
 		mainSeries,
 		[
 			{ time: data[data.length - 30].time, position: 'belowBar', color: 'orange', shape: 'circle' },
diff --git a/tests/e2e/graphics/test-cases/series-markers/series-markers-aligned.js b/tests/e2e/graphics/test-cases/series-markers/series-markers-aligned.js
index f586c70b2b..4beb5411f8 100644
--- a/tests/e2e/graphics/test-cases/series-markers/series-markers-aligned.js
+++ b/tests/e2e/graphics/test-cases/series-markers/series-markers-aligned.js
@@ -15,7 +15,7 @@ function runTestCase(container) {
 		{ time: '2017-04-23', value: 81.89 },
 	]);
 
-	LightweightCharts.createSeriesMarkersPrimitive(
+	LightweightCharts.createSeriesMarkers(
 		line,
 		[
 			{ time: '2017-04-10', position: 'inBar', color: 'orange', shape: 'circle' },
diff --git a/tests/e2e/graphics/test-cases/series-markers/series-markers-all-above.js b/tests/e2e/graphics/test-cases/series-markers/series-markers-all-above.js
index 2c4ae32cbb..fe618756b6 100644
--- a/tests/e2e/graphics/test-cases/series-markers/series-markers-all-above.js
+++ b/tests/e2e/graphics/test-cases/series-markers/series-markers-all-above.js
@@ -20,7 +20,7 @@ function runTestCase(container) {
 	const data = generateData();
 	mainSeries.setData(data);
 
-	LightweightCharts.createSeriesMarkersPrimitive(
+	LightweightCharts.createSeriesMarkers(
 		mainSeries,
 		[
 			{ time: data[0].time, position: 'aboveBar', color: 'red', shape: 'arrowUp' },
diff --git a/tests/e2e/graphics/test-cases/series-markers/series-markers-all-below.js b/tests/e2e/graphics/test-cases/series-markers/series-markers-all-below.js
index b44d5ef09a..287a0b6d26 100644
--- a/tests/e2e/graphics/test-cases/series-markers/series-markers-all-below.js
+++ b/tests/e2e/graphics/test-cases/series-markers/series-markers-all-below.js
@@ -20,7 +20,7 @@ function runTestCase(container) {
 	const data = generateData();
 	mainSeries.setData(data);
 
-	LightweightCharts.createSeriesMarkersPrimitive(
+	LightweightCharts.createSeriesMarkers(
 		mainSeries,
 		[
 			{ time: data[data.length - 3].time, position: 'belowBar', color: 'red', shape: 'arrowUp' },
diff --git a/tests/e2e/graphics/test-cases/series-markers/series-markers-all-inbar.js b/tests/e2e/graphics/test-cases/series-markers/series-markers-all-inbar.js
index a1cc6d5999..33cc25c8f9 100644
--- a/tests/e2e/graphics/test-cases/series-markers/series-markers-all-inbar.js
+++ b/tests/e2e/graphics/test-cases/series-markers/series-markers-all-inbar.js
@@ -19,7 +19,7 @@ function runTestCase(container) {
 
 	const data = generateData();
 	mainSeries.setData(data);
-	LightweightCharts.createSeriesMarkersPrimitive(
+	LightweightCharts.createSeriesMarkers(
 		mainSeries,
 		[
 			{ time: data[data.length - 3].time, position: 'inBar', color: 'red', shape: 'arrowUp' },
diff --git a/tests/e2e/graphics/test-cases/series-markers/series-markers-max-bar-spacing.js b/tests/e2e/graphics/test-cases/series-markers/series-markers-max-bar-spacing.js
index b4ada767aa..4e7803c7f6 100644
--- a/tests/e2e/graphics/test-cases/series-markers/series-markers-max-bar-spacing.js
+++ b/tests/e2e/graphics/test-cases/series-markers/series-markers-max-bar-spacing.js
@@ -20,7 +20,7 @@ function runTestCase(container) {
 	const data = generateData();
 	mainSeries.setData(data);
 
-	LightweightCharts.createSeriesMarkersPrimitive(
+	LightweightCharts.createSeriesMarkers(
 		mainSeries,
 		[
 			{ time: data[data.length - 4].time, position: 'inBar', color: 'red', shape: 'square' },
diff --git a/tests/e2e/graphics/test-cases/series-markers/series-markers-min-bar-spacing.js b/tests/e2e/graphics/test-cases/series-markers/series-markers-min-bar-spacing.js
index ba15c92396..5ee848a928 100644
--- a/tests/e2e/graphics/test-cases/series-markers/series-markers-min-bar-spacing.js
+++ b/tests/e2e/graphics/test-cases/series-markers/series-markers-min-bar-spacing.js
@@ -27,7 +27,7 @@ function runTestCase(container) {
 		{ time: data[data.length - 10].time, position: 'inBar', color: 'red', shape: 'arrowUp' },
 	];
 
-	LightweightCharts.createSeriesMarkersPrimitive(
+	LightweightCharts.createSeriesMarkers(
 		mainSeries,
 		markers
 	);
diff --git a/tests/e2e/graphics/test-cases/series-markers/series-markers-object-business-day.js b/tests/e2e/graphics/test-cases/series-markers/series-markers-object-business-day.js
index 56f0c0dc4a..c2758d2d6f 100644
--- a/tests/e2e/graphics/test-cases/series-markers/series-markers-object-business-day.js
+++ b/tests/e2e/graphics/test-cases/series-markers/series-markers-object-business-day.js
@@ -15,7 +15,7 @@ function runTestCase(container) {
 		{ time: '2017-04-23', value: 81.89 },
 	]);
 
-	LightweightCharts.createSeriesMarkersPrimitive(
+	LightweightCharts.createSeriesMarkers(
 		line,
 		[
 			{ time: { year: 2017, month: 4, day: 11 }, position: 'inBar', color: 'orange', shape: 'circle' },
diff --git a/tests/e2e/graphics/test-cases/series-markers/series-markers-out-of-visible-range.js b/tests/e2e/graphics/test-cases/series-markers/series-markers-out-of-visible-range.js
index 51a9e30c33..25bc105757 100644
--- a/tests/e2e/graphics/test-cases/series-markers/series-markers-out-of-visible-range.js
+++ b/tests/e2e/graphics/test-cases/series-markers/series-markers-out-of-visible-range.js
@@ -20,7 +20,7 @@ function runTestCase(container) {
 	const data = generateData();
 	mainSeries.setData(data);
 
-	LightweightCharts.createSeriesMarkersPrimitive(
+	LightweightCharts.createSeriesMarkers(
 		mainSeries,
 		[
 			{ time: data[0].time, position: 'belowBar', color: 'red', shape: 'arrowUp' },
diff --git a/tests/e2e/graphics/test-cases/series-markers/series-markers-re-aligned.js b/tests/e2e/graphics/test-cases/series-markers/series-markers-re-aligned.js
index 2c7033d055..a3f0801818 100644
--- a/tests/e2e/graphics/test-cases/series-markers/series-markers-re-aligned.js
+++ b/tests/e2e/graphics/test-cases/series-markers/series-markers-re-aligned.js
@@ -15,7 +15,7 @@ function runTestCase(container) {
 		{ time: '2017-04-23', value: 91.89 },
 	]);
 
-	LightweightCharts.createSeriesMarkersPrimitive(
+	LightweightCharts.createSeriesMarkers(
 		line,
 		[
 			{ time: '2017-04-10', position: 'inBar', color: 'orange', shape: 'circle' },
diff --git a/tests/e2e/graphics/test-cases/series-markers/series-markers-update.js b/tests/e2e/graphics/test-cases/series-markers/series-markers-update.js
index 62129560a9..f26c279c2a 100644
--- a/tests/e2e/graphics/test-cases/series-markers/series-markers-update.js
+++ b/tests/e2e/graphics/test-cases/series-markers/series-markers-update.js
@@ -26,7 +26,7 @@ function runTestCase(container) {
 		{ time: data[data.length - 20].time, position: 'belowBar', color: 'red', shape: 'arrowUp' },
 		{ time: data[data.length - 10].time, position: 'belowBar', color: 'red', shape: 'arrowUp' },
 	];
-	const markerPrimitive = LightweightCharts.createSeriesMarkersPrimitive(
+	const markerPrimitive = LightweightCharts.createSeriesMarkers(
 		mainSeries,
 		markers
 	);
diff --git a/tests/e2e/graphics/test-cases/series-markers/series-markers-with-text.js b/tests/e2e/graphics/test-cases/series-markers/series-markers-with-text.js
index 15450196a0..77b03da123 100644
--- a/tests/e2e/graphics/test-cases/series-markers/series-markers-with-text.js
+++ b/tests/e2e/graphics/test-cases/series-markers/series-markers-with-text.js
@@ -37,7 +37,7 @@ function runTestCase(container) {
 
 	const data = generateData();
 	mainSeries.setData(data);
-	LightweightCharts.createSeriesMarkersPrimitive(
+	LightweightCharts.createSeriesMarkers(
 		mainSeries,
 		[
 			{ time: data[data.length - 50].time, position: 'belowBar', color: 'red', shape: 'arrowUp', text: 'test' },
diff --git a/tests/e2e/graphics/test-cases/series-markers/series-square-markers.js b/tests/e2e/graphics/test-cases/series-markers/series-square-markers.js
index e9cdc52629..c9616d2c53 100644
--- a/tests/e2e/graphics/test-cases/series-markers/series-square-markers.js
+++ b/tests/e2e/graphics/test-cases/series-markers/series-square-markers.js
@@ -29,7 +29,7 @@ function runTestCase(container) {
 
 	const data = generateData();
 	mainSeries.setData(data);
-	LightweightCharts.createSeriesMarkersPrimitive(
+	LightweightCharts.createSeriesMarkers(
 		mainSeries,
 		[
 			{ time: data[data.length - 30].time, position: 'belowBar', color: 'orange', shape: 'square' },
diff --git a/tests/e2e/graphics/test-cases/series-markers/set-markers-before-series-data.js b/tests/e2e/graphics/test-cases/series-markers/set-markers-before-series-data.js
index 61613d5330..5aa41db417 100644
--- a/tests/e2e/graphics/test-cases/series-markers/set-markers-before-series-data.js
+++ b/tests/e2e/graphics/test-cases/series-markers/set-markers-before-series-data.js
@@ -3,7 +3,7 @@ function runTestCase(container) {
 
 	const mainSeries = chart.addLineSeries();
 
-	LightweightCharts.createSeriesMarkersPrimitive(
+	LightweightCharts.createSeriesMarkers(
 		mainSeries,
 		[
 			{
diff --git a/tests/e2e/graphics/test-cases/series/series-visibility.js b/tests/e2e/graphics/test-cases/series/series-visibility.js
index 2abdd8de23..6eefd599a1 100644
--- a/tests/e2e/graphics/test-cases/series/series-visibility.js
+++ b/tests/e2e/graphics/test-cases/series/series-visibility.js
@@ -45,7 +45,7 @@ function runTestCase(container) {
 	});
 	const data = generateData();
 	lineSeries.setData(data);
-	LightweightCharts.createSeriesMarkersPrimitive(
+	LightweightCharts.createSeriesMarkers(
 		lineSeries,
 		[
 			{ time: data[data.length - 30].time, position: 'belowBar', color: 'orange', shape: 'arrowUp' },
diff --git a/tests/e2e/interactions/test-cases/markers/text-hit-test.js b/tests/e2e/interactions/test-cases/markers/text-hit-test.js
index fffc11ea59..1a7a4cc43f 100644
--- a/tests/e2e/interactions/test-cases/markers/text-hit-test.js
+++ b/tests/e2e/interactions/test-cases/markers/text-hit-test.js
@@ -49,7 +49,7 @@ function beforeInteractions(container) {
 	const price = mainSeriesData[450].value;
 
 	mainSeries.setData(mainSeriesData);
-	LightweightCharts.createSeriesMarkersPrimitive(
+	LightweightCharts.createSeriesMarkers(
 		mainSeries,
 		[
 			{
diff --git a/tests/type-checks/non-time-based-custom-series.ts b/tests/type-checks/non-time-based-custom-series.ts
index a30145a361..7a61994d6f 100644
--- a/tests/type-checks/non-time-based-custom-series.ts
+++ b/tests/type-checks/non-time-based-custom-series.ts
@@ -1,4 +1,4 @@
-import { createChartEx, customSeriesDefaultOptions, TextWatermark } from '../../src';
+import { createChartEx, createTextWatermark, customSeriesDefaultOptions } from '../../src';
 import { CandlestickData, WhitespaceData } from '../../src/model/data-consumer';
 import { Time } from '../../src/model/horz-scale-behavior-time/types';
 import { CustomData, CustomSeriesPricePlotValues, ICustomSeriesPaneRenderer, ICustomSeriesPaneView, PaneRendererCustomData } from '../../src/model/icustom-series';
@@ -107,7 +107,6 @@ if (dataSet) {
 // eslint-disable-next-line @typescript-eslint/no-unsafe-call
 dataSet.push({ time: 12 });
 
-const textWatermark = new TextWatermark<HorizontalScaleType>({
+createTextWatermark<HorizontalScaleType>(chart.panes()[1], {
 	lines: [],
 });
-chart.panes()[1].attachPrimitive(textWatermark);
diff --git a/tests/type-checks/series-markers.ts b/tests/type-checks/series-markers.ts
new file mode 100644
index 0000000000..1b4aa1c99b
--- /dev/null
+++ b/tests/type-checks/series-markers.ts
@@ -0,0 +1,122 @@
+import { createChart, createChartEx, createSeriesMarkers } from '../../src';
+import { Mutable } from '../../src/helpers/mutable';
+import { ChartOptionsImpl } from '../../src/model/chart-model';
+import { SeriesDataItemTypeMap } from '../../src/model/data-consumer';
+import { Time } from '../../src/model/horz-scale-behavior-time/types';
+import { DataItem, HorzScaleItemConverterToInternalObj, IHorzScaleBehavior, InternalHorzScaleItem } from '../../src/model/ihorz-scale-behavior';
+import { LocalizationOptions } from '../../src/model/localization-options';
+import { SeriesType } from '../../src/model/series-options';
+import { TickMark } from '../../src/model/tick-marks';
+import { TickMarkWeightValue, TimeScalePoint } from '../../src/model/time-data';
+import { TimeMark } from '../../src/model/time-scale';
+
+const chart = createChart('container');
+
+const mainSeries = chart.addLineSeries();
+mainSeries.setData([]);
+
+const seriesMarkersPrimitive = createSeriesMarkers(mainSeries, [
+	{
+		color: 'green',
+		position: 'inBar',
+		shape: 'arrowDown',
+		time: 1556880900 as Time,
+	},
+]);
+
+seriesMarkersPrimitive.setMarkers([
+	{
+		color: 'red',
+		position: 'aboveBar',
+		shape: 'arrowDown',
+		time: 1556880900 as Time,
+	},
+]);
+
+type HorizontalScaleType = number;
+
+class HorzScaleBehaviorPrice implements IHorzScaleBehavior<HorizontalScaleType> {
+	private _options: ChartOptionsImpl<HorizontalScaleType>;
+
+	public constructor() {
+		this._options = {} as unknown as ChartOptionsImpl<HorizontalScaleType>;
+	}
+
+	public options(): ChartOptionsImpl<HorizontalScaleType> {
+		return this._options;
+	}
+
+	public setOptions(options: ChartOptionsImpl<HorizontalScaleType>): void {
+		this._options = options;
+	}
+
+	public preprocessData(data: DataItem<HorizontalScaleType> | DataItem<HorizontalScaleType>[]): void {}
+
+	public updateFormatter(options: LocalizationOptions<HorizontalScaleType>): void {
+		if (!this._options) {
+			return;
+		}
+		this._options.localization = options;
+	}
+
+	public createConverterToInternalObj(data: SeriesDataItemTypeMap<HorizontalScaleType>[SeriesType][]): HorzScaleItemConverterToInternalObj<HorizontalScaleType> {
+		return (price: number): InternalHorzScaleItem => price as unknown as InternalHorzScaleItem;
+	}
+
+	// @ts-expect-error Mock Method
+	public key(internalItem: InternalHorzScaleItem | HorizontalScaleType): InternalHorzScaleItem {
+		return internalItem as unknown as InternalHorzScaleItem;
+	}
+
+	public cacheKey(internalItem: InternalHorzScaleItem): number {
+		return internalItem as unknown as number;
+	}
+
+	public convertHorzItemToInternal(item: HorizontalScaleType): InternalHorzScaleItem {
+		return item as unknown as InternalHorzScaleItem;
+	}
+
+	public formatHorzItem(item: InternalHorzScaleItem): string {
+		return (item as unknown as HorizontalScaleType).toFixed(this._precision());
+	}
+
+	public formatTickmark(item: TickMark, localizationOptions: LocalizationOptions<HorizontalScaleType>): string {
+		return (item.time as unknown as HorizontalScaleType).toFixed(this._precision());
+	}
+
+	public maxTickMarkWeight(marks: TimeMark[]): TickMarkWeightValue {
+		return marks[0].weight;
+	}
+
+	public fillWeightsForPoints(sortedTimePoints: readonly Mutable<TimeScalePoint>[], startIndex: number): void {
+		return;
+	}
+
+	private _precision(): number {
+		return 2;
+	}
+}
+const horizontalScaleBehaviourMock = new HorzScaleBehaviorPrice();
+
+// @ts-expect-error Mock Class
+const nonDefaultChart = createChartEx<HorizontalScaleType, HorzScaleBehaviorPrice>('anything', horizontalScaleBehaviourMock);
+const lineSeries = nonDefaultChart.addLineSeries();
+lineSeries.setData([]);
+
+const markerApi = createSeriesMarkers(mainSeries, [
+	{
+		color: 'green',
+		position: 'inBar',
+		shape: 'arrowDown',
+		time: 1556880900 as Time,
+	},
+]);
+
+markerApi.setMarkers([
+	{
+		color: 'red',
+		position: 'aboveBar',
+		shape: 'arrowDown',
+		time: 1556880900 as Time,
+	},
+]);
diff --git a/tests/type-checks/watermarks.ts b/tests/type-checks/watermarks.ts
index 2fe644860d..baae72d57b 100644
--- a/tests/type-checks/watermarks.ts
+++ b/tests/type-checks/watermarks.ts
@@ -1,19 +1,18 @@
-import { createChart, ImageWatermark, TextWatermark } from '../../src';
+import { createChart, createImageWatermark, createTextWatermark } from '../../src';
 
 const chart = createChart('anything');
 
 const mainSeries = chart.addLineSeries();
 mainSeries.setData([]);
 
-const imageWatermark = new ImageWatermark('/debug/image.svg', {
+createImageWatermark(chart.panes()[0], '/debug/image.svg', {
 	alpha: 0.5,
 	padding: 50,
 	maxHeight: 400,
 	maxWidth: 400,
 });
-chart.panes()[0].attachPrimitive(imageWatermark);
 
-const textWatermark = new TextWatermark({
+createTextWatermark(chart.panes()[1], {
 	horzAlign: 'center',
 	vertAlign: 'center',
 	lines: [
@@ -25,4 +24,3 @@ const textWatermark = new TextWatermark({
 		},
 	],
 });
-chart.panes()[1].attachPrimitive(textWatermark);
diff --git a/website/tutorials/how_to/.eslintrc.js b/website/tutorials/how_to/.eslintrc.js
index 379db16386..736a7aee55 100644
--- a/website/tutorials/how_to/.eslintrc.js
+++ b/website/tutorials/how_to/.eslintrc.js
@@ -3,7 +3,8 @@ module.exports = {
 		document: false,
 		createChart: false,
 		createChartEx: false,
-		TextWatermark: false,
-		ImageWatermark: false,
+		createTextWatermark: false,
+		createImageWatermark: false,
+		createSeriesMarkers: false,
 	},
 };
diff --git a/website/tutorials/how_to/series-markers.js b/website/tutorials/how_to/series-markers.js
index 178ba59976..f5fc973dd8 100644
--- a/website/tutorials/how_to/series-markers.js
+++ b/website/tutorials/how_to/series-markers.js
@@ -769,7 +769,8 @@ for (let i = 0; i < datesForMarkers.length; i++) {
 		});
 	}
 }
-series.setMarkers(markers);
+/** @type {import('lightweight-charts').createSeriesMarkers} */
+createSeriesMarkers(series, markers);
 // highlight-end
 
 chart.timeScale().fitContent();
diff --git a/website/tutorials/how_to/series-markers.mdx b/website/tutorials/how_to/series-markers.mdx
index 6e132adce2..b591a929ed 100644
--- a/website/tutorials/how_to/series-markers.mdx
+++ b/website/tutorials/how_to/series-markers.mdx
@@ -16,7 +16,7 @@ This example shows how to add series markers to your chart.
 ## Short answer
 
 You can add markers to a series by passing an array of [`seriesMarker`](/docs/api/interfaces/SeriesMarker)
-objects to the [`setMarkers`](/docs/api/interfaces/ISeriesApi#setmarkers) method on
+objects to the [`createSeriesMarkers`](/docs/api#createSeriesMarkers) method on
 an [`ISeriesApi`](/docs/api/interfaces/ISeriesApi) instance.
 
 ```js
@@ -29,7 +29,7 @@ const markers = [
         text: 'A',
     },
 ];
-series.setMarkers(markers);
+createSeriesMarkers(series, markers);
 ```
 
 You can see a full [working example](#full-example) below.
@@ -47,7 +47,7 @@ You can view the related APIs here:
 - [SeriesMarker](/docs/api/interfaces/SeriesMarker) - Series Marker interface.
 - [SeriesMarkerPosition](/docs/api/type-aliases/SeriesMarkerPosition) - Positions that can be set for the marker.
 - [SeriesMarkerShape](/docs/api/type-aliases/SeriesMarkerShape) - Shapes that can be set for the marker.
-- [setMarkers](/docs/api/interfaces/ISeriesApi#setmarkers) - Method for adding markers to a series.
+- [createSeriesMarkers](/docs/next/api/interfaces/ISeriesApi#setmarkers) - Method for adding markers to a series.
 - [Time Types](/docs/api/type-aliases/Time) - Different time formats available to use.
 
 ## Full example
diff --git a/website/tutorials/how_to/watermark-advanced.js b/website/tutorials/how_to/watermark-advanced.js
index 5ab395a50e..62da3a7343 100644
--- a/website/tutorials/how_to/watermark-advanced.js
+++ b/website/tutorials/how_to/watermark-advanced.js
@@ -16,13 +16,10 @@ const chart = createChart(document.getElementById('container'), chartOptions);
 // highlight-start
 // imageDataUrl would usually be an url like '/images/my-image.png'
 const imageDataUrl = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyOTIiIGhlaWdodD0iMTI4IiB2aWV3Qm94PSIwIDAgMjkyIDEyOCI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBkPSJtMTgyLjkzIDcuNi42My0uMzdhNjQuMSA2NC4xIDAgMCAwIDIuNDMtNS4zMWw0Ljc3LTEuMzlhNjQuNjggNjQuNjggMCAwIDEtNC43MiAxMC41NGMuMzggMTAuNDUtMy45MyAyMS4xNS0xMS4xIDI5LjM3LTExLjY2IDEzLjQxLTI2Ljk4IDE1Ljk3LTQzLjU3IDEzLjc4bDEuMDctLjk4YTIxLjEgMjEuMSAwIDAgMCAzLjcyLTQuMDUgNDguMzcgNDguMzcgMCAwIDEtMTEuMDQgMi44NGMtMTAuNjUtNS41NC0yMS42NC0xNC45NC0yNC4yNy0yNy4yNyA5LjE5LTE3IDI4Ljk1LTI0LjAxIDQ3LjM5LTE5Ljk0YTIyLjU3IDIyLjU3IDAgMCAwIDUuODYgOS4wMmMtLjEyLTEuOTItLjEtMy44NC0uMS01Ljc2bC4wMS0xLjc4YzQuOCAyLjk2IDkuNjYgNS44NSAxNS41MiA1LjcgNC4wOC0uMSA4LjQtMS41MiAxMy40LTQuNFptLTIyLjU1IDIzLjI4YTguNDggOC40OCAwIDAgMC0xMi40NS0uMzNsLTcuOS03LjI2QTguNiA4LjYgMCAwIDAgMTMyIDEyYy02LjE0IDAtMTAuMjUgNi42My03LjcgMTIuMDlsLTEzLjAyIDEyLjE5Yy00LjEtNC45Ny01LjY4LTkuMy02LjE3LTEwLjk0IDguMzYtMTMuNzIgMjQuNDYtMjAuMTggNDAuMTUtMTcuMDcgMi45MyA2LjkgOC4zOCAxMC43MiAxNC43NyAxMy45NmwtLjMzLTEuMTRjLS43NC0yLjU2LTEuNDctNS4xLTEuNjItNy43OCA3LjA1IDMuNDUgMTQuNiAzLjM1IDIxLjc2LjMxLTQuNzYgNy4yNy0xMS4xMyAxNC4yMi0xOS40NiAxNy4yNlptLTIyLjU2LTQuMTkgOC4wMyA3LjM4QTguNiA4LjYgMCAwIDAgMTU0IDQ1YTguNiA4LjYgMCAwIDAgOC4yNS0xMC41NWM3Ljk5LTMuMDggMTQuMzctOS4zOCAxOS4yOC0xNi4yMy0zLjQ3IDE5LjQ3LTIxLjk2IDM0LjYxLTQxLjkgMzIuOTggMS43Ny0yLjg0IDIuNDktNi4wNiAzLjIxLTkuMjhsLjM1LTEuNTZjLTUuNDcgMy43Ny0xMC42NyA2LjM4LTE3LjM3IDcuNTJhNDkuOSA0OS45IDAgMCAxLTExLjg1LTguNjVsMTIuODMtMTJhOC41OCA4LjU4IDAgMCAwIDExLjAyLS41NFpNMTMyIDE2YTQuNSA0LjUgMCAxIDAgMCA5IDQuNSA0LjUgMCAwIDAgMC05Wm0xNy41IDIwLjVhNC41IDQuNSAwIDEgMSA5IDAgNC41IDQuNSAwIDAgMS05IDBaTTIxLjYzIDcxLjhhMi4zMyAyLjMzIDAgMCAxIDIuMzMgMi4zNCAyLjM0IDIuMzQgMCAwIDEtMi4zMyAyLjM3IDIuMzggMi4zOCAwIDAgMS0yLjM3LTIuMzcgMi4zOCAyLjM4IDAgMCAxIDIuMzctMi4zM1ptMS43NiA4LjJ2MTZoLTMuNTJWODBoMy41MlptLTYuNDYgMTZIMi43OFY3My4yOGgzLjc1djE5LjE0aDEwLjRWOTZabTI2LjM5LTEuMDlWODBIMzkuOHYyLjE0YTYuMjYgNi4yNiAwIDAgMC01LjEyLTIuNDZjLTQuMzIgMC03LjY4IDMuNTgtNy42OCA4LjEgMCA0LjU0IDMuMzYgOC4xMiA3LjY4IDguMTIgMi4yIDAgNC4xNi0xLjA4IDUuMTItMi41djEuNDhjMCAzLjIzLTIuMTggNS00LjgzIDVhNy4wMyA3LjAzIDAgMCAxLTUuMzItMi4zNGwtMi4xNCAyLjUyYzEuNTcgMS43NiA0LjM1IDIuOTUgNy40OSAyLjk1IDQuNzMgMCA4LjMyLTIuNTMgOC4zMi04LjFabS0xMi43Ny03LjEzYTQuNyA0LjcgMCAwIDEgNC43Ny00LjkgNC43IDQuNyAwIDAgMSA0Ljc3IDQuOSA0LjcgNC43IDAgMCAxLTQuNzcgNC45IDQuNyA0LjcgMCAwIDEtNC43Ny00LjlaTTUxLjU4IDk2aC0zLjUyVjcyaDMuNTJ2MTAuMThjLjk2LTEuNiAyLjc4LTIuNSA0Ljg2LTIuNSAzLjcxIDAgNi4xMSAyLjYyIDYuMTEgNi42OVY5NmgtMy41MnYtOS4wNmMwLTIuNTItMS4yOC00LjA2LTMuMzMtNC4wNi0yLjMzIDAtNC4xMiAxLjgyLTQuMTIgNS4yNVY5NlptMjQuODYtLjJ2LTMuMTNjLS41Mi4yLTEuMjIuMzItMS45LjMyLTEuODIgMC0yLjY4LS43My0yLjY4LTIuNzJ2LTcuMTNoNC41OFY4MGgtNC41OHYtNC40NWgtMy41MlY4MGgtMy4zM3YzLjE0aDMuMzN2Ny43YzAgMy42MiAyLjQgNS4zMiA1LjQ3IDUuMzIgMS4wOSAwIDEuOTItLjEzIDIuNjMtLjM1Wm0yMC4zLjJIOTMuNGwtMy41Mi0xMC4zN0w4Ni4zOSA5NmgtMy4zMmwtNS4zOC0xNmgzLjcybDMuNDUgMTEgMy42OC0xMWgyLjY5bDMuNjUgMTEgMy40OS0xMWgzLjc0bC01LjM4IDE2Wm02Ljc2LThjMCA0Ljg2IDMuNDkgOC4zMiA4LjM1IDguMzIgMy4zNiAwIDUuODYtMS40NCA3LjMtMy43MWwtMi43LTEuOTJhNS4wMyA1LjAzIDAgMCAxLTQuNTcgMi40M2MtMi42NSAwLTQuNzctMS43My00LjkzLTQuMzVoMTIuNThjLjAzLS41MS4wMy0uOC4wMy0xLjE1IDAtNS4xNi0zLjUyLTcuOTQtNy43MS03Ljk0QTguMTIgOC4xMiAwIDAgMCAxMDMuNSA4OFptOC4yMi01LjM0YzIuMDUgMCAzLjkgMS4yNCA0LjI5IDMuNTVoLTguOWMuNDgtMi4zNyAyLjU2LTMuNTUgNC42MS0zLjU1Wm0xMy4yMi0xMC44NWEyLjMzIDIuMzMgMCAwIDEgMi4zNCAyLjMzIDIuMzQgMi4zNCAwIDAgMS0yLjM0IDIuMzcgMi4zOCAyLjM4IDAgMCAxLTIuMzctMi4zNyAyLjM4IDIuMzggMCAwIDEgMi4zNy0yLjMzWm0yMS43IDIzLjFWODBoLTMuNTN2Mi4xNGE2LjI2IDYuMjYgMCAwIDAtNS4xMi0yLjQ2Yy00LjMyIDAtNy42OCAzLjU4LTcuNjggOC4xIDAgNC41NCAzLjM2IDguMTIgNy42OCA4LjEyIDIuMiAwIDQuMTYtMS4wOCA1LjEyLTIuNXYxLjQ4YzAgMy4yMy0yLjE4IDUtNC44MyA1YTcuMDMgNy4wMyAwIDAgMS01LjMxLTIuMzRsLTIuMTUgMi41MmMxLjU3IDEuNzYgNC4zNiAyLjk1IDcuNSAyLjk1IDQuNzMgMCA4LjMxLTIuNTMgOC4zMS04LjFaTTEyNi43IDk2aC0zLjUyVjgwaDMuNTJ2MTZabTcuMTYtOC4yMmE0LjcgNC43IDAgMCAxIDQuNzctNC45IDQuNyA0LjcgMCAwIDEgNC43NyA0LjkgNC43IDQuNyAwIDAgMS00Ljc3IDQuOSA0LjcgNC43IDAgMCAxLTQuNzctNC45Wk0xNTQuOSA5NmgtMy41MlY3MmgzLjUydjEwLjE4Yy45Ni0xLjYgMi43OC0yLjUgNC44Ni0yLjUgMy43MSAwIDYuMTEgMi42MiA2LjExIDYuNjlWOTZoLTMuNTJ2LTkuMDZjMC0yLjUyLTEuMjgtNC4wNi0zLjMyLTQuMDYtMi4zNCAwLTQuMTMgMS44Mi00LjEzIDUuMjVWOTZabTI0Ljg2LS4ydi0zLjEzYy0uNTEuMi0xLjIyLjMyLTEuODkuMzItMS44MiAwLTIuNjktLjczLTIuNjktMi43MnYtNy4xM2g0LjU4VjgwaC00LjU4di00LjQ1aC0zLjUyVjgwaC0zLjMzdjMuMTRoMy4zM3Y3LjdjMCAzLjYyIDIuNCA1LjMyIDUuNDcgNS4zMiAxLjEgMCAxLjkyLS4xMyAyLjYzLS4zNVptMjEuNTkuNThhMTEuNjcgMTEuNjcgMCAwIDEtMTEuNzUtMTEuNzRjMC02LjU2IDUuMjItMTEuNzQgMTEuNzUtMTEuNzQgNC40NSAwIDguMjIgMi4yNyAxMC4yNCA1Ljc2bC0zLjIzIDEuODVhNy45NCA3Ljk0IDAgMCAwLTcuMDEtNCA3Ljk2IDcuOTYgMCAwIDAtNy45NyA4LjEzIDcuOTYgNy45NiAwIDAgMCA3Ljk3IDguMTMgNy45NCA3Ljk0IDAgMCAwIDctNGwzLjI0IDEuODVhMTEuNjYgMTEuNjYgMCAwIDEtMTAuMjQgNS43NlptMTMuNC0uMzhoMy41MnYtNy44N2MwLTMuNDMgMS44LTUuMjUgNC4xMy01LjI1IDIuMDUgMCAzLjMzIDEuNTQgMy4zMyA0LjA2Vjk2aDMuNTJ2LTkuNjNjMC00LjA3LTIuNC02LjY5LTYuMTEtNi42OS0yLjA4IDAtMy45LjktNC44NyAyLjVWNzJoLTMuNTJ2MjRabTI1LjU2LjMyYy00LjM4IDAtNy43LTMuNzQtNy43LTguMzJzMy4zMi04LjMyIDcuNy04LjMyYzIuMyAwIDQuMjMgMS4xOCA1LjEyIDIuNDZWODBoMy41MnYxNmgtMy41MnYtMi4xNGE2LjM4IDYuMzggMCAwIDEtNS4xMiAyLjQ2Wm0uNjQtMy4yYzIuODUgMCA0Ljc3LTIuMjQgNC43Ny01LjEycy0xLjkyLTUuMTItNC43Ny01LjEyYy0yLjg0IDAtNC43NiAyLjI0LTQuNzYgNS4xMnMxLjkxIDUuMTIgNC43NiA1LjEyWk0yNTMuNzEgOTZoMy41MnYtNy44YzAtMy4yIDEuODMtNC45IDMuODQtNC45LjY0IDAgMS4xNS4xIDEuNzYuMjh2LTMuNjFjLS40OC0uMS0uOTMtLjEzLTEuMzctLjEzYTQuNSA0LjUgMCAwIDAtNC4yMyAzVjgwaC0zLjUydjE2Wm0yMS43My0zLjMzdjMuMTRjLS43LjIyLTEuNTQuMzUtMi42My4zNS0zLjA3IDAtNS40Ny0xLjctNS40Ny01LjMxdi03LjcxaC0zLjMzVjgwaDMuMzN2LTQuNDVoMy41MlY4MGg0LjU4djMuMTRoLTQuNTh2Ny4xM2MwIDEuOTkuODYgMi43MiAyLjY5IDIuNzIuNjcgMCAxLjM3LS4xMyAxLjg5LS4zMlptMTQuMjEtMS4zMWMwLTIuNjItMS42Ni00LjAzLTQuNDgtNC44NmwtMS42My0uNDhjLTEuNTctLjQ1LTEuOTItMS4xMi0xLjkyLTEuOSAwLS45NSAxLjA5LTEuNSAyLjE1LTEuNSAxLjMgMCAyLjMzLjY0IDMuMDQgMS42NGwyLjQzLTEuODZjLTEuMTItMS43Ni0zLjAxLTIuNzItNS40MS0yLjcyLTMuMiAwLTUuNyAxLjczLTUuNzMgNC41OC0uMDMgMi4zNiAxLjQxIDQuMTIgNC4yIDQuOWwxLjQuMzhjMS45Mi41NyAyLjQ3IDEuMTIgMi40NyAyLjA0IDAgMS4xMi0xLjA2IDEuNy0yLjMgMS43LTEuNjQgMC0zLjItLjgtMy44NS0yLjJsLTIuNTkgMS44NWMxLjE1IDIuMjcgMy41OCAzLjM5IDYuNDMgMy4zOSAzLjMgMCA1LjgtMS44OSA1LjgtNC45NlptLTE0My4zOCAyMS40YzAgLjQ2LS4zNy44NC0uODMuODRhLjg2Ljg2IDAgMCAxLS44Ny0uODVjMC0uNDYuMzktLjg1Ljg3LS44NS40NiAwIC44My4zOS44My44NVptLS4yOSAxMS4yNGgtMS4xMnYtOGgxLjEydjhabS01Mi4wMi4xNmE0LjA0IDQuMDQgMCAwIDAgMy45OC00LjE2IDQuMDQgNC4wNCAwIDAgMC0zLjk4LTQuMTZjLTEuMjQgMC0yLjM5LjY0LTIuOTYgMS41VjExMmgtMS4xMnYxMkg5MXYtMS4zNGMuNTcuODYgMS43MiAxLjUgMi45NiAxLjVabS0uMTItMS4wNGMtMS43NCAwLTIuOTQtMS40LTIuOTQtMy4xMiAwLTEuNzMgMS4yLTMuMTIgMi45NC0zLjEyIDEuNzUgMCAyLjk1IDEuNCAyLjk1IDMuMTIgMCAxLjczLTEuMiAzLjEyLTIuOTUgMy4xMlptNy45IDQuMjIgNS4zLTExLjM0aC0xLjI2bC0yLjkzIDYuMzUtMi45My02LjM1aC0xLjI0bDMuNTUgNy42LTEuNzYgMy43NGgxLjI2Wk0xMTUuMyAxMjRoLTEuMnYtMTAuMmgtMy42OHYtMS4xNmg4LjU2djEuMTVoLTMuNjhWMTI0Wm0zLjgyIDBoMS4xMnYtNC4wMmMwLTIuMDQgMS4yMy0yLjk0IDIuMjItMi45NC4yNCAwIC40NS4wMy42Ny4xMXYtMS4xN2EyLjQ0IDIuNDQgMCAwIDAtMi45IDEuNjZWMTE2aC0xLjExdjhabTExLjcyLTEuMzRhMy42NCAzLjY0IDAgMCAxLTIuOTYgMS41IDQuMDQgNC4wNCAwIDAgMS0zLjk4LTQuMTYgNC4wNCA0LjA0IDAgMCAxIDMuOTgtNC4xNmMxLjIzIDAgMi4zOS42NCAyLjk2IDEuNVYxMTZoMS4xMnY4aC0xLjEydi0xLjM0Wm0tNS44LTIuNjZjMCAxLjczIDEuMiAzLjEyIDIuOTUgMy4xMiAxLjc1IDAgMi45NS0xLjQgMi45NS0zLjEyIDAtMS43My0xLjItMy4xMi0yLjk1LTMuMTItMS43NCAwLTIuOTQgMS40LTIuOTQgMy4xMlptMTIuOTggNC4xNmMxLjIzIDAgMi4zOS0uNjQgMi45Ni0xLjVWMTI0aDEuMTJ2LTEySDE0MXY1LjM0YTMuNjQgMy42NCAwIDAgMC0yLjk2LTEuNSA0LjA0IDQuMDQgMCAwIDAtMy45OCA0LjE2IDQuMDQgNC4wNCAwIDAgMCAzLjk4IDQuMTZabS4xMS0xLjA0Yy0xLjc0IDAtMi45NC0xLjQtMi45NC0zLjEyIDAtMS43MyAxLjItMy4xMiAyLjk0LTMuMTIgMS43NSAwIDIuOTUgMS40IDIuOTUgMy4xMiAwIDEuNzMtMS4yIDMuMTItMi45NSAzLjEyWm0xMC42Ljg4aDEuMTF2LTMuOThjMC0xLjk5IDEuMS0zLjE0IDIuNS0zLjE0IDEuMTkgMCAyLjAyLjg2IDIuMDIgMi4yN1YxMjRoMS4xMnYtNWMwLTEuOTYtMS4yNy0zLjE2LTMuMDEtMy4xNi0xLjA0IDAtMi4wNS40NS0yLjYzIDEuNVYxMTZoLTEuMTF2OFptMTYuNzEtLjQyYzAgMi42MS0xLjcyIDMuOTItMy45NSAzLjkyLTEuODQgMC0zLjE3LS44My0zLjc3LTEuNzRsLjg4LS43NWEzLjQgMy40IDAgMCAwIDIuOSAxLjQ1YzEuMzcgMCAyLjgyLS44MyAyLjgyLTIuOTR2LTEuMDJjLS41Ny44Ni0xLjcgMS41LTIuOTIgMS41YTMuOTQgMy45NCAwIDAgMS0zLjk2LTQuMDggMy45NCAzLjk0IDAgMCAxIDMuOTYtNC4wOGMxLjIzIDAgMi4zNS42NCAyLjkyIDEuNVYxMTZoMS4xMnY3LjU4Wm0tNi44NC0zLjY2YzAgMS43MyAxLjE2IDMuMDQgMi45IDMuMDQgMS43NSAwIDIuOTItMS4zMSAyLjkyLTMuMDRzLTEuMTctMy4wNC0yLjkxLTMuMDRjLTEuNzUgMC0yLjkxIDEuMzEtMi45MSAzLjA0Wm0xMy41NSA0LjA4IDQuODgtMTEuMzZoLTEuMzVsLTQuMDMgOS4zOC00LjAzLTkuMzhoLTEuMzZsNC45IDExLjM2aC45OVptNy44NC0xMS4yNWMwIC40Ny0uMzcuODUtLjgzLjg1YS44Ni44NiAwIDAgMS0uODYtLjg1YzAtLjQ2LjM4LS44NS44Ni0uODUuNDcgMCAuODMuMzkuODMuODVabS0uMjggMTEuMjVoLTEuMTN2LThoMS4xM3Y4Wm02LjIuMTZhMy45IDMuOSAwIDAgMCAzLjU2LTEuOTVsLS45MS0uNmEyLjc4IDIuNzggMCAwIDEtMi42NCAxLjUxIDIuODcgMi44NyAwIDAgMS0yLjk2LTIuOTNoNi43NXYtLjNjLS4wMi0yLjU2LTEuNjgtNC4wNS0zLjc2LTQuMDVhNC4wNSA0LjA1IDAgMCAwLTQuMTUgNC4xNmMwIDIuMyAxLjYgNC4xNiA0LjEyIDQuMTZabS0uMDEtNy4yOGMxLjM0IDAgMi40NS44OCAyLjY0IDIuMzJoLTUuNDlhMi44NCAyLjg0IDAgMCAxIDIuODUtMi4zMlptMTMuNTUgNy4xMmgtLjkzbC0yLjEtNi4xLTIuMTQgNi4xaC0uOTJsLTIuNzQtOGgxLjE1bDIuMDggNi4wOCAyLjExLTYuMDhoLjg3bDIuMTEgNi4wOCAyLjA4LTYuMDhoMS4xN2wtMi43NCA4WiIgZmlsbD0iY3VycmVudENvbG9yIj48L3BhdGg+PC9zdmc+';
-const imageWatermark = new ImageWatermark(imageDataUrl, {
+createImageWatermark(chart.panes()[0], imageDataUrl, {
 	alpha: 0.5,
 	padding: 20,
 });
-
-const firstPane = chart.panes()[0];
-firstPane.attachPrimitive(imageWatermark);
 // highlight-end
 
 const lineSeries = chart.addAreaSeries({
diff --git a/website/tutorials/how_to/watermark-simple.js b/website/tutorials/how_to/watermark-simple.js
index 73e09bfded..d2fbbfaabb 100644
--- a/website/tutorials/how_to/watermark-simple.js
+++ b/website/tutorials/how_to/watermark-simple.js
@@ -14,9 +14,9 @@ const chartOptions = {
 const chart = createChart(document.getElementById('container'), chartOptions);
 
 // remove-line
-/** @type {import('lightweight-charts').TextWatermark} */
+/** @type {import('lightweight-charts').createTextWatermark} */
 // highlight-start
-const textWatermark = new TextWatermark({
+createTextWatermark(chart.panes()[0], {
 	horzAlign: 'center',
 	vertAlign: 'center',
 	lines: [
@@ -27,8 +27,6 @@ const textWatermark = new TextWatermark({
 		},
 	],
 });
-const firstPane = chart.panes()[0];
-firstPane.attachPrimitive(textWatermark);
 // highlight-end
 
 const lineSeries = chart.addAreaSeries({
diff --git a/website/tutorials/how_to/watermark.mdx b/website/tutorials/how_to/watermark.mdx
index 6fe89b2a79..a956272616 100644
--- a/website/tutorials/how_to/watermark.mdx
+++ b/website/tutorials/how_to/watermark.mdx
@@ -16,13 +16,14 @@ included below.
 
 ## Short answer
 
-A simple text watermark can be configured and added by using the [`TextWatermark`](/docs/next/api/classes/TextWatermark) pane primitive exported
+A simple text watermark can be configured and added by using the [`createTextWatermark`](/docs/next/api#createTextWatermark) function exported
 from the library as follows:
 
 ```js
-import { TextWatermark } from 'lightweight-charts';
+import { createTextWatermark } from 'lightweight-charts';
 
-const textWatermark = new TextWatermark({
+const firstPane = chart.panes()[0];
+const textWatermark = createTextWatermark(firstPane, {
     horzAlign: 'center',
     vertAlign: 'center',
     lines: [
@@ -34,8 +35,6 @@ const textWatermark = new TextWatermark({
     ],
 });
 
-const firstPane = chart.panes()[0];
-firstPane.attachPrimitive(textWatermark);
 ```
 
 The options available for the watermark are: [TextWatermark Options](/docs/next/api/interfaces/TextWatermarkOptions).
@@ -44,7 +43,7 @@ You can see full [working examples](#examples) below.
 
 ## Resources
 
-- [`TextWatermark` pane primitive](/docs/next/api/classes/TextWatermark).
+- [`createTextWatermark` function](/docs/next/api#createTextWatermark).
 - [TextWatermark Options](/docs/next/api/interfaces/TextWatermarkOptions)
 
 ## Examples
@@ -65,19 +64,17 @@ import codeSimple from "!!raw-loader!./watermark-simple.js";
 
 ### Image Watermark Example
 
-If a simple text watermark doesn't meet your requirements then you can use the [`ImageWatermark`](/docs/next/api/classes/ImageWatermark) pane primitive exported
+If a simple text watermark doesn't meet your requirements then you can use the Image watermark via [`createImageWatermark`](/docs/next/api#createImageWatermark) function exported
 from the library as follows:
 
 ```js
-import { ImageWatermark } from 'lightweight-charts';
+import { createImageWatermark } from 'lightweight-charts';
 
-const imageWatermark = new ImageWatermark('/images/my-image.png', {
+const firstPane = chart.panes()[0];
+const imageWatermark = createImageWatermark(firstPane, '/images/my-image.png', {
     alpha: 0.5,
     padding: 20,
 });
-
-const firstPane = chart.panes()[0];
-firstPane.attachPrimitive(imageWatermark);
 ```
 
 The options available for the watermark are: [ImageWatermark Options](/docs/next/api/interfaces/ImageWatermarkOptions).
@@ -86,7 +83,7 @@ You can see full [working examples](#examples) below.
 
 ## Resources
 
-- [`ImageWatermark` pane primitive](/docs/next/api/classes/ImageWatermark).
+- [`createImageWatermark` pane primitive](/docs/next/api#createImageWatermark).
 - [ImageWatermark Options](/docs/next/api/interfaces/ImageWatermarkOptions)
 
 :::tip