Create a blank "React and ASP.NET Core" application.

• Open Visual Studio .NET 2026 and create a new application of "React and ASP.NET Core" type:
  
  
• Configure the application to use .NET 10.0:
  

"ReactApp1.Server" project: Add references to the Vintasoft nuget-packages to "ReactApp1.Server" project.

"ReactApp1.Server" project: Specify drawing engine, which should be used by VintaSoft Imaging .NET SDK for drawing of 2D graphics.

• Add reference to the "Vintasoft.Imaging.Drawing.SkiaSharp" nuget-package. Reference to the "SkiaSharp" nuget-package version 3.119.0 will be added automatically.
  
• Open "Program.cs" file in "ReactApp1.Server" project, add code line "Vintasoft.Imaging.Drawing.SkiaSharp.SkiaSharpDrawingFactory.SetAsDefault();" at the beginning of file - added code specifies that VintaSoft Imaging .NET SDK should use SkiaSharp library for drawing of 2D graphics.

• Add reference to the "Vintasoft.Imaging.Gdi" nuget-package.
  
• Open "Program.cs" file in "ReactApp1.Server" project, add code line "Vintasoft.Imaging.Drawing.Gdi.GdiGraphicsFactory.SetAsDefault();" at the beginning of file - added code specifies that VintaSoft Imaging .NET SDK should use System.Drawing library for drawing of 2D graphics.

"ReactApp1.Server" project: Create web services, which allow to upload/download file, manage image collection, get information about images, get thumbnails, render image tiles, extract/search text and annotate document.

• Create web service that allows to upload/download file

  • Press the right mouse button on the "Controllers" folder and select the "Add => Controller..." menu from context menu
    
  • Select "Empty API controller" template, set the controller name to the "MyVintasoftFileApiController" and press the "Add" button
    
  • Specify that MyVintasoftFileApiController class is derived from Vintasoft.Imaging.AspNetCore.ApiControllers.VintasoftFileApiController class
    
    Here are source codes of MyVintasoftFileApiController class:
    
    • C#

    namespace AngularApp1.Server.Controllers
    {
        public class MyVintasoftFileApiController : Vintasoft.Imaging.AspNetCore.ApiControllers.VintasoftFileApiController
        {
    
            public MyVintasoftFileApiController(IWebHostEnvironment hostingEnvironment)
                : base(hostingEnvironment)
            {
            }
    
        }
    }
    
    

• Create web service that allows to manage image collection

  • Press the right mouse button on the "Controllers" folder and select the "Add => Controller..." menu from context menu
    
  • Select "Empty API controller" template, set the controller name to the "MyVintasoftImageCollectionApiController" and press the "Add" button
    
  • Specify that MyVintasoftImageCollectionApiController class is derived from Vintasoft.Imaging.AspNetCore.ApiControllers.VintasoftImageCollectionApiController class
    
    Here are source codes of MyVintasoftImageCollectionApiController class:
    
    • C#

    namespace AngularApp1.Server.Controllers
    {
        public class MyVintasoftImageCollectionApiController : Vintasoft.Imaging.AspNetCore.ApiControllers.VintasoftImageCollectionApiController
        {
    
            public MyVintasoftImageCollectionApiController(IWebHostEnvironment hostingEnvironment)
                : base(hostingEnvironment)
            {
            }
    
        }
    }
    
    

• Create web service that allows to get information about images, get thumbnails, render image tiles, extract/search text

  • Press the right mouse button on the "Controllers" folder and select the "Add => Controller..." menu from context menu
    
  • Select "Empty API controller" template, set the controller name to the "MyVintasoftImageApiController" and press the "Add" button
    
  • Specify that MyVintasoftImageApiController class is derived from Vintasoft.Imaging.AspNetCore.ApiControllers.VintasoftImageApiController class
    
    Here are source codes of MyVintasoftImageApiController class:
    
    • C#

    namespace AngularApp1.Server.Controllers
    {
        public class MyVintasoftImageApiController : Vintasoft.Imaging.AspNetCore.ApiControllers.VintasoftImageApiController
        {
    
            public MyVintasoftImageApiController(IWebHostEnvironment hostingEnvironment)
                : base(hostingEnvironment)
            {
            }
    
        }
    }
    
    

