# Square Annotation ## Content A square annotation displays a rectangle or square on the page. When opened, the annotation displays a pop-up window containing the associated note. The shape of the annotation depends on the dimensions of its bounding rectangle, so it can appear as either a square or a rectangle. ![Square-Annotation.png](https://cdn.mescius.io/document-site-files/images/706ce9b9-7836-44f3-b62b-7d4408387ae3/Square-Annotation-20260424.02b007.png?width=720) Use the [SquareAnnotation](https://developer.mescius.com/document-solutions/javascript-pdf-api/api/classes/SquareAnnotation) class to add square annotations to a PDF document. >type=note > **Note:** The examples on this page use helper functions from the [Snippet Helpers](https://developer.mescius.com/document-solutions/javascript-pdf-api/docs/snippet-helpers) module. These utilities are provided only to simplify the examples and are not part of the DsPdfJS API. ```javascript async function squareAnnotation() { pushObjectManager(); const doc = new PdfDocument(); const page = doc.newPage(); let rc = { x: 50, y: 50, width: 250, height: 40 }; const layout = new Layout({ runs: [{ text: "A square annotation drawn with a 3pt wide orange line around this note has a rich text " + "associated with it.", font: Font.getPdfFont(StandardPdfFont.Times), fontSize: 11 }], maxWidth: rc.width, maxHeight: rc.height }); page.context.drawLayout(layout, rc.x, rc.y); rc = Util.inflate(rc, 10, 10) //Create an instance of SquareAnnotation class and set its relevant properties const squareAnnot = new SquareAnnotation(); squareAnnot.userName = "Jaime Smith"; squareAnnot.rect = rc; squareAnnot.lineWidth = 3; squareAnnot.color = "Orange"; squareAnnot.richText = "

This rich text is associated with the square annotation around a text note.

"; page.annotations.add(squareAnnot); //Add the square annotation const docData = doc.savePdf(); Util.saveFile("SquareAnnotation.pdf", docData); ```