Arrow Annotation (Shape) in Blazor SfPdfViewer Component

12 May 20269 minutes to read

Arrow annotations let users point, direct attention, or indicate flow on PDFs—useful for callouts, direction markers, and connectors during reviews. You can add arrows from the toolbar, switch to arrow mode programmatically, customize appearance, edit/delete them in the UI, and export them with the document.

Arrow overview

Enable Arrow Annotation in the Viewer

To enable Arrow annotations in the Blazor SfPdfViewer, configure the component with annotation support.

@using Syncfusion.Blazor.SfPdfViewer

<SfPdfViewer2 DocumentPath="@DocumentPath" 
              Width="100%" 
              Height="100%">
</SfPdfViewer2>

@code {
    private string DocumentPath { get; set; } = "wwwroot/Data/PDF_Succinctly.pdf";
}

Add Arrow Annotation

Add Arrow Annotation Using the Toolbar

  1. Open the Annotation Toolbar.
  2. Select Shapes → Arrow.
  3. Click and drag on the PDF page to draw the arrow.

Shape toolbar

NOTE

When in Pan mode, selecting a shape tool automatically switches the viewer to selection mode for smooth interaction.

Enable Arrow Mode

Switch the viewer into arrow mode using SetAnnotationModeAsync(AnnotationType.Arrow).

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

<SfButton OnClick="EnableArrowMode">Enable Arrow Mode</SfButton>
<SfPdfViewer2 DocumentPath="@DocumentPath" 
              @ref="viewer"
              Width="100%" 
              Height="100%">
</SfPdfViewer2>

@code {
    SfPdfViewer2 viewer;
    private string DocumentPath { get; set; } = "wwwroot/Data/PDF_Succinctly.pdf";

    public async void EnableArrowMode(MouseEventArgs args)
    {
        await viewer.SetAnnotationModeAsync(AnnotationType.Arrow);
    }
}

Exit Arrow Mode

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

<SfButton OnClick="ExitArrowMode">Exit Arrow Mode</SfButton>
<SfPdfViewer2 DocumentPath="@DocumentPath" 
              @ref="viewer"
              Width="100%" 
              Height="100%">
</SfPdfViewer2>

@code {
    SfPdfViewer2 viewer;
    private string DocumentPath { get; set; } = "wwwroot/Data/PDF_Succinctly.pdf";

    public async void ExitArrowMode(MouseEventArgs args)
    {
        await viewer.SetAnnotationModeAsync(AnnotationType.None);
    }
}

Add Arrow Programmatically

Use the AddAnnotationAsync API to draw an arrow at a specific location (defined by two VertexPoints).

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

<SfButton OnClick="AddArrow">Add Arrow</SfButton>
<SfPdfViewer2 DocumentPath="@DocumentPath" 
              @ref="viewer"
              Width="100%" 
              Height="100%">
</SfPdfViewer2>

@code {
    SfPdfViewer2 viewer;
    private string DocumentPath { get; set; } = "wwwroot/Data/PDF_Succinctly.pdf";

    public async void AddArrow(MouseEventArgs args)
    {
        PdfAnnotation annotation = new PdfAnnotation();
        annotation.Type = AnnotationType.Arrow;
        annotation.PageNumber = 0;
        
        List<VertexPoint> vertexPoints = new List<VertexPoint>();
        vertexPoints.Add(new VertexPoint() { X = 200, Y = 370 });
        vertexPoints.Add(new VertexPoint() { X = 350, Y = 370 });
        annotation.VertexPoints = vertexPoints;
        
        await viewer.AddAnnotationAsync(annotation);
    }
}

Customize Arrow Appearance

Configure default arrow appearance (fill color, stroke color, thickness, opacity) using the ArrowSettings property.

@using Syncfusion.Blazor.SfPdfViewer

<SfPdfViewer2 DocumentPath="@DocumentPath"
              @ref="viewer"
              Width="100%"
              Height="100%"
              ArrowSettings="@ArrowSettings">
</SfPdfViewer2>

@code {
    SfPdfViewer2 viewer;
    private string DocumentPath { get; set; } = "wwwroot/Data/PDF_Succinctly.pdf";

    PdfViewerArrowSettings ArrowSettings = new PdfViewerArrowSettings
    {
        FillColor = "#ffff00",
        StrokeColor = "#0066ff",
        Thickness = 2,
        Opacity = 0.9
    };
}

NOTE

For Line and Arrow annotations, Fill Color is available only when an arrowhead style is applied at the Start or End. If both are None, lines do not render fill and the Fill option remains disabled.

Manage Arrow (Edit, Move, Resize, Delete)

Edit Arrow

