diff --git a/How to/Custom Context Menu/.gitignore b/How to/Custom Context Menu/.gitignore
new file mode 100644
index 0000000..1eae0cf
--- /dev/null
+++ b/How to/Custom Context Menu/.gitignore	
@@ -0,0 +1,2 @@
+dist/
+node_modules/
diff --git a/How to/Custom Context Menu/README.md b/How to/Custom Context Menu/README.md
new file mode 100644
index 0000000..46e0b02
--- /dev/null
+++ b/How to/Custom Context Menu/README.md	
@@ -0,0 +1,75 @@
+# Essential JS 2 QuickStart
+
+This project is a skeleton application used to create [Essential JS 2](https://www.syncfusion.com/products/essential-js2) web application.
+
+>This application uses the latest version of the [webpack-cli](https://webpack.js.org/api/cli/#commands). It requires node `v14.15.0` or higher.
+
+## Getting Started
+
+To get started you need to clone the `ej2-quickstart` repository and navigate to `ej2-quickstart` location.
+
+```
+git clone https://github.com/syncfusion/ej2-quickstart.git quickstart
+cd quickstart
+```
+
+## Installing
+
+We can get all the Essential JS 2 components in a single npm package [`ej2`](https://www.npmjs.com/package/@syncfusion/ej2).
+
+We already configure the required packages in the `package.json` file.
+
+You can run the below command to install all dependent packages related to this seed project.
+
+```
+npm install
+```
+
+## Testing
+
+This application is preconfigured with End-to-End testing and the test case is written in Jasmine.
+
+We run the test scripts with [Protractor](http://www.protractortest.org/#/) end-to-end test runner. The test case file can be found in the `e2e` folder.
+
+Protractor can interact with our web application and verify the test scripts.
+
+We have to install WebDriver and also need to ensure it is updated. Open a separate terminal and run the below npm script.
+
+```
+npm run update-webdriver
+```
+
+Open another terminal and run the below npm script. It will start web server to serve our application.
+
+```
+npm run serve
+```
+
+Once the web server is up and running, we can run the end-to-end tests using the below npm script
+
+```
+npm run test
+```
+
+> **Note:** Since Protractor is using the Selenium Standalone Server, the Java Development Kit (JDK) need to be installed in your local machine.
+
+If JDK is not installed in your local machine, you can download it from [here](http://www.oracle.com/technetwork/java/javase/downloads/index.html).
+
+## Running
+
+The application is configured with [webpack-dev-server](https://webpack.js.org/configuration/dev-server/#devserver), so it will serve the web application in your default browser.
+
+We have used [Webpack](https://github.com/webpack/webpack) for module loading.
+
+You can use the below npm script to run the web application.
+
+```
+npm run start
+```
+
+## Resources
+
+You can also refer the below resources to know more details about Essential JS 2 components.
+
+* [Pure JS Demos](http://ej2.syncfusion.com/demos/)
+* [Pure JS Documentation](http://ej2.syncfusion.com/documentation/)
diff --git a/How to/Custom Context Menu/e2e/index.spec.js b/How to/Custom Context Menu/e2e/index.spec.js
new file mode 100644
index 0000000..e69de29
diff --git a/How to/Custom Context Menu/e2e/protractor.conf.js b/How to/Custom Context Menu/e2e/protractor.conf.js
new file mode 100644
index 0000000..43eee1b
--- /dev/null
+++ b/How to/Custom Context Menu/e2e/protractor.conf.js	
@@ -0,0 +1,21 @@
+exports.config = {
+
+    allScriptsTimeout: 11000,
+
+    capabilities: {
+        'browserName': 'chrome'
+    },
+
+    framework: 'jasmine',
+
+    jasmineNodeOpts: {
+        defaultTimeoutInterval: 10000
+    },
+    directConnect: true,
+
+    onPrepare: function() {
+        browser.waitForAngularEnabled(false);
+    },
+
+    specs: ['./*.spec.js']
+};
\ No newline at end of file
diff --git a/How to/Custom Context Menu/gulpfile.js b/How to/Custom Context Menu/gulpfile.js
new file mode 100644
index 0000000..6a623f3
--- /dev/null
+++ b/How to/Custom Context Menu/gulpfile.js	
@@ -0,0 +1,62 @@
+'use strict';
+
+var gulp = require('gulp');
+
+/** 
+ * Compile TypeScript to JS
+ */
+gulp.task('compile', function (done) {
+    var webpack = require('webpack');
+    var webpackStream = require('webpack-stream');
+    gulp.src(['./src/app/app.ts']).pipe(webpackStream({
+        config: require('./webpack.config.js')
+    }, webpack))
+        .pipe(gulp.dest('./dist'))
+        .on('end', function () {
+            done();
+        });
+});
+
+/**
+ * Testing spec files
+ */
+var protractor = require('gulp-protractor').protractor;
+var webdriver_standalone = require('gulp-protractor').webdriver_standalone;
+var webdriver_update = require('gulp-protractor').webdriver_update_specific;
+
+gulp.task('e2e-serve', webdriver_standalone);
+
+gulp.task('e2e-webdriver-update', webdriver_update({
+    webdriverManagerArgs: ['--ie', '--edge']
+}));
+
+gulp.task('e2e-test', gulp.series('compile', function (done) {
+    var browserSync = require('browser-sync');
+    var bs = browserSync.create('Essential JS 2');
+    var options = {
+        server: {
+            baseDir: [
+                './dist/',
+            ],
+            directory: true
+        },
+        ui: false,
+        open: false,
+        notify: false
+    };
+    bs.init(options, function () {
+        gulp.src(['./spec/**/*.spec.js'])
+            .pipe(protractor({
+                configFile: 'e2e/protractor.conf.js'
+            }))
+            .on('error', function (e) {
+                console.error('Error: ' + e.message);
+                done();
+                process.exit(1);
+            })
+            .on('end', function () {
+                done();
+                process.exit(0);
+            });
+    });
+}));
\ No newline at end of file
diff --git a/How to/Custom Context Menu/license b/How to/Custom Context Menu/license
new file mode 100644
index 0000000..111c12a
--- /dev/null
+++ b/How to/Custom Context Menu/license	
@@ -0,0 +1,10 @@
+Essential JS 2 library is available under the Syncfusion Essential Studio program,  and can be licensed either under the Syncfusion Community License Program or the Syncfusion commercial license.
+
+To be qualified for the Syncfusion Community License Program you must have a gross revenue of less than one (1) million U.S. dollars ($1,000,000.00 USD) per year and have less than five (5) developers in your organization, and agree to be bound by Syncfusion’s terms and conditions. 
+
+Customers who do not qualify for the community license can contact sales@syncfusion.com for commercial licensing options.
+
+Under no circumstances can you use this product without (1) either a Community License or a commercial license and (2) without agreeing and abiding by Syncfusion’s license containing all terms and conditions. 
+
+The Syncfusion license that contains the terms and conditions can be found at 
+https://www.syncfusion.com/content/downloads/syncfusion_license.pdf
diff --git a/How to/Custom Context Menu/package.json b/How to/Custom Context Menu/package.json
new file mode 100644
index 0000000..81e4efa
--- /dev/null
+++ b/How to/Custom Context Menu/package.json	
@@ -0,0 +1,41 @@
+{
+  "name": "ej2-quickstart",
+  "version": "0.0.1",
+  "description": "Essential JS 2 typescript quick start application",
+  "author": "Syncfusion Inc.",
+  "license": "SEE LICENSE IN license",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/syncfusion/ej2-quickstart.git"
+  },
+  "scripts": {
+    "start": "webpack-dev-server --mode development",
+    "build": "webpack --mode production",
+    "serve": "gulp e2e-serve",
+    "test": "gulp e2e-test",
+    "update-webdriver": "gulp e2e-webdriver-update"
+  },
+  "devDependencies": {
+    "ajv": "^8.11.2",
+    "browser-sync": "^2.18.12",
+    "gulp": "*",
+    "typescript": "*",
+    "gulp-protractor": "*",
+    "gulp-typescript": "*",
+    "jasmine": "^2.6.0",
+    "css-loader": "^6.7.2",
+    "ts-loader": "^9.4.1",
+    "mini-css-extract-plugin": "^2.7.0",
+    "html-webpack-plugin": "^5.5.0",
+    "webpack": "^5.75.0",
+    "webpack-cli": "^5.0.0",
+    "webpack-dev-server": "^4.11.1",
+    "webpack-stream": "^7.0.0"
+  },
+  "dependencies": {
+    "@syncfusion/ej2": "*",
+    "@syncfusion/ej2-buttons": "*",
+    "@syncfusion/ej2-navigations":"*",
+    "@syncfusion/ej2-pdfviewer":"*"
+  }
+}
diff --git a/How to/Custom Context Menu/src/app/app.ts b/How to/Custom Context Menu/src/app/app.ts
new file mode 100644
index 0000000..2c8323d
--- /dev/null
+++ b/How to/Custom Context Menu/src/app/app.ts	
@@ -0,0 +1,167 @@
+import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer} from '@syncfusion/ej2-pdfviewer';
+import { MenuItemModel } from '@syncfusion/ej2-navigations';
+import { CheckBox, ChangeEventArgs } from '@syncfusion/ej2-buttons';
+PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer);
+
+let pdfviewer: PdfViewer = new PdfViewer();
+pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
+pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/23.1.43/dist/ej2-pdfviewer-lib";
+var menuItems: MenuItemModel[] = [
+    {
+        text: 'Search In Google',
+        id: 'search_in_google',
+        iconCss: 'e-icons e-search'
+    },
+    {
+        text: 'Lock Annotation',
+        iconCss: 'e-icons e-lock',
+        id: 'lock_annotation'
+    },
+    {
+        text: 'Unlock Annotation',
+        iconCss: 'e-icons e-unlock',
+        id: 'unlock_annotation'
+    },
+    {
+        text: 'Lock Form Fields',
+        iconCss: 'e-icons e-lock',
+        id: 'read_only_true'
+    },
+    {
+        text: 'Unlock Form Fields',
+        iconCss: 'e-icons e-unlock',
+        id: 'read_only_false'
+    },
+];
+pdfviewer.appendTo('#PdfViewer');
+
+pdfviewer.documentLoad = function (args: any) {
+    pdfviewer.addCustomMenu(menuItems, false, false);
+}
+
+pdfviewer.customContextMenuSelect = function (args: any) {
+    switch (args.id) {
+        case 'search_in_google':
+            for (var i = 0; i < pdfviewer.textSelectionModule.selectionRangeArray.length; i++) {
+                var content = pdfviewer.textSelectionModule.selectionRangeArray[i].textContent;
+                if ((pdfviewer.textSelectionModule.isTextSelection) && (/\S/.test(content))) {
+                    window.open('http://google.com/search?q=' + content);
+                }
+            }
+            break;
+        case 'lock_annotation':
+            lockAnnotations(args);
+            break;
+        case 'unlock_annotation':
+            unlockAnnotations(args);
+            break;
+        case 'read_only_true':
+            setReadOnlyTrue(args);
+            break;
+        case 'read_only_false':
+            setReadOnlyFalse(args);
+            break;
+        case 'formfield properties':
+            break;
+        default:
+            break;
+    }
+};
+
+pdfviewer.customContextMenuBeforeOpen = function (args: any) {
+    for (var i = 0; i < args.ids.length; i++) {
+        var search = document.getElementById(args.ids[i]);
+        if (search) {
+            search.style.display = 'none';
+            if (args.ids[i] === 'search_in_google' && (pdfviewer.textSelectionModule) && pdfviewer.textSelectionModule.isTextSelection) {
+                search.style.display = 'block';
+            } else if (args.ids[i] === "lock_annotation" || args.ids[i] === "unlock_annotation") {
+                var isLockOption = args.ids[i] === "lock_annotation";
+                for (var j = 0; j < pdfviewer.selectedItems.annotations.length; j++) {
+                    var selectedAnnotation: any = pdfviewer.selectedItems.annotations[j];
+                    if (selectedAnnotation && selectedAnnotation.annotationSettings) {
+                        var shouldDisplay = (isLockOption && !selectedAnnotation.annotationSettings.isLock) ||
+                            (!isLockOption && selectedAnnotation.annotationSettings.isLock);
+                        search.style.display = shouldDisplay ? 'block' : 'none';
+                    }
+                }
+            } else if ((args.ids[i] === "read_only_true" || args.ids[i] === "read_only_false") && pdfviewer.selectedItems.formFields.length !== 0) {
+                var isReadOnlyOption = args.ids[i] === "read_only_true";
+                for (var k = 0; k < pdfviewer.selectedItems.formFields.length; k++) {
+                    var selectedFormFields = pdfviewer.selectedItems.formFields[k];
+                    if (selectedFormFields) {
+                        var selectedFormField = pdfviewer.selectedItems.formFields[k].isReadonly;
+                        var displayMenu = (isReadOnlyOption && !selectedFormField) || (!isReadOnlyOption && selectedFormField);
+                        search.style.display = displayMenu ? 'block' : 'none';
+                    }
+                }
+            } else if (args.ids[i] === 'formfield properties' && pdfviewer.selectedItems.formFields.length !== 0) {
+                search.style.display = 'block';
+            }
+        }
+    }
+};
+
+function lockAnnotations(args: any) {
+    for (var i = 0; i < pdfviewer.annotationCollection.length; i++) {
+        if (pdfviewer.annotationCollection[i].uniqueKey === pdfviewer.selectedItems.annotations[0].id) {
+            pdfviewer.annotationCollection[i].annotationSettings.isLock = true;
+            pdfviewer.annotationCollection[i].isCommentLock = true;
+            pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]);
+        }
+        args.cancel = false;
+    }
+}
+
+function unlockAnnotations(args: any) {
+    for (var i = 0; i < pdfviewer.annotationCollection.length; i++) {
+        if (pdfviewer.annotationCollection[i].uniqueKey === pdfviewer.selectedItems.annotations[0].id) {
+            pdfviewer.annotationCollection[i].annotationSettings.isLock = false;
+            pdfviewer.annotationCollection[i].isCommentLock = false;
+            pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]);
+        }
+        args.cancel = false;
+    }
+}
+
+function setReadOnlyTrue(args: any) {
+    var selectedFormFields = pdfviewer.selectedItems.formFields;
+    for (var i = 0; i < selectedFormFields.length; i++) {
+        var selectedFormField = selectedFormFields[i];
+        if (selectedFormField) {
+            pdfviewer.formDesignerModule.updateFormField(selectedFormField, {
+                isReadOnly: true,
+            } as any);
+        }
+        args.cancel = false;
+    }
+}
+
+function setReadOnlyFalse(args: any) {
+    var selectedFormFields = pdfviewer.selectedItems.formFields;
+    for (var i = 0; i < selectedFormFields.length; i++) {
+        var selectedFormField = selectedFormFields[i];
+        if (selectedFormField) {
+            pdfviewer.formDesignerModule.updateFormField(selectedFormField, {
+                isReadOnly: false,
+            } as any);
+        }
+        args.cancel = false;
+    }
+}
+
+let defaultCheckBoxObj: CheckBox = new CheckBox({
+    change: contextmenuHelper,
+    label: "Hide Default Context Menu"
+});
+defaultCheckBoxObj.appendTo('#hide');
+
+let positionCheckBoxObj: CheckBox = new CheckBox({
+    change: contextmenuHelper,
+    label: "Add Custom option at bottom"
+});
+positionCheckBoxObj.appendTo('#toolbar');
+
+function contextmenuHelper(args: ChangeEventArgs): void {
+    pdfviewer.addCustomMenu(menuItems, defaultCheckBoxObj.checked, positionCheckBoxObj.checked);
+}
\ No newline at end of file
diff --git a/How to/Custom Context Menu/src/index.html b/How to/Custom Context Menu/src/index.html
new file mode 100644
index 0000000..c57dffd
--- /dev/null
+++ b/How to/Custom Context Menu/src/index.html	
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>Essential JS 2</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
+    <meta name="description" content="Essential JS 2" />
+    <meta name="author" content="Syncfusion" />
+    <link rel="shortcut icon" href="resources/favicon.ico" />
+    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
+</head>
+
+<body>
+    <br><br>
+    <div>
+        <input type="checkbox" id="hide">
+    </div>
+    <div> 
+        <input type="checkbox" id="toolbar">
+    </div>
+    <!--Element which will render as PDF Viewer -->
+    <div id="PdfViewer"></div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/How to/Custom Context Menu/src/resources/favicon.ico b/How to/Custom Context Menu/src/resources/favicon.ico
new file mode 100644
index 0000000..d8d5c15
Binary files /dev/null and b/How to/Custom Context Menu/src/resources/favicon.ico differ
diff --git a/How to/Custom Context Menu/src/styles/styles.css b/How to/Custom Context Menu/src/styles/styles.css
new file mode 100644
index 0000000..c5d413e
--- /dev/null
+++ b/How to/Custom Context Menu/src/styles/styles.css	
@@ -0,0 +1,9 @@
+@import '../../node_modules/@syncfusion/ej2-base/styles/material.css';  
+@import '../../node_modules/@syncfusion/ej2-buttons/styles/material.css';
+@import '../../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';  
+@import '../../node_modules/@syncfusion/ej2-inputs/styles/material.css';  
+@import '../../node_modules/@syncfusion/ej2-navigations/styles/material.css';
+@import '../../node_modules/@syncfusion/ej2-popups/styles/material.css';
+@import '../../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
+@import "../../node_modules/@syncfusion/ej2-pdfviewer/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-notifications/styles/material.css";
\ No newline at end of file
diff --git a/How to/Custom Context Menu/tsconfig.json b/How to/Custom Context Menu/tsconfig.json
new file mode 100644
index 0000000..db9b7c2
--- /dev/null
+++ b/How to/Custom Context Menu/tsconfig.json	
@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "target": "es2016",           
+    "module": "ES6",                                
+    "sourceMap": true,                                
+    "esModuleInterop": true,                             
+    "forceConsistentCasingInFileNames": true,            
+    "strict": true,                                      
+    "skipLibCheck": true,                               
+    "moduleResolution": "node"
+  }
+}
diff --git a/How to/Custom Context Menu/webpack.config.js b/How to/Custom Context Menu/webpack.config.js
new file mode 100644
index 0000000..f61e596
--- /dev/null
+++ b/How to/Custom Context Menu/webpack.config.js	
@@ -0,0 +1,41 @@
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const path = require('path');
+
+module.exports = {
+    entry: ['./src/app/app.ts', './src/styles/styles.css'],
+    module: {
+        rules: [
+            {
+                test: /\.ts?$/,
+                use: 'ts-loader',
+                exclude: /node_modules/,
+            },
+            {
+                test: /\.css$/,
+                use: [ MiniCssExtractPlugin.loader, "css-loader" ]
+            },
+        ],
+    },
+    resolve: {
+        extensions: ['.ts', '.js'],
+    },
+    output: {
+        filename: 'bundle.js',
+        path: path.resolve(__dirname, 'dist'),
+    },
+    plugins: [
+        new HtmlWebpackPlugin({
+            template: 'src/index.html'
+        }),
+        new MiniCssExtractPlugin({
+            filename: "bundle.css"
+        })
+    ],
+    devServer: {
+        static: path.join(__dirname, "dist"),
+        compress: true,
+        port: 4000,
+        open: true
+    },
+};
diff --git a/How to/Download start/.gitignore b/How to/Download start/.gitignore
new file mode 100644
index 0000000..1eae0cf
--- /dev/null
+++ b/How to/Download start/.gitignore	
@@ -0,0 +1,2 @@
+dist/
+node_modules/
diff --git a/How to/Download start/README.md b/How to/Download start/README.md
new file mode 100644
index 0000000..46e0b02
--- /dev/null
+++ b/How to/Download start/README.md	
@@ -0,0 +1,75 @@
+# Essential JS 2 QuickStart
+
+This project is a skeleton application used to create [Essential JS 2](https://www.syncfusion.com/products/essential-js2) web application.
+
+>This application uses the latest version of the [webpack-cli](https://webpack.js.org/api/cli/#commands). It requires node `v14.15.0` or higher.
+
+## Getting Started
+
+To get started you need to clone the `ej2-quickstart` repository and navigate to `ej2-quickstart` location.
+
+```
+git clone https://github.com/syncfusion/ej2-quickstart.git quickstart
+cd quickstart
+```
+
+## Installing
+
+We can get all the Essential JS 2 components in a single npm package [`ej2`](https://www.npmjs.com/package/@syncfusion/ej2).
+
+We already configure the required packages in the `package.json` file.
+
+You can run the below command to install all dependent packages related to this seed project.
+
+```
+npm install
+```
+
+## Testing
+
+This application is preconfigured with End-to-End testing and the test case is written in Jasmine.
+
+We run the test scripts with [Protractor](http://www.protractortest.org/#/) end-to-end test runner. The test case file can be found in the `e2e` folder.
+
+Protractor can interact with our web application and verify the test scripts.
+
+We have to install WebDriver and also need to ensure it is updated. Open a separate terminal and run the below npm script.
+
+```
+npm run update-webdriver
+```
+
+Open another terminal and run the below npm script. It will start web server to serve our application.
+
+```
+npm run serve
+```
+
+Once the web server is up and running, we can run the end-to-end tests using the below npm script
+
+```
+npm run test
+```
+
+> **Note:** Since Protractor is using the Selenium Standalone Server, the Java Development Kit (JDK) need to be installed in your local machine.
+
+If JDK is not installed in your local machine, you can download it from [here](http://www.oracle.com/technetwork/java/javase/downloads/index.html).
+
+## Running
+
+The application is configured with [webpack-dev-server](https://webpack.js.org/configuration/dev-server/#devserver), so it will serve the web application in your default browser.
+
+We have used [Webpack](https://github.com/webpack/webpack) for module loading.
+
+You can use the below npm script to run the web application.
+
+```
+npm run start
+```
+
+## Resources
+
+You can also refer the below resources to know more details about Essential JS 2 components.
+
+* [Pure JS Demos](http://ej2.syncfusion.com/demos/)
+* [Pure JS Documentation](http://ej2.syncfusion.com/documentation/)
diff --git a/How to/Download start/e2e/index.spec.js b/How to/Download start/e2e/index.spec.js
new file mode 100644
index 0000000..e69de29
diff --git a/How to/Download start/e2e/protractor.conf.js b/How to/Download start/e2e/protractor.conf.js
new file mode 100644
index 0000000..43eee1b
--- /dev/null
+++ b/How to/Download start/e2e/protractor.conf.js	
@@ -0,0 +1,21 @@
+exports.config = {
+
+    allScriptsTimeout: 11000,
+
+    capabilities: {
+        'browserName': 'chrome'
+    },
+
+    framework: 'jasmine',
+
+    jasmineNodeOpts: {
+        defaultTimeoutInterval: 10000
+    },
+    directConnect: true,
+
+    onPrepare: function() {
+        browser.waitForAngularEnabled(false);
+    },
+
+    specs: ['./*.spec.js']
+};
\ No newline at end of file
diff --git a/How to/Download start/gulpfile.js b/How to/Download start/gulpfile.js
new file mode 100644
index 0000000..6a623f3
--- /dev/null
+++ b/How to/Download start/gulpfile.js	
@@ -0,0 +1,62 @@
+'use strict';
+
+var gulp = require('gulp');
+
+/** 
+ * Compile TypeScript to JS
+ */
+gulp.task('compile', function (done) {
+    var webpack = require('webpack');
+    var webpackStream = require('webpack-stream');
+    gulp.src(['./src/app/app.ts']).pipe(webpackStream({
+        config: require('./webpack.config.js')
+    }, webpack))
+        .pipe(gulp.dest('./dist'))
+        .on('end', function () {
+            done();
+        });
+});
+
+/**
+ * Testing spec files
+ */
+var protractor = require('gulp-protractor').protractor;
+var webdriver_standalone = require('gulp-protractor').webdriver_standalone;
+var webdriver_update = require('gulp-protractor').webdriver_update_specific;
+
+gulp.task('e2e-serve', webdriver_standalone);
+
+gulp.task('e2e-webdriver-update', webdriver_update({
+    webdriverManagerArgs: ['--ie', '--edge']
+}));
+
+gulp.task('e2e-test', gulp.series('compile', function (done) {
+    var browserSync = require('browser-sync');
+    var bs = browserSync.create('Essential JS 2');
+    var options = {
+        server: {
+            baseDir: [
+                './dist/',
+            ],
+            directory: true
+        },
+        ui: false,
+        open: false,
+        notify: false
+    };
+    bs.init(options, function () {
+        gulp.src(['./spec/**/*.spec.js'])
+            .pipe(protractor({
+                configFile: 'e2e/protractor.conf.js'
+            }))
+            .on('error', function (e) {
+                console.error('Error: ' + e.message);
+                done();
+                process.exit(1);
+            })
+            .on('end', function () {
+                done();
+                process.exit(0);
+            });
+    });
+}));
\ No newline at end of file
diff --git a/How to/Download start/license b/How to/Download start/license
new file mode 100644
index 0000000..111c12a
--- /dev/null
+++ b/How to/Download start/license	
@@ -0,0 +1,10 @@
+Essential JS 2 library is available under the Syncfusion Essential Studio program,  and can be licensed either under the Syncfusion Community License Program or the Syncfusion commercial license.
+
+To be qualified for the Syncfusion Community License Program you must have a gross revenue of less than one (1) million U.S. dollars ($1,000,000.00 USD) per year and have less than five (5) developers in your organization, and agree to be bound by Syncfusion’s terms and conditions. 
+
+Customers who do not qualify for the community license can contact sales@syncfusion.com for commercial licensing options.
+
+Under no circumstances can you use this product without (1) either a Community License or a commercial license and (2) without agreeing and abiding by Syncfusion’s license containing all terms and conditions. 
+
+The Syncfusion license that contains the terms and conditions can be found at 
+https://www.syncfusion.com/content/downloads/syncfusion_license.pdf
diff --git a/How to/Download start/package.json b/How to/Download start/package.json
new file mode 100644
index 0000000..03a5252
--- /dev/null
+++ b/How to/Download start/package.json	
@@ -0,0 +1,38 @@
+{
+  "name": "ej2-quickstart",
+  "version": "0.0.1",
+  "description": "Essential JS 2 typescript quick start application",
+  "author": "Syncfusion Inc.",
+  "license": "SEE LICENSE IN license",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/syncfusion/ej2-quickstart.git"
+  },
+  "scripts": {
+    "start": "webpack-dev-server --mode development",
+    "build": "webpack --mode production",
+    "serve": "gulp e2e-serve",
+    "test": "gulp e2e-test",
+    "update-webdriver": "gulp e2e-webdriver-update"
+  },
+  "devDependencies": {
+    "ajv": "^8.11.2",
+    "browser-sync": "^2.18.12",
+    "gulp": "*",
+    "typescript": "*",
+    "gulp-protractor": "*",
+    "gulp-typescript": "*",
+    "jasmine": "^2.6.0",
+    "css-loader": "^6.7.2",
+    "ts-loader": "^9.4.1",
+    "mini-css-extract-plugin": "^2.7.0",
+    "html-webpack-plugin": "^5.5.0",
+    "webpack": "^5.75.0",
+    "webpack-cli": "^5.0.0",
+    "webpack-dev-server": "^4.11.1",
+    "webpack-stream": "^7.0.0"
+  },
+  "dependencies": {
+    "@syncfusion/ej2": "*"
+  }
+}
diff --git a/How to/Download start/src/app/app.ts b/How to/Download start/src/app/app.ts
new file mode 100644
index 0000000..a4f2e50
--- /dev/null
+++ b/How to/Download start/src/app/app.ts	
@@ -0,0 +1,12 @@
+import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner} from '@syncfusion/ej2-pdfviewer';
+
+PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner);
+
+let pdfviewer: PdfViewer = new PdfViewer();
+pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
+pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/23.1.43/dist/ej2-pdfviewer-lib";
+pdfviewer.appendTo('#PdfViewer');
+pdfviewer.downloadStart = (args: any) => {
+    // Your custom logic here
+    args.cancel = true; // Prevent download action
+};
\ No newline at end of file
diff --git a/How to/Download start/src/index.html b/How to/Download start/src/index.html
new file mode 100644
index 0000000..5d1a94b
--- /dev/null
+++ b/How to/Download start/src/index.html	
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>Essential JS 2</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
+    <meta name="description" content="Essential JS 2" />
+    <meta name="author" content="Syncfusion" />
+    <link rel="shortcut icon" href="resources/favicon.ico" />
+    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
+</head>
+
+<body>
+    <!--Element which will render as PDF Viewer -->
+    <div id="PdfViewer"></div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/How to/Download start/src/resources/favicon.ico b/How to/Download start/src/resources/favicon.ico
new file mode 100644
index 0000000..d8d5c15
Binary files /dev/null and b/How to/Download start/src/resources/favicon.ico differ
diff --git a/How to/Download start/src/styles/styles.css b/How to/Download start/src/styles/styles.css
new file mode 100644
index 0000000..c5d413e
--- /dev/null
+++ b/How to/Download start/src/styles/styles.css	
@@ -0,0 +1,9 @@
+@import '../../node_modules/@syncfusion/ej2-base/styles/material.css';  
+@import '../../node_modules/@syncfusion/ej2-buttons/styles/material.css';
+@import '../../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';  
+@import '../../node_modules/@syncfusion/ej2-inputs/styles/material.css';  
+@import '../../node_modules/@syncfusion/ej2-navigations/styles/material.css';
+@import '../../node_modules/@syncfusion/ej2-popups/styles/material.css';
+@import '../../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
+@import "../../node_modules/@syncfusion/ej2-pdfviewer/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-notifications/styles/material.css";
\ No newline at end of file
diff --git a/How to/Download start/tsconfig.json b/How to/Download start/tsconfig.json
new file mode 100644
index 0000000..db9b7c2
--- /dev/null
+++ b/How to/Download start/tsconfig.json	
@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "target": "es2016",           
+    "module": "ES6",                                
+    "sourceMap": true,                                
+    "esModuleInterop": true,                             
+    "forceConsistentCasingInFileNames": true,            
+    "strict": true,                                      
+    "skipLibCheck": true,                               
+    "moduleResolution": "node"
+  }
+}
diff --git a/How to/Download start/webpack.config.js b/How to/Download start/webpack.config.js
new file mode 100644
index 0000000..f61e596
--- /dev/null
+++ b/How to/Download start/webpack.config.js	
@@ -0,0 +1,41 @@
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const path = require('path');
+
+module.exports = {
+    entry: ['./src/app/app.ts', './src/styles/styles.css'],
+    module: {
+        rules: [
+            {
+                test: /\.ts?$/,
+                use: 'ts-loader',
+                exclude: /node_modules/,
+            },
+            {
+                test: /\.css$/,
+                use: [ MiniCssExtractPlugin.loader, "css-loader" ]
+            },
+        ],
+    },
+    resolve: {
+        extensions: ['.ts', '.js'],
+    },
+    output: {
+        filename: 'bundle.js',
+        path: path.resolve(__dirname, 'dist'),
+    },
+    plugins: [
+        new HtmlWebpackPlugin({
+            template: 'src/index.html'
+        }),
+        new MiniCssExtractPlugin({
+            filename: "bundle.css"
+        })
+    ],
+    devServer: {
+        static: path.join(__dirname, "dist"),
+        compress: true,
+        port: 4000,
+        open: true
+    },
+};
diff --git a/How to/Min and Max zoom/.gitignore b/How to/Min and Max zoom/.gitignore
new file mode 100644
index 0000000..1eae0cf
--- /dev/null
+++ b/How to/Min and Max zoom/.gitignore	
@@ -0,0 +1,2 @@
+dist/
+node_modules/
diff --git a/How to/Min and Max zoom/README.md b/How to/Min and Max zoom/README.md
new file mode 100644
index 0000000..46e0b02
--- /dev/null
+++ b/How to/Min and Max zoom/README.md	
@@ -0,0 +1,75 @@
+# Essential JS 2 QuickStart
+
+This project is a skeleton application used to create [Essential JS 2](https://www.syncfusion.com/products/essential-js2) web application.
+
+>This application uses the latest version of the [webpack-cli](https://webpack.js.org/api/cli/#commands). It requires node `v14.15.0` or higher.
+
+## Getting Started
+
+To get started you need to clone the `ej2-quickstart` repository and navigate to `ej2-quickstart` location.
+
+```
+git clone https://github.com/syncfusion/ej2-quickstart.git quickstart
+cd quickstart
+```
+
+## Installing
+
+We can get all the Essential JS 2 components in a single npm package [`ej2`](https://www.npmjs.com/package/@syncfusion/ej2).
+
+We already configure the required packages in the `package.json` file.
+
+You can run the below command to install all dependent packages related to this seed project.
+
+```
+npm install
+```
+
+## Testing
+
+This application is preconfigured with End-to-End testing and the test case is written in Jasmine.
+
+We run the test scripts with [Protractor](http://www.protractortest.org/#/) end-to-end test runner. The test case file can be found in the `e2e` folder.
+
+Protractor can interact with our web application and verify the test scripts.
+
+We have to install WebDriver and also need to ensure it is updated. Open a separate terminal and run the below npm script.
+
+```
+npm run update-webdriver
+```
+
+Open another terminal and run the below npm script. It will start web server to serve our application.
+
+```
+npm run serve
+```
+
+Once the web server is up and running, we can run the end-to-end tests using the below npm script
+
+```
+npm run test
+```
+
+> **Note:** Since Protractor is using the Selenium Standalone Server, the Java Development Kit (JDK) need to be installed in your local machine.
+
+If JDK is not installed in your local machine, you can download it from [here](http://www.oracle.com/technetwork/java/javase/downloads/index.html).
+
+## Running
+
+The application is configured with [webpack-dev-server](https://webpack.js.org/configuration/dev-server/#devserver), so it will serve the web application in your default browser.
+
+We have used [Webpack](https://github.com/webpack/webpack) for module loading.
+
+You can use the below npm script to run the web application.
+
+```
+npm run start
+```
+
+## Resources
+
+You can also refer the below resources to know more details about Essential JS 2 components.
+
+* [Pure JS Demos](http://ej2.syncfusion.com/demos/)
+* [Pure JS Documentation](http://ej2.syncfusion.com/documentation/)
diff --git a/How to/Min and Max zoom/e2e/index.spec.js b/How to/Min and Max zoom/e2e/index.spec.js
new file mode 100644
index 0000000..e69de29
diff --git a/How to/Min and Max zoom/e2e/protractor.conf.js b/How to/Min and Max zoom/e2e/protractor.conf.js
new file mode 100644
index 0000000..43eee1b
--- /dev/null
+++ b/How to/Min and Max zoom/e2e/protractor.conf.js	
@@ -0,0 +1,21 @@
+exports.config = {
+
+    allScriptsTimeout: 11000,
+
+    capabilities: {
+        'browserName': 'chrome'
+    },
+
+    framework: 'jasmine',
+
+    jasmineNodeOpts: {
+        defaultTimeoutInterval: 10000
+    },
+    directConnect: true,
+
+    onPrepare: function() {
+        browser.waitForAngularEnabled(false);
+    },
+
+    specs: ['./*.spec.js']
+};
\ No newline at end of file
diff --git a/How to/Min and Max zoom/gulpfile.js b/How to/Min and Max zoom/gulpfile.js
new file mode 100644
index 0000000..6a623f3
--- /dev/null
+++ b/How to/Min and Max zoom/gulpfile.js	
@@ -0,0 +1,62 @@
+'use strict';
+
+var gulp = require('gulp');
+
+/** 
+ * Compile TypeScript to JS
+ */
+gulp.task('compile', function (done) {
+    var webpack = require('webpack');
+    var webpackStream = require('webpack-stream');
+    gulp.src(['./src/app/app.ts']).pipe(webpackStream({
+        config: require('./webpack.config.js')
+    }, webpack))
+        .pipe(gulp.dest('./dist'))
+        .on('end', function () {
+            done();
+        });
+});
+
+/**
+ * Testing spec files
+ */
+var protractor = require('gulp-protractor').protractor;
+var webdriver_standalone = require('gulp-protractor').webdriver_standalone;
+var webdriver_update = require('gulp-protractor').webdriver_update_specific;
+
+gulp.task('e2e-serve', webdriver_standalone);
+
+gulp.task('e2e-webdriver-update', webdriver_update({
+    webdriverManagerArgs: ['--ie', '--edge']
+}));
+
+gulp.task('e2e-test', gulp.series('compile', function (done) {
+    var browserSync = require('browser-sync');
+    var bs = browserSync.create('Essential JS 2');
+    var options = {
+        server: {
+            baseDir: [
+                './dist/',
+            ],
+            directory: true
+        },
+        ui: false,
+        open: false,
+        notify: false
+    };
+    bs.init(options, function () {
+        gulp.src(['./spec/**/*.spec.js'])
+            .pipe(protractor({
+                configFile: 'e2e/protractor.conf.js'
+            }))
+            .on('error', function (e) {
+                console.error('Error: ' + e.message);
+                done();
+                process.exit(1);
+            })
+            .on('end', function () {
+                done();
+                process.exit(0);
+            });
+    });
+}));
\ No newline at end of file
diff --git a/How to/Min and Max zoom/license b/How to/Min and Max zoom/license
new file mode 100644
index 0000000..111c12a
--- /dev/null
+++ b/How to/Min and Max zoom/license	
@@ -0,0 +1,10 @@
+Essential JS 2 library is available under the Syncfusion Essential Studio program,  and can be licensed either under the Syncfusion Community License Program or the Syncfusion commercial license.
+
+To be qualified for the Syncfusion Community License Program you must have a gross revenue of less than one (1) million U.S. dollars ($1,000,000.00 USD) per year and have less than five (5) developers in your organization, and agree to be bound by Syncfusion’s terms and conditions. 
+
+Customers who do not qualify for the community license can contact sales@syncfusion.com for commercial licensing options.
+
+Under no circumstances can you use this product without (1) either a Community License or a commercial license and (2) without agreeing and abiding by Syncfusion’s license containing all terms and conditions. 
+
+The Syncfusion license that contains the terms and conditions can be found at 
+https://www.syncfusion.com/content/downloads/syncfusion_license.pdf
diff --git a/How to/Min and Max zoom/package.json b/How to/Min and Max zoom/package.json
new file mode 100644
index 0000000..03a5252
--- /dev/null
+++ b/How to/Min and Max zoom/package.json	
@@ -0,0 +1,38 @@
+{
+  "name": "ej2-quickstart",
+  "version": "0.0.1",
+  "description": "Essential JS 2 typescript quick start application",
+  "author": "Syncfusion Inc.",
+  "license": "SEE LICENSE IN license",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/syncfusion/ej2-quickstart.git"
+  },
+  "scripts": {
+    "start": "webpack-dev-server --mode development",
+    "build": "webpack --mode production",
+    "serve": "gulp e2e-serve",
+    "test": "gulp e2e-test",
+    "update-webdriver": "gulp e2e-webdriver-update"
+  },
+  "devDependencies": {
+    "ajv": "^8.11.2",
+    "browser-sync": "^2.18.12",
+    "gulp": "*",
+    "typescript": "*",
+    "gulp-protractor": "*",
+    "gulp-typescript": "*",
+    "jasmine": "^2.6.0",
+    "css-loader": "^6.7.2",
+    "ts-loader": "^9.4.1",
+    "mini-css-extract-plugin": "^2.7.0",
+    "html-webpack-plugin": "^5.5.0",
+    "webpack": "^5.75.0",
+    "webpack-cli": "^5.0.0",
+    "webpack-dev-server": "^4.11.1",
+    "webpack-stream": "^7.0.0"
+  },
+  "dependencies": {
+    "@syncfusion/ej2": "*"
+  }
+}
diff --git a/How to/Min and Max zoom/src/app/app.ts b/How to/Min and Max zoom/src/app/app.ts
new file mode 100644
index 0000000..8236875
--- /dev/null
+++ b/How to/Min and Max zoom/src/app/app.ts	
@@ -0,0 +1,10 @@
+import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner} from '@syncfusion/ej2-pdfviewer';
+
+PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner);
+
+let pdfviewer: PdfViewer = new PdfViewer();
+pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
+pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/23.1.43/dist/ej2-pdfviewer-lib";
+pdfviewer.maxZoom = 100;
+pdfviewer.minZoom = 10;
+pdfviewer.appendTo('#PdfViewer');
diff --git a/How to/Min and Max zoom/src/index.html b/How to/Min and Max zoom/src/index.html
new file mode 100644
index 0000000..5d1a94b
--- /dev/null
+++ b/How to/Min and Max zoom/src/index.html	
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>Essential JS 2</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
+    <meta name="description" content="Essential JS 2" />
+    <meta name="author" content="Syncfusion" />
+    <link rel="shortcut icon" href="resources/favicon.ico" />
+    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
+</head>
+
+<body>
+    <!--Element which will render as PDF Viewer -->
+    <div id="PdfViewer"></div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/How to/Min and Max zoom/src/resources/favicon.ico b/How to/Min and Max zoom/src/resources/favicon.ico
new file mode 100644
index 0000000..d8d5c15
Binary files /dev/null and b/How to/Min and Max zoom/src/resources/favicon.ico differ
diff --git a/How to/Min and Max zoom/src/styles/styles.css b/How to/Min and Max zoom/src/styles/styles.css
new file mode 100644
index 0000000..c5d413e
--- /dev/null
+++ b/How to/Min and Max zoom/src/styles/styles.css	
@@ -0,0 +1,9 @@
+@import '../../node_modules/@syncfusion/ej2-base/styles/material.css';  
+@import '../../node_modules/@syncfusion/ej2-buttons/styles/material.css';
+@import '../../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';  
+@import '../../node_modules/@syncfusion/ej2-inputs/styles/material.css';  
+@import '../../node_modules/@syncfusion/ej2-navigations/styles/material.css';
+@import '../../node_modules/@syncfusion/ej2-popups/styles/material.css';
+@import '../../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
+@import "../../node_modules/@syncfusion/ej2-pdfviewer/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-notifications/styles/material.css";
\ No newline at end of file
diff --git a/How to/Min and Max zoom/tsconfig.json b/How to/Min and Max zoom/tsconfig.json
new file mode 100644
index 0000000..db9b7c2
--- /dev/null
+++ b/How to/Min and Max zoom/tsconfig.json	
@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "target": "es2016",           
+    "module": "ES6",                                
+    "sourceMap": true,                                
+    "esModuleInterop": true,                             
+    "forceConsistentCasingInFileNames": true,            
+    "strict": true,                                      
+    "skipLibCheck": true,                               
+    "moduleResolution": "node"
+  }
+}
diff --git a/How to/Min and Max zoom/webpack.config.js b/How to/Min and Max zoom/webpack.config.js
new file mode 100644
index 0000000..f61e596
--- /dev/null
+++ b/How to/Min and Max zoom/webpack.config.js	
@@ -0,0 +1,41 @@
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const path = require('path');
+
+module.exports = {
+    entry: ['./src/app/app.ts', './src/styles/styles.css'],
+    module: {
+        rules: [
+            {
+                test: /\.ts?$/,
+                use: 'ts-loader',
+                exclude: /node_modules/,
+            },
+            {
+                test: /\.css$/,
+                use: [ MiniCssExtractPlugin.loader, "css-loader" ]
+            },
+        ],
+    },
+    resolve: {
+        extensions: ['.ts', '.js'],
+    },
+    output: {
+        filename: 'bundle.js',
+        path: path.resolve(__dirname, 'dist'),
+    },
+    plugins: [
+        new HtmlWebpackPlugin({
+            template: 'src/index.html'
+        }),
+        new MiniCssExtractPlugin({
+            filename: "bundle.css"
+        })
+    ],
+    devServer: {
+        static: path.join(__dirname, "dist"),
+        compress: true,
+        port: 4000,
+        open: true
+    },
+};
diff --git a/How to/Open and Close bookmark pane/.gitignore b/How to/Open and Close bookmark pane/.gitignore
new file mode 100644
index 0000000..1eae0cf
--- /dev/null
+++ b/How to/Open and Close bookmark pane/.gitignore	
@@ -0,0 +1,2 @@
+dist/
+node_modules/
diff --git a/How to/Open and Close bookmark pane/README.md b/How to/Open and Close bookmark pane/README.md
new file mode 100644
index 0000000..46e0b02
--- /dev/null
+++ b/How to/Open and Close bookmark pane/README.md	
@@ -0,0 +1,75 @@
+# Essential JS 2 QuickStart
+
+This project is a skeleton application used to create [Essential JS 2](https://www.syncfusion.com/products/essential-js2) web application.
+
+>This application uses the latest version of the [webpack-cli](https://webpack.js.org/api/cli/#commands). It requires node `v14.15.0` or higher.
+
+## Getting Started
+
+To get started you need to clone the `ej2-quickstart` repository and navigate to `ej2-quickstart` location.
+
+```
+git clone https://github.com/syncfusion/ej2-quickstart.git quickstart
+cd quickstart
+```
+
+## Installing
+
+We can get all the Essential JS 2 components in a single npm package [`ej2`](https://www.npmjs.com/package/@syncfusion/ej2).
+
+We already configure the required packages in the `package.json` file.
+
+You can run the below command to install all dependent packages related to this seed project.
+
+```
+npm install
+```
+
+## Testing
+
+This application is preconfigured with End-to-End testing and the test case is written in Jasmine.
+
+We run the test scripts with [Protractor](http://www.protractortest.org/#/) end-to-end test runner. The test case file can be found in the `e2e` folder.
+
+Protractor can interact with our web application and verify the test scripts.
+
+We have to install WebDriver and also need to ensure it is updated. Open a separate terminal and run the below npm script.
+
+```
+npm run update-webdriver
+```
+
+Open another terminal and run the below npm script. It will start web server to serve our application.
+
+```
+npm run serve
+```
+
+Once the web server is up and running, we can run the end-to-end tests using the below npm script
+
+```
+npm run test
+```
+
+> **Note:** Since Protractor is using the Selenium Standalone Server, the Java Development Kit (JDK) need to be installed in your local machine.
+
+If JDK is not installed in your local machine, you can download it from [here](http://www.oracle.com/technetwork/java/javase/downloads/index.html).
+
+## Running
+
+The application is configured with [webpack-dev-server](https://webpack.js.org/configuration/dev-server/#devserver), so it will serve the web application in your default browser.
+
+We have used [Webpack](https://github.com/webpack/webpack) for module loading.
+
+You can use the below npm script to run the web application.
+
+```
+npm run start
+```
+
+## Resources
+
+You can also refer the below resources to know more details about Essential JS 2 components.
+
+* [Pure JS Demos](http://ej2.syncfusion.com/demos/)
+* [Pure JS Documentation](http://ej2.syncfusion.com/documentation/)
diff --git a/How to/Open and Close bookmark pane/e2e/index.spec.js b/How to/Open and Close bookmark pane/e2e/index.spec.js
new file mode 100644
index 0000000..e69de29
diff --git a/How to/Open and Close bookmark pane/e2e/protractor.conf.js b/How to/Open and Close bookmark pane/e2e/protractor.conf.js
new file mode 100644
index 0000000..43eee1b
--- /dev/null
+++ b/How to/Open and Close bookmark pane/e2e/protractor.conf.js	
@@ -0,0 +1,21 @@
+exports.config = {
+
+    allScriptsTimeout: 11000,
+
+    capabilities: {
+        'browserName': 'chrome'
+    },
+
+    framework: 'jasmine',
+
+    jasmineNodeOpts: {
+        defaultTimeoutInterval: 10000
+    },
+    directConnect: true,
+
+    onPrepare: function() {
+        browser.waitForAngularEnabled(false);
+    },
+
+    specs: ['./*.spec.js']
+};
\ No newline at end of file
diff --git a/How to/Open and Close bookmark pane/gulpfile.js b/How to/Open and Close bookmark pane/gulpfile.js
new file mode 100644
index 0000000..6a623f3
--- /dev/null
+++ b/How to/Open and Close bookmark pane/gulpfile.js	
@@ -0,0 +1,62 @@
+'use strict';
+
+var gulp = require('gulp');
+
+/** 
+ * Compile TypeScript to JS
+ */
+gulp.task('compile', function (done) {
+    var webpack = require('webpack');
+    var webpackStream = require('webpack-stream');
+    gulp.src(['./src/app/app.ts']).pipe(webpackStream({
+        config: require('./webpack.config.js')
+    }, webpack))
+        .pipe(gulp.dest('./dist'))
+        .on('end', function () {
+            done();
+        });
+});
+
+/**
+ * Testing spec files
+ */
+var protractor = require('gulp-protractor').protractor;
+var webdriver_standalone = require('gulp-protractor').webdriver_standalone;
+var webdriver_update = require('gulp-protractor').webdriver_update_specific;
+
+gulp.task('e2e-serve', webdriver_standalone);
+
+gulp.task('e2e-webdriver-update', webdriver_update({
+    webdriverManagerArgs: ['--ie', '--edge']
+}));
+
+gulp.task('e2e-test', gulp.series('compile', function (done) {
+    var browserSync = require('browser-sync');
+    var bs = browserSync.create('Essential JS 2');
+    var options = {
+        server: {
+            baseDir: [
+                './dist/',
+            ],
+            directory: true
+        },
+        ui: false,
+        open: false,
+        notify: false
+    };
+    bs.init(options, function () {
+        gulp.src(['./spec/**/*.spec.js'])
+            .pipe(protractor({
+                configFile: 'e2e/protractor.conf.js'
+            }))
+            .on('error', function (e) {
+                console.error('Error: ' + e.message);
+                done();
+                process.exit(1);
+            })
+            .on('end', function () {
+                done();
+                process.exit(0);
+            });
+    });
+}));
\ No newline at end of file
diff --git a/How to/Open and Close bookmark pane/license b/How to/Open and Close bookmark pane/license
new file mode 100644
index 0000000..111c12a
--- /dev/null
+++ b/How to/Open and Close bookmark pane/license	
@@ -0,0 +1,10 @@
+Essential JS 2 library is available under the Syncfusion Essential Studio program,  and can be licensed either under the Syncfusion Community License Program or the Syncfusion commercial license.
+
+To be qualified for the Syncfusion Community License Program you must have a gross revenue of less than one (1) million U.S. dollars ($1,000,000.00 USD) per year and have less than five (5) developers in your organization, and agree to be bound by Syncfusion’s terms and conditions. 
+
+Customers who do not qualify for the community license can contact sales@syncfusion.com for commercial licensing options.
+
+Under no circumstances can you use this product without (1) either a Community License or a commercial license and (2) without agreeing and abiding by Syncfusion’s license containing all terms and conditions. 
+
+The Syncfusion license that contains the terms and conditions can be found at 
+https://www.syncfusion.com/content/downloads/syncfusion_license.pdf
diff --git a/How to/Open and Close bookmark pane/package.json b/How to/Open and Close bookmark pane/package.json
new file mode 100644
index 0000000..03a5252
--- /dev/null
+++ b/How to/Open and Close bookmark pane/package.json	
@@ -0,0 +1,38 @@
+{
+  "name": "ej2-quickstart",
+  "version": "0.0.1",
+  "description": "Essential JS 2 typescript quick start application",
+  "author": "Syncfusion Inc.",
+  "license": "SEE LICENSE IN license",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/syncfusion/ej2-quickstart.git"
+  },
+  "scripts": {
+    "start": "webpack-dev-server --mode development",
+    "build": "webpack --mode production",
+    "serve": "gulp e2e-serve",
+    "test": "gulp e2e-test",
+    "update-webdriver": "gulp e2e-webdriver-update"
+  },
+  "devDependencies": {
+    "ajv": "^8.11.2",
+    "browser-sync": "^2.18.12",
+    "gulp": "*",
+    "typescript": "*",
+    "gulp-protractor": "*",
+    "gulp-typescript": "*",
+    "jasmine": "^2.6.0",
+    "css-loader": "^6.7.2",
+    "ts-loader": "^9.4.1",
+    "mini-css-extract-plugin": "^2.7.0",
+    "html-webpack-plugin": "^5.5.0",
+    "webpack": "^5.75.0",
+    "webpack-cli": "^5.0.0",
+    "webpack-dev-server": "^4.11.1",
+    "webpack-stream": "^7.0.0"
+  },
+  "dependencies": {
+    "@syncfusion/ej2": "*"
+  }
+}
diff --git a/How to/Open and Close bookmark pane/src/app/app.ts b/How to/Open and Close bookmark pane/src/app/app.ts
new file mode 100644
index 0000000..871eb0f
--- /dev/null
+++ b/How to/Open and Close bookmark pane/src/app/app.ts	
@@ -0,0 +1,18 @@
+import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner} from '@syncfusion/ej2-pdfviewer';
+
+PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner);
+
+let pdfviewer: PdfViewer = new PdfViewer();
+pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
+pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/23.1.43/dist/ej2-pdfviewer-lib";
+
+pdfviewer.appendTo('#PdfViewer');
+document.getElementById('openBookmark').addEventListener('click', () => {
+    // Open Bookmark pane
+    pdfviewer.bookmarkViewModule.openBookmarkPane();
+});
+
+document.getElementById('closeBookmark').addEventListener('click', () => {
+    // close Bookmark pane
+    pdfviewer.bookmarkViewModule.closeBookmarkPane();
+});
\ No newline at end of file
diff --git a/How to/Open and Close bookmark pane/src/index.html b/How to/Open and Close bookmark pane/src/index.html
new file mode 100644
index 0000000..1146816
--- /dev/null
+++ b/How to/Open and Close bookmark pane/src/index.html	
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>Essential JS 2</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
+    <meta name="description" content="Essential JS 2" />
+    <meta name="author" content="Syncfusion" />
+    <link rel="shortcut icon" href="resources/favicon.ico" />
+    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
+</head>
+
+<body>
+    <button id="openBookmark">Open Bookmark Pane</button>
+    <button id="closeBookmark">Close Bookmark Pane</button>
+    <!--Element which will render as PDF Viewer -->
+    <div id="PdfViewer"></div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/How to/Open and Close bookmark pane/src/resources/favicon.ico b/How to/Open and Close bookmark pane/src/resources/favicon.ico
new file mode 100644
index 0000000..d8d5c15
Binary files /dev/null and b/How to/Open and Close bookmark pane/src/resources/favicon.ico differ
diff --git a/How to/Open and Close bookmark pane/src/styles/styles.css b/How to/Open and Close bookmark pane/src/styles/styles.css
new file mode 100644
index 0000000..c5d413e
--- /dev/null
+++ b/How to/Open and Close bookmark pane/src/styles/styles.css	
@@ -0,0 +1,9 @@
+@import '../../node_modules/@syncfusion/ej2-base/styles/material.css';  
+@import '../../node_modules/@syncfusion/ej2-buttons/styles/material.css';
+@import '../../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';  
+@import '../../node_modules/@syncfusion/ej2-inputs/styles/material.css';  
+@import '../../node_modules/@syncfusion/ej2-navigations/styles/material.css';
+@import '../../node_modules/@syncfusion/ej2-popups/styles/material.css';
+@import '../../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
+@import "../../node_modules/@syncfusion/ej2-pdfviewer/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-notifications/styles/material.css";
\ No newline at end of file
diff --git a/How to/Open and Close bookmark pane/tsconfig.json b/How to/Open and Close bookmark pane/tsconfig.json
new file mode 100644
index 0000000..db9b7c2
--- /dev/null
+++ b/How to/Open and Close bookmark pane/tsconfig.json	
@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "target": "es2016",           
+    "module": "ES6",                                
+    "sourceMap": true,                                
+    "esModuleInterop": true,                             
+    "forceConsistentCasingInFileNames": true,            
+    "strict": true,                                      
+    "skipLibCheck": true,                               
+    "moduleResolution": "node"
+  }
+}
diff --git a/How to/Open and Close bookmark pane/webpack.config.js b/How to/Open and Close bookmark pane/webpack.config.js
new file mode 100644
index 0000000..f61e596
--- /dev/null
+++ b/How to/Open and Close bookmark pane/webpack.config.js	
@@ -0,0 +1,41 @@
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const path = require('path');
+
+module.exports = {
+    entry: ['./src/app/app.ts', './src/styles/styles.css'],
+    module: {
+        rules: [
+            {
+                test: /\.ts?$/,
+                use: 'ts-loader',
+                exclude: /node_modules/,
+            },
+            {
+                test: /\.css$/,
+                use: [ MiniCssExtractPlugin.loader, "css-loader" ]
+            },
+        ],
+    },
+    resolve: {
+        extensions: ['.ts', '.js'],
+    },
+    output: {
+        filename: 'bundle.js',
+        path: path.resolve(__dirname, 'dist'),
+    },
+    plugins: [
+        new HtmlWebpackPlugin({
+            template: 'src/index.html'
+        }),
+        new MiniCssExtractPlugin({
+            filename: "bundle.css"
+        })
+    ],
+    devServer: {
+        static: path.join(__dirname, "dist"),
+        compress: true,
+        port: 4000,
+        open: true
+    },
+};
diff --git a/How to/Organize pdf/.github/workflows/gitleaks.yaml b/How to/Organize pdf/.github/workflows/gitleaks.yaml
new file mode 100644
index 0000000..df4c088
--- /dev/null
+++ b/How to/Organize pdf/.github/workflows/gitleaks.yaml	
@@ -0,0 +1,38 @@
+name: Secret Value found!!
+on:
+  push:
+  public:
+jobs:
+  scan:
+    name: gitleaks
+    runs-on: ubuntu-latest
+    steps:
+     - name: Checkout
+       uses: actions/checkout@v3 
+     - name: Install the gitleaks
+       run: wget https://github.com/zricethezav/gitleaks/releases/download/v8.15.2/gitleaks_8.15.2_linux_x64.tar.gz
+       shell: pwsh
+     - name: Extract the tar file
+       run: tar xzvf gitleaks_8.15.2_linux_x64.tar.gz
+     - name: Generate the report
+       id: gitleaks
+       run: $GITHUB_WORKSPACE/gitleaks detect -s $GITHUB_WORKSPACE -f json -r $GITHUB_WORKSPACE/leaksreport.json
+       shell: bash
+       continue-on-error: true
+     - name: Setup NuGet.exe
+       if: steps.gitleaks.outcome != 'success'
+       uses: nuget/setup-nuget@v1
+       with:
+          nuget-version: latest
+     - name: Install the dotnet
+       if: steps.gitleaks.outcome != 'success'
+       uses: actions/setup-dotnet@v3
+       with:
+          dotnet-version: '3.1.x'
+     - name: Install the report tool packages
+       if: steps.gitleaks.outcome != 'success'
+       run: |
+           nuget install "Syncfusion.Email" -source ${{ secrets.NexusFeedLink }} -ExcludeVersion
+           dir $GITHUB_WORKSPACE/Syncfusion.Email/lib/netcoreapp3.1
+           dotnet $GITHUB_WORKSPACE/Syncfusion.Email/lib/netcoreapp3.1/GitleaksReportMail.dll ${{ secrets.CITEAMCREDENTIALS }} "$GITHUB_REF_NAME" ${{ secrets.NETWORKCREDENTIALS }} ${{ secrets.NETWORKKEY }} "$GITHUB_WORKSPACE" ${{ secrets.ORGANIZATIONNAME }}
+           exit 1
\ No newline at end of file
diff --git a/How to/Organize pdf/.gitignore b/How to/Organize pdf/.gitignore
new file mode 100644
index 0000000..1eae0cf
--- /dev/null
+++ b/How to/Organize pdf/.gitignore	
@@ -0,0 +1,2 @@
+dist/
+node_modules/
diff --git a/How to/Organize pdf/README.md b/How to/Organize pdf/README.md
new file mode 100644
index 0000000..46e0b02
--- /dev/null
+++ b/How to/Organize pdf/README.md	
@@ -0,0 +1,75 @@
+# Essential JS 2 QuickStart
+
+This project is a skeleton application used to create [Essential JS 2](https://www.syncfusion.com/products/essential-js2) web application.
+
+>This application uses the latest version of the [webpack-cli](https://webpack.js.org/api/cli/#commands). It requires node `v14.15.0` or higher.
+
+## Getting Started
+
+To get started you need to clone the `ej2-quickstart` repository and navigate to `ej2-quickstart` location.
+
+```
+git clone https://github.com/syncfusion/ej2-quickstart.git quickstart
+cd quickstart
+```
+
+## Installing
+
+We can get all the Essential JS 2 components in a single npm package [`ej2`](https://www.npmjs.com/package/@syncfusion/ej2).
+
+We already configure the required packages in the `package.json` file.
+
+You can run the below command to install all dependent packages related to this seed project.
+
+```
+npm install
+```
+
+## Testing
+
+This application is preconfigured with End-to-End testing and the test case is written in Jasmine.
+
+We run the test scripts with [Protractor](http://www.protractortest.org/#/) end-to-end test runner. The test case file can be found in the `e2e` folder.
+
+Protractor can interact with our web application and verify the test scripts.
+
+We have to install WebDriver and also need to ensure it is updated. Open a separate terminal and run the below npm script.
+
+```
+npm run update-webdriver
+```
+
+Open another terminal and run the below npm script. It will start web server to serve our application.
+
+```
+npm run serve
+```
+
+Once the web server is up and running, we can run the end-to-end tests using the below npm script
+
+```
+npm run test
+```
+
+> **Note:** Since Protractor is using the Selenium Standalone Server, the Java Development Kit (JDK) need to be installed in your local machine.
+
+If JDK is not installed in your local machine, you can download it from [here](http://www.oracle.com/technetwork/java/javase/downloads/index.html).
+
+## Running
+
+The application is configured with [webpack-dev-server](https://webpack.js.org/configuration/dev-server/#devserver), so it will serve the web application in your default browser.
+
+We have used [Webpack](https://github.com/webpack/webpack) for module loading.
+
+You can use the below npm script to run the web application.
+
+```
+npm run start
+```
+
+## Resources
+
+You can also refer the below resources to know more details about Essential JS 2 components.
+
+* [Pure JS Demos](http://ej2.syncfusion.com/demos/)
+* [Pure JS Documentation](http://ej2.syncfusion.com/documentation/)
diff --git a/How to/Organize pdf/e2e/index.spec.js b/How to/Organize pdf/e2e/index.spec.js
new file mode 100644
index 0000000..e69de29
diff --git a/How to/Organize pdf/e2e/protractor.conf.js b/How to/Organize pdf/e2e/protractor.conf.js
new file mode 100644
index 0000000..43eee1b
--- /dev/null
+++ b/How to/Organize pdf/e2e/protractor.conf.js	
@@ -0,0 +1,21 @@
+exports.config = {
+
+    allScriptsTimeout: 11000,
+
+    capabilities: {
+        'browserName': 'chrome'
+    },
+
+    framework: 'jasmine',
+
+    jasmineNodeOpts: {
+        defaultTimeoutInterval: 10000
+    },
+    directConnect: true,
+
+    onPrepare: function() {
+        browser.waitForAngularEnabled(false);
+    },
+
+    specs: ['./*.spec.js']
+};
\ No newline at end of file
diff --git a/How to/Organize pdf/gulpfile.js b/How to/Organize pdf/gulpfile.js
new file mode 100644
index 0000000..6a623f3
--- /dev/null
+++ b/How to/Organize pdf/gulpfile.js	
@@ -0,0 +1,62 @@
+'use strict';
+
+var gulp = require('gulp');
+
+/** 
+ * Compile TypeScript to JS
+ */
+gulp.task('compile', function (done) {
+    var webpack = require('webpack');
+    var webpackStream = require('webpack-stream');
+    gulp.src(['./src/app/app.ts']).pipe(webpackStream({
+        config: require('./webpack.config.js')
+    }, webpack))
+        .pipe(gulp.dest('./dist'))
+        .on('end', function () {
+            done();
+        });
+});
+
+/**
+ * Testing spec files
+ */
+var protractor = require('gulp-protractor').protractor;
+var webdriver_standalone = require('gulp-protractor').webdriver_standalone;
+var webdriver_update = require('gulp-protractor').webdriver_update_specific;
+
+gulp.task('e2e-serve', webdriver_standalone);
+
+gulp.task('e2e-webdriver-update', webdriver_update({
+    webdriverManagerArgs: ['--ie', '--edge']
+}));
+
+gulp.task('e2e-test', gulp.series('compile', function (done) {
+    var browserSync = require('browser-sync');
+    var bs = browserSync.create('Essential JS 2');
+    var options = {
+        server: {
+            baseDir: [
+                './dist/',
+            ],
+            directory: true
+        },
+        ui: false,
+        open: false,
+        notify: false
+    };
+    bs.init(options, function () {
+        gulp.src(['./spec/**/*.spec.js'])
+            .pipe(protractor({
+                configFile: 'e2e/protractor.conf.js'
+            }))
+            .on('error', function (e) {
+                console.error('Error: ' + e.message);
+                done();
+                process.exit(1);
+            })
+            .on('end', function () {
+                done();
+                process.exit(0);
+            });
+    });
+}));
\ No newline at end of file
diff --git a/How to/Organize pdf/license b/How to/Organize pdf/license
new file mode 100644
index 0000000..111c12a
--- /dev/null
+++ b/How to/Organize pdf/license	
@@ -0,0 +1,10 @@
+Essential JS 2 library is available under the Syncfusion Essential Studio program,  and can be licensed either under the Syncfusion Community License Program or the Syncfusion commercial license.
+
+To be qualified for the Syncfusion Community License Program you must have a gross revenue of less than one (1) million U.S. dollars ($1,000,000.00 USD) per year and have less than five (5) developers in your organization, and agree to be bound by Syncfusion’s terms and conditions. 
+
+Customers who do not qualify for the community license can contact sales@syncfusion.com for commercial licensing options.
+
+Under no circumstances can you use this product without (1) either a Community License or a commercial license and (2) without agreeing and abiding by Syncfusion’s license containing all terms and conditions. 
+
+The Syncfusion license that contains the terms and conditions can be found at 
+https://www.syncfusion.com/content/downloads/syncfusion_license.pdf
diff --git a/How to/Organize pdf/package.json b/How to/Organize pdf/package.json
new file mode 100644
index 0000000..03a5252
--- /dev/null
+++ b/How to/Organize pdf/package.json	
@@ -0,0 +1,38 @@
+{
+  "name": "ej2-quickstart",
+  "version": "0.0.1",
+  "description": "Essential JS 2 typescript quick start application",
+  "author": "Syncfusion Inc.",
+  "license": "SEE LICENSE IN license",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/syncfusion/ej2-quickstart.git"
+  },
+  "scripts": {
+    "start": "webpack-dev-server --mode development",
+    "build": "webpack --mode production",
+    "serve": "gulp e2e-serve",
+    "test": "gulp e2e-test",
+    "update-webdriver": "gulp e2e-webdriver-update"
+  },
+  "devDependencies": {
+    "ajv": "^8.11.2",
+    "browser-sync": "^2.18.12",
+    "gulp": "*",
+    "typescript": "*",
+    "gulp-protractor": "*",
+    "gulp-typescript": "*",
+    "jasmine": "^2.6.0",
+    "css-loader": "^6.7.2",
+    "ts-loader": "^9.4.1",
+    "mini-css-extract-plugin": "^2.7.0",
+    "html-webpack-plugin": "^5.5.0",
+    "webpack": "^5.75.0",
+    "webpack-cli": "^5.0.0",
+    "webpack-dev-server": "^4.11.1",
+    "webpack-stream": "^7.0.0"
+  },
+  "dependencies": {
+    "@syncfusion/ej2": "*"
+  }
+}
diff --git a/How to/Organize pdf/src/app/app.ts b/How to/Organize pdf/src/app/app.ts
new file mode 100644
index 0000000..6585c9a
--- /dev/null
+++ b/How to/Organize pdf/src/app/app.ts	
@@ -0,0 +1,21 @@
+import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer} from '@syncfusion/ej2-pdfviewer';
+
+PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer);
+
+let pdfviewer: PdfViewer = new PdfViewer();
+pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
+pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/23.1.43/dist/ej2-pdfviewer-lib";
+pdfviewer.enablePageOrganizer = true;
+pdfviewer.isPageOrganizerOpen = true;
+pdfviewer.pageOrganizerSettings = {canDelete: true, canInsert: true, canRotate: true, canCopy: true, canRearrange: true}
+pdfviewer.appendTo('#PdfViewer');
+
+pdfviewer.documentLoad = function(){
+    var isInitialLoading = false;
+    if (isInitialLoading) {
+        pdfviewer.isPageOrganizerOpen = true;
+      isInitialLoading = false;
+    } else {
+        pdfviewer.isPageOrganizerOpen = false;
+    }
+};
\ No newline at end of file
diff --git a/How to/Organize pdf/src/index.html b/How to/Organize pdf/src/index.html
new file mode 100644
index 0000000..2e6e4dd
--- /dev/null
+++ b/How to/Organize pdf/src/index.html	
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>Essential JS 2</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
+    <meta name="description" content="Essential JS 2" />
+    <meta name="author" content="Syncfusion" />
+    <link rel="shortcut icon" href="resources/favicon.ico" />
+    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
+</head>
+
+<body>
+    <button id="openPageOrganizer">Open PageOrganizer Pane</button>
+    <button id="closePageOrganizer">Close PageOrganizer Pane</button>
+    <!--Element which will render as PDF Viewer -->
+    <div id="PdfViewer"></div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/How to/Organize pdf/src/resources/favicon.ico b/How to/Organize pdf/src/resources/favicon.ico
new file mode 100644
index 0000000..d8d5c15
Binary files /dev/null and b/How to/Organize pdf/src/resources/favicon.ico differ
diff --git a/How to/Organize pdf/src/styles/styles.css b/How to/Organize pdf/src/styles/styles.css
new file mode 100644
index 0000000..c5d413e
--- /dev/null
+++ b/How to/Organize pdf/src/styles/styles.css	
@@ -0,0 +1,9 @@
+@import '../../node_modules/@syncfusion/ej2-base/styles/material.css';  
+@import '../../node_modules/@syncfusion/ej2-buttons/styles/material.css';
+@import '../../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';  
+@import '../../node_modules/@syncfusion/ej2-inputs/styles/material.css';  
+@import '../../node_modules/@syncfusion/ej2-navigations/styles/material.css';
+@import '../../node_modules/@syncfusion/ej2-popups/styles/material.css';
+@import '../../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
+@import "../../node_modules/@syncfusion/ej2-pdfviewer/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-notifications/styles/material.css";
\ No newline at end of file
diff --git a/How to/Organize pdf/tsconfig.json b/How to/Organize pdf/tsconfig.json
new file mode 100644
index 0000000..db9b7c2
--- /dev/null
+++ b/How to/Organize pdf/tsconfig.json	
@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "target": "es2016",           
+    "module": "ES6",                                
+    "sourceMap": true,                                
+    "esModuleInterop": true,                             
+    "forceConsistentCasingInFileNames": true,            
+    "strict": true,                                      
+    "skipLibCheck": true,                               
+    "moduleResolution": "node"
+  }
+}
diff --git a/How to/Organize pdf/webpack.config.js b/How to/Organize pdf/webpack.config.js
new file mode 100644
index 0000000..f61e596
--- /dev/null
+++ b/How to/Organize pdf/webpack.config.js	
@@ -0,0 +1,41 @@
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const path = require('path');
+
+module.exports = {
+    entry: ['./src/app/app.ts', './src/styles/styles.css'],
+    module: {
+        rules: [
+            {
+                test: /\.ts?$/,
+                use: 'ts-loader',
+                exclude: /node_modules/,
+            },
+            {
+                test: /\.css$/,
+                use: [ MiniCssExtractPlugin.loader, "css-loader" ]
+            },
+        ],
+    },
+    resolve: {
+        extensions: ['.ts', '.js'],
+    },
+    output: {
+        filename: 'bundle.js',
+        path: path.resolve(__dirname, 'dist'),
+    },
+    plugins: [
+        new HtmlWebpackPlugin({
+            template: 'src/index.html'
+        }),
+        new MiniCssExtractPlugin({
+            filename: "bundle.css"
+        })
+    ],
+    devServer: {
+        static: path.join(__dirname, "dist"),
+        compress: true,
+        port: 4000,
+        open: true
+    },
+};
diff --git a/How to/PageRenderStarted and PageRenderCompleted event/.gitignore b/How to/PageRenderStarted and PageRenderCompleted event/.gitignore
new file mode 100644
index 0000000..1eae0cf
--- /dev/null
+++ b/How to/PageRenderStarted and PageRenderCompleted event/.gitignore	
@@ -0,0 +1,2 @@
+dist/
+node_modules/
diff --git a/How to/PageRenderStarted and PageRenderCompleted event/README.md b/How to/PageRenderStarted and PageRenderCompleted event/README.md
new file mode 100644
index 0000000..46e0b02
--- /dev/null
+++ b/How to/PageRenderStarted and PageRenderCompleted event/README.md	
@@ -0,0 +1,75 @@
+# Essential JS 2 QuickStart
+
+This project is a skeleton application used to create [Essential JS 2](https://www.syncfusion.com/products/essential-js2) web application.
+
+>This application uses the latest version of the [webpack-cli](https://webpack.js.org/api/cli/#commands). It requires node `v14.15.0` or higher.
+
+## Getting Started
+
+To get started you need to clone the `ej2-quickstart` repository and navigate to `ej2-quickstart` location.
+
+```
+git clone https://github.com/syncfusion/ej2-quickstart.git quickstart
+cd quickstart
+```
+
+## Installing
+
+We can get all the Essential JS 2 components in a single npm package [`ej2`](https://www.npmjs.com/package/@syncfusion/ej2).
+
+We already configure the required packages in the `package.json` file.
+
+You can run the below command to install all dependent packages related to this seed project.
+
+```
+npm install
+```
+
+## Testing
+
+This application is preconfigured with End-to-End testing and the test case is written in Jasmine.
+
+We run the test scripts with [Protractor](http://www.protractortest.org/#/) end-to-end test runner. The test case file can be found in the `e2e` folder.
+
+Protractor can interact with our web application and verify the test scripts.
+
+We have to install WebDriver and also need to ensure it is updated. Open a separate terminal and run the below npm script.
+
+```
+npm run update-webdriver
+```
+
+Open another terminal and run the below npm script. It will start web server to serve our application.
+
+```
+npm run serve
+```
+
+Once the web server is up and running, we can run the end-to-end tests using the below npm script
+
+```
+npm run test
+```
+
+> **Note:** Since Protractor is using the Selenium Standalone Server, the Java Development Kit (JDK) need to be installed in your local machine.
+
+If JDK is not installed in your local machine, you can download it from [here](http://www.oracle.com/technetwork/java/javase/downloads/index.html).
+
+## Running
+
+The application is configured with [webpack-dev-server](https://webpack.js.org/configuration/dev-server/#devserver), so it will serve the web application in your default browser.
+
+We have used [Webpack](https://github.com/webpack/webpack) for module loading.
+
+You can use the below npm script to run the web application.
+
+```
+npm run start
+```
+
+## Resources
+
+You can also refer the below resources to know more details about Essential JS 2 components.
+
+* [Pure JS Demos](http://ej2.syncfusion.com/demos/)
+* [Pure JS Documentation](http://ej2.syncfusion.com/documentation/)
diff --git a/How to/PageRenderStarted and PageRenderCompleted event/e2e/index.spec.js b/How to/PageRenderStarted and PageRenderCompleted event/e2e/index.spec.js
new file mode 100644
index 0000000..e69de29
diff --git a/How to/PageRenderStarted and PageRenderCompleted event/e2e/protractor.conf.js b/How to/PageRenderStarted and PageRenderCompleted event/e2e/protractor.conf.js
new file mode 100644
index 0000000..43eee1b
--- /dev/null
+++ b/How to/PageRenderStarted and PageRenderCompleted event/e2e/protractor.conf.js	
@@ -0,0 +1,21 @@
+exports.config = {
+
+    allScriptsTimeout: 11000,
+
+    capabilities: {
+        'browserName': 'chrome'
+    },
+
+    framework: 'jasmine',
+
+    jasmineNodeOpts: {
+        defaultTimeoutInterval: 10000
+    },
+    directConnect: true,
+
+    onPrepare: function() {
+        browser.waitForAngularEnabled(false);
+    },
+
+    specs: ['./*.spec.js']
+};
\ No newline at end of file
diff --git a/How to/PageRenderStarted and PageRenderCompleted event/gulpfile.js b/How to/PageRenderStarted and PageRenderCompleted event/gulpfile.js
new file mode 100644
index 0000000..6a623f3
--- /dev/null
+++ b/How to/PageRenderStarted and PageRenderCompleted event/gulpfile.js	
@@ -0,0 +1,62 @@
+'use strict';
+
+var gulp = require('gulp');
+
+/** 
+ * Compile TypeScript to JS
+ */
+gulp.task('compile', function (done) {
+    var webpack = require('webpack');
+    var webpackStream = require('webpack-stream');
+    gulp.src(['./src/app/app.ts']).pipe(webpackStream({
+        config: require('./webpack.config.js')
+    }, webpack))
+        .pipe(gulp.dest('./dist'))
+        .on('end', function () {
+            done();
+        });
+});
+
+/**
+ * Testing spec files
+ */
+var protractor = require('gulp-protractor').protractor;
+var webdriver_standalone = require('gulp-protractor').webdriver_standalone;
+var webdriver_update = require('gulp-protractor').webdriver_update_specific;
+
+gulp.task('e2e-serve', webdriver_standalone);
+
+gulp.task('e2e-webdriver-update', webdriver_update({
+    webdriverManagerArgs: ['--ie', '--edge']
+}));
+
+gulp.task('e2e-test', gulp.series('compile', function (done) {
+    var browserSync = require('browser-sync');
+    var bs = browserSync.create('Essential JS 2');
+    var options = {
+        server: {
+            baseDir: [
+                './dist/',
+            ],
+            directory: true
+        },
+        ui: false,
+        open: false,
+        notify: false
+    };
+    bs.init(options, function () {
+        gulp.src(['./spec/**/*.spec.js'])
+            .pipe(protractor({
+                configFile: 'e2e/protractor.conf.js'
+            }))
+            .on('error', function (e) {
+                console.error('Error: ' + e.message);
+                done();
+                process.exit(1);
+            })
+            .on('end', function () {
+                done();
+                process.exit(0);
+            });
+    });
+}));
\ No newline at end of file
diff --git a/How to/PageRenderStarted and PageRenderCompleted event/license b/How to/PageRenderStarted and PageRenderCompleted event/license
new file mode 100644
index 0000000..111c12a
--- /dev/null
+++ b/How to/PageRenderStarted and PageRenderCompleted event/license	
@@ -0,0 +1,10 @@
+Essential JS 2 library is available under the Syncfusion Essential Studio program,  and can be licensed either under the Syncfusion Community License Program or the Syncfusion commercial license.
+
+To be qualified for the Syncfusion Community License Program you must have a gross revenue of less than one (1) million U.S. dollars ($1,000,000.00 USD) per year and have less than five (5) developers in your organization, and agree to be bound by Syncfusion’s terms and conditions. 
+
+Customers who do not qualify for the community license can contact sales@syncfusion.com for commercial licensing options.
+
+Under no circumstances can you use this product without (1) either a Community License or a commercial license and (2) without agreeing and abiding by Syncfusion’s license containing all terms and conditions. 
+
+The Syncfusion license that contains the terms and conditions can be found at 
+https://www.syncfusion.com/content/downloads/syncfusion_license.pdf
diff --git a/How to/PageRenderStarted and PageRenderCompleted event/package.json b/How to/PageRenderStarted and PageRenderCompleted event/package.json
new file mode 100644
index 0000000..03a5252
--- /dev/null
+++ b/How to/PageRenderStarted and PageRenderCompleted event/package.json	
@@ -0,0 +1,38 @@
+{
+  "name": "ej2-quickstart",
+  "version": "0.0.1",
+  "description": "Essential JS 2 typescript quick start application",
+  "author": "Syncfusion Inc.",
+  "license": "SEE LICENSE IN license",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/syncfusion/ej2-quickstart.git"
+  },
+  "scripts": {
+    "start": "webpack-dev-server --mode development",
+    "build": "webpack --mode production",
+    "serve": "gulp e2e-serve",
+    "test": "gulp e2e-test",
+    "update-webdriver": "gulp e2e-webdriver-update"
+  },
+  "devDependencies": {
+    "ajv": "^8.11.2",
+    "browser-sync": "^2.18.12",
+    "gulp": "*",
+    "typescript": "*",
+    "gulp-protractor": "*",
+    "gulp-typescript": "*",
+    "jasmine": "^2.6.0",
+    "css-loader": "^6.7.2",
+    "ts-loader": "^9.4.1",
+    "mini-css-extract-plugin": "^2.7.0",
+    "html-webpack-plugin": "^5.5.0",
+    "webpack": "^5.75.0",
+    "webpack-cli": "^5.0.0",
+    "webpack-dev-server": "^4.11.1",
+    "webpack-stream": "^7.0.0"
+  },
+  "dependencies": {
+    "@syncfusion/ej2": "*"
+  }
+}
diff --git a/How to/PageRenderStarted and PageRenderCompleted event/src/app/app.ts b/How to/PageRenderStarted and PageRenderCompleted event/src/app/app.ts
new file mode 100644
index 0000000..437520b
--- /dev/null
+++ b/How to/PageRenderStarted and PageRenderCompleted event/src/app/app.ts	
@@ -0,0 +1,19 @@
+import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner} from '@syncfusion/ej2-pdfviewer';
+
+PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner);
+
+let pdfviewer: PdfViewer = new PdfViewer();
+pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
+pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/23.1.43/dist/ej2-pdfviewer-lib";
+pdfviewer.appendTo('#PdfViewer');
+pdfviewer.pageRenderInitiate = (args: any) => {
+    // This method is called when the page rendering starts
+   console.log('Rendering of pages started');
+   console.log(args);
+ };
+ 
+pdfviewer.pageRenderComplete = (args: any) => {
+    // This method is called when the page rendering completes
+    console.log('Rendering of pages completed');
+    console.log(args);
+};
\ No newline at end of file
diff --git a/How to/PageRenderStarted and PageRenderCompleted event/src/index.html b/How to/PageRenderStarted and PageRenderCompleted event/src/index.html
new file mode 100644
index 0000000..5d1a94b
--- /dev/null
+++ b/How to/PageRenderStarted and PageRenderCompleted event/src/index.html	
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>Essential JS 2</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
+    <meta name="description" content="Essential JS 2" />
+    <meta name="author" content="Syncfusion" />
+    <link rel="shortcut icon" href="resources/favicon.ico" />
+    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
+</head>
+
+<body>
+    <!--Element which will render as PDF Viewer -->
+    <div id="PdfViewer"></div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/How to/PageRenderStarted and PageRenderCompleted event/src/resources/favicon.ico b/How to/PageRenderStarted and PageRenderCompleted event/src/resources/favicon.ico
new file mode 100644
index 0000000..d8d5c15
Binary files /dev/null and b/How to/PageRenderStarted and PageRenderCompleted event/src/resources/favicon.ico differ
diff --git a/How to/PageRenderStarted and PageRenderCompleted event/src/styles/styles.css b/How to/PageRenderStarted and PageRenderCompleted event/src/styles/styles.css
new file mode 100644
index 0000000..c5d413e
--- /dev/null
+++ b/How to/PageRenderStarted and PageRenderCompleted event/src/styles/styles.css	
@@ -0,0 +1,9 @@
+@import '../../node_modules/@syncfusion/ej2-base/styles/material.css';  
+@import '../../node_modules/@syncfusion/ej2-buttons/styles/material.css';
+@import '../../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';  
+@import '../../node_modules/@syncfusion/ej2-inputs/styles/material.css';  
+@import '../../node_modules/@syncfusion/ej2-navigations/styles/material.css';
+@import '../../node_modules/@syncfusion/ej2-popups/styles/material.css';
+@import '../../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
+@import "../../node_modules/@syncfusion/ej2-pdfviewer/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-notifications/styles/material.css";
\ No newline at end of file
diff --git a/How to/PageRenderStarted and PageRenderCompleted event/tsconfig.json b/How to/PageRenderStarted and PageRenderCompleted event/tsconfig.json
new file mode 100644
index 0000000..db9b7c2
--- /dev/null
+++ b/How to/PageRenderStarted and PageRenderCompleted event/tsconfig.json	
@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "target": "es2016",           
+    "module": "ES6",                                
+    "sourceMap": true,                                
+    "esModuleInterop": true,                             
+    "forceConsistentCasingInFileNames": true,            
+    "strict": true,                                      
+    "skipLibCheck": true,                               
+    "moduleResolution": "node"
+  }
+}
diff --git a/How to/PageRenderStarted and PageRenderCompleted event/webpack.config.js b/How to/PageRenderStarted and PageRenderCompleted event/webpack.config.js
new file mode 100644
index 0000000..f61e596
--- /dev/null
+++ b/How to/PageRenderStarted and PageRenderCompleted event/webpack.config.js	
@@ -0,0 +1,41 @@
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const path = require('path');
+
+module.exports = {
+    entry: ['./src/app/app.ts', './src/styles/styles.css'],
+    module: {
+        rules: [
+            {
+                test: /\.ts?$/,
+                use: 'ts-loader',
+                exclude: /node_modules/,
+            },
+            {
+                test: /\.css$/,
+                use: [ MiniCssExtractPlugin.loader, "css-loader" ]
+            },
+        ],
+    },
+    resolve: {
+        extensions: ['.ts', '.js'],
+    },
+    output: {
+        filename: 'bundle.js',
+        path: path.resolve(__dirname, 'dist'),
+    },
+    plugins: [
+        new HtmlWebpackPlugin({
+            template: 'src/index.html'
+        }),
+        new MiniCssExtractPlugin({
+            filename: "bundle.css"
+        })
+    ],
+    devServer: {
+        static: path.join(__dirname, "dist"),
+        compress: true,
+        port: 4000,
+        open: true
+    },
+};
diff --git a/How to/Restrict Zoom Percentage on Mobile Devices/.github/workflows/gitleaks.yaml b/How to/Restrict Zoom Percentage on Mobile Devices/.github/workflows/gitleaks.yaml
new file mode 100644
index 0000000..df4c088
--- /dev/null
+++ b/How to/Restrict Zoom Percentage on Mobile Devices/.github/workflows/gitleaks.yaml	
@@ -0,0 +1,38 @@
+name: Secret Value found!!
+on:
+  push:
+  public:
+jobs:
+  scan:
+    name: gitleaks
+    runs-on: ubuntu-latest
+    steps:
+     - name: Checkout
+       uses: actions/checkout@v3 
+     - name: Install the gitleaks
+       run: wget https://github.com/zricethezav/gitleaks/releases/download/v8.15.2/gitleaks_8.15.2_linux_x64.tar.gz
+       shell: pwsh
+     - name: Extract the tar file
+       run: tar xzvf gitleaks_8.15.2_linux_x64.tar.gz
+     - name: Generate the report
+       id: gitleaks
+       run: $GITHUB_WORKSPACE/gitleaks detect -s $GITHUB_WORKSPACE -f json -r $GITHUB_WORKSPACE/leaksreport.json
+       shell: bash
+       continue-on-error: true
+     - name: Setup NuGet.exe
+       if: steps.gitleaks.outcome != 'success'
+       uses: nuget/setup-nuget@v1
+       with:
+          nuget-version: latest
+     - name: Install the dotnet
+       if: steps.gitleaks.outcome != 'success'
+       uses: actions/setup-dotnet@v3
+       with:
+          dotnet-version: '3.1.x'
+     - name: Install the report tool packages
+       if: steps.gitleaks.outcome != 'success'
+       run: |
+           nuget install "Syncfusion.Email" -source ${{ secrets.NexusFeedLink }} -ExcludeVersion
+           dir $GITHUB_WORKSPACE/Syncfusion.Email/lib/netcoreapp3.1
+           dotnet $GITHUB_WORKSPACE/Syncfusion.Email/lib/netcoreapp3.1/GitleaksReportMail.dll ${{ secrets.CITEAMCREDENTIALS }} "$GITHUB_REF_NAME" ${{ secrets.NETWORKCREDENTIALS }} ${{ secrets.NETWORKKEY }} "$GITHUB_WORKSPACE" ${{ secrets.ORGANIZATIONNAME }}
+           exit 1
\ No newline at end of file
diff --git a/How to/Restrict Zoom Percentage on Mobile Devices/.gitignore b/How to/Restrict Zoom Percentage on Mobile Devices/.gitignore
new file mode 100644
index 0000000..1eae0cf
--- /dev/null
+++ b/How to/Restrict Zoom Percentage on Mobile Devices/.gitignore	
@@ -0,0 +1,2 @@
+dist/
+node_modules/
diff --git a/How to/Restrict Zoom Percentage on Mobile Devices/README.md b/How to/Restrict Zoom Percentage on Mobile Devices/README.md
new file mode 100644
index 0000000..46e0b02
--- /dev/null
+++ b/How to/Restrict Zoom Percentage on Mobile Devices/README.md	
@@ -0,0 +1,75 @@
+# Essential JS 2 QuickStart
+
+This project is a skeleton application used to create [Essential JS 2](https://www.syncfusion.com/products/essential-js2) web application.
+
+>This application uses the latest version of the [webpack-cli](https://webpack.js.org/api/cli/#commands). It requires node `v14.15.0` or higher.
+
+## Getting Started
+
+To get started you need to clone the `ej2-quickstart` repository and navigate to `ej2-quickstart` location.
+
+```
+git clone https://github.com/syncfusion/ej2-quickstart.git quickstart
+cd quickstart
+```
+
+## Installing
+
+We can get all the Essential JS 2 components in a single npm package [`ej2`](https://www.npmjs.com/package/@syncfusion/ej2).
+
+We already configure the required packages in the `package.json` file.
+
+You can run the below command to install all dependent packages related to this seed project.
+
+```
+npm install
+```
+
+## Testing
+
+This application is preconfigured with End-to-End testing and the test case is written in Jasmine.
+
+We run the test scripts with [Protractor](http://www.protractortest.org/#/) end-to-end test runner. The test case file can be found in the `e2e` folder.
+
+Protractor can interact with our web application and verify the test scripts.
+
+We have to install WebDriver and also need to ensure it is updated. Open a separate terminal and run the below npm script.
+
+```
+npm run update-webdriver
+```
+
+Open another terminal and run the below npm script. It will start web server to serve our application.
+
+```
+npm run serve
+```
+
+Once the web server is up and running, we can run the end-to-end tests using the below npm script
+
+```
+npm run test
+```
+
+> **Note:** Since Protractor is using the Selenium Standalone Server, the Java Development Kit (JDK) need to be installed in your local machine.
+
+If JDK is not installed in your local machine, you can download it from [here](http://www.oracle.com/technetwork/java/javase/downloads/index.html).
+
+## Running
+
+The application is configured with [webpack-dev-server](https://webpack.js.org/configuration/dev-server/#devserver), so it will serve the web application in your default browser.
+
+We have used [Webpack](https://github.com/webpack/webpack) for module loading.
+
+You can use the below npm script to run the web application.
+
+```
+npm run start
+```
+
+## Resources
+
+You can also refer the below resources to know more details about Essential JS 2 components.
+
+* [Pure JS Demos](http://ej2.syncfusion.com/demos/)
+* [Pure JS Documentation](http://ej2.syncfusion.com/documentation/)
diff --git a/How to/Restrict Zoom Percentage on Mobile Devices/e2e/index.spec.js b/How to/Restrict Zoom Percentage on Mobile Devices/e2e/index.spec.js
new file mode 100644
index 0000000..e69de29
diff --git a/How to/Restrict Zoom Percentage on Mobile Devices/e2e/protractor.conf.js b/How to/Restrict Zoom Percentage on Mobile Devices/e2e/protractor.conf.js
new file mode 100644
index 0000000..43eee1b
--- /dev/null
+++ b/How to/Restrict Zoom Percentage on Mobile Devices/e2e/protractor.conf.js	
@@ -0,0 +1,21 @@
+exports.config = {
+
+    allScriptsTimeout: 11000,
+
+    capabilities: {
+        'browserName': 'chrome'
+    },
+
+    framework: 'jasmine',
+
+    jasmineNodeOpts: {
+        defaultTimeoutInterval: 10000
+    },
+    directConnect: true,
+
+    onPrepare: function() {
+        browser.waitForAngularEnabled(false);
+    },
+
+    specs: ['./*.spec.js']
+};
\ No newline at end of file
diff --git a/How to/Restrict Zoom Percentage on Mobile Devices/gulpfile.js b/How to/Restrict Zoom Percentage on Mobile Devices/gulpfile.js
new file mode 100644
index 0000000..6a623f3
--- /dev/null
+++ b/How to/Restrict Zoom Percentage on Mobile Devices/gulpfile.js	
@@ -0,0 +1,62 @@
+'use strict';
+
+var gulp = require('gulp');
+
+/** 
+ * Compile TypeScript to JS
+ */
+gulp.task('compile', function (done) {
+    var webpack = require('webpack');
+    var webpackStream = require('webpack-stream');
+    gulp.src(['./src/app/app.ts']).pipe(webpackStream({
+        config: require('./webpack.config.js')
+    }, webpack))
+        .pipe(gulp.dest('./dist'))
+        .on('end', function () {
+            done();
+        });
+});
+
+/**
+ * Testing spec files
+ */
+var protractor = require('gulp-protractor').protractor;
+var webdriver_standalone = require('gulp-protractor').webdriver_standalone;
+var webdriver_update = require('gulp-protractor').webdriver_update_specific;
+
+gulp.task('e2e-serve', webdriver_standalone);
+
+gulp.task('e2e-webdriver-update', webdriver_update({
+    webdriverManagerArgs: ['--ie', '--edge']
+}));
+
+gulp.task('e2e-test', gulp.series('compile', function (done) {
+    var browserSync = require('browser-sync');
+    var bs = browserSync.create('Essential JS 2');
+    var options = {
+        server: {
+            baseDir: [
+                './dist/',
+            ],
+            directory: true
+        },
+        ui: false,
+        open: false,
+        notify: false
+    };
+    bs.init(options, function () {
+        gulp.src(['./spec/**/*.spec.js'])
+            .pipe(protractor({
+                configFile: 'e2e/protractor.conf.js'
+            }))
+            .on('error', function (e) {
+                console.error('Error: ' + e.message);
+                done();
+                process.exit(1);
+            })
+            .on('end', function () {
+                done();
+                process.exit(0);
+            });
+    });
+}));
\ No newline at end of file
diff --git a/How to/Restrict Zoom Percentage on Mobile Devices/license b/How to/Restrict Zoom Percentage on Mobile Devices/license
new file mode 100644
index 0000000..111c12a
--- /dev/null
+++ b/How to/Restrict Zoom Percentage on Mobile Devices/license	
@@ -0,0 +1,10 @@
+Essential JS 2 library is available under the Syncfusion Essential Studio program,  and can be licensed either under the Syncfusion Community License Program or the Syncfusion commercial license.
+
+To be qualified for the Syncfusion Community License Program you must have a gross revenue of less than one (1) million U.S. dollars ($1,000,000.00 USD) per year and have less than five (5) developers in your organization, and agree to be bound by Syncfusion’s terms and conditions. 
+
+Customers who do not qualify for the community license can contact sales@syncfusion.com for commercial licensing options.
+
+Under no circumstances can you use this product without (1) either a Community License or a commercial license and (2) without agreeing and abiding by Syncfusion’s license containing all terms and conditions. 
+
+The Syncfusion license that contains the terms and conditions can be found at 
+https://www.syncfusion.com/content/downloads/syncfusion_license.pdf
diff --git a/How to/Restrict Zoom Percentage on Mobile Devices/package.json b/How to/Restrict Zoom Percentage on Mobile Devices/package.json
new file mode 100644
index 0000000..5e76ade
--- /dev/null
+++ b/How to/Restrict Zoom Percentage on Mobile Devices/package.json	
@@ -0,0 +1,39 @@
+{
+  "name": "ej2-quickstart",
+  "version": "0.0.1",
+  "description": "Essential JS 2 typescript quick start application",
+  "author": "Syncfusion Inc.",
+  "license": "SEE LICENSE IN license",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/syncfusion/ej2-quickstart.git"
+  },
+  "scripts": {
+    "start": "webpack-dev-server --mode development",
+    "build": "webpack --mode production",
+    "serve": "gulp e2e-serve",
+    "test": "gulp e2e-test",
+    "update-webdriver": "gulp e2e-webdriver-update"
+  },
+  "devDependencies": {
+    "ajv": "^8.11.2",
+    "browser-sync": "^2.18.12",
+    "gulp": "*",
+    "typescript": "*",
+    "gulp-protractor": "*",
+    "gulp-typescript": "*",
+    "jasmine": "^2.6.0",
+    "css-loader": "^6.7.2",
+    "ts-loader": "^9.4.1",
+    "mini-css-extract-plugin": "^2.7.0",
+    "html-webpack-plugin": "^5.5.0",
+    "webpack": "^5.75.0",
+    "webpack-cli": "^5.0.0",
+    "webpack-dev-server": "^4.11.1",
+    "webpack-stream": "^7.0.0"
+  },
+  "dependencies": {
+    "@syncfusion/ej2": "*",
+    "@syncfusion/ej2-base": "*"
+  }
+}
diff --git a/How to/Restrict Zoom Percentage on Mobile Devices/src/app/app.ts b/How to/Restrict Zoom Percentage on Mobile Devices/src/app/app.ts
new file mode 100644
index 0000000..e4e3f74
--- /dev/null
+++ b/How to/Restrict Zoom Percentage on Mobile Devices/src/app/app.ts	
@@ -0,0 +1,19 @@
+import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer} from '@syncfusion/ej2-pdfviewer';
+import  {Browser} from '@syncfusion/ej2-base';
+
+PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer);
+
+let pdfviewer: PdfViewer = new PdfViewer();
+pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
+pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/23.1.43/dist/ej2-pdfviewer-lib";
+pdfviewer.appendTo('#PdfViewer');
+
+pdfviewer.documentLoad = function(){
+    if (Browser.isDevice && !pdfviewer.enableDesktopMode) {
+        pdfviewer.maxZoom = 200;
+        pdfviewer.minZoom = 10;
+    }
+    else{
+        pdfviewer.zoomMode = 'Default';
+    }
+};
\ No newline at end of file
diff --git a/How to/Restrict Zoom Percentage on Mobile Devices/src/index.html b/How to/Restrict Zoom Percentage on Mobile Devices/src/index.html
new file mode 100644
index 0000000..5d1a94b
--- /dev/null
+++ b/How to/Restrict Zoom Percentage on Mobile Devices/src/index.html	
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>Essential JS 2</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
+    <meta name="description" content="Essential JS 2" />
+    <meta name="author" content="Syncfusion" />
+    <link rel="shortcut icon" href="resources/favicon.ico" />
+    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
+</head>
+
+<body>
+    <!--Element which will render as PDF Viewer -->
+    <div id="PdfViewer"></div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/How to/Restrict Zoom Percentage on Mobile Devices/src/resources/favicon.ico b/How to/Restrict Zoom Percentage on Mobile Devices/src/resources/favicon.ico
new file mode 100644
index 0000000..d8d5c15
Binary files /dev/null and b/How to/Restrict Zoom Percentage on Mobile Devices/src/resources/favicon.ico differ
diff --git a/How to/Restrict Zoom Percentage on Mobile Devices/src/styles/styles.css b/How to/Restrict Zoom Percentage on Mobile Devices/src/styles/styles.css
new file mode 100644
index 0000000..c5d413e
--- /dev/null
+++ b/How to/Restrict Zoom Percentage on Mobile Devices/src/styles/styles.css	
@@ -0,0 +1,9 @@
+@import '../../node_modules/@syncfusion/ej2-base/styles/material.css';  
+@import '../../node_modules/@syncfusion/ej2-buttons/styles/material.css';
+@import '../../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';  
+@import '../../node_modules/@syncfusion/ej2-inputs/styles/material.css';  
+@import '../../node_modules/@syncfusion/ej2-navigations/styles/material.css';
+@import '../../node_modules/@syncfusion/ej2-popups/styles/material.css';
+@import '../../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
+@import "../../node_modules/@syncfusion/ej2-pdfviewer/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-notifications/styles/material.css";
\ No newline at end of file
diff --git a/How to/Restrict Zoom Percentage on Mobile Devices/tsconfig.json b/How to/Restrict Zoom Percentage on Mobile Devices/tsconfig.json
new file mode 100644
index 0000000..db9b7c2
--- /dev/null
+++ b/How to/Restrict Zoom Percentage on Mobile Devices/tsconfig.json	
@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "target": "es2016",           
+    "module": "ES6",                                
+    "sourceMap": true,                                
+    "esModuleInterop": true,                             
+    "forceConsistentCasingInFileNames": true,            
+    "strict": true,                                      
+    "skipLibCheck": true,                               
+    "moduleResolution": "node"
+  }
+}
diff --git a/How to/Restrict Zoom Percentage on Mobile Devices/webpack.config.js b/How to/Restrict Zoom Percentage on Mobile Devices/webpack.config.js
new file mode 100644
index 0000000..f61e596
--- /dev/null
+++ b/How to/Restrict Zoom Percentage on Mobile Devices/webpack.config.js	
@@ -0,0 +1,41 @@
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const path = require('path');
+
+module.exports = {
+    entry: ['./src/app/app.ts', './src/styles/styles.css'],
+    module: {
+        rules: [
+            {
+                test: /\.ts?$/,
+                use: 'ts-loader',
+                exclude: /node_modules/,
+            },
+            {
+                test: /\.css$/,
+                use: [ MiniCssExtractPlugin.loader, "css-loader" ]
+            },
+        ],
+    },
+    resolve: {
+        extensions: ['.ts', '.js'],
+    },
+    output: {
+        filename: 'bundle.js',
+        path: path.resolve(__dirname, 'dist'),
+    },
+    plugins: [
+        new HtmlWebpackPlugin({
+            template: 'src/index.html'
+        }),
+        new MiniCssExtractPlugin({
+            filename: "bundle.css"
+        })
+    ],
+    devServer: {
+        static: path.join(__dirname, "dist"),
+        compress: true,
+        port: 4000,
+        open: true
+    },
+};
diff --git a/How to/selectSignature and unSelectSignature property/.gitignore b/How to/selectSignature and unSelectSignature property/.gitignore
new file mode 100644
index 0000000..1eae0cf
--- /dev/null
+++ b/How to/selectSignature and unSelectSignature property/.gitignore	
@@ -0,0 +1,2 @@
+dist/
+node_modules/
diff --git a/How to/selectSignature and unSelectSignature property/README.md b/How to/selectSignature and unSelectSignature property/README.md
new file mode 100644
index 0000000..46e0b02
--- /dev/null
+++ b/How to/selectSignature and unSelectSignature property/README.md	
@@ -0,0 +1,75 @@
+# Essential JS 2 QuickStart
+
+This project is a skeleton application used to create [Essential JS 2](https://www.syncfusion.com/products/essential-js2) web application.
+
+>This application uses the latest version of the [webpack-cli](https://webpack.js.org/api/cli/#commands). It requires node `v14.15.0` or higher.
+
+## Getting Started
+
+To get started you need to clone the `ej2-quickstart` repository and navigate to `ej2-quickstart` location.
+
+```
+git clone https://github.com/syncfusion/ej2-quickstart.git quickstart
+cd quickstart
+```
+
+## Installing
+
+We can get all the Essential JS 2 components in a single npm package [`ej2`](https://www.npmjs.com/package/@syncfusion/ej2).
+
+We already configure the required packages in the `package.json` file.
+
+You can run the below command to install all dependent packages related to this seed project.
+
+```
+npm install
+```
+
+## Testing
+
+This application is preconfigured with End-to-End testing and the test case is written in Jasmine.
+
+We run the test scripts with [Protractor](http://www.protractortest.org/#/) end-to-end test runner. The test case file can be found in the `e2e` folder.
+
+Protractor can interact with our web application and verify the test scripts.
+
+We have to install WebDriver and also need to ensure it is updated. Open a separate terminal and run the below npm script.
+
+```
+npm run update-webdriver
+```
+
+Open another terminal and run the below npm script. It will start web server to serve our application.
+
+```
+npm run serve
+```
+
+Once the web server is up and running, we can run the end-to-end tests using the below npm script
+
+```
+npm run test
+```
+
+> **Note:** Since Protractor is using the Selenium Standalone Server, the Java Development Kit (JDK) need to be installed in your local machine.
+
+If JDK is not installed in your local machine, you can download it from [here](http://www.oracle.com/technetwork/java/javase/downloads/index.html).
+
+## Running
+
+The application is configured with [webpack-dev-server](https://webpack.js.org/configuration/dev-server/#devserver), so it will serve the web application in your default browser.
+
+We have used [Webpack](https://github.com/webpack/webpack) for module loading.
+
+You can use the below npm script to run the web application.
+
+```
+npm run start
+```
+
+## Resources
+
+You can also refer the below resources to know more details about Essential JS 2 components.
+
+* [Pure JS Demos](http://ej2.syncfusion.com/demos/)
+* [Pure JS Documentation](http://ej2.syncfusion.com/documentation/)
diff --git a/How to/selectSignature and unSelectSignature property/e2e/index.spec.js b/How to/selectSignature and unSelectSignature property/e2e/index.spec.js
new file mode 100644
index 0000000..e69de29
diff --git a/How to/selectSignature and unSelectSignature property/e2e/protractor.conf.js b/How to/selectSignature and unSelectSignature property/e2e/protractor.conf.js
new file mode 100644
index 0000000..43eee1b
--- /dev/null
+++ b/How to/selectSignature and unSelectSignature property/e2e/protractor.conf.js	
@@ -0,0 +1,21 @@
+exports.config = {
+
+    allScriptsTimeout: 11000,
+
+    capabilities: {
+        'browserName': 'chrome'
+    },
+
+    framework: 'jasmine',
+
+    jasmineNodeOpts: {
+        defaultTimeoutInterval: 10000
+    },
+    directConnect: true,
+
+    onPrepare: function() {
+        browser.waitForAngularEnabled(false);
+    },
+
+    specs: ['./*.spec.js']
+};
\ No newline at end of file
diff --git a/How to/selectSignature and unSelectSignature property/gulpfile.js b/How to/selectSignature and unSelectSignature property/gulpfile.js
new file mode 100644
index 0000000..6a623f3
--- /dev/null
+++ b/How to/selectSignature and unSelectSignature property/gulpfile.js	
@@ -0,0 +1,62 @@
+'use strict';
+
+var gulp = require('gulp');
+
+/** 
+ * Compile TypeScript to JS
+ */
+gulp.task('compile', function (done) {
+    var webpack = require('webpack');
+    var webpackStream = require('webpack-stream');
+    gulp.src(['./src/app/app.ts']).pipe(webpackStream({
+        config: require('./webpack.config.js')
+    }, webpack))
+        .pipe(gulp.dest('./dist'))
+        .on('end', function () {
+            done();
+        });
+});
+
+/**
+ * Testing spec files
+ */
+var protractor = require('gulp-protractor').protractor;
+var webdriver_standalone = require('gulp-protractor').webdriver_standalone;
+var webdriver_update = require('gulp-protractor').webdriver_update_specific;
+
+gulp.task('e2e-serve', webdriver_standalone);
+
+gulp.task('e2e-webdriver-update', webdriver_update({
+    webdriverManagerArgs: ['--ie', '--edge']
+}));
+
+gulp.task('e2e-test', gulp.series('compile', function (done) {
+    var browserSync = require('browser-sync');
+    var bs = browserSync.create('Essential JS 2');
+    var options = {
+        server: {
+            baseDir: [
+                './dist/',
+            ],
+            directory: true
+        },
+        ui: false,
+        open: false,
+        notify: false
+    };
+    bs.init(options, function () {
+        gulp.src(['./spec/**/*.spec.js'])
+            .pipe(protractor({
+                configFile: 'e2e/protractor.conf.js'
+            }))
+            .on('error', function (e) {
+                console.error('Error: ' + e.message);
+                done();
+                process.exit(1);
+            })
+            .on('end', function () {
+                done();
+                process.exit(0);
+            });
+    });
+}));
\ No newline at end of file
diff --git a/How to/selectSignature and unSelectSignature property/license b/How to/selectSignature and unSelectSignature property/license
new file mode 100644
index 0000000..111c12a
--- /dev/null
+++ b/How to/selectSignature and unSelectSignature property/license	
@@ -0,0 +1,10 @@
+Essential JS 2 library is available under the Syncfusion Essential Studio program,  and can be licensed either under the Syncfusion Community License Program or the Syncfusion commercial license.
+
+To be qualified for the Syncfusion Community License Program you must have a gross revenue of less than one (1) million U.S. dollars ($1,000,000.00 USD) per year and have less than five (5) developers in your organization, and agree to be bound by Syncfusion’s terms and conditions. 
+
+Customers who do not qualify for the community license can contact sales@syncfusion.com for commercial licensing options.
+
+Under no circumstances can you use this product without (1) either a Community License or a commercial license and (2) without agreeing and abiding by Syncfusion’s license containing all terms and conditions. 
+
+The Syncfusion license that contains the terms and conditions can be found at 
+https://www.syncfusion.com/content/downloads/syncfusion_license.pdf
diff --git a/How to/selectSignature and unSelectSignature property/package.json b/How to/selectSignature and unSelectSignature property/package.json
new file mode 100644
index 0000000..03a5252
--- /dev/null
+++ b/How to/selectSignature and unSelectSignature property/package.json	
@@ -0,0 +1,38 @@
+{
+  "name": "ej2-quickstart",
+  "version": "0.0.1",
+  "description": "Essential JS 2 typescript quick start application",
+  "author": "Syncfusion Inc.",
+  "license": "SEE LICENSE IN license",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/syncfusion/ej2-quickstart.git"
+  },
+  "scripts": {
+    "start": "webpack-dev-server --mode development",
+    "build": "webpack --mode production",
+    "serve": "gulp e2e-serve",
+    "test": "gulp e2e-test",
+    "update-webdriver": "gulp e2e-webdriver-update"
+  },
+  "devDependencies": {
+    "ajv": "^8.11.2",
+    "browser-sync": "^2.18.12",
+    "gulp": "*",
+    "typescript": "*",
+    "gulp-protractor": "*",
+    "gulp-typescript": "*",
+    "jasmine": "^2.6.0",
+    "css-loader": "^6.7.2",
+    "ts-loader": "^9.4.1",
+    "mini-css-extract-plugin": "^2.7.0",
+    "html-webpack-plugin": "^5.5.0",
+    "webpack": "^5.75.0",
+    "webpack-cli": "^5.0.0",
+    "webpack-dev-server": "^4.11.1",
+    "webpack-stream": "^7.0.0"
+  },
+  "dependencies": {
+    "@syncfusion/ej2": "*"
+  }
+}
diff --git a/How to/selectSignature and unSelectSignature property/src/app/app.ts b/How to/selectSignature and unSelectSignature property/src/app/app.ts
new file mode 100644
index 0000000..84d0813
--- /dev/null
+++ b/How to/selectSignature and unSelectSignature property/src/app/app.ts	
@@ -0,0 +1,15 @@
+import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner} from '@syncfusion/ej2-pdfviewer';
+
+PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner);
+
+let pdfviewer: PdfViewer = new PdfViewer();
+pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
+pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/23.1.43/dist/ej2-pdfviewer-lib";
+pdfviewer.appendTo('#PdfViewer');
+pdfviewer.signatureSelect = (args: any) => {
+    console.log('Signature selected:', args);
+ };
+ 
+pdfviewer.pageRenderComplete = (args: any) => {
+    console.log('Signature selected:', args);
+};
\ No newline at end of file
diff --git a/How to/selectSignature and unSelectSignature property/src/index.html b/How to/selectSignature and unSelectSignature property/src/index.html
new file mode 100644
index 0000000..5d1a94b
--- /dev/null
+++ b/How to/selectSignature and unSelectSignature property/src/index.html	
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>Essential JS 2</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
+    <meta name="description" content="Essential JS 2" />
+    <meta name="author" content="Syncfusion" />
+    <link rel="shortcut icon" href="resources/favicon.ico" />
+    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
+</head>
+
+<body>
+    <!--Element which will render as PDF Viewer -->
+    <div id="PdfViewer"></div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/How to/selectSignature and unSelectSignature property/src/resources/favicon.ico b/How to/selectSignature and unSelectSignature property/src/resources/favicon.ico
new file mode 100644
index 0000000..d8d5c15
Binary files /dev/null and b/How to/selectSignature and unSelectSignature property/src/resources/favicon.ico differ
diff --git a/How to/selectSignature and unSelectSignature property/src/styles/styles.css b/How to/selectSignature and unSelectSignature property/src/styles/styles.css
new file mode 100644
index 0000000..c5d413e
--- /dev/null
+++ b/How to/selectSignature and unSelectSignature property/src/styles/styles.css	
@@ -0,0 +1,9 @@
+@import '../../node_modules/@syncfusion/ej2-base/styles/material.css';  
+@import '../../node_modules/@syncfusion/ej2-buttons/styles/material.css';
+@import '../../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';  
+@import '../../node_modules/@syncfusion/ej2-inputs/styles/material.css';  
+@import '../../node_modules/@syncfusion/ej2-navigations/styles/material.css';
+@import '../../node_modules/@syncfusion/ej2-popups/styles/material.css';
+@import '../../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
+@import "../../node_modules/@syncfusion/ej2-pdfviewer/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-notifications/styles/material.css";
\ No newline at end of file
diff --git a/How to/selectSignature and unSelectSignature property/tsconfig.json b/How to/selectSignature and unSelectSignature property/tsconfig.json
new file mode 100644
index 0000000..db9b7c2
--- /dev/null
+++ b/How to/selectSignature and unSelectSignature property/tsconfig.json	
@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "target": "es2016",           
+    "module": "ES6",                                
+    "sourceMap": true,                                
+    "esModuleInterop": true,                             
+    "forceConsistentCasingInFileNames": true,            
+    "strict": true,                                      
+    "skipLibCheck": true,                               
+    "moduleResolution": "node"
+  }
+}
diff --git a/How to/selectSignature and unSelectSignature property/webpack.config.js b/How to/selectSignature and unSelectSignature property/webpack.config.js
new file mode 100644
index 0000000..f61e596
--- /dev/null
+++ b/How to/selectSignature and unSelectSignature property/webpack.config.js	
@@ -0,0 +1,41 @@
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const path = require('path');
+
+module.exports = {
+    entry: ['./src/app/app.ts', './src/styles/styles.css'],
+    module: {
+        rules: [
+            {
+                test: /\.ts?$/,
+                use: 'ts-loader',
+                exclude: /node_modules/,
+            },
+            {
+                test: /\.css$/,
+                use: [ MiniCssExtractPlugin.loader, "css-loader" ]
+            },
+        ],
+    },
+    resolve: {
+        extensions: ['.ts', '.js'],
+    },
+    output: {
+        filename: 'bundle.js',
+        path: path.resolve(__dirname, 'dist'),
+    },
+    plugins: [
+        new HtmlWebpackPlugin({
+            template: 'src/index.html'
+        }),
+        new MiniCssExtractPlugin({
+            filename: "bundle.css"
+        })
+    ],
+    devServer: {
+        static: path.join(__dirname, "dist"),
+        compress: true,
+        port: 4000,
+        open: true
+    },
+};