• Create web service that allows to annotate images and documents

  • Press the right mouse button on the "Controllers" folder and select the "Add => Controller..." menu from context menu
    
  • Select "Empty API controller" template, set the controller name to the "MyVintasoftAnnotationCollectionApiController" and press the "Add" button
    
  • Specify that MyVintasoftAnnotationCollectionApiController class is derived from Vintasoft.Imaging.Annotation.AspNetCore.ApiControllers.VintasoftAnnotationCollectionApiController class
    
    Here are source codes of MyVintasoftAnnotationCollectionApiController class:
    
    • C#

    namespace AngularApp1.Server.Controllers
    {
        public class MyVintasoftAnnotationCollectionApiController :
            Vintasoft.Imaging.Annotation.AspNetCore.ApiControllers.VintasoftAnnotationCollectionApiController
        {
    
            public MyVintasoftAnnotationCollectionApiController(IWebHostEnvironment hostingEnvironment)
                : base(hostingEnvironment)
            {
            }
        }
    }
    
    

"ReactApp1.Server" project: Add Newtonsoft JSON for deserialization of JSON annotations.

• Add reference to the "Microsoft.AspNetCore.Mvc.NewtonsoftJson" nuget-package.
  
  
• Open the "Program.cs" file in "ReactApp1.Server" project and add code line "builder.Services.AddControllersWithViews().AddNewtonsoftJson();" after line "var builder = WebApplication.CreateBuilder(args);". This is necessary for correct deserialization of JSON annotations.
  
  
  Here are source codes of "Program.cs" file after update:
  
  • C#

  Vintasoft.Imaging.Drawing.SkiaSharp.SkiaSharpDrawingFactory.SetAsDefault();
  
  var builder = WebApplication.CreateBuilder(args);
  
  // Add services to the container.
  
  builder.Services.AddControllers().AddNewtonsoftJson();
  
  var app = builder.Build();
  
  app.UseDefaultFiles();
  app.MapStaticAssets();
  
  // Configure the HTTP request pipeline.
  
  app.UseHttpsRedirection();
  
  app.UseAuthorization();
  
  app.MapControllers();
  
  app.MapFallbackToFile("/index.html");
  
  app.Run();
  
  

"ReactApp1.Server" project: Copy the default test PDF document to a server side.

• Create folder "UploadedImageFiles\SessionID" in "ReactApp1.Server" project and copy test PDF document "<SdkInstallPath>\VintaSoft\Imaging .NET 15.0\Examples\ASP.NET Core\CSharp\AspNetCoreImagingDemo\wwwroot\UploadedImageFiles\VintasoftImagingDemo.pdf" to the folder. This document will be displayed in document viewer.

Delete files, which are not necessary in this tutorial.

Compile the solution for restoring TypeScript-dependencies in "reactapp1.client" project.

"reactapp1.client" project: Add JavaScript files to the "reactapp1.client" project.

• Copy Vintasoft.Shared.js, Vintasoft.Imaging.js, Vintasoft.Imaging.Annotation.js and Vintasoft.Imaging.DocumentViewer.js files from "<InstallPath>\VintaSoft Imaging .NET 15.0\Bin\JavaScript\" folder into "public\" folder.
  
  
• Specify, which "standard" dialogs should be used by web document viewer
  • If web document viewer should use ready-to-use "standard" Bootstrap dialogs:
    • Add "bootstrap" Node-module to the "package.json" file. Rebuild the project for refreshing Node-modules.
      Here are source codes of "package.json" file after update:
      
      • JSON

      {
        "name": "reactapp1.client",
        "private": true,
        "version": "0.0.0",
        "type": "module",
        "scripts": {
          "dev": "vite",
          "build": "vite build",
          "lint": "eslint .",
          "preview": "vite preview"
        },
        "dependencies": {
          "react": "^19.2.0",
          "react-dom": "^19.2.0"
        },
        "devDependencies": {
          "@eslint/js": "^9.39.1",
          "@types/react": "^19.2.5",
          "@types/react-dom": "^19.2.3",
          "@vitejs/plugin-react": "^5.1.1",
          "bootstrap": "~5.3.8",
          "eslint": "^9.39.1",
          "eslint-plugin-react-hooks": "^7.0.1",
          "eslint-plugin-react-refresh": "^0.4.24",
          "globals": "^16.5.0",
          "vite": "^7.2.4"
        }
      }
      
      

    • Copy Vintasoft.Imaging.Dialogs.Bootstrap.js and Vintasoft.Imaging.DocumentViewer.Dialogs.Bootstrap.js files from "<InstallPath>\VintaSoft Imaging .NET 15.0\Bin\JavaScript\" folder into "public\" folder.
    
    
  • If web document viewer should use ready-to-use "standard" jQuery UI-dialogs:
    • Add "jquery-ui-dist" Node-module to the "package.json" file. Rebuild the project for refreshing Node-modules.
    • Copy Vintasoft.Imaging.Dialogs.jQueryUI.js and Vintasoft.Imaging.DocumentViewer.Dialogs.jQueryUI.js files from "<InstallPath>\VintaSoft Imaging .NET 15.0\Bin\JavaScript\" folder into "src\app\assets\" folder.
    
    
  • If web document viewer should use custom "standard" dialogs, please read how to create custom "standard" dialogs here.
    
    
