# Collaboration: New Annotations Sample > We just published a new sample to our live demos that shows how to use the annotation feature of the online DocumentViewer. It shows how to load and save the annotations as separate JSON files. - **Author:** Bjoern Meyer - **Published:** 2021-05-05 - **Modified:** 2025-11-16 - **Description:** We just published a new sample to our live demos that shows how to use the annotation feature of the online DocumentViewer. It shows how to load and save the annotations as separate JSON files. - **2 min read** (362 words) - **Tags:** - Angular - ASP.NET - Collaboration - Document Viewer - **Web URL:** https://www.textcontrol.com/blog/2021/05/05/collaboration-new-annotations-sample/ - **LLMs URL:** https://www.textcontrol.com/blog/2021/05/05/collaboration-new-annotations-sample/llms.txt - **LLMs-Full URL:** https://www.textcontrol.com/blog/2021/05/05/collaboration-new-annotations-sample/llms-full.txt --- The latest release version of the TX Text Control DocumentViewer for ASP.NET, ASP.NET Core and Angular comes with document collaboration features such as annotations and comments. It allows you to add and share annotations from different users to any type of document supported by TX Text Control including PDF, DOC, DOCX, RTF and the internal TX Text Control format (TX). This allows an easy integration of document collaboration workflow features into your TX Text Control based applications. The DocumentViewer can be initialized with a user name that defines the current user using the *UserNames* property: ```
@Html.TXTextControl().DocumentViewer(settings => { settings.DocumentPath = Server.MapPath("~/App_Data/Documents/invoice_results.docx"); settings.Dock = DocumentViewerSettings.DockStyle.Fill; settings.IsSelectionActivated = true; settings.ShowThumbnailPane = false; settings.UserNames = new string[] { "Tim Typer" }; }).Render()
``` When the demo is initialized, the annotation toolbar is opened automatically to show the annotations in the sidebar: ![DocumentViewer annotations](https://s1-www.textcontrol.com/assets/dist/blog/2021/05/05/a/assets/annotations1.webp "DocumentViewer annotations") The annotations are not stored within the document which allows you to share annotations with all document types that are supported including DOCX, DOC, RTF and PDF. On loading the viewer, the annotation JSON is loaded using the JavaScript method *annotation.load*: ``` window.addEventListener("documentViewerLoaded", function () { var annotationJSON = "[[{ \"pen\":{\"width\":18,\"color\":\"rgba(255, 255, 0, .5)\",\"cap\":\"butt\" [...]"; TXDocumentViewer.annotations.load(annotationJSON); }); ``` You can add additional annotations and comments to the document: ![DocumentViewer annotations](https://s1-www.textcontrol.com/assets/dist/blog/2021/05/05/a/assets/annotations2.webp "DocumentViewer annotations") The two green buttons at the bottom of the demo show how to save and load the annotations: ![DocumentViewer annotations](https://s1-www.textcontrol.com/assets/dist/blog/2021/05/05/a/assets/annotations3.webp "DocumentViewer annotations") On clicking *Export Annotations JSON*, the complete annotations are serialized as JSON and copied into a text area. Using the button *Load Annotations JSON*, you can load the exported annotations back into the viewer. ``` function exportAnnotations() { $("#taAnnotations").val(TXDocumentViewer.annotations.export()); } function loadAnnotations() { var annotationData = $("#taAnnotations").val(); try { TXDocumentViewer.annotations.load(annotationData); } catch (error) { $('.alert').show().delay(3000).fadeOut(300); } } ``` You can try this on your own by launching the live demo: [Live Demo ](https://demos.textcontrol.com/chapter/topic/DocumentViewer/ViewerAnnotations) --- ## About Bjoern Meyer As CEO, Bjoern is the visionary behind our strategic direction and business development, bridging the gap between our customers and engineering teams. His deep passion for coding and web technologies drives the creation of innovative products. If you're at a tech conference, be sure to stop by our booth - you'll most likely meet Bjoern in person. With an advanced graduate degree (Dipl. Inf.) in Computer Science, specializing in AI, from the University of Bremen, Bjoern brings significant expertise to his role. In his spare time, Bjoern enjoys running, paragliding, mountain biking, and playing the piano. - [LinkedIn](https://www.linkedin.com/in/bjoernmeyer/) - [X](https://x.com/txbjoern) - [GitHub](https://github.com/bjoerntx) --- ## Related Posts - [Building an ASP.NET Core Backend (Linux and Windows) for the Document Editor and Viewer](https://www.textcontrol.com/blog/2025/03/26/building-an-asp-net-core-backend-for-the-document-editor-and-viewer/llms.txt) - [Adding and Sharing Annotations across Document Types using the Document Viewer in ASP.NET Core C#](https://www.textcontrol.com/blog/2024/04/19/adding-and-sharing-annotations-across-document-types-using-the-document-viewer-in-asp-net-core-c-sharp/llms.txt) - [Building an ASP.NET Core Backend Application to Host the Document Editor and Document Viewer](https://www.textcontrol.com/blog/2024/03/14/building-an-asp-net-core-backend-application-to-host-the-document-editor-and-document-viewer/llms.txt) - [Customizing Electronic Signature Fonts for Typed Signatures in Angular and ASP.NET Core](https://www.textcontrol.com/blog/2024/03/11/customizing-electronic-signature-fonts-for-typed-signatures-in-angular-and-asp-net-core/llms.txt) - [Preview: PDF.js Support for Form Fields, Selections and Annotations](https://www.textcontrol.com/blog/2023/04/18/preview-pdfjs-support-for-form-fields-selections-and-annotations/llms.txt) - [What is the Difference between Electronic and Digital Signatures?](https://www.textcontrol.com/blog/2022/10/20/what-is-the-difference-between-electronic-and-digital-signatures/llms.txt) - [Merging Signature Annotations into Documents](https://www.textcontrol.com/blog/2022/10/19/merging-signature-annotations-into-documents/llms.txt) - [Using Document Viewer Collaboration Features in Angular](https://www.textcontrol.com/blog/2022/07/28/using-document-viewer-collaboration-features-in-angular/llms.txt) - [Document Viewer: Processing Tracked Changes](https://www.textcontrol.com/blog/2022/03/09/document-viewer-processing-tracked-changes/llms.txt) - [DocumentViewer 29.2 (29.0.302.500) Final Released](https://www.textcontrol.com/blog/2021/07/27/documentviewer-29-302-final-released/llms.txt) - [Smart Documents: Embedding Documents in PDF Containers](https://www.textcontrol.com/blog/2021/06/24/smart-document-containers-embedding-documents-in-pdf/llms.txt) - [DocumentViewer Annotations: Highlight Text](https://www.textcontrol.com/blog/2021/06/18/document-viewer-annotations-highlight-text/llms.txt) - [Advantages of a Modern Contract Lifecycle Management](https://www.textcontrol.com/blog/2021/05/07/advantages-of-a-modern-contract-lifecycle-management/llms.txt) - [Text Control eSign Demo: Reusable Templates](https://www.textcontrol.com/blog/2021/04/30/text-control-esign-demo-reusable-templates/llms.txt) - [eSign Online Demo: Contract Collaboration Workflows](https://www.textcontrol.com/blog/2021/04/23/esign-online-demo-contract-collaboration-workflows/llms.txt) - [High-Performance Text Replacement in Large DOCX Files using C# .NET](https://www.textcontrol.com/blog/2025/07/30/high-performance-text-replacement-in-large-docx-files-using-csharp-dotnet/llms.txt) - [Document Viewer 33.2.1 Released: New Event and Bug Fixes](https://www.textcontrol.com/blog/2025/07/30/document-viewer-33-2-1-released-new-event-and-bug-fixes/llms.txt) - [TX Text Control Document Editor and Viewer for Blazor Released](https://www.textcontrol.com/blog/2025/03/25/tx-text-control-document-editor-and-viewer-for-blazor-released/llms.txt) - [Getting Started: Document Viewer for Blazor in ASP.NET Core](https://www.textcontrol.com/blog/2025/03/25/getting-started-document-viewer-for-blazor-in-asp-net-core/llms.txt) - [Getting Started: Document Viewer Version 33.0 with Angular CLI 19.0](https://www.textcontrol.com/blog/2025/03/18/getting-started-document-viewer-version-33-0-with-angular-cli-19-0/llms.txt) - [Announcing Our Work on a Blazor Component for Document Editing and Viewing](https://www.textcontrol.com/blog/2025/01/24/announcing-our-work-on-a-blazor-component-for-document-editing-and-viewing/llms.txt) - [Impressions from .NET Developer Conference DDC 2024](https://www.textcontrol.com/blog/2024/11/28/impressions-from-net-developer-conference-ddc-2024/llms.txt) - [Back from Florida: Impressions from VSLive! Orlando 2024](https://www.textcontrol.com/blog/2024/11/21/back-from-florida-impressions-from-vslive-orlando-2024/llms.txt) - [Getting Started: Document Viewer with Angular CLI v18.0](https://www.textcontrol.com/blog/2024/11/15/getting-started-document-viewer-with-angular-cli-v18-0/llms.txt) - [Preparing Documents for E-Signing for Multiple Signers in .NET C#](https://www.textcontrol.com/blog/2024/11/13/preparing-documents-for-e-signing-for-multiple-signers-in-net-c-sharp/llms.txt)