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: Add reference to nuget-packages.

• Add reference to the "System.IO.Packaging" nuget-package version 10.0.0.

"ReactApp1.Server" project: Create web services, which allow to upload/download file and edit DOCX 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 edit DOCX document

  • 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 "MyVintasoftOfficeApiController" and press the "Add" button
    
  • Specify that MyVintasoftOfficeApiController class is derived from Vintasoft.Imaging.Office.AspNetCore.ApiControllers.VintasoftOfficeApiController class
    
    Here are source codes of MyVintasoftOfficeApiController class:
    
    • C#

    namespace AngularApp1.Server.Controllers
    {
        public class MyVintasoftOfficeApiController : Vintasoft.Imaging.Office.AspNetCore.ApiControllers.VintasoftOfficeApiController
        {
            public MyVintasoftOfficeApiController(IWebHostEnvironment hostingEnvironment)
                : base(hostingEnvironment)
            {
            }
        }
    }
    
    

"ReactApp1.Server" project: Copy DOCX documents to a server side.

• Create folder "UploadedImageFiles\SessionID" and copy test DOCX document to the folder. This document will be displayed in web document editor.
  

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 and Vintasoft.Imaging.Office.js files from "<InstallPath>\VintaSoft Imaging .NET 15.0\Bin\JavaScript\" folder into "public\" folder.
  
  
• Specify, which "standard" UI dialogs should be used by web document editor
  • If web document editor 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.Office.Dialogs.Bootstrap.js files from "<InstallPath>\VintaSoft Imaging .NET 15.0\Bin\JavaScript\" folder into "public\" folder.
    
    
  • If web document editor 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.Office.Dialogs.jQueryUI.js files from "<InstallPath>\VintaSoft Imaging .NET 15.0\Bin\JavaScript\" folder into "src\app\assets\" folder.
    
    
  • If web document editor should use custom "standard" dialogs, please read how to create custom "standard" dialogs here.
    
    
• Copy files Vintasoft.Imaging.css and Vintasoft.Imaging.Office.css 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.Office.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.Office.js" type="text/javascript"></script>
      <script src="Vintasoft.Imaging.Office.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 "documentEditorContainer", which defines height of web document editor 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;
  }
  
  .documentEditorContainer {
    height: 800px;
  }
  
  

"reactapp1.client" project: Create React-component that allows to view and edit DOCX 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 editor). "__init" function initializes the application and creates web document editor.
  Here is code of "src\App.jsx" file:
  • JavaScript

  import './App.css'
  
  function App() {
      return (
          <>
              <h1>VintaSoft Document Editor (React.js + ASP.NET Core)</h1>
  
              <div id="documentEditorContainer" className="documentEditorContainer"></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 in this demo
      Vintasoft.Shared.WebServiceJS.defaultFileService = new Vintasoft.Shared.WebServiceControllerJS("/vintasoft/api/MyVintasoftFileApi");
      Vintasoft.Shared.WebServiceJS.defaultOfficeService = new Vintasoft.Shared.WebServiceControllerJS("/vintasoft/api/MyVintasoftOfficeApi");
  
      // create web document editor settings
      var documentEditorSettings = new Vintasoft.Imaging.Office.UI.WebDocumentEditorSettingsJS("documentEditorContainer", "");
  
      // create web document editor
      var documentEditor = new Vintasoft.Imaging.Office.UI.WebDocumentEditorJS(documentEditorSettings);
  
      // open DOCX document
      documentEditor.openDocument("DocxTestDocument.docx");
  }
  
  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.