• Copy files Vintasoft.Imaging.css and Vintasoft.Imaging.Annotation.css with CSS-styles of Vintasoft web document viewer from "<SdkInstallPath>\VintaSoft\Imaging .NET 15.0\Bin\JavaScript\" folder to the "public\" folder.
  
  
• Add links to Bootstrap .css-file and Vintasoft .css-files to the "index.html" file, add references to Vintasoft JavaScript files to the header of "index.html" file:
  
  
  Here are source codes of "index.html" file:
  
  • HTML

  <!doctype html>
  <html lang="en">
  <head>
      <meta charset="UTF-8" />
      <link rel="icon" type="image/svg+xml" href="/vite.svg" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>reactapp1.client</title>
  
      <link rel="stylesheet" type="text/css" href="node_modules\bootstrap\dist\css\bootstrap.css" />
      <link rel="stylesheet" type="text/css" href="public/Vintasoft.Imaging.css">
      <link rel="stylesheet" type="text/css" href="public/Vintasoft.Imaging.Annotation.css">
  
      <script src="Vintasoft.Shared.js" type="text/javascript"></script>
      <script src="Vintasoft.Imaging.js" type="text/javascript"></script>
      <script src="Vintasoft.Imaging.Dialogs.Bootstrap.js" type="text/javascript"></script>
      <script src="Vintasoft.Imaging.Annotation.js" type="text/javascript"></script>
      <script src="Vintasoft.Imaging.Annotation.Dialogs.Bootstrap.js" type="text/javascript"></script>
      <script src="Vintasoft.Imaging.DocumentViewer.js" type="text/javascript"></script>
      <script src="Vintasoft.Imaging.DocumentViewer.Dialogs.Bootstrap.js" type="text/javascript"></script>
  </head>
  <body>
      <div id="root"></div>
      <script type="module" src="/src/main.jsx"></script>
  </body>
  </html>
  
  

  
  