Edit Arrow (UI)

  • Select an Arrow to view resize handles.
  • Drag endpoints to adjust length/angle.
  • Edit stroke color, opacity, and thickness using the annotation toolbar.

Use the annotation toolbar:

  • Edit fill Color tool
    Edit fill color

  • Edit Stroke Color tool
    Edit color

  • Edit Opacity slider
    Edit opacity

  • Line Properties
    Open the Line Properties dialog via Right Click → Properties.

Line properties dialog

Edit Arrow Programmatically

Modify an existing Arrow programmatically using EditAnnotationAsync().

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

<SfButton OnClick="EditArrowProgrammatically">Edit Arrow</SfButton>
<SfPdfViewer2 DocumentPath="@DocumentPath" 
              @ref="viewer"
              Width="100%" 
              Height="100%">
</SfPdfViewer2>

@code {
    SfPdfViewer2 viewer;
    private string DocumentPath { get; set; } = "wwwroot/Data/PDF_Succinctly.pdf";

    public async void EditArrowProgrammatically(MouseEventArgs args)
    {
        List<PdfAnnotation> annotationCollection = await viewer.GetAnnotationsAsync();
        foreach (var annot in annotationCollection)
        {
            if (annot.Type == AnnotationType.Arrow)
            {
                annot.StrokeColor = "#0000ff";
                annot.Thickness = 2;
                annot.FillColor = "#ffff00";
                await viewer.EditAnnotationAsync(annot);
                break;
            }
        }
    }
}

Delete Arrow

The PDF Viewer supports deleting existing annotations through the UI and API.
See Delete Annotation for full behavior and workflows.

Comments

Use the Comments panel to add, view, and reply to threaded discussions linked to arrow annotations. It provides a dedicated interface for collaboration and review within the PDF Viewer.

Set properties while adding Individual Annotation

Set properties for individual arrow annotations by passing values directly during AddAnnotationAsync.

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

<SfButton OnClick="AddMultipleArrows">Add Multiple Arrows</SfButton>
<SfPdfViewer2 DocumentPath="@DocumentPath" 
              @ref="viewer"
              Width="100%" 
              Height="100%">
</SfPdfViewer2>

@code {
    SfPdfViewer2 viewer;
    private string DocumentPath { get; set; } = "wwwroot/Data/PDF_Succinctly.pdf";

    public async void AddMultipleArrows(MouseEventArgs args)
    {
        // Arrow 1
        PdfAnnotation annotation1 = new PdfAnnotation();
        annotation1.Type = AnnotationType.Arrow;
        annotation1.PageNumber = 0;
        List<VertexPoint> vertexPoints1 = new List<VertexPoint>();
        vertexPoints1.Add(new VertexPoint() { X = 200, Y = 230 });
        vertexPoints1.Add(new VertexPoint() { X = 350, Y = 230 });
        annotation1.VertexPoints = vertexPoints1;
        annotation1.FillColor = "#ffff00";
        annotation1.StrokeColor = "#0066ff";
        annotation1.Thickness = 2;
        annotation1.Opacity = 0.9;
        annotation1.Author = "User 1";
        await viewer.AddAnnotationAsync(annotation1);

        // Arrow 2
        PdfAnnotation annotation2 = new PdfAnnotation();
        annotation2.Type = AnnotationType.Arrow;
        annotation2.PageNumber = 0;
        List<VertexPoint> vertexPoints2 = new List<VertexPoint>();
        vertexPoints2.Add(new VertexPoint() { X = 220, Y = 300 });
        vertexPoints2.Add(new VertexPoint() { X = 400, Y = 300 });
        annotation2.VertexPoints = vertexPoints2;
        annotation2.FillColor = "#ffef00";
        annotation2.StrokeColor = "#ff1010";
        annotation2.Thickness = 3;
        annotation2.Opacity = 0.9;
        annotation2.Author = "User 2";
        await viewer.AddAnnotationAsync(annotation2);
    }
}

Disable Arrow Annotation

Disable shape annotations (Line, Arrow, Rectangle, Circle, Polygon) using the EnableShapeAnnotation property.

@using Syncfusion.Blazor.SfPdfViewer

<SfPdfViewer2 DocumentPath="@DocumentPath"
              EnableShapeAnnotation="false"
              Width="100%"
              Height="100%">
</SfPdfViewer2>

@code {
    private string DocumentPath { get; set; } = "wwwroot/Data/PDF_Succinctly.pdf";
}

Handle Arrow Events

The PDF viewer provides annotation life-cycle events that notify when Arrow annotations are added, modified, selected, or removed.
For the full list of available events and their descriptions, see Annotation Events

Export and Import

The PDF Viewer supports exporting and importing annotations. For details on supported formats and workflows, see Export and Import annotations.

See Also