Create and modify annotations in Blazor PDF Viewer

12 May 20264 minutes to read

The PDF Viewer annotation tools add, edit, and manage markups across documents. This page provides an overview with quick navigation to each annotation type and common creation and modification workflows.

Quick navigation to annotation types

Jump directly to a specific annotation type for detailed usage and examples:

Text Markup annotations:

Shape annotations:

Measurement annotations:

Other annotations:

NOTE

Each annotation type page includes both UI steps and programmatic examples specific to that type.

Create annotations

Create via UI

  • Open the annotation toolbar in the PDF Viewer.
  • Choose the required tool (for example, Shape, Free text, Ink, Stamp, Redaction).
  • Click or drag on the page to place the annotation.

Annotation toolbar

Note:

  • When pan mode is active and a shape or stamp tool is selected, the viewer switches to text select mode automatically.
  • Property pickers in the annotation toolbar let users choose color, stroke color, thickness, and opacity while drawing

Create programmatically

Creation patterns vary by type. Refer to the individual annotation pages for tailored code.

Example: creating a Rectangle annotation using AddAnnotationAsync.

@using Syncfusion.Blazor.Buttons
@using Syncfusion.Blazor.SfPdfViewer

<SfButton OnClick="@AddShapeAnnotationAsync">Add Shape Annotation</SfButton>
<SfPdfViewer2 Width="100%" Height="100%" DocumentPath="@DocumentPath" @ref="@Viewer" />

@code {
    SfPdfViewer2 Viewer;
    public string DocumentPath { get; set; } = "wwwroot/Data/Shape_Annotation.pdf";

    public async void AddShapeAnnotationAsync(MouseEventArgs args)
    {
        PdfAnnotation annotation = new PdfAnnotation();
        // Set the Shape annotation type like Rectangle, Line, Arrow, Circle, Polygon.
        annotation.Type = AnnotationType.Rectangle;
        // Page numbers start from 0. So, if set to 0 it represents page 1.
        annotation.PageNumber = 0;

        // Bound of the rectangle annotation
        annotation.Bound = new Bound();
        annotation.Bound.X = 200;
        annotation.Bound.Y = 150;
        annotation.Bound.Width = 300;
        annotation.Bound.Height = 100;
        // Add rectangle annotation
        await Viewer.AddAnnotationAsync(annotation);
    }
}

Refer to the individual annotation pages for enabling draw modes from UI buttons and other type-specific creation samples.

Modify annotations

Modify via UI

Use the annotation toolbar after selecting an annotation:

  • Edit color: change the fill or text color (when applicable)

Edit color

  • Edit stroke color: change the border or line color (shape and line types)

Edit stroke color

  • Edit thickness: adjust the border or line thickness

Edit thickness

  • Edit opacity: change transparency

Edit opacity

Additional options such as Line Properties (for line/arrow) are available from the context menu (right-click > Properties) where supported.

Modify programmatically

Use EditAnnotationAsync to apply changes to an existing annotation. Common flow:

  • Locate the target annotation from GetAnnotationsAsync().
  • Update the desired properties.
  • Call EditAnnotationAsync with the modified object.
@using Syncfusion.Blazor.Buttons
@using Syncfusion.Blazor.SfPdfViewer

<SfButton OnClick="@EditShapeAnnotationAsync">Edit Shape Annotation</SfButton>
<SfPdfViewer2 Width="100%" Height="100%" DocumentPath="@DocumentPath" @ref="@Viewer" />

@code {
    SfPdfViewer2 Viewer;
    public string DocumentPath { get; set; } = "wwwroot/Data/Shape_Annotation.pdf";

    public async void EditShapeAnnotationAsync(MouseEventArgs args)
    {
        // Get annotation collection
        List<PdfAnnotation> annotationCollection = await Viewer.GetAnnotationsAsync();
        // Select the annotation want to edit
        PdfAnnotation annotation = annotationCollection[0];
        // Change the fill color of rectangle annotation
        annotation.FillColor = "#FFFF00";
        // Change the stroke color of rectangle annotation
        annotation.StrokeColor = "#0000FF";
        // Change the thickness of rectangle annotation
        annotation.Thickness = 3;
        // Change the Opacity (0 to 1) of rectangle annotation
        annotation.Opacity = 0.5;
        // Edit the rectangle shape annotation
        await Viewer.EditAnnotationAsync(annotation);
    }
}

NOTE

For type-specific creation and edit examples (for example, editing line endings, moving stamps, or updating sticky note bounds), see the corresponding annotation type page linked above.

See also