• Add CSS-style "documentViewerContainer", which defines size of document viewer container, to the "src\App.css" file:
  
  
  Here are source codes of "App.css" file:
  
  • HTML

  #root {
    max-width: 1280px;
    margin: 0 auto;
    padding: 2rem;
    text-align: center;
  }
  
  .logo {
    height: 6em;
    padding: 1.5em;
    will-change: filter;
    transition: filter 300ms;
  }
  .logo:hover {
    filter: drop-shadow(0 0 2em #646cffaa);
  }
  .logo.react:hover {
    filter: drop-shadow(0 0 2em #61dafbaa);
  }
  
  @keyframes logo-spin {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
  
  @media (prefers-reduced-motion: no-preference) {
    a:nth-of-type(2) .logo {
      animation: logo-spin infinite 20s linear;
    }
  }
  
  .card {
    padding: 2em;
  }
  
  .read-the-docs {
    color: #888;
  }
  
  .documentViewerContainer {
      height: 800px;
  }
  
  

"reactapp1.client" project: Create React-component that allows to display document, search and extract text from document, annotate document.

• Open "src\App.jsx" file in "reactapp1.client" project, clear the file, code of "App" and "__init" functions. "App" function returns HTML markup (page header and DIV-element for web document viewer). "__init" function initializes the application and creates web document viewer.
  Here is code of "src\App.jsx" file:
  • JavaScript

  import './App.css'
  
  function App() {
      return (
          <>
              <h1>VintaSoft Document Viewer Demo (React.js + ASP.NET Core)</h1>
  
              <div id="documentViewerContainer" className="documentViewerContainer"></div>
  
              <script>{setTimeout(__init, 10)}</script>
          </>
      )
  }
  
  /**
   * Initializes application.
   */
  function __init() {
      var Vintasoft = window.Vintasoft;
  
      if (Vintasoft.Shared.WebImagingEnviromentJS.get_SessionId() != null)
          return;
  
      // set the session identifier
      Vintasoft.Shared.WebImagingEnviromentJS.set_SessionId("SessionID");
  
      // specify web services, which should be used by Vintasoft Web Document Viewer
      Vintasoft.Shared.WebServiceJS.defaultFileService = new Vintasoft.Shared.WebServiceControllerJS("/vintasoft/api/MyVintasoftFileApi");
      Vintasoft.Shared.WebServiceJS.defaultImageCollectionService = new Vintasoft.Shared.WebServiceControllerJS("/vintasoft/api/MyVintasoftImageCollectionApi");
      Vintasoft.Shared.WebServiceJS.defaultImageService = new Vintasoft.Shared.WebServiceControllerJS("/vintasoft/api/MyVintasoftImageApi");
      Vintasoft.Shared.WebServiceJS.defaultAnnotationService = new Vintasoft.Shared.WebServiceControllerJS("/vintasoft/api/MyVintasoftAnnotationCollectionApi");
  
      // create settings for document viewer with annotation support
      var docViewerSettings =
          new Vintasoft.Imaging.DocumentViewer.WebDocumentViewerSettingsJS("documentViewerContainerId", "documentViewerLocalizationId", true);
      // specify that the main menu should contain the annotation menu
      docViewerSettings.set_ShowAnnotationMenuInMainMenu(true);
      // specify that the side panel should contain the annotation list panel
      docViewerSettings.set_ShowAnnotationListSidePanel(true);
      // specify that web document viewer allows to navigate document
      docViewerSettings.set_CanNavigateDocument(true);
      // specify that web document viewer allows to select text
      docViewerSettings.set_CanSelectText(true);
      // specify that web document viewer allows to search text
      docViewerSettings.set_CanSearchText(true);
  
      // create the document viewer
      var docViewer = new Vintasoft.Imaging.DocumentViewer.WebDocumentViewerJS(docViewerSettings);
  
      // create visual tool that allows to work with annotations, navigate document, select text, pan page in viewer
      var visualTool = docViewer.getVisualToolById("AnnotationVisualTool,DocumentNavigationTool,TextSelectionTool,PanTool");
      // specify visual tool as mandatory visual tool of document viewer
      docViewer.set_MandatoryVisualTool(visualTool);
      // specify visual tool as current visual tool of document viewer
      docViewer.set_CurrentVisualTool(visualTool);
  
      // get thumbnail viewer of document viewer
      var thumbnailViewer = docViewer.get_ThumbnailViewer();
      // specify that thumbnail viewer should not cache thumbnails on server side
      thumbnailViewer.set_UseCache(false);
  
      // get image viewer of document viewer
      var imageViewer = docViewer.get_ImageViewer();
      // specify that image viewer should not cache image tiles on server side
      imageViewer.set_UseCache(false);
      // open file from session folder and add images from file to the image viewer
      imageViewer.get_Images().openFile("VintasoftImagingDemo.pdf");
  }
  
  export default App
  
  

  
  
  
  
• Open "vite.config.js" file in "reactapp1.client" project and specify that React.js aplication can have access to the ASP.NET Core Web API controller "/vintasoft/api/" in "ReactApp1.Server" project:
  • JavaScript

  import { defineConfig } from 'vite'
  import react from '@vitejs/plugin-react'
  
  const target = 'https://localhost:7109';
  
  // https://vite.dev/config/
  export default defineConfig({
      plugins: [react()],
      server: {
          proxy: {
              '^/vintasoft/api/': {
                  target,
                  secure: false
              }
          },
          port: 7109
      }
  })
  
  

  
  

Run "React and ASP.NET Core" application and see the result.