updating the getting started page

Document-Processing/Word/Word-Processor/angular/getting-started.md

@@ -16,6 +16,8 @@ domainurl: ##DomainURL##
 
 ### Prerequisites
 
+Refer to the link below for the supported Node.js, Angular CLI, and browser versions before you begin.
+
 [System requirements for Document Editor](https://ej2.syncfusion.com/angular/documentation/system-requirement)
 
 ### Setup Angular environment
@@ -34,7 +36,7 @@ npm install -g @angular/cli
 ng new documenteditor-app
 ```
 
-**Step 2:** This command will prompt you to configure settings like enabling Angular routing and choosing a stylesheet format.
+**Step 2:** The command prompts you to configure settings like enabling Angular routing and choosing a stylesheet format.
 
 ```text
 ? Which stylesheet system would you like to use?
@@ -45,7 +47,7 @@ ng new documenteditor-app
   Less            [ http://lesscss.org                                             ]
 ```
 
-In this guide, CSS is selected as the stylesheet format.
+This guide selects CSS as the stylesheet format.
 
 **Step 3:** During project setup, when prompted for the server-side rendering (SSR) option, choose the appropriate configuration.
 
@@ -104,7 +106,7 @@ The following CSS files are available in the `node_modules/@syncfusion` package
 
 ### Add the Document Editor component
 
-Modify `src/app/app.ts` to render the Document Editor component by adding the Angular Document Editor selector in its template section.
+Update `src/app/app.ts` to render the Document Editor component by adding the selector to its template.
 
 {% tabs %}
 {% highlight ts tabtitle="app.ts" %}
@@ -147,9 +149,9 @@ ng serve --open
 
 After the application starts, open the localhost URL shown in the terminal. The Document Editor is rendered in the browser with a toolbar and an editable document area, as shown below.
 
-![Output of Angular Document Editor](./images/angular_getting_started.png)
+![Angular Document Editor with toolbar and an empty editable area](./images/angular_getting_started.png)
 
-You can also explore the Document Editor interactively using the live sample below.
+You can also explore the Document Editor interactively using the live sample.
 
 {% previewsample "/document-processing/samples/document-editor/angular/document-editor-container-cs2" %}
 
@@ -179,9 +181,9 @@ N> If you don't require the above functionalities, you can deploy the component
 
 For detailed information about server-side dependencies, refer to the [Web Services Overview](./web-services-overview) page.
 
-N> Looking for the full Angular Docx Editor component overview, features, pricing, and documentation? Visit the [Angular Docx Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) (Document Editor) page.
+N> Looking for the full Angular DOCX Editor component overview, features, pricing, and documentation? Visit the [Angular DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) (Document Editor) page.
 ## See also
 
 - [Open a document](./import)
 - [Save a document](./export)
-- [Collaborative Editing](./collaborative-editing/overview)
+- [Collaborative editing](./collaborative-editing/overview)

Document-Processing/Word/Word-Processor/react/getting-started.md

@@ -1,26 +1,39 @@
 ---
 layout: post
-title: Getting started with React DOCX Editor component | Syncfusion
-description: Learn how to create a DOCX Editor in a React application using the Syncfusion® Document Editor control to create, edit, and view Word documents.
-control: Getting started 
+title: Getting Started with React DOCX Editor component | Syncfusion
+description: Learn how to create a DOCX Editor using React with the Syncfusion® Document Editor control to create, edit, and view Word documents.
+control: Getting Started
 platform: document-processing
 documentation: ug
 domainurl: ##DomainURL##
 ---
 
 # Getting started with React DOCX Editor
 
-[React DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/react-docx-editor) (Document Editor) enables you to create, edit, view, and print Word documents in web applications. This section guides you through the steps to get started and create a DOCX Editor in a React application. 
+[React DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/react-docx-editor) (Document Editor) enables you to create, edit, view, and print Word documents in web applications. This section guides you through the steps to get started and create a DOCX Editor using React.
 
 ## Steps to create a React DOCX Editor
 
+Follow these steps to set up and run the React Document Editor. Click any step to jump directly to that section:
+
+* [Prerequisites](#prerequisites)
+* [Create a new React application](#create-a-new-react-application)
+* [Install the Document Editor packages](#install-the-document-editor-packages)
+* [Register the license key](#register-the-license-key)
+* [Add CSS reference](#add-css-reference)
+* [Add the Document Editor component](#add-the-document-editor-component)
+* [Run the application](#run-the-application)
+
 {% tabcontents %}
 
 {% tabcontent TypeScript %}
 
 ### Prerequisites
 
-[System requirements for Document Editor](https://ej2.syncfusion.com/react/documentation/system-requirement)
+Before getting started with the React application, ensure the following prerequisites are met:
+
+* [Vite 5.x](https://vitejs.dev/) or later (Vite is used as the build tool when scaffolding the application).
+* See the [System requirements for Document Editor](https://ej2.syncfusion.com/react/documentation/system-requirement) for the supported Node.js, React, browser, and operating system versions.
 
 ### Create a new React application
 
@@ -31,17 +44,45 @@ npm create vite@latest documenteditor-app -- --template react-ts
 cd documenteditor-app
 ```
 
+**Launch and Test the Application** (recommended) before adding Syncfusion packages. Install dependencies and start the dev server to confirm the project runs correctly:
+
+```bash
+npm install
+npm run dev
+```
+
+Open the URL shown in the terminal (default: `http://localhost:5173/`) — you should see the default Vite + React welcome page. Stop the dev server with `Ctrl+C` before proceeding to the next step.
+
+
 ### Install the Document Editor packages
 
-The Document Editor package is available in the public npm registry and can be installed directly from [`npmjs.com`](https://www.npmjs.com/package/@syncfusion/ej2-react-documenteditor).
+The Document Editor package is published to npm and can be installed from [`npmjs.com`](https://www.npmjs.com/package/@syncfusion/ej2-react-documenteditor).
 
 
 To install the Document Editor component, use the following command:
 
 ```bash
-npm install @syncfusion/ej2-react-documenteditor --save
+npm install @syncfusion/ej2-react-documenteditor
 ```
 
+For the full compatibility matrix, see the [React supported versions](https://ej2.syncfusion.com/react/documentation/system-requirement#react-supported-versions) section of the System Requirements page.
+
+### Register the license key
+
+Syncfusion requires a license key to be registered for production use. Generate your license key from the [Syncfusion License Dashboard](https://www.syncfusion.com/account/downloads) and register it in your app's entry file (`src/App.tsx`).
+
+Add the following line **before** any Syncfusion component is rendered:
+
+{% tabs %}
+{% highlight js tabtitle="App.tsx" %}
+
+import { registerLicense } from '@syncfusion/ej2-base';
+
+registerLicense('YOUR_LICENSE_KEY');
+
+{% endhighlight %}
+{% endtabs %}
+
 ### Add CSS reference
 
 Add the Document Editor component and its dependent component styles available in the `node_modules/@syncfusion` package folder. Reference these styles in the `src/index.css` file.
@@ -62,10 +103,21 @@ Add the Document Editor component and its dependent component styles available i
 {% endhighlight %}
 {% endtabs %}
 
+Refer to the [themes topic](https://ej2.syncfusion.com/react/documentation/appearance/theme) to learn about built-in themes and the different ways to refer to them in a React project.
+
+Vite supports `@import` of `node_modules` paths natively, so no additional CSS preprocessor configuration is required. Make sure that `src/index.css` is imported from your entry file `src/main.tsx` so the component styles are included in the build output. The default Vite template already includes this import.
+
+**CSS load order matters:** The `@import` statements are processed in the order they appear, and later styles take precedence over earlier ones when specificity is equal. The component import (`@syncfusion/ej2-react-documenteditor`) is listed last so that any of your own custom styles added below it will override the default theme. If you add your own styles, place them **after** these imports to ensure they apply correctly.
+
 ### Add the Document Editor component
 
 Add the Document Editor component to your application. In the `src/App.tsx` file, add the following code to initialize the component:
 
+**File roles:**
+`src/main.tsx` is the application entry point (boots React and imports `index.css`);
+`src/index.css` holds the global styles including the Syncfusion `@import`s from the previous step;
+`src/App.tsx` is the root component where the Document Editor is rendered.
+
 {% tabs %}
 {% highlight ts tabtitle="App.tsx" %}
 
@@ -79,13 +131,15 @@ DocumentEditorContainerComponent.Inject(Toolbar);
 
 function App() {
   return (
-<DocumentEditorContainerComponent 
+    <div>
+        <DocumentEditorContainerComponent 
             id="container" 
             height="590px" 
             // Use the following service URL only for demo purposes
             serviceUrl="https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/" 
             enableToolbar={true}
         />
+      </div>
   );
 }
 
@@ -94,7 +148,18 @@ export default App;
 {% endhighlight %}
 {% endtabs %}
 
-N> The hosted Web API URL is for demo and evaluation purposes only. For production, host your own web service using the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or the [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server).
+The following props are configured on `DocumentEditorContainerComponent` in the example above:
+
+| Property | Type | Description |
+| --- | --- | --- |
+| `id` | `string` | Sets the unique ID of the container element. |
+| `height` | `string \| number` | Sets the height of the editor container (e.g., `"590px"`). |
+| `serviceUrl` | `string` | URL of the server-side web service required for opening/saving non-SFDT formats, paste with formatting, restrict editing, and spell check. |
+| `enableToolbar` | `boolean` |  When `true`, shows the built-in toolbar. Set to `false` to hide it. |
+
+**Toolbar registration:** The `Inject(Toolbar)` call registers the toolbar service with the editor container so the built-in formatting toolbar is rendered.
+
+The hosted Web API URL shown above is for demo and evaluation purposes only. For production, or if the demo service is unavailable, deploy your own web service using the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or the [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server) and update the `serviceUrl` to point to it.
 
 ### Run the application
 
@@ -104,14 +169,25 @@ Run the application using the following command:
 npm run dev
 ```
 
+To build the application for production, run:
+
+```bash
+npm run build
+```
+
+This generates an optimized production build in the `dist/` folder. To preview the production build locally, run `npm run preview`.
+
 {% endtabcontent %}
 
 {% tabcontent JavaScript %}
 
 
 ### Prerequisites
 
-[System requirements for Document Editor](https://ej2.syncfusion.com/react/documentation/system-requirement)
+Before getting started with the React application, ensure the following prerequisites are met:
+
+* [Vite 5.x](https://vitejs.dev/) or later (Vite is used as the build tool when scaffolding the application).
+* See the [System requirements for Document Editor](https://ej2.syncfusion.com/react/documentation/system-requirement) for the supported Node.js, React, browser, and operating system versions.
 
 ### Create a new React application
 
@@ -122,18 +198,46 @@ npm create vite@latest documenteditor-app -- --template react
 cd documenteditor-app
 ```
 
+**Launch and Test the Application** (recommended) before adding Syncfusion packages. Install dependencies and start the dev server to confirm the project runs correctly:
+
+```bash
+npm install
+npm run dev
+```
+
+Open the URL shown in the terminal (default: `http://localhost:5173/`) — you should see the default Vite + React welcome page. Stop the dev server with `Ctrl+C` before proceeding to the next step.
+
 ### Install the Document Editor packages
 
-The Document Editor package is available in the public npm registry and can be installed directly from [`npmjs.com`](https://www.npmjs.com/package/@syncfusion/ej2-react-documenteditor).
+The Document Editor package is published to npm and can be installed from [`npmjs.com`](https://www.npmjs.com/package/@syncfusion/ej2-react-documenteditor).
 
 
 To install the Document Editor component, use the following command:
 
 ```bash
-npm install @syncfusion/ej2-react-documenteditor --save
+npm install @syncfusion/ej2-react-documenteditor
 ```
 
-### Add CSS reference
+For the full compatibility matrix, see the [React supported versions](https://ej2.syncfusion.com/react/documentation/system-requirement#react-supported-versions) section of the System Requirements page.
+
+### Register the license key
+
+Syncfusion requires a license key to be registered for production use. Generate your license key from the [Syncfusion License Dashboard](https://www.syncfusion.com/account/downloads) and register it in your app's entry file (`src/App.jsx`).
+
+Add the following line **before** any Syncfusion component is rendered:
+
+{% tabs %}
+{% highlight js tabtitle="App.jsx" %}
+
+import { registerLicense } from '@syncfusion/ej2-base';
+
+registerLicense('YOUR_LICENSE_KEY');
+
+{% endhighlight %}
+{% endtabs %}
+
+
+### Add CSS referenc
 
 Add the Document Editor component and its dependent component styles available in the `node_modules/@syncfusion` package folder. Reference these styles in the `src/index.css` file:
 
@@ -153,10 +257,17 @@ Add the Document Editor component and its dependent component styles available i
 {% endhighlight %}
 {% endtabs %}
 
+N> Refer to [themes topic](https://ej2.syncfusion.com/react/documentation/appearance/theme) to know more about built-in themes and different ways to refer to themes in a react project.
+
+Vite supports `@import` of `node_modules` paths natively, so no additional CSS preprocessor configuration is required. Make sure that `src/index.css` is imported from your entry file `src/main.jsx` so the component styles are included in the build output. The default Vite template already includes this import.
+
+**CSS load order matters:** The `@import` statements are processed in the order they appear, and later styles take precedence over earlier ones when specificity is equal. The component import (`@syncfusion/ej2-react-documenteditor`) is listed last so that any of your own custom styles added below it will override the default theme. If you add your own styles, place them **after** these imports to ensure they apply correctly.
+
 ### Add the Document Editor component
 
 Add the Document Editor component to your application. In the `src/App.jsx` file, add the following code to initialize the component:
 
+**File roles:** `src/main.jsx` is the application entry point (boots React and imports `index.css`); `src/index.css` holds the global styles including the Syncfusion `@import`s from the previous step; `src/App.jsx` is the root component where the Document Editor is rendered.
 
 {% tabs %}
 {% highlight js tabtitle="App.jsx" %}
@@ -167,13 +278,15 @@ DocumentEditorContainerComponent.Inject(Toolbar);
 
 function App() {
     return (
+      <div>
         <DocumentEditorContainerComponent 
             id="container" 
             height="590px" 
             // Use the following service URL only for demo purposes
             serviceUrl="https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/" 
             enableToolbar={true}
         />
+      </div>
     );
 }
 
@@ -182,22 +295,44 @@ export default App;
 {% endhighlight %}
 {% endtabs %}
 
-N> The hosted Web API URL is for demo and evaluation purposes only. For production, host your own web service using the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or the [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server).
+The following props are configured on `DocumentEditorContainerComponent` in the example above:
+
+| Property | Type | Description |
+| --- | --- | --- |
+| `id` | `string` | Sets the unique ID of the container element. |
+| `height` | `string \| number` | Sets the height of the editor container (e.g., `"590px"`). |
+| `serviceUrl` | `string` | URL of the server-side web service required for opening/saving non-SFDT formats, paste with formatting, restrict editing, and spell check. |
+| `enableToolbar` | `boolean` | When `true`, shows the built-in toolbar. Set to `false` to hide it. |
 
-### Run the  application
+**Toolbar registration:** The `Inject(Toolbar)` call registers the toolbar service with the editor container so the built-in formatting toolbar is rendered.
+
+N> The hosted Web API URL is for demo and evaluation purposes only. For production, or if the demo service is unavailable, deploy your own web service using the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or the [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server) and update the `serviceUrl` to point to it.
+
+### Run the application
 
 Run the application using the following command:
 
 ```bash
 npm run dev
 ```
+
+To build the application for production, run:
+
+```bash
+npm run build
+```
+
+This generates an optimized production build in the `dist/` folder. To preview the production build locally, run `npm run preview`.
+
 {% endtabcontent %}
 
 {% endtabcontents %}
 
-After the application starts, open the localhost URL shown in the terminal. The React Document Editor is rendered in the browser with a toolbar and an editable document area, as shown below.
+After the application starts, open the localhost URL shown in the terminal (default: `http://localhost:5173/`, or the next available port if `5173` is in use) in the browser. The React Document Editor is rendered in the browser with a toolbar and an editable document area, as shown below.
+
+![React Document Editor with toolbar and an empty editable area](./images/react_getting_started.png)
 
-![Output of React Document Editor](./images/react_getting_started.png)
+*React Document Editor with the built-in toolbar and an empty editing area, rendered in the browser after `npm run dev`.*
 
 You can also explore the Document Editor interactively using the live sample below.
 
@@ -217,7 +352,7 @@ To get started quickly with Document Editor component, you can check the video b
 
 ## Server-side dependencies
 
-The Document Editor component requires server-side interactions for the following operations:
+The Document Editor requires server-side interactions for:
 
 * Open file formats other than SFDT
 * Paste with formatting
@@ -231,8 +366,14 @@ For detailed information about server-side dependencies, refer to the [Web Servi
 
 N> Looking for the full React DOCX Editor component overview, features, pricing, and documentation? Visit the [React DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/react-docx-editor) page.
 
+## Troubleshooting
+
+If you experience issues while loading, opening, or saving documents, ensure that the Document Editor service is properly configured and reachable from your application. For more details refer this [troubleshooting page](https://help.syncfusion.com/document-processing/word/word-processor/react/troubleshooting/document-loading-issue-with-404-error)
+
 ## See also
 
 - [Open a document](./import)
 - [Save a document](./export)
-- [Collaborative Editing](./collaborative-editing/overview)
+- [Collaborative editing](./collaborative-editing/overview)
+- [Ribbon customization](./ribbon)
+- [Features overview](./feature-module)