100761: Need to Resolve conflicts

Jenkinsfile

@@ -74,7 +74,7 @@ if(currentBuild.result != 'FAILURE')
 
 	stage 'Delete Workspace'
 
-		def files = findFiles(glob: '**/cireports/*.*')      
+		def files = findFiles(glob: '**/cireports/spellcheck/*.*')      
 
     if(files.size() > 0) 		
     { 		

ej2-react-toc.html

@@ -1387,6 +1387,11 @@
               <li><a href="/ej2-react/grid/connecting-to-database/dapper">Dapper</a></li>
               <li><a href="/ej2-react/grid/connecting-to-database/entityframework">Entity Framework</a></li>
           </ul>
+        </li>
+        <li>Connecting to Backends
+          <ul>
+            <li><a href="/ej2-react/grid/connecting-to-backends/django-server">Django Server</a></li>
+          </ul>
         </li>
          <li><a href="/ej2-react/grid/adaptive">Adaptive View</a></li>
          <li><a href="/ej2-react/grid/performance">Performance Best Practices</a></li>
@@ -1404,6 +1409,11 @@
              <li><a href="/ej2-react/grid/columns/column-spanning">Column Spanning</a></li>
            </ul>
          </li>
+          <li>Connecting to Backends
+          <ul>
+            <li><a href="/ej2-react/grid/connecting-to-backends/graphql-nodejs-server">Graphql-Nodejs-Server</a></li>
+          </ul>
+        </li>
          <li><a href="/ej2-react/grid/row/row">Row</a>
             <ul>
               <li><a href="/ej2-react/grid/row/row-template">Row Template</a></li>
@@ -3050,7 +3060,7 @@
 </ul>
 </li> <li>Release Notes
      <ul>
-		<li>2025 Volume 4 - 32.*<ul><li>Weekly Release<ul><li><a href="/ej2-react/release-notes/32.1.25">32.1.25</a></li><li><a href="/ej2-react/release-notes/32.1.24">32.1.24</a></li><li><a href="/ej2-react/release-notes/32.1.23">32.1.23</a></li><li><a href="/ej2-react/release-notes/32.1.22">32.1.22</a></li><li><a href="/ej2-react/release-notes/32.1.21">32.1.21</a></li><li><a href="/ej2-react/release-notes/32.1.20">32.1.20</a></li></ul></li><li><a href="/ej2-react/release-notes/32.1.19">32.1.19 Main Release</a></li></ul></li><li>2025 Volume 3 - 31.*
+		<li>2025 Volume 4 - 32.*<ul><li><a href="/ej2-react/release-notes/32.2.3">32.2.3 Service Pack Release</a></li><li><a href="/ej2-react/release-notes/32.1.19">32.1.19 Main Release</a></li></ul></li><li>2025 Volume 3 - 31.*
 			<ul>
 				<li>Weekly Release
 					<ul><li><a href="/ej2-react/release-notes/31.2.10">31.2.10</a></li><li><a href="/ej2-react/release-notes/31.2.5">31.2.5</a></li><li><a href="/ej2-react/release-notes/31.2.4">31.2.4</a></li>

ej2-react/Release-notes/29.2.4.md

@@ -31,7 +31,7 @@ documentation: ug
 | ButtonGroup | 120 | 120 | 0 | All Passed |
 | calendar | 177 | 177 | 0 | All Passed |
 | Carousel | 61 | 61 | 0 | All Passed |
-| Chart | 3666 | 3666 | 0 | All Passed |
+| Chart | 4490 | 4490 | 0 | All Passed |
 | Chat UI | 184 | 184 | 0 | All Passed |
 | Checkbox | 216 | 216 | 0 | All Passed |
 | CircularGauge | 283 | 283 | 0 | All Passed |

ej2-react/Release-notes/32.2.3.md

@@ -0,0 +1,16 @@
+---
+title: Essential Studio for React Release Notes
+description: Learn here about the controls in the Essential Studio for React 2025 Volume 4 SP Release - Release Notes
+platform: ej2-react
+documentation: ug
+---
+
+# Essential Studio for React - v32.2.3 Release Notes
+
+{% include release-info.html date="February 04, 2026"  version="v32.2.3" %} 
+
+{% directory path: _includes/release-notes/v32.2.3 %}
+
+{% include {{file.url}} %}
+
+{% enddirectory %}

ej2-react/calendar/globalization.md

@@ -12,8 +12,8 @@ domainurl: ##DomainURL##
 
 Globalization is the combination of internalization and localization. You can adapt the component to various languages by parsing and formatting the date or number ([Internationalization](https://ej2.syncfusion.com/react/documentation/common/globalization/internationalization)), and also add culture specific customization and translation to the text ([localization](https://ej2.syncfusion.com/react/documentation/common/globalization/localization)).
 
-By default, Calendar date format, week and month names are specific to American English culture. It utilizes the [Essential<sup style="font-size:70%">&reg;</sup> JavaScript 2 Internationalization](https://ej2.syncfusion.com/react/documentation/common/globalization/internationalization)
-package to parse and format the date object based on the culture by using the official [`UNICODE CLDR`](http://cldr.unicode.org/) JSON data and also it provides the [`loadCldr`](https://ej2.syncfusion.com/react/documentation/common/globalization/internationalization#installing-cldr-data) method to load the culture specific CLDR JSON data.
+By default, Calendar date format, week and month names are specific to American English culture. It utilizes the [Essential<sup style="font-size:70%">&reg;</sup> JavaScript 2 Internationalization](http://ej2.syncfusion.com/documentation/base/internationalization/)
+package to parse and format the date object based on the culture by using the official [`UNICODE CLDR`](http://cldr.unicode.org/) JSON data and also it provides the [`loadCldr`](http://ej2.syncfusion.com/documentation/base/intl.html#cldr-data-dependencies) method to load the culture specific CLDR JSON data.
 
 To go with the different culture other than `English`, follow the below steps.
 
@@ -27,9 +27,9 @@ To go with the different culture other than `English`, follow the below steps.
 
 * Now import the installed CLDR JSON data into the `app.ts` file.
 
-* Now use the [`loadCldr`](https://ej2.syncfusion.com/react/documentation/common/globalization/internationalization#installing-cldr-data) method to load the culture specific CLDR JSON data from the installed location to `app.ts` file.
+* Now use the [`loadCldr`](http://ej2.syncfusion.com/documentation/base/intl.html#cldr-data-dependencies) method to load the culture specific CLDR JSON data from the installed location to `app.ts` file.
 
-* Calendar displayed `Sunday` as the first day of week based on default culture ("en-US"). If you want to display the Calendar with loaded culture’s first day of week, you need to import `weekdata.json` file from the `cldr-data/supplemental` as given in the code example.
+* Calendar displayed `Sunday` as the first day of week based on default culture ("en-US"). If you want to display the Calendar with loaded culture’s first day of week, you need to import `weekdata.json` file from the `cldr-data/suppemental` as given in the code example.
 
 ```ts
 //import the loadCldr from ej2-base
@@ -257,4 +257,4 @@ The following example demonstrates the Calendar in `Arabic` culture with Right-T
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "page.domainurl/code-snippet/calendar/rtl-cs2" %}
+ {% previewsample "page.domainurl/code-snippet/calendar/rtl-cs2" %}

ej2-react/code-snippet/block-editor/getting-started-class/index.css

@@ -0,0 +1,15 @@
+#container {
+    margin: 50px auto;
+}
+
+/* Represents the styles for loader */
+#loader {
+    color: #008cff;
+    font-family: 'Helvetica Neue', 'calibiri';
+    font-size: 14px;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+}

ej2-react/code-snippet/block-editor/getting-started-class/system.config.js

@@ -0,0 +1,44 @@
+System.config({
+    transpiler: "ts",
+    typescriptOptions: {
+        target: "es5",
+        module: "commonjs",
+        moduleResolution: "node",
+        emitDecoratorMetadata: true,
+        experimentalDecorators: true,
+        "jsx": "react"
+    },
+    meta: {
+        'typescript': {
+            "exports": "ts"
+        }
+    },
+    paths: {
+        "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+    },
+    map: {
+        app: 'app',
+        ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+       "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-dropdowns":"syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-blockeditor": "syncfusion:ej2-blockeditor/dist/ej2-blockeditor.umd.min.js",
+        "react-dom":"https://unpkg.com/react-dom@16.3.1/umd/react-dom.development.js",
+        "react":"https://unpkg.com/react@16.3.1/umd/react.development.js",
+
+    },
+    packages: {
+        'app': { main: 'index', defaultExtension: 'tsx' },
+    }
+
+});
+
+System.import('app');

ej2-react/code-snippet/diagram/AutomaticLayout/complexhiertree-cs1/app/index.jsx

@@ -1,4 +1,4 @@
-
+{% raw %}
 
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
@@ -68,3 +68,4 @@ export default function App() {
 const root = ReactDOM.createRoot(document.getElementById("diagram"));
 root.render(<App />);
 
+{% endraw %}

ej2-react/code-snippet/diagram/AutomaticLayout/complexhiertree-cs1/app/index.tsx

@@ -1,4 +1,4 @@
-
+{% raw %}
 
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
@@ -69,3 +69,4 @@ export default function App() {
 const root = ReactDOM.createRoot(document.getElementById("diagram") as HTMLElement);
 root.render(<App />);
 
+{% endraw %}

ej2-react/code-snippet/diagram/AutomaticLayout/complexhiertree-cs1/index.html

@@ -8,12 +8,12 @@
     <meta name="description" content="Essential JS 2 for React Components" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet">
-    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/tailwind3.css" rel="stylesheet">
-    <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/tailwind3.css" rel="stylesheet">
-    <link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/tailwind3.css" rel="stylesheet">
-    <link href="//cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet">
-    <link href="//cdn.syncfusion.com/ej2/ej2-diagrams/styles/tailwind3.css" rel="stylesheet">
-    <link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/tailwind3.css" rel="stylesheet">
+    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet">
+    <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet">
+    <link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet">
+    <link href="//cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css" rel="stylesheet">
+    <link href="//cdn.syncfusion.com/ej2/ej2-diagrams/styles/material.css" rel="stylesheet">
+    <link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet">
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
     <style>

ej2-react/code-snippet/diagram/AutomaticLayout/complexhiertree-cs2/app/index.jsx

@@ -1,4 +1,4 @@
-
+{% raw %}
 
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
@@ -83,3 +83,4 @@ export default function App() {
 const root = ReactDOM.createRoot(document.getElementById("diagram"));
 root.render(<App />);
 
+{% endraw %}

ej2-react/code-snippet/diagram/AutomaticLayout/complexhiertree-cs2/app/index.tsx

@@ -1,4 +1,4 @@
-
+{% raw %}
 
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
@@ -84,3 +84,4 @@ export default function App() {
 const root = ReactDOM.createRoot(document.getElementById("diagram") as HTMLElement);
 root.render(<App />);
 
+{% endraw %}

ej2-react/code-snippet/diagram/AutomaticLayout/complexhiertree-cs2/index.html

@@ -8,12 +8,12 @@
     <meta name="description" content="Essential JS 2 for React Components" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet">
-    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/tailwind3.css" rel="stylesheet">
-    <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/tailwind3.css" rel="stylesheet">
-    <link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/tailwind3.css" rel="stylesheet">
-    <link href="//cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet">
-    <link href="//cdn.syncfusion.com/ej2/ej2-diagrams/styles/tailwind3.css" rel="stylesheet">
-    <link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/tailwind3.css" rel="stylesheet">
+    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet">
+    <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet">
+    <link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet">
+    <link href="//cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css" rel="stylesheet">
+    <link href="//cdn.syncfusion.com/ej2/ej2-diagrams/styles/material.css" rel="stylesheet">
+    <link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet">
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
     <style>

ej2-react/code-snippet/diagram/AutomaticLayout/complexhiertree-cs3/app/index.jsx

@@ -1,4 +1,4 @@
-
+{% raw %}
 
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
@@ -78,3 +78,4 @@ export default function App() {
 const root = ReactDOM.createRoot(document.getElementById("diagram"));
 root.render(<App />);
 
+{% endraw %}

ej2-react/code-snippet/diagram/AutomaticLayout/complexhiertree-cs3/app/index.tsx

@@ -1,4 +1,4 @@
-
+{% raw %}
 
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
@@ -78,3 +78,4 @@ export default function App() {
 const root = ReactDOM.createRoot(document.getElementById("diagram") as HTMLElement);
 root.render(<App />);
 
+{% endraw %}

ej2-react/code-snippet/diagram/AutomaticLayout/complexhiertree-cs3/index.html

@@ -8,12 +8,12 @@
     <meta name="description" content="Essential JS 2 for React Components" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet">
-    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/tailwind3.css" rel="stylesheet">
-    <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/tailwind3.css" rel="stylesheet">
-    <link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/tailwind3.css" rel="stylesheet">
-    <link href="//cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet">
-    <link href="//cdn.syncfusion.com/ej2/ej2-diagrams/styles/tailwind3.css" rel="stylesheet">
-    <link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/tailwind3.css" rel="stylesheet">
+    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet">
+    <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet">
+    <link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet">
+    <link href="//cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css" rel="stylesheet">
+    <link href="//cdn.syncfusion.com/ej2/ej2-diagrams/styles/material.css" rel="stylesheet">
+    <link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet">
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
     <style>

ej2-react/code-snippet/diagram/AutomaticLayout/complexhiertree-cs4/app/index.jsx

@@ -1,4 +1,4 @@
-
+{% raw %}
 
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
@@ -78,3 +78,4 @@ export default function App() {
 const root = ReactDOM.createRoot(document.getElementById("diagram"));
 root.render(<App />);
 
+{% endraw %}

ej2-react/code-snippet/diagram/AutomaticLayout/complexhiertree-cs4/app/index.tsx

@@ -1,4 +1,4 @@
-
+{% raw %}
 
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
@@ -78,3 +78,4 @@ export default function App() {
 const root = ReactDOM.createRoot(document.getElementById("diagram") as HTMLElement);
 root.render(<App />);
 
+{% endraw %}

ej2-react/code-snippet/diagram/AutomaticLayout/complexhiertree-cs4/index.html

@@ -8,12 +8,12 @@
     <meta name="description" content="Essential JS 2 for React Components" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet">
-    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/tailwind3.css" rel="stylesheet">
-    <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/tailwind3.css" rel="stylesheet">
-    <link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/tailwind3.css" rel="stylesheet">
-    <link href="//cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet">
-    <link href="//cdn.syncfusion.com/ej2/ej2-diagrams/styles/tailwind3.css" rel="stylesheet">
-    <link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/tailwind3.css" rel="stylesheet">
+    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet">
+    <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet">
+    <link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet">
+    <link href="//cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css" rel="stylesheet">
+    <link href="//cdn.syncfusion.com/ej2/ej2-diagrams/styles/material.css" rel="stylesheet">
+    <link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet">
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
     <style>

ej2-react/code-snippet/diagram/AutomaticLayout/complexhiertree-cs5/app/index.jsx

@@ -1,4 +1,4 @@
-
+{% raw %}
 
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
@@ -74,3 +74,4 @@ export default function App() {
 const root = ReactDOM.createRoot(document.getElementById("diagram"));
 root.render(<App />);
 
+{% endraw %}

ej2-react/code-snippet/diagram/AutomaticLayout/complexhiertree-cs5/app/index.tsx

@@ -1,4 +1,4 @@
-
+{% raw %}
 
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
@@ -74,3 +74,4 @@ export default function App() {
 const root = ReactDOM.createRoot(document.getElementById("diagram") as HTMLElement);
 root.render(<App />);
 
+{% endraw %}

ej2-react/code-snippet/diagram/AutomaticLayout/complexhiertree-cs5/index.html

@@ -8,12 +8,12 @@
     <meta name="description" content="Essential JS 2 for React Components" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet">
-    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/tailwind3.css" rel="stylesheet">
-    <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/tailwind3.css" rel="stylesheet">
-    <link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/tailwind3.css" rel="stylesheet">
-    <link href="//cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet">
-    <link href="//cdn.syncfusion.com/ej2/ej2-diagrams/styles/tailwind3.css" rel="stylesheet">
-    <link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/tailwind3.css" rel="stylesheet">
+    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet">
+    <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet">
+    <link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet">
+    <link href="//cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css" rel="stylesheet">
+    <link href="//cdn.syncfusion.com/ej2/ej2-diagrams/styles/material.css" rel="stylesheet">
+    <link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet">
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
     <style>

ej2-react/code-snippet/diagram/AutomaticLayout/es5Assistant-cs1/app/index.jsx

@@ -1,4 +1,4 @@
-
+{% raw %}
 import * as React from "react";
 import * as ReactDOM from "react-dom";
 import { DiagramComponent, Inject, DataBinding, HierarchicalTree, } from "@syncfusion/ej2-react-diagrams";
@@ -94,3 +94,4 @@ function App() {
 }
 const root = ReactDOM.createRoot(document.getElementById("diagram"));
 root.render(<App />);
+{% endraw %}

ej2-react/code-snippet/diagram/AutomaticLayout/es5Assistant-cs1/app/index.tsx

@@ -1,4 +1,4 @@
-
+{% raw %}
 
 
 import * as React from "react";
@@ -116,3 +116,4 @@ const root = ReactDOM.createRoot(document.getElementById("diagram"));
 root.render(<App />);
 
 
+{% endraw %}