diff --git a/Document-Processing-toc.html b/Document-Processing-toc.html
index a51280b771..b4de94fcb1 100644
--- a/Document-Processing-toc.html
+++ b/Document-Processing-toc.html
@@ -754,7 +754,6 @@
- Getting Started
- - with Syncfusion CLI
- with Standalone PDF Viewer
- with Server-Backed PDF Viewer
- Migrating from Server-Backed to Standalone
@@ -1323,7 +1322,6 @@
-
Getting Started
- - with Syncfusion CLI
- with Standalone PDF Viewer
- with Server-Backed PDF Viewer
- Migrating from Server-Backed to Standalone
@@ -1648,7 +1646,6 @@
- Getting Started
- - with Syncfusion CLI
- with Standalone PDF Viewer
- with Server-Backed PDF Viewer
- Vue 3
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/getting-started.md b/Document-Processing/PDF/PDF-Viewer/angular/getting-started.md
index 0de184519b..17735b4b54 100644
--- a/Document-Processing/PDF/PDF-Viewer/angular/getting-started.md
+++ b/Document-Processing/PDF/PDF-Viewer/angular/getting-started.md
@@ -9,7 +9,109 @@ domainurl: ##DomainURL##
# Getting Started with Angular PDF Viewer
-This section explains how to create a simple Angular application and add the standalone [Syncfusion® Angular PDF Viewer](https://www.syncfusion.com/pdf-viewer-sdk/angular-pdf-viewer) component with the minimum required setup.
+[Syncfusion® Angular PDF Viewer](https://www.syncfusion.com/pdf-viewer-sdk/angular-pdf-viewer) enables you to view, annotate, and interact with PDF documents in web applications. This section guides you through the steps to get started and create a PDF Viewer in an Angular application.
+
+{% tabcontents %}
+
+{% tabcontent Syncfusion CLI %}
+
+## Prerequisites
+
+- [Node.js 24+](https://nodejs.org/en) (LTS recommended).
+- Syncfusion CLI.
+
+## Install the Syncfusion CLI
+
+Install the Syncfusion CLI globally using the following command:
+
+{% tabs %}
+{% highlight bash tabtitle="npm" %}
+
+npm install -g @syncfusion/syncfusion-cli
+
+{% endhighlight %}
+{% endtabs %}
+
+## Set up the project using Syncfusion CLI
+
+You can create an Angular application using the Syncfusion CLI. The CLI provides two ways to create a project:
+
+### Non-interactive mode
+
+Non-interactive mode allows you to create a project directly using a single command with the required command-line arguments.
+
+{% tabs %}
+{% highlight bash tabtitle="CMD" %}
+
+sf new syncfusion-angular-app --framework angular --template pdf-viewer
+
+{% endhighlight %}
+{% endtabs %}
+
+In this mode, the project configuration is passed directly in the command. The above command creates an Angular application configured with the Syncfusion® `PDF Viewer` component.
+
+### Interactive mode
+
+Interactive mode guides you through the project creation process with step-by-step prompts.
+
+{% tabs %}
+{% highlight bash tabtitle="CMD" %}
+
+sf
+
+{% endhighlight %}
+{% endtabs %}
+
+When you run the `sf` command, the CLI prompts you to select the required project configuration. To create an Angular application with the Syncfusion® `PDF Viewer` component, select the following options:
+
+{% tabs %}
+{% highlight bash tabtitle="CMD" %}
+
+√ Project name? ... syncfusion-angular-app
+√ Choose Framework: » Angular
+√ Choose Build Tool: » Webpack
+√ Choose Language: » TypeScript
+√ Choose Template: » PDF Viewer
+√ Choose Theme: » Tailwind3
+√ Choose Style Format: » CSS
+√ Would you like to integrate the Syncfusion MCP Server (AI Assistant) into this project? ... no
+√ Would you like to install Syncfusion Component Skills for AI-powered development? ... no
+√ Install dependencies and start app now? ... no
+
+{% endhighlight %}
+{% endtabs %}
+
+The above selections generate an Angular application configured with the Syncfusion® `PDF Viewer` component. You can choose different values for language, theme, style format, MCP setup, and skills installation based on your project requirements.
+
+The Syncfusion® CLI creates the project with a predefined template. After the project is generated, you can customize or replace the component code based on your application requirements.
+
+## Run the project
+
+Once the project is created, navigate to the project directory and run the following commands in your terminal.
+
+{% tabs %}
+{% highlight bash tabtitle="CMD" %}
+
+cd syncfusion-angular-app
+npm install
+npm start
+
+{% endhighlight %}
+{% endtabs %}
+
+The output will appear as follows:
+
+
+
+You can also explore the PDF Viewer interactively using the live sample below.
+
+{% previewsample "/document-processing/samples/pdfviewer/angular/getting-started-cs1-standalone" %}
+
+N> [View Sample in GitHub](https://github.com/SyncfusionExamples/angular-pdf-viewer-examples/tree/master/Getting%20started%20-%20Standalone).
+
+{% endtabcontent %}
+
+{% tabcontent Angular CLI %}
## Prerequisites
@@ -40,7 +142,7 @@ cd pdfviewer-app
{% endhighlight %}
{% endtabs %}
-> **Note:** When prompted during project creation, select the default options: **CSS** for stylesheet, **No** for SSR/SSG, and **None** for AI tools. The available prompts may vary by Angular CLI version; accept the default values for any prompts not listed here.
+N> When prompted during project creation, select the default options: **CSS** for stylesheet, **No** for SSR/SSG, and **None** for AI tools. The available prompts may vary by Angular CLI version; accept the default values for any prompts not listed here.
## Install the Syncfusion® Angular PDF Viewer package
@@ -60,9 +162,13 @@ Themes for PDF Viewer can be applied using CSS or SASS files from the [npm theme
This guide uses the `Tailwind 3` theme as an example, sourced from the theme package. In this package, each component includes an `index.css` file that automatically loads all the required dependency styles. To install the [Tailwind 3](https://www.npmjs.com/package/@syncfusion/ej2-tailwind3-theme) theme package, use the following command:
-```bash
+{% tabs %}
+{% highlight bash tabtitle="npm" %}
+
npm install @syncfusion/ej2-tailwind3-theme
-```
+
+{% endhighlight %}
+{% endtabs %}
Add the required PDF Viewer theme style reference to the `src/styles.css` file:
@@ -76,11 +182,11 @@ Add the required PDF Viewer theme style reference to the `src/styles.css` file:
N> The `index.css` file automatically includes all required dependent component styles for the PDF Viewer. You do not need to import individual dependency styles such as Base, Buttons, Dropdowns, Inputs, Navigations, Popups, SplitButtons, and Notifications separately.
-> **Note:** Refer to the [Themes topic](https://ej2.syncfusion.com/angular/documentation/appearance/overview) to learn more about built-in themes and different ways to refer to themes in an Angular project.
+N> Refer to the [Themes topic](https://ej2.syncfusion.com/angular/documentation/appearance/overview) to learn more about built-in themes and different ways to refer to themes in an Angular project.
-## Add the Syncfusion® Angular PDF Viewer component to the application
+## Initialize the PDF Viewer
-Add the PDF Viewer component to your Angular application to render and interact with PDF documents. The component requires the **PdfViewerModule** and its associated services (for full functionality).
+Add the PDF Viewer component to your application. The component requires the **PdfViewerModule** and its associated services (for full functionality).
Update `src/app/app.ts` as shown below:
@@ -135,20 +241,26 @@ ng serve --open
{% endhighlight %}
{% endtabs %}
-After the application starts, open `http://localhost` (the default dev server URL) in the browser to view the Angular PDF Viewer component. The output will appear as follows:
+After the application starts, open `http://localhost` (the default dev server URL) in the browser. The Angular PDF Viewer is rendered in the browser with a toolbar and an interactive PDF area, as shown below.
+
+
-
+You can also explore the PDF Viewer interactively using the live sample below.
{% previewsample "/document-processing/samples/pdfviewer/angular/getting-started-cs1-standalone" %}
-> [View Sample in GitHub](https://github.com/SyncfusionExamples/angular-pdf-viewer-examples/tree/master/Getting%20started%20-%20Standalone)
+N> [View Sample in GitHub](https://github.com/SyncfusionExamples/angular-pdf-viewer-examples/tree/master/Getting%20started%20-%20Standalone).
## Video tutorial
-If you prefer a video walkthrough, watch the following tutorial to get started quickly with the Angular PDF Viewer.
+To get started quickly with the Angular PDF Viewer, you can watch this video:
{% youtube "https://www.youtube.com/watch?v=riZ1zACc5co" %}
+{% endtabcontent %}
+
+{% endtabcontents %}
+
## Angular version compatibility
For detailed compatibility information, refer to the [Angular version support matrix](https://ej2.syncfusion.com/angular/documentation/system-requirement#angular-version-compatibility).
@@ -160,7 +272,7 @@ For older Angular versions, refer to the following guides:
* [Create a Standalone PDF Viewer in Angular 17 and above without the --no-standalone flag](./how-to/create-a-standalone-pdf-viewer-in-angular-17-and-above-without-no-standalone-flag).
* [Create a Standalone PDF Viewer in Angular 12](./how-to/create-a-standalone-pdf-viewer-in-angular-12)
-> Looking for the full Angular PDF Viewer component overview, features, pricing, and documentation? Visit the [Angular PDF Viewer](https://www.syncfusion.com/pdf-viewer-sdk/angular-pdf-viewer) page.
+N> Looking for the full Angular PDF Viewer component overview, features, pricing, and documentation? Visit the [Angular PDF Viewer](https://www.syncfusion.com/pdf-viewer-sdk/angular-pdf-viewer) page.
## See also
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/setup-with-syncfusion-cli.md b/Document-Processing/PDF/PDF-Viewer/angular/setup-with-syncfusion-cli.md
deleted file mode 100644
index 8b7cdfad15..0000000000
--- a/Document-Processing/PDF/PDF-Viewer/angular/setup-with-syncfusion-cli.md
+++ /dev/null
@@ -1,110 +0,0 @@
----
-layout: post
-title: Setup with Syncfusion Cli in Angular PDF Viewer | Syncfusion
-description: Use the Syncfusion CLI to scaffold a new Angular project that includes the PDF Viewer, with both non-interactive and interactive setup modes.
-control: PDF Viewer
-platform: document-processing
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Set Up Angular PDF Viewer Using Syncfusion CLI
-
-This guide shows you how to set up an Angular PDF Viewer project using the Syncfusion CLI in minutes. The Syncfusion CLI automates project scaffolding with predefined templates, themes, and styling formats.
-
-## Prerequisites
-
-Before you begin, ensure you have the following:
-
-- **Node.js 24+ (LTS recommended)** — [Download Node.js](https://nodejs.org/en)
-- A command-line terminal (PowerShell, Terminal, or Command Prompt)
-- Basic familiarity with npm and Angular
-
-## Step 1: Install the Syncfusion CLI
-
-Install the Syncfusion CLI globally using the following command:
-
-```bash
-npm install -g @syncfusion/syncfusion-cli
-```
-
-## Step 2: Create an Angular PDF Viewer Project
-
-The Syncfusion CLI provides two ways to create a project: **non-interactive** and **interactive** mode.
-
-### Option A: Non-interactive Mode
-
-Create a project directly with a single command:
-
-```bash
-sf new my-pdf-viewer-app --framework angular --template pdf-viewer
-```
-
-This command instantly creates an Angular application configured with the EJ2 PDF Viewer component. Replace `my-pdf-viewer-app` with your desired project name.
-
-### Option B: Interactive Mode
-
-For a guided setup, run the CLI in interactive mode:
-
-```bash
-sf
-```
-
-The CLI will prompt you to select your project configuration. Follow these steps:
-
-1. **Project name** — Enter your project name (e.g., `my-pdf-viewer-app`)
-2. **Framework** — Select `Angular`
-3. **Build Tool** — Select `Webpack` or your preferred build tool
-4. **Language** — Select `TypeScript` or `JavaScript`
-5. **Template** — Select `PDF Viewer`
-6. **Theme** — Choose your preferred theme (e.g., `Material3`)
-7. **Style Format** — Select `CSS`, `SCSS`, or `Tailwind CSS`
-8. **Syncfusion MCP Server** — Choose `yes` or `no` (for AI-powered development)
-9. **Component Skills** — Choose `yes` or `no` (for AI-powered features)
-10. **Install dependencies and start app?** — Select `yes` to run immediately, or `no` to set up manually
-
-Example output:
-
-```
-✓ Project name? ... my-pdf-viewer-app
-✓ Choose Framework: » Angular
-✓ Choose Build Tool: » Webpack
-✓ Choose Language: » TypeScript
-✓ Choose Template: » PDF Viewer
-✓ Choose Theme: » Material3
-✓ Choose Style Format: » CSS
-✓ Would you like to integrate the Syncfusion MCP Server? ... no
-✓ Would you like to install Component Skills? ... no
-✓ Install dependencies and start app now? ... yes
-```
-
-## Step 3: Run Your Project
-
-If you selected `no` for automatic setup, navigate to your project and start the development server:
-
-```bash
-cd my-pdf-viewer-app
-npm install
-npm start
-```
-
-Your Angular PDF Viewer application will start on `http://localhost:4200` (or the next available port). The browser will automatically open with your project.
-
-After the application starts, you will see the Angular PDF Viewer in the browser with the sample PDF loaded and all toolbar controls ready to use. The output will appear as follows:
-
-
-
-The Syncfusion CLI creates a fully configured project with a predefined PDF Viewer template. The component files contain a basic PDF Viewer component initialized with all essential services (toolbar, annotations, search, form fields, etc.) and ready to use.
-
-## Next Steps
-
-After completing this guide, you will have a working Angular PDF Viewer project. You can now:
-
-- **Customize the PDF Viewer** — See [Customize Toolbar](./toolbar-customization/overview) to modify toolbars and controls
-- **Handle Events** — Learn about PDF Viewer events in [Event Handling](./events)
-- **Add Annotations** — Explore annotation features in [Annotation](./annotation/overview)
-- **Open PDF Files** — See [Open PDF Files](./open-pdf-files) for file handling
-- **Deploy Your App** — Refer to [Deployment Integration](./deployment-integration/ionic-angular) for production setup
-
-For more information, visit the [Getting Started with Angular PDF Viewer](./getting-started) guide or the [PDF Viewer Overview](../overview).
-
diff --git a/Document-Processing/PDF/PDF-Viewer/react/getting-started.md b/Document-Processing/PDF/PDF-Viewer/react/getting-started.md
index 217251e8a3..7fc75a2346 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/getting-started.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/getting-started.md
@@ -10,33 +10,134 @@ domainurl: ##DomainURL##
# Getting Started with React PDF Viewer
-This section explains how to create a simple React application and add the standalone [Syncfusion® React PDF Viewer](https://www.syncfusion.com/pdf-viewer-sdk/react-pdf-viewer) component with the minimum required setup.
+[Syncfusion® React PDF Viewer](https://www.syncfusion.com/pdf-viewer-sdk/react-pdf-viewer) enables you to view, annotate, and interact with PDF documents in web applications. This section guides you through the steps to get started and create a PDF Viewer in a React application.
+
+{% tabcontents %}
+
+{% tabcontent Syncfusion CLI %}
## Prerequisites
-[System requirements for Syncfusion® React components](https://ej2.syncfusion.com/react/documentation/system-requirement)
+- [Node.js 24+](https://nodejs.org/en) (LTS recommended).
+- Syncfusion CLI.
+
+## Install the Syncfusion CLI
+
+Install the Syncfusion CLI globally using the following command:
+
+{% tabs %}
+{% highlight bash tabtitle="npm" %}
+
+npm install -g @syncfusion/syncfusion-cli
-## Create a React application
+{% endhighlight %}
+{% endtabs %}
-Use [`Vite`](https://vitejs.dev/guide/) to create a new React application for a faster development environment, smaller bundle sizes, and optimized production builds.
+## Set up the Vite project using Syncfusion CLI
-To create a new React application, run one of the following commands based on your preferred environment.
+You can create a React Vite application using the Syncfusion CLI. The CLI provides two ways to create a project:
+
+### Non-interactive mode
+
+Non-interactive mode allows you to create a project directly using a single command with the required command-line arguments.
{% tabs %}
-{% highlight bash tabtitle="JavaScript" %}
+{% highlight bash tabtitle="CMD" %}
-npm create vite@latest pdf-viewer-app -- --template react
-cd pdf-viewer-app
+sf new syncfusion-react-app --framework react --template pdf-viewer --theme tailwind3
+
+{% endhighlight %}
+{% endtabs %}
+
+In this mode, the project configuration is passed directly in the command. The above command creates a React Vite application configured with the Syncfusion® `PDF Viewer` component.
+
+### Interactive mode
+
+Interactive mode guides you through the project creation process with step-by-step prompts.
+
+{% tabs %}
+{% highlight bash tabtitle="CMD" %}
+
+sf
+
+{% endhighlight %}
+{% endtabs %}
+
+When you run the `sf` command, the CLI prompts you to select the required project configuration. To create a React Vite application with the Syncfusion® `PDF Viewer` component, select the following options:
+
+{% tabs %}
+{% highlight bash tabtitle="CMD" %}
+
+√ Project name? ... syncfusion-react-app
+√ Choose Framework: » React
+√ Choose Build Tool: » Vite
+√ Choose Language: » JavaScript
+√ Choose Template: » PDF Viewer
+√ Choose Theme: » Tailwind3
+√ Choose Style Format: » CSS
+√ Would you like to integrate the Syncfusion MCP Server (AI Assistant) into this project? ... no
+√ Would you like to install Syncfusion Component Skills for AI-powered development? ... no
+√ Install dependencies and start app now? ... no
+
+{% endhighlight %}
+{% endtabs %}
+
+The above selections generate a React Vite application configured with the Syncfusion® `PDF Viewer` component. You can choose different values for language, theme, style format, MCP setup, and skills installation based on your project requirements.
+
+The Syncfusion® CLI creates the project with a predefined template. After the project is generated, you can customize or replace the component code based on your application requirements.
+
+## Run the project
+
+Once the project is created, navigate to the project directory and run the following commands in your terminal.
+
+{% tabs %}
+{% highlight bash tabtitle="CMD" %}
+
+cd syncfusion-react-app
+npm install
+npm run dev
{% endhighlight %}
+{% endtabs %}
+
+The output will appear as follows:
+
+
+
+You can also explore the PDF Viewer interactively using the live sample below.
+
+{% previewsample "/document-processing/code-snippet/pdfviewer/react/base-cs1-standalone" %}
+
+N> [View Sample in GitHub](https://github.com/SyncfusionExamples/react-pdf-viewer-examples/tree/master/Getting%20Started).
+
+{% endtabcontent %}
+
+{% tabcontent Vite CLI %}
+
+## Prerequisites
+
+* [System requirements for React components](https://ej2.syncfusion.com/react/documentation/system-requirement)
+* [Browser Compatibility](https://ej2.syncfusion.com/react/documentation/browser)
+
+## Create a new React application
+
+To set up a React application, run the following commands:
+
+{% tabs %}
{% highlight bash tabtitle="TypeScript" %}
npm create vite@latest pdf-viewer-app -- --template react-ts
cd pdf-viewer-app
{% endhighlight %}
-{% endtabs %}
+{% highlight bash tabtitle="JavaScript" %}
+
+npm create vite@latest pdf-viewer-app -- --template react
+cd pdf-viewer-app
+
+{% endhighlight %}
+{% endtabs %}
## Install the Syncfusion® React PDF Viewer package
@@ -56,9 +157,13 @@ Themes for PDF Viewer can be applied using CSS or SASS files from the [npm theme
This guide uses the `Tailwind 3` theme as an example, sourced from the theme package. In this package, each component includes an `index.css` file that automatically loads all the required dependency styles. To install the [Tailwind 3](https://www.npmjs.com/package/@syncfusion/ej2-tailwind3-theme) theme package, use the following command:
-```bash
+{% tabs %}
+{% highlight bash tabtitle="npm" %}
+
npm install @syncfusion/ej2-tailwind3-theme
-```
+
+{% endhighlight %}
+{% endtabs %}
By default, Vite projects include a `src/index.css` file with default styles. These default styles may conflict with Syncfusion component styles. Clear all content from the `src/index.css` file to prevent style conflicts.
@@ -74,7 +179,7 @@ The required styles for the PDF Viewer are imported in the **src/index.css** fil
N> The `index.css` file automatically includes all required dependent component styles for the PDF Viewer. You do not need to import individual dependency styles such as Base, Buttons, Dropdowns, Inputs, Navigations, Popups, and SplitButtons separately.
-## Add the Syncfusion® React PDF Viewer component to the application
+## Initialize the PDF Viewer
Add the **Syncfusion® React PDF Viewer** component to your `src/App.jsx` or `src/App.tsx` file.
@@ -138,7 +243,7 @@ N> To load PDF documents and resources from your local application instead of a
## Run the application
-Run the following command to start the React application:
+Run the application using the following command:
{% tabs %}
{% highlight bash tabtitle="Vite CLI" %}
@@ -156,7 +261,7 @@ You can also explore the PDF Viewer interactively using the live sample below.
{% previewsample "/document-processing/code-snippet/pdfviewer/react/base-cs1-standalone" %}
-> [View sample in GitHub](https://github.com/SyncfusionExamples/react-pdf-viewer-examples/tree/master/Getting%20Started).
+N> [View Sample in GitHub](https://github.com/SyncfusionExamples/react-pdf-viewer-examples/tree/master/Getting%20Started).
## Video tutorial
@@ -164,6 +269,10 @@ To get started quickly with React PDF Viewer, you can watch this video:
{% youtube "https://www.youtube.com/watch?v=VJibluQFWns" %}
+{% endtabcontent %}
+
+{% endtabcontents %}
+
## See also
- [Getting started with Server-Backed React PDF Viewer](./getting-started-with-server-backed)
diff --git a/Document-Processing/PDF/PDF-Viewer/react/setup-with-syncfusion-cli.md b/Document-Processing/PDF/PDF-Viewer/react/setup-with-syncfusion-cli.md
deleted file mode 100644
index afa3bcc7ae..0000000000
--- a/Document-Processing/PDF/PDF-Viewer/react/setup-with-syncfusion-cli.md
+++ /dev/null
@@ -1,109 +0,0 @@
----
-layout: post
-title: Setup with Syncfusion Cli in React PDF Viewer | Syncfusion
-description: Use the Syncfusion CLI to scaffold a new React project that includes the PDF Viewer, with both non-interactive and interactive setup modes.
-control: PDF Viewer
-platform: document-processing
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Set Up React PDF Viewer Using Syncfusion CLI
-
-This guide shows you how to set up a React PDF Viewer project using the Syncfusion CLI in minutes. The Syncfusion CLI automates project scaffolding with predefined templates, themes, and styling formats.
-
-## Prerequisites
-
-Before you begin, ensure you have the following:
-
-- **Node.js 24+ (LTS recommended)** — [Download Node.js](https://nodejs.org/en)
-- A command-line terminal (PowerShell, Terminal, or Command Prompt)
-- Basic familiarity with npm and React
-
-## Step 1: Install the Syncfusion CLI
-
-Install the Syncfusion CLI globally using the following command:
-
-```bash
-npm install -g @syncfusion/syncfusion-cli
-```
-
-## Step 2: Create a React PDF Viewer Project
-
-The Syncfusion CLI provides two ways to create a project: **non-interactive** and **interactive** mode.
-
-### Option A: Non-interactive Mode
-
-Create a project directly with a single command:
-
-```bash
-sf new my-pdf-viewer-app --framework react --template pdf-viewer
-```
-
-This command instantly creates a React Vite application configured with the EJ2 PDF Viewer component. Replace `my-pdf-viewer-app` with your desired project name.
-
-### Option B: Interactive Mode
-
-For a guided setup, run the CLI in interactive mode:
-
-```bash
-sf
-```
-
-The CLI will prompt you to select your project configuration. Follow these steps:
-
-1. **Project name** — Enter your project name (e.g., `my-pdf-viewer-app`)
-2. **Framework** — Select `React`
-3. **Build Tool** — Select `Vite`
-4. **Language** — Select `JavaScript` or `TypeScript`
-5. **Template** — Select `PDF Viewer`
-6. **Theme** — Choose your preferred theme (e.g., `Material3`)
-7. **Style Format** — Select `CSS`, `SCSS`, or `Tailwind CSS`
-8. **Syncfusion MCP Server** — Choose `yes` or `no` (for AI-powered development)
-9. **Component Skills** — Choose `yes` or `no` (for AI-powered features)
-10. **Install dependencies and start app?** — Select `yes` to run immediately, or `no` to set up manually
-
-Example output:
-
-```
-✓ Project name? ... my-pdf-viewer-app
-✓ Choose Framework: » React
-✓ Choose Build Tool: » Vite
-✓ Choose Language: » JavaScript
-✓ Choose Template: » PDF Viewer
-✓ Choose Theme: » Material3
-✓ Choose Style Format: » CSS
-✓ Would you like to integrate the Syncfusion MCP Server? ... no
-✓ Would you like to install Component Skills? ... no
-✓ Install dependencies and start app now? ... yes
-```
-
-## Step 3: Run Your Project
-
-If you selected `no` for automatic setup, navigate to your project and start the development server:
-
-```bash
-cd my-pdf-viewer-app
-npm install
-npm run dev
-```
-
-Your React PDF Viewer application will start on `http://localhost:5173` (or the next available port). The browser will automatically open with your project.
-
-After the application starts, you will see the React PDF Viewer in the browser with the sample PDF loaded and all toolbar controls ready to use. The output will appear as follows:
-
-
-
-The Syncfusion CLI creates a fully configured project with a predefined PDF Viewer template. The `App.jsx` file contains a basic PDF Viewer component initialized with all essential services (toolbar, annotations, search, form fields, etc.) and ready to use.
-
-## Next Steps
-
-After completing this guide, you will have a working React PDF Viewer project. You can now:
-
-- **Customize the PDF Viewer** — See [Customize Toolbar](./toolbar-customization/overview) to modify toolbars and controls
-- **Handle Events** — Learn about PDF Viewer events in [Event Handling](./events)
-- **Add Annotations** — Explore annotation features in [Annotations](./annotation/overview)
-- **Open PDF Files** — See [Open PDF Files](./open-pdf-files) for file handling
-- **Deploy Your App** — Refer to [Deployment Integration](./depoyment-integration/nextjs-getting-started) for production setup
-
-For more information, visit the [Getting Started with React PDF Viewer](./getting-started) guide or the [PDF Viewer Overview](../overview).
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/vue/getting-started.md b/Document-Processing/PDF/PDF-Viewer/vue/getting-started.md
index 30a0256809..a88ea65399 100644
--- a/Document-Processing/PDF/PDF-Viewer/vue/getting-started.md
+++ b/Document-Processing/PDF/PDF-Viewer/vue/getting-started.md
@@ -10,45 +10,157 @@ domainurl: ##DomainURL##
# Getting Started with Vue PDF Viewer
-This section explains how to create the **PDF Viewer** component and configure the PDF Viewer in a Vue 2 application using [Vue CLI](https://cli.vuejs.org/). The standalone PDF Viewer renders PDFs locally in the browser without requiring a server.
+[Syncfusion® Vue PDF Viewer](https://www.syncfusion.com/pdf-viewer-sdk/vue-pdf-viewer) enables you to view, annotate, and interact with PDF documents in web applications. This section guides you through the steps to get started and create a PDF Viewer in a Vue application.
+
+{% tabcontents %}
+
+{% tabcontent Syncfusion CLI %}
+
+## Prerequisites
+
+- [Node.js 24+](https://nodejs.org/en) (LTS recommended).
+- Syncfusion CLI.
+
+## Install the Syncfusion CLI
+
+Install the Syncfusion CLI globally using the following command:
+
+{% tabs %}
+{% highlight bash tabtitle="npm" %}
+
+npm install -g @syncfusion/syncfusion-cli
+
+{% endhighlight %}
+{% endtabs %}
+
+## Set up the project using Syncfusion CLI
+
+You can create a Vue application using the Syncfusion CLI. The CLI provides two ways to create a project:
+
+### Non-interactive mode
+
+Non-interactive mode allows you to create a project directly using a single command with the required command-line arguments.
+
+{% tabs %}
+{% highlight bash tabtitle="CMD" %}
+
+sf new syncfusion-vue-app --framework vue --template pdf-viewer
+
+{% endhighlight %}
+{% endtabs %}
+
+In this mode, the project configuration is passed directly in the command. The above command creates a Vue Vite application configured with the Syncfusion® `PDF Viewer` component.
+
+### Interactive mode
+
+Interactive mode guides you through the project creation process with step-by-step prompts.
+
+{% tabs %}
+{% highlight bash tabtitle="CMD" %}
+
+sf
+
+{% endhighlight %}
+{% endtabs %}
+
+When you run the `sf` command, the CLI prompts you to select the required project configuration. To create a Vue Vite application with the Syncfusion® `PDF Viewer` component, select the following options:
+
+{% tabs %}
+{% highlight bash tabtitle="CMD" %}
+
+√ Project name? ... syncfusion-vue-app
+√ Choose Framework: » Vue
+√ Choose Build Tool: » Vite
+√ Choose Language: » JavaScript
+√ Choose Template: » PDF Viewer
+√ Choose Theme: » Tailwind3
+√ Choose Style Format: » CSS
+√ Would you like to integrate the Syncfusion MCP Server (AI Assistant) into this project? ... no
+√ Would you like to install Syncfusion Component Skills for AI-powered development? ... no
+√ Install dependencies and start app now? ... no
+
+{% endhighlight %}
+{% endtabs %}
+
+The above selections generate a Vue Vite application configured with the Syncfusion® `PDF Viewer` component. You can choose different values for language, theme, style format, MCP setup, and skills installation based on your project requirements.
+
+The Syncfusion® CLI creates the project with a predefined template. After the project is generated, you can customize or replace the component code based on your application requirements.
+
+## Run the project
+
+Once the project is created, navigate to the project directory and run the following commands in your terminal.
+
+{% tabs %}
+{% highlight bash tabtitle="CMD" %}
+
+cd syncfusion-vue-app
+npm install
+npm run dev
+
+{% endhighlight %}
+{% endtabs %}
+
+The output will appear as follows:
+
+
+
+You can also explore the PDF Viewer interactively using the live sample below.
+
+{% previewsample "/document-processing/code-snippet/pdfviewer/vue/getting-started-cs2" %}
+
+N> [View Sample in GitHub](https://github.com/SyncfusionExamples/vue-pdf-viewer-examples/tree/master/Getting%20Started%20-%20Standalone).
+
+{% endtabcontent %}
+
+{% tabcontent Vue CLI %}
## Prerequisites
[System requirements for Vue components](https://ej2.syncfusion.com/vue/documentation/system-requirements)
-## Create a Vue Application
+## Create a Vue application
-Use one of the following commands to create a Vue application using [Vue CLI](https://cli.vuejs.org/#getting-started).
+Use one of the following commands to create a Vue 2 application using [Vue CLI](https://cli.vuejs.org/#getting-started).
{% tabs %}
{% highlight bash tabtitle="npm" %}
+
npm install -g @vue/cli
vue create quickstart
cd quickstart
+
{% endhighlight %}
{% highlight bash tabtitle="yarn" %}
+
yarn global add @vue/cli
vue create quickstart
cd quickstart
+
{% endhighlight %}
{% endtabs %}
When prompted, select the **Default ([Vue 2] babel, eslint)** option.
-> For Vue 3 application setup, see [Create a Vue 3 app](./getting-started-application).
+N> For Vue 3 application setup, see [Create a Vue 3 app](./getting-started-application).
## Install the Syncfusion® Vue PDF Viewer package
-Install the [Vue PDF Viewer](https://www.npmjs.com/package/@syncfusion/ej2-vue-pdfviewer) package from npm using the following command:
+The PDF Viewer package is available in the public npm registry and can be installed directly from [`npmjs.com`](https://www.npmjs.com/package/@syncfusion/ej2-vue-pdfviewer).
+
+To install the PDF Viewer component, use the following command:
{% tabs %}
{% highlight bash tabtitle="npm" %}
+
npm install @syncfusion/ej2-vue-pdfviewer --save
+
{% endhighlight %}
{% highlight bash tabtitle="yarn" %}
+
yarn add @syncfusion/ej2-vue-pdfviewer
+
{% endhighlight %}
{% endtabs %}
@@ -58,9 +170,13 @@ Themes for PDF Viewer can be applied using CSS or SASS files from the [npm theme
This guide uses the `Tailwind 3` theme as an example, sourced from the theme package. In this package, each component includes an `index.css` file that automatically loads all the required dependency styles. To install the [Tailwind 3](https://www.npmjs.com/package/@syncfusion/ej2-tailwind3-theme) theme package, use the following command:
-```bash
+{% tabs %}
+{% highlight bash tabtitle="npm" %}
+
npm install @syncfusion/ej2-tailwind3-theme
-```
+
+{% endhighlight %}
+{% endtabs %}
The required PDF Viewer theme styles are imported into the `