diff --git a/Form Designer/Access Form Fields Collection/.gitignore b/Form Designer/Access Form Fields Collection/.gitignore
new file mode 100644
index 0000000..1eae0cf
--- /dev/null
+++ b/Form Designer/Access Form Fields Collection/.gitignore	
@@ -0,0 +1,2 @@
+dist/
+node_modules/
diff --git a/Form Designer/Access Form Fields Collection/README.md b/Form Designer/Access Form Fields Collection/README.md
new file mode 100644
index 0000000..46e0b02
--- /dev/null
+++ b/Form Designer/Access Form Fields Collection/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/Form Designer/Access Form Fields Collection/e2e/index.spec.js b/Form Designer/Access Form Fields Collection/e2e/index.spec.js
new file mode 100644
index 0000000..e69de29
diff --git a/Form Designer/Access Form Fields Collection/e2e/protractor.conf.js b/Form Designer/Access Form Fields Collection/e2e/protractor.conf.js
new file mode 100644
index 0000000..43eee1b
--- /dev/null
+++ b/Form Designer/Access Form Fields Collection/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/Form Designer/Access Form Fields Collection/gulpfile.js b/Form Designer/Access Form Fields Collection/gulpfile.js
new file mode 100644
index 0000000..6a623f3
--- /dev/null
+++ b/Form Designer/Access Form Fields Collection/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/Form Designer/Access Form Fields Collection/license b/Form Designer/Access Form Fields Collection/license
new file mode 100644
index 0000000..111c12a
--- /dev/null
+++ b/Form Designer/Access Form Fields Collection/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/Form Designer/Access Form Fields Collection/package.json b/Form Designer/Access Form Fields Collection/package.json
new file mode 100644
index 0000000..f108444
--- /dev/null
+++ b/Form Designer/Access Form Fields Collection/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": "^5.2.1",
+    "webpack-stream": "^7.0.0"
+  },
+  "dependencies": {
+    "@syncfusion/ej2": "*"
+  }
+}
diff --git a/Form Designer/Access Form Fields Collection/src/app/app.ts b/Form Designer/Access Form Fields Collection/src/app/app.ts
new file mode 100644
index 0000000..101c2cc
--- /dev/null
+++ b/Form Designer/Access Form Fields Collection/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/form-filling-document.pdf";
+pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib";
+pdfviewer.enableFormDesigner = true;  //To disable form Designer set to `false` 
+pdfviewer.appendTo('#PdfViewer');
+
+// Access the form fields collection via button click
+document.getElementById('formFieldCollection')?.addEventListener('click',function() {
+    const fields = pdfviewer.formFieldCollection; // Gets all form fields
+    console.log(fields)//Log the formField Collection
+});
diff --git a/Form Designer/Access Form Fields Collection/src/index.html b/Form Designer/Access Form Fields Collection/src/index.html
new file mode 100644
index 0000000..17676d4
--- /dev/null
+++ b/Form Designer/Access Form Fields Collection/src/index.html	
@@ -0,0 +1,20 @@
+<!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 -->
+    <button id="formFieldCollection">Fetch Form-Fields Collection</button>
+    <div id="PdfViewer"></div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/Form Designer/Access Form Fields Collection/src/resources/favicon.ico b/Form Designer/Access Form Fields Collection/src/resources/favicon.ico
new file mode 100644
index 0000000..d8d5c15
Binary files /dev/null and b/Form Designer/Access Form Fields Collection/src/resources/favicon.ico differ
diff --git a/Form Designer/Access Form Fields Collection/src/styles/styles.css b/Form Designer/Access Form Fields Collection/src/styles/styles.css
new file mode 100644
index 0000000..c5d413e
--- /dev/null
+++ b/Form Designer/Access Form Fields Collection/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/Form Designer/Access Form Fields Collection/tsconfig.json b/Form Designer/Access Form Fields Collection/tsconfig.json
new file mode 100644
index 0000000..db9b7c2
--- /dev/null
+++ b/Form Designer/Access Form Fields Collection/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/Form Designer/Access Form Fields Collection/webpack.config.js b/Form Designer/Access Form Fields Collection/webpack.config.js
new file mode 100644
index 0000000..f61e596
--- /dev/null
+++ b/Form Designer/Access Form Fields Collection/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/Form Designer/Configure Default Setting for Form Fields/.gitignore b/Form Designer/Configure Default Setting for Form Fields/.gitignore
new file mode 100644
index 0000000..1eae0cf
--- /dev/null
+++ b/Form Designer/Configure Default Setting for Form Fields/.gitignore	
@@ -0,0 +1,2 @@
+dist/
+node_modules/
diff --git a/Form Designer/Configure Default Setting for Form Fields/README.md b/Form Designer/Configure Default Setting for Form Fields/README.md
new file mode 100644
index 0000000..46e0b02
--- /dev/null
+++ b/Form Designer/Configure Default Setting for Form Fields/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/Form Designer/Configure Default Setting for Form Fields/e2e/index.spec.js b/Form Designer/Configure Default Setting for Form Fields/e2e/index.spec.js
new file mode 100644
index 0000000..e69de29
diff --git a/Form Designer/Configure Default Setting for Form Fields/e2e/protractor.conf.js b/Form Designer/Configure Default Setting for Form Fields/e2e/protractor.conf.js
new file mode 100644
index 0000000..43eee1b
--- /dev/null
+++ b/Form Designer/Configure Default Setting for Form Fields/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/Form Designer/Configure Default Setting for Form Fields/gulpfile.js b/Form Designer/Configure Default Setting for Form Fields/gulpfile.js
new file mode 100644
index 0000000..6a623f3
--- /dev/null
+++ b/Form Designer/Configure Default Setting for Form Fields/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/Form Designer/Configure Default Setting for Form Fields/license b/Form Designer/Configure Default Setting for Form Fields/license
new file mode 100644
index 0000000..111c12a
--- /dev/null
+++ b/Form Designer/Configure Default Setting for Form Fields/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/Form Designer/Configure Default Setting for Form Fields/package.json b/Form Designer/Configure Default Setting for Form Fields/package.json
new file mode 100644
index 0000000..f108444
--- /dev/null
+++ b/Form Designer/Configure Default Setting for Form Fields/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": "^5.2.1",
+    "webpack-stream": "^7.0.0"
+  },
+  "dependencies": {
+    "@syncfusion/ej2": "*"
+  }
+}
diff --git a/Form Designer/Configure Default Setting for Form Fields/src/app/app.ts b/Form Designer/Configure Default Setting for Form Fields/src/app/app.ts
new file mode 100644
index 0000000..0a93276
--- /dev/null
+++ b/Form Designer/Configure Default Setting for Form Fields/src/app/app.ts	
@@ -0,0 +1,180 @@
+import {
+  PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView,
+  BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner,
+  FontStyle, DisplayMode
+} from '@syncfusion/ej2-pdfviewer';
+
+PdfViewer.Inject(
+  Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView,
+  BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner
+);
+
+// Initialize viewer
+const pdfviewer: PdfViewer = new PdfViewer();
+pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf';
+pdfviewer.resourceUrl = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib';
+pdfviewer.appendTo('#PdfViewer');
+
+// Common options used by list-like fields
+const listOptions = [
+  { itemName: 'item1', itemValue: 'item1' },
+  { itemName: 'item2', itemValue: 'item2' },
+  { itemName: 'item3', itemValue: 'item3' }
+];
+
+/* Textbox defaults */
+pdfviewer.textFieldSettings = {
+  name: 'Textbox',
+  isReadOnly: false,
+  visibility: 'visible',
+  isRequired: false,
+  isPrint: true,
+  tooltip: 'Textbox',
+  thickness: 4,
+  value: 'Textbox',
+  fontFamily: 'Courier',
+  fontSize: 10,
+  fontStyle: FontStyle.None,
+  color: 'black',
+  borderColor: 'black',
+  backgroundColor: 'White',
+  alignment: 'Left',
+  maxLength: 0,
+  isMultiline: false
+};
+
+/* Password defaults */
+pdfviewer.passwordFieldSettings = {
+  name: 'Password',
+  isReadOnly: false,
+  visibility: 'visible',
+  isRequired: false,
+  isPrint: true,
+  tooltip: 'Password',
+  thickness: 4,
+  value: 'Password',
+  fontFamily: 'Courier',
+  fontSize: 10,
+  fontStyle: FontStyle.None,
+  color: 'black',
+  borderColor: 'black',
+  backgroundColor: 'white',
+  alignment: 'Left',
+  maxLength: 0
+};
+
+/* CheckBox defaults */
+pdfviewer.checkBoxFieldSettings = {
+  name: 'CheckBox',
+  isReadOnly: false,
+  visibility: 'visible',
+  isRequired: false,
+  isPrint: true,
+  tooltip: 'CheckBox',
+  thickness: 4,
+  isChecked: true,
+  backgroundColor: 'white',
+  borderColor: 'black'
+};
+
+/* RadioButton defaults */
+pdfviewer.radioButtonFieldSettings = {
+  name: 'RadioButton',
+  isReadOnly: false,
+  visibility: 'visible',
+  isRequired: false,
+  isPrint: true,
+  tooltip: 'RadioButton',
+  thickness: 4,
+  isSelected: true,
+  backgroundColor: 'white',
+  borderColor: 'black',
+  value: 'RadioButton'
+};
+
+/* ListBox defaults */
+pdfviewer.listBoxFieldSettings = {
+  name: 'ListBox',
+  isReadOnly: false,
+  visibility: 'visible',
+  isRequired: false,
+  isPrint: true,
+  tooltip: 'ListBox',
+  thickness: 4,
+  value: 'ListBox',
+  fontFamily: 'Courier',
+  fontSize: 10,
+  fontStyle: FontStyle.None,
+  color: 'black',
+  borderColor: 'black',
+  backgroundColor: 'White',
+  alignment: 'Left',
+  options: listOptions
+};
+
+/* DropDown defaults
+   Note: DropDown uses listBoxFieldSettings for defaults */
+pdfviewer.DropdownFieldSettings = {
+  name: 'Dropdown',
+  isReadOnly: false,
+  visibility: 'visible',
+  isRequired: false,
+  isPrint: true,
+  tooltip: 'ListBox',
+  thickness: 4,
+  value: 'ListBox',
+  fontFamily: 'Courier',
+  fontSize: 10,
+  fontStyle: FontStyle.None,
+  color: 'black',
+  borderColor: 'black',
+  backgroundColor: 'White',
+  alignment: 'Left',
+  options: listOptions
+};
+
+/* Signature defaults */
+pdfviewer.signatureFieldSettings = {
+  name: 'Signature',
+  isReadOnly: false,
+  visibility: 'visible',
+  isRequired: false,
+  isPrint: true,
+  tooltip: 'Signature',
+  thickness: 4,
+  signatureDialogSettings: {
+    displayMode: DisplayMode.Draw | DisplayMode.Upload | DisplayMode.Text,
+    hideSaveSignature: false
+  },
+  signatureIndicatorSettings: {
+    opacity: 1,
+    backgroundColor: '#237ba2',
+    height: 50,
+    fontSize: 15,
+    text: 'Signature Field',
+    color: 'white'
+  }
+};
+
+/* Initial defaults */
+pdfviewer.initialFieldSettings = {
+  name: 'Initial',
+  isReadOnly: false,
+  visibility: 'visible',
+  isRequired: false,
+  isPrint: true,
+  tooltip: 'Initial',
+  thickness: 4,
+  initialIndicatorSettings: {
+    opacity: 1,
+    backgroundColor: '#237ba2',
+    height: 50,
+    fontSize: 15,
+    text: 'Initial Field',
+    color: 'white'
+  },
+  initialDialogSettings: {
+    displayMode: DisplayMode.Draw | DisplayMode.Upload | DisplayMode.Text,
+    hideSaveSignature: false
+  }
+};
\ No newline at end of file
diff --git a/Form Designer/Configure Default Setting for Form Fields/src/index.html b/Form Designer/Configure Default Setting for Form Fields/src/index.html
new file mode 100644
index 0000000..5d1a94b
--- /dev/null
+++ b/Form Designer/Configure Default Setting for Form Fields/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/Form Designer/Configure Default Setting for Form Fields/src/resources/favicon.ico b/Form Designer/Configure Default Setting for Form Fields/src/resources/favicon.ico
new file mode 100644
index 0000000..d8d5c15
Binary files /dev/null and b/Form Designer/Configure Default Setting for Form Fields/src/resources/favicon.ico differ
diff --git a/Form Designer/Configure Default Setting for Form Fields/src/styles/styles.css b/Form Designer/Configure Default Setting for Form Fields/src/styles/styles.css
new file mode 100644
index 0000000..c5d413e
--- /dev/null
+++ b/Form Designer/Configure Default Setting for Form Fields/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/Form Designer/Configure Default Setting for Form Fields/tsconfig.json b/Form Designer/Configure Default Setting for Form Fields/tsconfig.json
new file mode 100644
index 0000000..db9b7c2
--- /dev/null
+++ b/Form Designer/Configure Default Setting for Form Fields/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/Form Designer/Configure Default Setting for Form Fields/webpack.config.js b/Form Designer/Configure Default Setting for Form Fields/webpack.config.js
new file mode 100644
index 0000000..f61e596
--- /dev/null
+++ b/Form Designer/Configure Default Setting for Form Fields/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/Form Designer/Create Form Fields/.gitignore b/Form Designer/Create Form Fields/.gitignore
new file mode 100644
index 0000000..1eae0cf
--- /dev/null
+++ b/Form Designer/Create Form Fields/.gitignore	
@@ -0,0 +1,2 @@
+dist/
+node_modules/
diff --git a/Form Designer/Create Form Fields/README.md b/Form Designer/Create Form Fields/README.md
new file mode 100644
index 0000000..46e0b02
--- /dev/null
+++ b/Form Designer/Create Form Fields/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/Form Designer/Create Form Fields/e2e/index.spec.js b/Form Designer/Create Form Fields/e2e/index.spec.js
new file mode 100644
index 0000000..e69de29
diff --git a/Form Designer/Create Form Fields/e2e/protractor.conf.js b/Form Designer/Create Form Fields/e2e/protractor.conf.js
new file mode 100644
index 0000000..43eee1b
--- /dev/null
+++ b/Form Designer/Create Form Fields/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/Form Designer/Create Form Fields/gulpfile.js b/Form Designer/Create Form Fields/gulpfile.js
new file mode 100644
index 0000000..6a623f3
--- /dev/null
+++ b/Form Designer/Create Form Fields/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/Form Designer/Create Form Fields/license b/Form Designer/Create Form Fields/license
new file mode 100644
index 0000000..111c12a
--- /dev/null
+++ b/Form Designer/Create Form Fields/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/Form Designer/Create Form Fields/package.json b/Form Designer/Create Form Fields/package.json
new file mode 100644
index 0000000..f108444
--- /dev/null
+++ b/Form Designer/Create Form Fields/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": "^5.2.1",
+    "webpack-stream": "^7.0.0"
+  },
+  "dependencies": {
+    "@syncfusion/ej2": "*"
+  }
+}
diff --git a/Form Designer/Create Form Fields/src/app/app.ts b/Form Designer/Create Form Fields/src/app/app.ts
new file mode 100644
index 0000000..d66b6b3
--- /dev/null
+++ b/Form Designer/Create Form Fields/src/app/app.ts	
@@ -0,0 +1,111 @@
+import {
+  PdfViewer,
+  Toolbar,
+  Magnification,
+  Navigation,
+  Annotation,
+  LinkAnnotation,
+  ThumbnailView,
+  BookmarkView,
+  TextSelection,
+  TextSearch,
+  FormFields,
+  FormDesigner,
+  TextFieldSettings,
+  PasswordFieldSettings,
+  CheckBoxFieldSettings,
+  RadioButtonFieldSettings,
+  ListBoxFieldSettings,
+  DropdownFieldSettings,
+  SignatureFieldSettings,
+  InitialFieldSettings
+} from '@syncfusion/ej2-pdfviewer';
+
+PdfViewer.Inject(
+  Toolbar,
+  Magnification,
+  Navigation,
+  Annotation,
+  LinkAnnotation,
+  ThumbnailView,
+  BookmarkView,
+  TextSelection,
+  TextSearch,
+  FormFields,
+  FormDesigner
+);
+
+const pdfviewer: PdfViewer = new PdfViewer();
+pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
+pdfviewer.resourceUrl = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib';
+pdfviewer.appendTo('#PdfViewer');
+
+//Add form fields once the document is loaded
+pdfviewer.documentLoad = () => {
+  // Textbox
+  pdfviewer.formDesignerModule.addFormField('Textbox', {
+    name: 'First Name',
+    bounds: { X: 146, Y: 229, Width: 150, Height: 24 }
+  } as TextFieldSettings);
+
+  // Password
+  pdfviewer.formDesignerModule.addFormField('Password', {
+    name: 'Account Password',
+    bounds: { X: 148, Y: 270, Width: 180, Height: 24 }
+  } as PasswordFieldSettings);
+
+  // CheckBox
+  pdfviewer.formDesignerModule.addFormField('CheckBox', {
+    name: 'Subscribe',
+    isChecked: false,
+    bounds: { X: 56, Y: 664, Width: 20, Height: 20 }
+  } as CheckBoxFieldSettings);
+
+  // RadioButton (group by same name)
+  pdfviewer.formDesignerModule.addFormField('RadioButton', {
+    name: 'Gender',
+    isSelected: false,
+    bounds: { X: 148, Y: 289, Width: 18, Height: 18 }
+  } as RadioButtonFieldSettings);
+  pdfviewer.formDesignerModule.addFormField('RadioButton', {
+    name: 'Gender',
+    isSelected: false,
+    bounds: { X: 292, Y: 289, Width: 18, Height: 18 }
+  } as RadioButtonFieldSettings);
+
+  // ListBox
+  const listBoxOptions = [
+    { itemName: 'Item 1', itemValue: 'item1' },
+    { itemName: 'Item 2', itemValue: 'item2' },
+    { itemName: 'Item 3', itemValue: 'item3' }
+  ];
+  pdfviewer.formDesignerModule.addFormField('ListBox', {
+    name: 'States',
+    options: listBoxOptions,
+    bounds: { X: 380, Y: 320, Width: 150, Height: 60 }
+  } as ListBoxFieldSettings);
+
+  // DropDown
+  const dropdownOptions = [
+    { itemName: 'Item 1', itemValue: 'item1' },
+    { itemName: 'Item 2', itemValue: 'item2' },
+    { itemName: 'Item 3', itemValue: 'item3' }
+  ];
+  pdfviewer.formDesignerModule.addFormField('DropDown', {
+    name: 'Country',
+    options: dropdownOptions,
+    bounds: { X: 560, Y: 320, Width: 150, Height: 24 }
+  } as DropdownFieldSettings);
+
+  // Signature field
+  pdfviewer.formDesignerModule.addFormField('SignatureField', {
+    name: 'Sign',
+    bounds: { X: 57, Y: 923, Width: 200, Height: 43 }
+  } as SignatureFieldSettings);
+
+  // Initial field
+  pdfviewer.formDesignerModule.addFormField('InitialField', {
+    name: 'Initial',
+    bounds: { X: 148, Y: 466, Width: 200, Height: 43 }
+  } as InitialFieldSettings);
+};
\ No newline at end of file
diff --git a/Form Designer/Create Form Fields/src/index.html b/Form Designer/Create Form Fields/src/index.html
new file mode 100644
index 0000000..17676d4
--- /dev/null
+++ b/Form Designer/Create Form Fields/src/index.html	
@@ -0,0 +1,20 @@
+<!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 -->
+    <button id="formFieldCollection">Fetch Form-Fields Collection</button>
+    <div id="PdfViewer"></div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/Form Designer/Create Form Fields/src/resources/favicon.ico b/Form Designer/Create Form Fields/src/resources/favicon.ico
new file mode 100644
index 0000000..d8d5c15
Binary files /dev/null and b/Form Designer/Create Form Fields/src/resources/favicon.ico differ
diff --git a/Form Designer/Create Form Fields/src/styles/styles.css b/Form Designer/Create Form Fields/src/styles/styles.css
new file mode 100644
index 0000000..c5d413e
--- /dev/null
+++ b/Form Designer/Create Form Fields/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/Form Designer/Create Form Fields/tsconfig.json b/Form Designer/Create Form Fields/tsconfig.json
new file mode 100644
index 0000000..db9b7c2
--- /dev/null
+++ b/Form Designer/Create Form Fields/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/Form Designer/Create Form Fields/webpack.config.js b/Form Designer/Create Form Fields/webpack.config.js
new file mode 100644
index 0000000..f61e596
--- /dev/null
+++ b/Form Designer/Create Form Fields/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/Form Designer/Custom Data in Form Fields/.gitignore b/Form Designer/Custom Data in Form Fields/.gitignore
new file mode 100644
index 0000000..1eae0cf
--- /dev/null
+++ b/Form Designer/Custom Data in Form Fields/.gitignore	
@@ -0,0 +1,2 @@
+dist/
+node_modules/
diff --git a/Form Designer/Custom Data in Form Fields/README.md b/Form Designer/Custom Data in Form Fields/README.md
new file mode 100644
index 0000000..46e0b02
--- /dev/null
+++ b/Form Designer/Custom Data in Form Fields/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/Form Designer/Custom Data in Form Fields/e2e/index.spec.js b/Form Designer/Custom Data in Form Fields/e2e/index.spec.js
new file mode 100644
index 0000000..e69de29
diff --git a/Form Designer/Custom Data in Form Fields/e2e/protractor.conf.js b/Form Designer/Custom Data in Form Fields/e2e/protractor.conf.js
new file mode 100644
index 0000000..43eee1b
--- /dev/null
+++ b/Form Designer/Custom Data in Form Fields/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/Form Designer/Custom Data in Form Fields/gulpfile.js b/Form Designer/Custom Data in Form Fields/gulpfile.js
new file mode 100644
index 0000000..6a623f3
--- /dev/null
+++ b/Form Designer/Custom Data in Form Fields/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/Form Designer/Custom Data in Form Fields/license b/Form Designer/Custom Data in Form Fields/license
new file mode 100644
index 0000000..111c12a
--- /dev/null
+++ b/Form Designer/Custom Data in Form Fields/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/Form Designer/Custom Data in Form Fields/package.json b/Form Designer/Custom Data in Form Fields/package.json
new file mode 100644
index 0000000..f108444
--- /dev/null
+++ b/Form Designer/Custom Data in Form Fields/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": "^5.2.1",
+    "webpack-stream": "^7.0.0"
+  },
+  "dependencies": {
+    "@syncfusion/ej2": "*"
+  }
+}
diff --git a/Form Designer/Custom Data in Form Fields/src/app/app.ts b/Form Designer/Custom Data in Form Fields/src/app/app.ts
new file mode 100644
index 0000000..42839c5
--- /dev/null
+++ b/Form Designer/Custom Data in Form Fields/src/app/app.ts	
@@ -0,0 +1,59 @@
+import {
+  PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView,
+  TextSelection, Annotation, FormDesigner, FormFields, TextFieldSettings
+} from '@syncfusion/ej2-pdfviewer';
+
+PdfViewer.Inject(
+  Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView,
+  BookmarkView, TextSelection, Annotation, FormDesigner, FormFields
+);
+
+const viewer: PdfViewer = new PdfViewer({
+  documentPath: 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf',
+  resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib'
+  // For server-backed:
+  // serviceUrl: 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/'
+});
+viewer.appendTo('#pdfViewer');
+
+// 1) Default customData for fields added via Form Designer toolbar
+(viewer as any).textFieldSettings = {
+  name: 'Textbox',
+  customData: { group: 'contact', createdBy: 'designer', requiredRole: 'user' }
+};
+
+// 2) Add a field programmatically with customData
+viewer.documentLoad = () => {
+  const meta = { businessId: 'C-1024', tags: ['profile', 'kiosk'], requiredRole: 'admin' };
+  viewer.formDesignerModule.addFormField('Textbox', {
+    name: 'Email',
+    bounds: { X: 146, Y: 229, Width: 200, Height: 24 } as unknown as TextFieldSettings,
+    customData: meta
+  } as any);
+};
+
+// Helper to get first field
+function getFirstField(): any | null {
+  const fields = (viewer as any).retrieveFormFields?.() || (viewer as any).formFieldCollections || [];
+  return fields.length ? fields[0] : null;
+}
+
+// 3) Update/replace customData on an existing field
+document.getElementById('updateCustomData')!.addEventListener('click', () => {
+  const target = getFirstField();
+  if (!target) { alert('No form fields found'); return; }
+  viewer.formDesignerModule.updateFormField(target, {
+    customData: { group: 'profile', flags: ['pii', 'masked'], updatedAt: Date.now() }
+  } as any);
+  alert('customData updated on first field');
+});
+
+// 4) Read customData from all fields
+document.getElementById('logCustomData')!.addEventListener('click', () => {
+  const fields = (viewer as any).retrieveFormFields?.() || (viewer as any).formFieldCollections || [];
+  if (!fields.length) { console.log('No fields'); return; }
+  fields.forEach((f: any, i: number) => {
+    console.log(`#${i} ${f.name}`, f.customData);
+  });
+  alert('Check console for customData logs');
+});
\ No newline at end of file
diff --git a/Form Designer/Custom Data in Form Fields/src/index.html b/Form Designer/Custom Data in Form Fields/src/index.html
new file mode 100644
index 0000000..13f97c6
--- /dev/null
+++ b/Form Designer/Custom Data in Form Fields/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>
+    <!--Element which will render as PDF Viewer -->
+    <button id="updateCustomData">Update custom data</button>
+    <button id="logCustomData">Log custom data</button>
+    <div id="pdfViewer"></div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/Form Designer/Custom Data in Form Fields/src/resources/favicon.ico b/Form Designer/Custom Data in Form Fields/src/resources/favicon.ico
new file mode 100644
index 0000000..d8d5c15
Binary files /dev/null and b/Form Designer/Custom Data in Form Fields/src/resources/favicon.ico differ
diff --git a/Form Designer/Custom Data in Form Fields/src/resources/form-designer.json b/Form Designer/Custom Data in Form Fields/src/resources/form-designer.json
new file mode 100644
index 0000000..4bc1436
--- /dev/null
+++ b/Form Designer/Custom Data in Form Fields/src/resources/form-designer.json	
@@ -0,0 +1 @@
+{"Textbox1":"sdFASDFASDF","Password2":"ADFASDFASDFAS","Check Box3":"Yes"}
\ No newline at end of file
diff --git a/Form Designer/Custom Data in Form Fields/src/styles/styles.css b/Form Designer/Custom Data in Form Fields/src/styles/styles.css
new file mode 100644
index 0000000..c5d413e
--- /dev/null
+++ b/Form Designer/Custom Data in Form Fields/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/Form Designer/Custom Data in Form Fields/tsconfig.json b/Form Designer/Custom Data in Form Fields/tsconfig.json
new file mode 100644
index 0000000..db9b7c2
--- /dev/null
+++ b/Form Designer/Custom Data in Form Fields/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/Form Designer/Custom Data in Form Fields/webpack.config.js b/Form Designer/Custom Data in Form Fields/webpack.config.js
new file mode 100644
index 0000000..f61e596
--- /dev/null
+++ b/Form Designer/Custom Data in Form Fields/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/Form Designer/Edit Form Fields/.gitignore b/Form Designer/Edit Form Fields/.gitignore
new file mode 100644
index 0000000..1eae0cf
--- /dev/null
+++ b/Form Designer/Edit Form Fields/.gitignore	
@@ -0,0 +1,2 @@
+dist/
+node_modules/
diff --git a/Form Designer/Edit Form Fields/README.md b/Form Designer/Edit Form Fields/README.md
new file mode 100644
index 0000000..46e0b02
--- /dev/null
+++ b/Form Designer/Edit Form Fields/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/Form Designer/Edit Form Fields/e2e/index.spec.js b/Form Designer/Edit Form Fields/e2e/index.spec.js
new file mode 100644
index 0000000..e69de29
diff --git a/Form Designer/Edit Form Fields/e2e/protractor.conf.js b/Form Designer/Edit Form Fields/e2e/protractor.conf.js
new file mode 100644
index 0000000..43eee1b
--- /dev/null
+++ b/Form Designer/Edit Form Fields/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/Form Designer/Edit Form Fields/gulpfile.js b/Form Designer/Edit Form Fields/gulpfile.js
new file mode 100644
index 0000000..6a623f3
--- /dev/null
+++ b/Form Designer/Edit Form Fields/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/Form Designer/Edit Form Fields/license b/Form Designer/Edit Form Fields/license
new file mode 100644
index 0000000..111c12a
--- /dev/null
+++ b/Form Designer/Edit Form Fields/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/Form Designer/Edit Form Fields/package.json b/Form Designer/Edit Form Fields/package.json
new file mode 100644
index 0000000..f108444
--- /dev/null
+++ b/Form Designer/Edit Form Fields/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": "^5.2.1",
+    "webpack-stream": "^7.0.0"
+  },
+  "dependencies": {
+    "@syncfusion/ej2": "*"
+  }
+}
diff --git a/Form Designer/Edit Form Fields/src/app/app.ts b/Form Designer/Edit Form Fields/src/app/app.ts
new file mode 100644
index 0000000..28428c0
--- /dev/null
+++ b/Form Designer/Edit Form Fields/src/app/app.ts	
@@ -0,0 +1,185 @@
+import {
+  PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView,
+  BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, FontStyle,
+  TextFieldSettings, PasswordFieldSettings, CheckBoxFieldSettings, RadioButtonFieldSettings,
+  ListBoxFieldSettings, SignatureFieldSettings, InitialFieldSettings,
+  DropdownFieldSettings
+} from '@syncfusion/ej2-pdfviewer';
+
+PdfViewer.Inject(
+  Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView,
+  BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner
+);
+
+// Initialize viewer
+const pdfviewer: PdfViewer = new PdfViewer();
+pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf';
+pdfviewer.resourceUrl = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib';
+pdfviewer.appendTo('#PdfViewer');
+
+// Edit Textbox
+(document.getElementById('editTextbox') as HTMLButtonElement)?.addEventListener('click', () => {
+  // Retrieve form fields collection
+  const fields = pdfviewer.retrieveFormFields();
+  // Find the textbox field by name (Here field name is First Name)
+  const field = fields.find((f: any) => f.name === 'First Name') || fields[0]; // Update name if needed
+  if (field) {
+    // Update textbox field styling and value
+    pdfviewer.formDesignerModule.updateFormField(field, {
+      value: 'John',
+      fontFamily: 'Courier',
+      fontSize: 12,
+      fontStyle: FontStyle.None,
+      color: 'black',
+      backgroundColor: 'white',
+      borderColor: 'black',
+      thickness: 2,
+      alignment: 'Left',
+      maxLength: 50
+    } as TextFieldSettings);
+  }
+});
+
+// Edit Password
+(document.getElementById('editPasswordBox') as HTMLButtonElement)?.addEventListener('click', () => {
+  // Retrieve form fields collection
+  const fields = pdfviewer.retrieveFormFields();
+  // Find the password field by name (Here field name is Password)
+  const field = fields.find((f: any) => f.name === 'Password');
+  if (field) {
+    // Update password field properties
+    pdfviewer.formDesignerModule.updateFormField(field, {
+      tooltip: 'Enter your password',
+      isReadOnly: false,
+      isRequired: true,
+      isPrint: true,
+      fontFamily: 'Courier',
+      fontSize: 10,
+      color: 'black',
+      borderColor: 'black',
+      backgroundColor: 'white',
+      alignment: 'Left',
+      maxLength: 20,
+      thickness: 1
+    } as PasswordFieldSettings);
+  }
+});
+
+// Edit CheckBox
+(document.getElementById('editCheckbox') as HTMLButtonElement)?.addEventListener('click', () => {
+  // Retrieve form fields collection
+  const fields = pdfviewer.retrieveFormFields();
+  // Find the checkbox field by name (Here field name is Subscribe)
+  const cb = fields.find((f: any) => f.name === 'Subscribe');
+  if (cb) {
+    // Update checkbox field properties and state
+    pdfviewer.formDesignerModule.updateFormField(cb, {
+      isChecked: true,
+      backgroundColor: 'white',
+      borderColor: 'black',
+      thickness: 2,
+      tooltip: 'Subscribe to newsletter'
+    } as CheckBoxFieldSettings);
+  }
+});
+
+// Edit RadioButton
+(document.getElementById('editRadio') as HTMLButtonElement)?.addEventListener('click', () => {
+  // Retrieve form fields collection
+  const fields = pdfviewer.retrieveFormFields();
+  // Filter the radio button group by name (Here group name is Gender)
+  const genderRadios = fields.filter((f: any) => f.name === 'Gender');
+  if (genderRadios.length > 1) {
+    // Update radio button selection and appearance
+    pdfviewer.formDesignerModule.updateFormField(genderRadios[0], { isSelected: false } as RadioButtonFieldSettings);
+    pdfviewer.formDesignerModule.updateFormField(genderRadios[1], {
+      isSelected: true, thickness: 2, borderColor: 'black'
+    } as RadioButtonFieldSettings);
+  }
+});
+
+// Edit ListBox
+(document.getElementById('editListBox') as HTMLButtonElement)?.addEventListener('click', () => {
+  // Retrieve form fields collection
+  const fields = pdfviewer.retrieveFormFields();
+  // Find the listbox field by name (Here field name is States)
+  const lb = fields.find((f: any) => f.name === 'States');
+  if (lb) {
+    // Update listbox options, selection, and appearance
+    pdfviewer.formDesignerModule.updateFormField(lb, {
+    options: [
+        { itemName: 'Alabama', itemValue: 'AL' },
+        { itemName: 'Alaska', itemValue: 'AK' },
+        { itemName: 'Arizona', itemValue: 'AZ' }
+      ],
+      value: 'AZ',
+      fontFamily: 'Courier',
+      fontSize: 10,
+      color: 'black',
+      borderColor: 'black',
+      backgroundColor: 'white',
+    } as unknown as TextFieldSettings);
+  }
+});
+
+// Edit DropDown
+(document.getElementById('editDropDown') as HTMLButtonElement)?.addEventListener('click', () => {
+  // Retrieve form fields collection
+  const fields = pdfviewer.retrieveFormFields();
+  // Find the dropdown field by name (Here field name is Country)
+  const dd = fields.find((f: any) => f.name === 'Country');
+  if (dd) {
+    // Update dropdown items, value, and appearance
+    pdfviewer.formDesignerModule.updateFormField(dd, {
+      options: [
+        { itemName: 'USA', itemValue: 'US' },
+        { itemName: 'Canada', itemValue: 'CA' },
+        { itemName: 'Mexico', itemValue: 'MX' }
+      ],
+      value: 'US',
+      fontFamily: 'Courier',
+      fontSize: 10,
+      color: 'black',
+      borderColor: 'black',
+      backgroundColor: 'white'
+    } as unknown as DropdownFieldSettings); // DropDown uses ListBox settings
+  }
+});
+
+// Edit Signature
+(document.getElementById('editSignature') as HTMLButtonElement)?.addEventListener('click', () => {
+  // Retrieve form fields collection
+  const fields = pdfviewer.retrieveFormFields();
+  // Find the signature field by name (Here field name is Sign)
+  const sig = fields.find((f: any) => f.name === 'Sign');
+  if (sig) {
+    // Update signature field properties
+    pdfviewer.formDesignerModule.updateFormField(sig, {
+      tooltip: 'Please sign here',
+      thickness: 3,
+      isRequired: true,
+      isPrint: true,
+      backgroundColor: 'white',
+      borderColor: 'black'
+    } as unknown as SignatureFieldSettings);
+  }
+});
+
+// Edit Initial
+(document.getElementById('editInitial') as HTMLButtonElement)?.addEventListener('click', () => {
+  // Retrieve form fields collection
+  const fields = pdfviewer.retrieveFormFields();
+  // Find the initial field by name (Here field name is Initial)
+  const init = fields.find((f: any) => f.name === 'Initial');
+  if (init) {
+    // Update initial field properties
+    pdfviewer.formDesignerModule.updateFormField(init, {
+      tooltip: 'Add your initials',
+      thickness: 2,
+      isRequired: true,
+      isPrint: true,
+      backgroundColor: 'white',
+      borderColor: 'black'
+    } as unknown as InitialFieldSettings);
+  }
+});
\ No newline at end of file
diff --git a/Form Designer/Edit Form Fields/src/index.html b/Form Designer/Edit Form Fields/src/index.html
new file mode 100644
index 0000000..e5cbb68
--- /dev/null
+++ b/Form Designer/Edit Form Fields/src/index.html	
@@ -0,0 +1,27 @@
+<!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 -->
+    <button id="editTextbox">Apply Textbox Changes</button>
+    <button id="editPasswordBox">Edit PasswordBox</button>
+    <button id="editCheckbox">Edit CheckBox</button>
+    <button id="editRadio">Edit RadioButton</button>
+    <button id="editListBox">Edit ListBox</button>
+    <button id="editDropDown">Edit DropDown</button>
+    <button id="editSignature">Edit Signature</button>
+    <button id="editInitial">Edit Initial</button>
+    <div id="PdfViewer"></div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/Form Designer/Edit Form Fields/src/resources/favicon.ico b/Form Designer/Edit Form Fields/src/resources/favicon.ico
new file mode 100644
index 0000000..d8d5c15
Binary files /dev/null and b/Form Designer/Edit Form Fields/src/resources/favicon.ico differ
diff --git a/Form Designer/Edit Form Fields/src/styles/styles.css b/Form Designer/Edit Form Fields/src/styles/styles.css
new file mode 100644
index 0000000..c5d413e
--- /dev/null
+++ b/Form Designer/Edit Form Fields/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/Form Designer/Edit Form Fields/tsconfig.json b/Form Designer/Edit Form Fields/tsconfig.json
new file mode 100644
index 0000000..db9b7c2
--- /dev/null
+++ b/Form Designer/Edit Form Fields/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/Form Designer/Edit Form Fields/webpack.config.js b/Form Designer/Edit Form Fields/webpack.config.js
new file mode 100644
index 0000000..f61e596
--- /dev/null
+++ b/Form Designer/Edit Form Fields/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/Form Designer/Export and Import Form Fields in ResourceUrl/.gitignore b/Form Designer/Export and Import Form Fields in ResourceUrl/.gitignore
new file mode 100644
index 0000000..1eae0cf
--- /dev/null
+++ b/Form Designer/Export and Import Form Fields in ResourceUrl/.gitignore	
@@ -0,0 +1,2 @@
+dist/
+node_modules/
diff --git a/Form Designer/Export and Import Form Fields in ResourceUrl/README.md b/Form Designer/Export and Import Form Fields in ResourceUrl/README.md
new file mode 100644
index 0000000..46e0b02
--- /dev/null
+++ b/Form Designer/Export and Import Form Fields in ResourceUrl/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/Form Designer/Export and Import Form Fields in ResourceUrl/e2e/index.spec.js b/Form Designer/Export and Import Form Fields in ResourceUrl/e2e/index.spec.js
new file mode 100644
index 0000000..e69de29
diff --git a/Form Designer/Export and Import Form Fields in ResourceUrl/e2e/protractor.conf.js b/Form Designer/Export and Import Form Fields in ResourceUrl/e2e/protractor.conf.js
new file mode 100644
index 0000000..43eee1b
--- /dev/null
+++ b/Form Designer/Export and Import Form Fields in ResourceUrl/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/Form Designer/Export and Import Form Fields in ResourceUrl/gulpfile.js b/Form Designer/Export and Import Form Fields in ResourceUrl/gulpfile.js
new file mode 100644
index 0000000..6a623f3
--- /dev/null
+++ b/Form Designer/Export and Import Form Fields in ResourceUrl/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/Form Designer/Export and Import Form Fields in ResourceUrl/license b/Form Designer/Export and Import Form Fields in ResourceUrl/license
new file mode 100644
index 0000000..111c12a
--- /dev/null
+++ b/Form Designer/Export and Import Form Fields in ResourceUrl/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/Form Designer/Export and Import Form Fields in ResourceUrl/package.json b/Form Designer/Export and Import Form Fields in ResourceUrl/package.json
new file mode 100644
index 0000000..fe02224
--- /dev/null
+++ b/Form Designer/Export and Import Form Fields in ResourceUrl/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",
+    "copy-webpack-plugin": "^13.0.1",
+    "css-loader": "^6.7.2",
+    "gulp": "*",
+    "gulp-protractor": "*",
+    "gulp-typescript": "*",
+    "html-webpack-plugin": "^5.5.0",
+    "jasmine": "^2.6.0",
+    "mini-css-extract-plugin": "^2.7.0",
+    "ts-loader": "^9.4.1",
+    "typescript": "*",
+    "webpack": "^5.75.0",
+    "webpack-cli": "^5.0.0",
+    "webpack-dev-server": "^5.2.1",
+    "webpack-stream": "^7.0.0"
+  },
+  "dependencies": {
+    "@syncfusion/ej2": "*"
+  }
+}
diff --git a/Form Designer/Export and Import Form Fields in ResourceUrl/src/app/app.ts b/Form Designer/Export and Import Form Fields in ResourceUrl/src/app/app.ts
new file mode 100644
index 0000000..fbe4451
--- /dev/null
+++ b/Form Designer/Export and Import Form Fields in ResourceUrl/src/app/app.ts	
@@ -0,0 +1,109 @@
+import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, FormFieldDataFormat } from '@syncfusion/ej2-pdfviewer';
+
+// Inject required modules
+PdfViewer.Inject(
+  Toolbar,
+  Magnification,
+  Navigation,
+  Annotation,
+  LinkAnnotation,
+  ThumbnailView,
+  BookmarkView,
+  TextSelection,
+  TextSearch,
+  FormFields,
+  FormDesigner
+);
+
+// Initialize the PDF Viewer
+const pdfviewer: PdfViewer = new PdfViewer({
+  // Serve local assets from dist/resources via CopyWebpackPlugin
+  //documentPath: window.location.origin + '/pdfsuccinctly.pdf',
+  documentPath: window.location.origin + '/form-filling-document.pdf',
+  resourceUrl: window.location.origin + '/ej2-pdfviewer-lib'
+});
+
+// Render the viewer
+pdfviewer.appendTo('#PdfViewer');
+
+// Wire up Export/Import buttons for JSON/XFDF/FDF and Object
+const exportJsonBtn = document.getElementById('exportJson');
+exportJsonBtn?.addEventListener('click', () => {
+  // 'Data' is the file name base for download
+  pdfviewer.exportFormFields('Data', FormFieldDataFormat.Json);
+});
+
+const importJsonBtn = document.getElementById('importJson');
+importJsonBtn?.addEventListener('click', () => {
+  fetch(window.location.origin + '/form-filling-document.json')
+    .then((response) => response.text())
+    .then((data) => {
+      pdfviewer.importFormFields(data, FormFieldDataFormat.Json);
+    })
+    .catch((e) => console.error('Failed to load JSON form data:', e));
+});
+
+const exportXfdfBtn = document.getElementById('exportXFDF');
+exportXfdfBtn?.addEventListener('click', () => {
+  pdfviewer.exportFormFields('Data', FormFieldDataFormat.Xfdf);
+});
+
+const importXfdfBtn = document.getElementById('importXFDF');
+importXfdfBtn?.addEventListener('click', () => {
+  // Ensure the case matches your actual file name on disk/server
+  fetch(window.location.origin + '/form-filling-document.xfdf')
+    .then((response) => response.text())
+    .then((data) => {
+      pdfviewer.importFormFields(data, FormFieldDataFormat.Xfdf);
+    })
+    .catch((e) => console.error('Failed to load XFDF form data:', e));
+});
+
+// FDF export/import
+const exportFdfBtn = document.getElementById('exportFDF');
+exportFdfBtn?.addEventListener('click', () => {
+  pdfviewer.exportFormFields('Data', FormFieldDataFormat.Fdf);
+});
+
+const importFdfBtn = document.getElementById('importFDF');
+importFdfBtn?.addEventListener('click', () => {
+  fetch(window.location.origin + '/form-filling-document.fdf')
+    .then((response) => response.text())
+    .then((data) => {
+      pdfviewer.importFormFields(data, FormFieldDataFormat.Fdf);
+    })
+    .catch((e) => console.error('Failed to load FDF form data:', e));
+});
+
+// Export/Import as Object (keep the format consistent between export and import)
+let exportedDataObj: unknown = null;
+let exportedFormat: FormFieldDataFormat = FormFieldDataFormat.Json; // choose: Fdf | Xfdf | Json
+
+const exportObjectBtn = document.getElementById('exportObject');
+exportObjectBtn?.addEventListener('click', () => {
+  // Set the desired object format here if you want to change it at runtime
+  // exportedFormat = FormFieldDataFormat.Xfdf; // example
+  // exportedFormat = FormFieldDataFormat.Fdf; // example
+
+  pdfviewer
+    .exportFormFieldsAsObject(exportedFormat)
+    .then((value) => {
+      exportedDataObj = value; // in-memory data object
+      console.log('Exported form data object (format:', exportedFormat, '):', exportedDataObj);
+    })
+    .catch((e) => console.error('Failed to export as object:', e));
+});
+
+const importObjectBtn = document.getElementById('importObject');
+importObjectBtn?.addEventListener('click', () => {
+  if (!exportedDataObj) {
+    console.warn('No exported object data available. Click "Export as Object" first.');
+    return;
+  }
+  try {
+    // Pass the same object and the same format used during export
+    pdfviewer.importFormFields(exportedDataObj as any, exportedFormat);
+  } catch (e) {
+    console.error('Failed to import from object:', e);
+  }
+});
diff --git a/Form Designer/Export and Import Form Fields in ResourceUrl/src/index.html b/Form Designer/Export and Import Form Fields in ResourceUrl/src/index.html
new file mode 100644
index 0000000..b9d7891
--- /dev/null
+++ b/Form Designer/Export and Import Form Fields in ResourceUrl/src/index.html	
@@ -0,0 +1,37 @@
+<!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" />
+    <link href="https://cdn.syncfusion.com/ej2/31.1.23/material.css" rel="stylesheet" />
+    <style>
+        body { padding: 12px; }
+        .btn-bar { margin-bottom: 12px; display: flex; gap: 8px; flex-wrap: wrap; }
+        #PdfViewer { height: 800px; }
+    </style>
+</head>
+
+<body>
+    <h3>Syncfusion TypeScript PDF Viewer — Export/Import Form Fields (JSON/XFDF)</h3>
+
+    <div class="btn-bar">
+        <button id="exportJson" class="btn btn-primary">Export JSON</button>
+        <button id="importJson" class="btn btn-default">Import JSON</button>
+        <button id="exportXFDF" class="btn btn-success">Export XFDF</button>
+        <button id="importXFDF" class="btn btn-default">Import XFDF</button>
+        <button id="exportFDF" class="btn btn-info">Export FDF</button>
+        <button id="importFDF" class="btn btn-default">Import FDF</button>
+        <button id="exportObject" class="btn btn-warning">Export as Object</button>
+        <button id="importObject" class="btn btn-default">Import from Object</button>
+    </div>
+
+    <div id="PdfViewer"></div>
+</body>
+
+</html>
diff --git a/Form Designer/Export and Import Form Fields in ResourceUrl/src/resources/favicon.ico b/Form Designer/Export and Import Form Fields in ResourceUrl/src/resources/favicon.ico
new file mode 100644
index 0000000..d8d5c15
Binary files /dev/null and b/Form Designer/Export and Import Form Fields in ResourceUrl/src/resources/favicon.ico differ
diff --git a/Form Designer/Export and Import Form Fields in ResourceUrl/src/resources/form-designer.json b/Form Designer/Export and Import Form Fields in ResourceUrl/src/resources/form-designer.json
new file mode 100644
index 0000000..4bc1436
--- /dev/null
+++ b/Form Designer/Export and Import Form Fields in ResourceUrl/src/resources/form-designer.json	
@@ -0,0 +1 @@
+{"Textbox1":"sdFASDFASDF","Password2":"ADFASDFASDFAS","Check Box3":"Yes"}
\ No newline at end of file
diff --git a/Form Designer/Export and Import Form Fields in ResourceUrl/src/resources/form-designer.xfdf b/Form Designer/Export and Import Form Fields in ResourceUrl/src/resources/form-designer.xfdf
new file mode 100644
index 0000000..b35f5de
Binary files /dev/null and b/Form Designer/Export and Import Form Fields in ResourceUrl/src/resources/form-designer.xfdf differ
diff --git a/Form Designer/Export and Import Form Fields in ResourceUrl/src/styles/styles.css b/Form Designer/Export and Import Form Fields in ResourceUrl/src/styles/styles.css
new file mode 100644
index 0000000..7acd9ce
--- /dev/null
+++ b/Form Designer/Export and Import Form Fields in ResourceUrl/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";
diff --git a/Form Designer/Export and Import Form Fields in ResourceUrl/tsconfig.json b/Form Designer/Export and Import Form Fields in ResourceUrl/tsconfig.json
new file mode 100644
index 0000000..db9b7c2
--- /dev/null
+++ b/Form Designer/Export and Import Form Fields in ResourceUrl/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/Form Designer/Export and Import Form Fields in ResourceUrl/webpack.config.js b/Form Designer/Export and Import Form Fields in ResourceUrl/webpack.config.js
new file mode 100644
index 0000000..f61e596
--- /dev/null
+++ b/Form Designer/Export and Import Form Fields in ResourceUrl/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/Form Designer/Export or Import Form Fields/.gitignore b/Form Designer/Export or Import Form Fields/.gitignore
new file mode 100644
index 0000000..1eae0cf
--- /dev/null
+++ b/Form Designer/Export or Import Form Fields/.gitignore	
@@ -0,0 +1,2 @@
+dist/
+node_modules/
diff --git a/Form Designer/Export or Import Form Fields/README.md b/Form Designer/Export or Import Form Fields/README.md
new file mode 100644
index 0000000..46e0b02
--- /dev/null
+++ b/Form Designer/Export or Import Form Fields/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/Form Designer/Export or Import Form Fields/e2e/index.spec.js b/Form Designer/Export or Import Form Fields/e2e/index.spec.js
new file mode 100644
index 0000000..e69de29
diff --git a/Form Designer/Export or Import Form Fields/e2e/protractor.conf.js b/Form Designer/Export or Import Form Fields/e2e/protractor.conf.js
new file mode 100644
index 0000000..43eee1b
--- /dev/null
+++ b/Form Designer/Export or Import Form Fields/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/Form Designer/Export or Import Form Fields/gulpfile.js b/Form Designer/Export or Import Form Fields/gulpfile.js
new file mode 100644
index 0000000..6a623f3
--- /dev/null
+++ b/Form Designer/Export or Import Form Fields/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/Form Designer/Export or Import Form Fields/license b/Form Designer/Export or Import Form Fields/license
new file mode 100644
index 0000000..111c12a
--- /dev/null
+++ b/Form Designer/Export or Import Form Fields/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/Form Designer/Export or Import Form Fields/package.json b/Form Designer/Export or Import Form Fields/package.json
new file mode 100644
index 0000000..f108444
--- /dev/null
+++ b/Form Designer/Export or Import Form Fields/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": "^5.2.1",
+    "webpack-stream": "^7.0.0"
+  },
+  "dependencies": {
+    "@syncfusion/ej2": "*"
+  }
+}
diff --git a/Form Designer/Export or Import Form Fields/src/app/app.ts b/Form Designer/Export or Import Form Fields/src/app/app.ts
new file mode 100644
index 0000000..a435fed
--- /dev/null
+++ b/Form Designer/Export or Import Form Fields/src/app/app.ts	
@@ -0,0 +1,74 @@
+import {
+  PdfViewer,
+  FormFieldDataFormat,
+  Toolbar,
+  Magnification,
+  Navigation,
+  Annotation,
+  LinkAnnotation,
+  ThumbnailView,
+  BookmarkView,
+  TextSelection,
+  FormFields,
+  FormDesigner
+} from '@syncfusion/ej2-pdfviewer';
+
+PdfViewer.Inject(
+  Toolbar,
+  Magnification,
+  Navigation,
+  Annotation,
+  LinkAnnotation,
+  ThumbnailView,
+  BookmarkView,
+  TextSelection,
+  FormFields,
+  FormDesigner
+);
+
+const viewer = new PdfViewer({
+  documentPath: 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf',
+  // For server-backed viewer, set:
+  // serviceUrl: 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/',
+  resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib'
+});
+viewer.appendTo('#pdfViewer');
+
+// Export to files
+document.getElementById('exportFdf')!.addEventListener('click', () => {
+  viewer.exportFormFields('FormData', FormFieldDataFormat.Fdf);
+});
+document.getElementById('exportXfdf')!.addEventListener('click', () => {
+  viewer.exportFormFields('FormData', FormFieldDataFormat.Xfdf);
+});
+document.getElementById('exportJson')!.addEventListener('click', () => {
+  viewer.exportFormFields('FormData', FormFieldDataFormat.Json);
+});
+
+// Export as object (for custom persistence)
+let exportedData: any;
+document.getElementById('exportObj')!.addEventListener('click', () => {
+  viewer.exportFormFieldsAsObject(FormFieldDataFormat.Fdf).then(value => {
+        exportedData = value;
+    });
+    console.log(exportedData);
+  // Alternatives:
+  // viewer.exportFormFieldsAsObject(FormFieldDataFormat.Xfdf).then(...)
+  // viewer.exportFormFieldsAsObject(FormFieldDataFormat.Json).then(...)
+});
+
+// Import from files (replace 'File' with your file path/stream integration)
+document.getElementById('importFdf')!.addEventListener('click', () => {
+  viewer.importFormFields('File', FormFieldDataFormat.Fdf);
+});
+document.getElementById('importXfdf')!.addEventListener('click', () => {
+  viewer.importFormFields('File', FormFieldDataFormat.Xfdf);
+});
+document.getElementById('importJson')!.addEventListener('click', () => {
+  viewer.importFormFields('form-designer.json', FormFieldDataFormat.Json);
+});
+
+// Import from previously exported object
+document.getElementById('importObj')!.addEventListener('click', () => {
+ viewer.importFormFields(exportedData, FormFieldDataFormat.Fdf);
+  });
\ No newline at end of file
diff --git a/Form Designer/Export or Import Form Fields/src/index.html b/Form Designer/Export or Import Form Fields/src/index.html
new file mode 100644
index 0000000..236ed9b
--- /dev/null
+++ b/Form Designer/Export or Import Form Fields/src/index.html	
@@ -0,0 +1,32 @@
+<!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 style="margin-bottom: 8px; display: flex; gap: 8px; flex-wrap: wrap;">
+  <button id="exportFdf">Export FDF</button>
+  <button id="exportXfdf">Export XFDF</button>
+  <button id="exportJson">Export JSON</button>
+  <button id="exportObj">Export Object</button>
+
+  <span style="width: 24px;"></span>
+
+  <button id="importFdf">Import FDF</button>
+  <button id="importXfdf">Import XFDF</button>
+  <button id="importJson">Import JSON</button>
+  <button id="importObj">Import Object</button>
+</div>
+<div id="pdfViewer" style="height: 640px; width: 100%"></div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/Form Designer/Export or Import Form Fields/src/resources/favicon.ico b/Form Designer/Export or Import Form Fields/src/resources/favicon.ico
new file mode 100644
index 0000000..d8d5c15
Binary files /dev/null and b/Form Designer/Export or Import Form Fields/src/resources/favicon.ico differ
diff --git a/Form Designer/Export or Import Form Fields/src/styles/styles.css b/Form Designer/Export or Import Form Fields/src/styles/styles.css
new file mode 100644
index 0000000..c5d413e
--- /dev/null
+++ b/Form Designer/Export or Import Form Fields/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/Form Designer/Export or Import Form Fields/tsconfig.json b/Form Designer/Export or Import Form Fields/tsconfig.json
new file mode 100644
index 0000000..db9b7c2
--- /dev/null
+++ b/Form Designer/Export or Import Form Fields/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/Form Designer/Export or Import Form Fields/webpack.config.js b/Form Designer/Export or Import Form Fields/webpack.config.js
new file mode 100644
index 0000000..f61e596
--- /dev/null
+++ b/Form Designer/Export or Import Form Fields/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/Form Designer/Form Fields Constrain/.gitignore b/Form Designer/Form Fields Constrain/.gitignore
new file mode 100644
index 0000000..1eae0cf
--- /dev/null
+++ b/Form Designer/Form Fields Constrain/.gitignore	
@@ -0,0 +1,2 @@
+dist/
+node_modules/
diff --git a/Form Designer/Form Fields Constrain/README.md b/Form Designer/Form Fields Constrain/README.md
new file mode 100644
index 0000000..46e0b02
--- /dev/null
+++ b/Form Designer/Form Fields Constrain/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/Form Designer/Form Fields Constrain/e2e/index.spec.js b/Form Designer/Form Fields Constrain/e2e/index.spec.js
new file mode 100644
index 0000000..e69de29
diff --git a/Form Designer/Form Fields Constrain/e2e/protractor.conf.js b/Form Designer/Form Fields Constrain/e2e/protractor.conf.js
new file mode 100644
index 0000000..43eee1b
--- /dev/null
+++ b/Form Designer/Form Fields Constrain/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/Form Designer/Form Fields Constrain/gulpfile.js b/Form Designer/Form Fields Constrain/gulpfile.js
new file mode 100644
index 0000000..6a623f3
--- /dev/null
+++ b/Form Designer/Form Fields Constrain/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/Form Designer/Form Fields Constrain/license b/Form Designer/Form Fields Constrain/license
new file mode 100644
index 0000000..111c12a
--- /dev/null
+++ b/Form Designer/Form Fields Constrain/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/Form Designer/Form Fields Constrain/package.json b/Form Designer/Form Fields Constrain/package.json
new file mode 100644
index 0000000..f108444
--- /dev/null
+++ b/Form Designer/Form Fields Constrain/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": "^5.2.1",
+    "webpack-stream": "^7.0.0"
+  },
+  "dependencies": {
+    "@syncfusion/ej2": "*"
+  }
+}
diff --git a/Form Designer/Form Fields Constrain/src/app/app.ts b/Form Designer/Form Fields Constrain/src/app/app.ts
new file mode 100644
index 0000000..bd4a965
--- /dev/null
+++ b/Form Designer/Form Fields Constrain/src/app/app.ts	
@@ -0,0 +1,96 @@
+import {
+  PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,
+  ThumbnailView, BookmarkView, TextSelection, TextSearch, FormDesigner, FormFields,
+  TextFieldSettings, SignatureFieldSettings
+} from '@syncfusion/ej2-pdfviewer';
+
+PdfViewer.Inject(
+  Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,
+  ThumbnailView, BookmarkView, TextSelection, TextSearch, FormDesigner, FormFields
+);
+
+// Initialize the viewer
+const pdfviewer: PdfViewer = new PdfViewer({
+  documentPath: 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf',
+  resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib'
+  // For server-backed:
+  // serviceUrl: 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/'
+});
+pdfviewer.appendTo('#pdfViewer');
+
+// Default constraints for newly added fields (from toolbar)
+pdfviewer.textFieldSettings = {
+  isReadOnly: false,
+  isRequired: true,     // New textboxes will be required by default
+  isPrint: true,
+  tooltip: 'Required field'
+};
+pdfviewer.signatureFieldSettings = {
+  isReadOnly: false,
+  isRequired: false,
+  isPrint: false,       // New signatures won’t appear in print by default
+  tooltip: 'Sign if applicable'
+};
+
+// Create fields with constraints on document load
+pdfviewer.documentLoad = () => {
+  // isReadOnly example (printed, not required)
+  pdfviewer.formDesignerModule.addFormField('Textbox', {
+    name: 'EmployeeId',
+    bounds: { X: 146, Y: 229, Width: 150, Height: 24 },
+    isReadOnly: true,
+    isRequired: false,
+    isPrint: true,
+    value: 'EMP-0001'
+  } as TextFieldSettings);
+
+  // isRequired example (required email)
+  pdfviewer.formDesignerModule.addFormField('Textbox', {
+    name: 'Email',
+    bounds: { X: 146, Y: 260, Width: 220, Height: 24 },
+    isReadOnly: false,
+    isRequired: true,
+    isPrint: true,
+    tooltip: 'Email is required'
+  } as TextFieldSettings);
+
+  // isPrint example (do not print signature)
+  pdfviewer.formDesignerModule.addFormField('SignatureField', {
+    name: 'ApplicantSign',
+    bounds: { X: 57, Y: 923, Width: 200, Height: 43 },
+    isReadOnly: false,
+    isRequired: true,
+    isPrint: false,
+    tooltip: 'Sign to accept the terms'
+  } as SignatureFieldSettings);
+};
+
+// Validation wiring (blocks print/download if required fields are empty)
+pdfviewer.enableFormFieldsValidation = true;
+pdfviewer.validateFormFields = (args: any) => {
+    alert('Please fill all required fields');
+};
+
+// Update constraints programmatically (button)
+document.getElementById('updateConstraints')?.addEventListener('click', () => {
+  // Toggle EmployeeId to editable
+  const emp = pdfviewer.formFieldCollections.find(f => f.name === 'EmployeeId');
+  if (emp) {
+    pdfviewer.formDesignerModule.updateFormField(emp, { isReadOnly: false } as TextFieldSettings);
+  }
+  // Ensure Email stays required and printable
+  const email = pdfviewer.formFieldCollections.find(f => f.name === 'Email');
+  if (email) {
+    pdfviewer.formDesignerModule.updateFormField(email, {
+      isRequired: true,
+      isPrint: true,
+      tooltip: 'Enter a valid email'
+    } as TextFieldSettings);
+  }
+  // Make signature printable (flip from default isPrint: false)
+  const sign = pdfviewer.formFieldCollections.find(f => f.name === 'ApplicantSign');
+  if (sign) {
+    pdfviewer.formDesignerModule.updateFormField(sign, { isPrint: true } as SignatureFieldSettings);
+  }
+  alert('Constraints updated.');
+});
\ No newline at end of file
diff --git a/Form Designer/Form Fields Constrain/src/index.html b/Form Designer/Form Fields Constrain/src/index.html
new file mode 100644
index 0000000..14386c7
--- /dev/null
+++ b/Form Designer/Form Fields Constrain/src/index.html	
@@ -0,0 +1,20 @@
+<!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>
+    </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/Form Designer/Form Fields Constrain/src/resources/favicon.ico b/Form Designer/Form Fields Constrain/src/resources/favicon.ico
new file mode 100644
index 0000000..d8d5c15
Binary files /dev/null and b/Form Designer/Form Fields Constrain/src/resources/favicon.ico differ
diff --git a/Form Designer/Form Fields Constrain/src/resources/form-designer.json b/Form Designer/Form Fields Constrain/src/resources/form-designer.json
new file mode 100644
index 0000000..4bc1436
--- /dev/null
+++ b/Form Designer/Form Fields Constrain/src/resources/form-designer.json	
@@ -0,0 +1 @@
+{"Textbox1":"sdFASDFASDF","Password2":"ADFASDFASDFAS","Check Box3":"Yes"}
\ No newline at end of file
diff --git a/Form Designer/Form Fields Constrain/src/styles/styles.css b/Form Designer/Form Fields Constrain/src/styles/styles.css
new file mode 100644
index 0000000..7acd9ce
--- /dev/null
+++ b/Form Designer/Form Fields Constrain/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";
diff --git a/Form Designer/Form Fields Constrain/tsconfig.json b/Form Designer/Form Fields Constrain/tsconfig.json
new file mode 100644
index 0000000..db9b7c2
--- /dev/null
+++ b/Form Designer/Form Fields Constrain/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/Form Designer/Form Fields Constrain/webpack.config.js b/Form Designer/Form Fields Constrain/webpack.config.js
new file mode 100644
index 0000000..f61e596
--- /dev/null
+++ b/Form Designer/Form Fields Constrain/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/Form Designer/Group Form Fields/.gitignore b/Form Designer/Group Form Fields/.gitignore
new file mode 100644
index 0000000..1eae0cf
--- /dev/null
+++ b/Form Designer/Group Form Fields/.gitignore	
@@ -0,0 +1,2 @@
+dist/
+node_modules/
diff --git a/Form Designer/Group Form Fields/README.md b/Form Designer/Group Form Fields/README.md
new file mode 100644
index 0000000..46e0b02
--- /dev/null
+++ b/Form Designer/Group Form Fields/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/Form Designer/Group Form Fields/e2e/index.spec.js b/Form Designer/Group Form Fields/e2e/index.spec.js
new file mode 100644
index 0000000..e69de29
diff --git a/Form Designer/Group Form Fields/e2e/protractor.conf.js b/Form Designer/Group Form Fields/e2e/protractor.conf.js
new file mode 100644
index 0000000..43eee1b
--- /dev/null
+++ b/Form Designer/Group Form Fields/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/Form Designer/Group Form Fields/gulpfile.js b/Form Designer/Group Form Fields/gulpfile.js
new file mode 100644
index 0000000..6a623f3
--- /dev/null
+++ b/Form Designer/Group Form Fields/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/Form Designer/Group Form Fields/license b/Form Designer/Group Form Fields/license
new file mode 100644
index 0000000..111c12a
--- /dev/null
+++ b/Form Designer/Group Form Fields/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/Form Designer/Group Form Fields/package.json b/Form Designer/Group Form Fields/package.json
new file mode 100644
index 0000000..f108444
--- /dev/null
+++ b/Form Designer/Group Form Fields/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": "^5.2.1",
+    "webpack-stream": "^7.0.0"
+  },
+  "dependencies": {
+    "@syncfusion/ej2": "*"
+  }
+}
diff --git a/Form Designer/Group Form Fields/src/app/app.ts b/Form Designer/Group Form Fields/src/app/app.ts
new file mode 100644
index 0000000..6ff8f04
--- /dev/null
+++ b/Form Designer/Group Form Fields/src/app/app.ts	
@@ -0,0 +1,51 @@
+import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView,
+         TextSelection, Annotation, FormDesigner, FormFields, TextFieldSettings,
+         RadioButtonFieldSettings, CheckBoxFieldSettings } from '@syncfusion/ej2-pdfviewer';
+
+PdfViewer.Inject(Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView,
+                 BookmarkView, TextSelection, Annotation, FormDesigner, FormFields);
+
+let pdfviewer: PdfViewer = new PdfViewer({
+    documentPath: 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf',
+    resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib'
+});
+pdfviewer.appendTo('#pdfViewer');
+
+pdfviewer.documentLoad = () => {
+    // Textbox group: same name => mirrored value
+    pdfviewer.formDesignerModule.addFormField('Textbox', {
+        name: 'EmployeeId',
+        bounds: { X: 146, Y: 229, Width: 150, Height: 24 }
+    } as TextFieldSettings);
+
+    pdfviewer.formDesignerModule.addFormField('Textbox', {
+        name: 'EmployeeId', // same name groups the two widgets
+        bounds: { X: 338, Y: 229, Width: 150, Height: 24 }
+    } as TextFieldSettings);
+
+    // Radio button group: same name => exclusive selection across the group
+    pdfviewer.formDesignerModule.addFormField('RadioButton', {
+        name: 'Gender',
+        bounds: { X: 148, Y: 289, Width: 18, Height: 18 },
+        isSelected: false
+    } as RadioButtonFieldSettings);
+
+    pdfviewer.formDesignerModule.addFormField('RadioButton', {
+        name: 'Gender', // grouped with the first
+        bounds: { X: 292, Y: 289, Width: 18, Height: 18 },
+        isSelected: false
+    } as RadioButtonFieldSettings);
+
+    // CheckBox group: same name => mirrored checked state
+    pdfviewer.formDesignerModule.addFormField('CheckBox', {
+        name: 'Subscribe',
+        bounds: { X: 56, Y: 664, Width: 20, Height: 20 },
+        isChecked: false
+    } as CheckBoxFieldSettings);
+
+    pdfviewer.formDesignerModule.addFormField('CheckBox', {
+        name: 'Subscribe', // grouped with the first
+        bounds: { X: 242, Y: 664, Width: 20, Height: 20 },
+        isChecked: false
+    } as CheckBoxFieldSettings);
+};
\ No newline at end of file
diff --git a/Form Designer/Group Form Fields/src/index.html b/Form Designer/Group Form Fields/src/index.html
new file mode 100644
index 0000000..14386c7
--- /dev/null
+++ b/Form Designer/Group Form Fields/src/index.html	
@@ -0,0 +1,20 @@
+<!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>
+    </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/Form Designer/Group Form Fields/src/resources/favicon.ico b/Form Designer/Group Form Fields/src/resources/favicon.ico
new file mode 100644
index 0000000..d8d5c15
Binary files /dev/null and b/Form Designer/Group Form Fields/src/resources/favicon.ico differ
diff --git a/Form Designer/Group Form Fields/src/resources/form-designer.json b/Form Designer/Group Form Fields/src/resources/form-designer.json
new file mode 100644
index 0000000..4bc1436
--- /dev/null
+++ b/Form Designer/Group Form Fields/src/resources/form-designer.json	
@@ -0,0 +1 @@
+{"Textbox1":"sdFASDFASDF","Password2":"ADFASDFASDFAS","Check Box3":"Yes"}
\ No newline at end of file
diff --git a/Form Designer/Group Form Fields/src/styles/styles.css b/Form Designer/Group Form Fields/src/styles/styles.css
new file mode 100644
index 0000000..7acd9ce
--- /dev/null
+++ b/Form Designer/Group Form Fields/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";
diff --git a/Form Designer/Group Form Fields/tsconfig.json b/Form Designer/Group Form Fields/tsconfig.json
new file mode 100644
index 0000000..db9b7c2
--- /dev/null
+++ b/Form Designer/Group Form Fields/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/Form Designer/Group Form Fields/webpack.config.js b/Form Designer/Group Form Fields/webpack.config.js
new file mode 100644
index 0000000..f61e596
--- /dev/null
+++ b/Form Designer/Group Form Fields/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/Form Designer/Remove Form Fields/.gitignore b/Form Designer/Remove Form Fields/.gitignore
new file mode 100644
index 0000000..1eae0cf
--- /dev/null
+++ b/Form Designer/Remove Form Fields/.gitignore	
@@ -0,0 +1,2 @@
+dist/
+node_modules/
diff --git a/Form Designer/Remove Form Fields/README.md b/Form Designer/Remove Form Fields/README.md
new file mode 100644
index 0000000..46e0b02
--- /dev/null
+++ b/Form Designer/Remove Form Fields/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/Form Designer/Remove Form Fields/e2e/index.spec.js b/Form Designer/Remove Form Fields/e2e/index.spec.js
new file mode 100644
index 0000000..e69de29
diff --git a/Form Designer/Remove Form Fields/e2e/protractor.conf.js b/Form Designer/Remove Form Fields/e2e/protractor.conf.js
new file mode 100644
index 0000000..43eee1b
--- /dev/null
+++ b/Form Designer/Remove Form Fields/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/Form Designer/Remove Form Fields/gulpfile.js b/Form Designer/Remove Form Fields/gulpfile.js
new file mode 100644
index 0000000..6a623f3
--- /dev/null
+++ b/Form Designer/Remove Form Fields/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/Form Designer/Remove Form Fields/license b/Form Designer/Remove Form Fields/license
new file mode 100644
index 0000000..111c12a
--- /dev/null
+++ b/Form Designer/Remove Form Fields/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/Form Designer/Remove Form Fields/package.json b/Form Designer/Remove Form Fields/package.json
new file mode 100644
index 0000000..f108444
--- /dev/null
+++ b/Form Designer/Remove Form Fields/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": "^5.2.1",
+    "webpack-stream": "^7.0.0"
+  },
+  "dependencies": {
+    "@syncfusion/ej2": "*"
+  }
+}
diff --git a/Form Designer/Remove Form Fields/src/app/app.ts b/Form Designer/Remove Form Fields/src/app/app.ts
new file mode 100644
index 0000000..5b69be0
--- /dev/null
+++ b/Form Designer/Remove Form Fields/src/app/app.ts	
@@ -0,0 +1,48 @@
+import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView,
+         TextSelection, Annotation, FormDesigner, FormFields, TextFieldSettings, SignatureFieldSettings } from '@syncfusion/ej2-pdfviewer';
+
+PdfViewer.Inject(Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView,
+                 TextSelection, Annotation, FormDesigner, FormFields);
+
+const pdfviewer: PdfViewer = new PdfViewer({
+  documentPath: 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf',
+  resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib'
+});
+
+// Optional server-backed
+// pdfviewer.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/';
+
+pdfviewer.appendTo('#PdfViewer');
+
+// Add form fields on document load
+pdfviewer.documentLoad = () => {
+  pdfviewer.formDesignerModule.addFormField('Textbox', {
+    name: 'First Name',
+    bounds: { X: 146, Y: 229, Width: 150, Height: 24 }
+  } as TextFieldSettings);
+
+  pdfviewer.formDesignerModule.addFormField('Password', {
+    name: 'Password',
+    bounds: { X: 338, Y: 229, Width: 150, Height: 24 }
+  } as TextFieldSettings);
+
+  pdfviewer.formDesignerModule.addFormField('SignatureField', {
+    name: 'Sign Here',
+    bounds: { X: 146, Y: 280, Width: 200, Height: 43 }
+  } as SignatureFieldSettings);
+};
+
+// Delete all added form fields on button click
+(document.getElementById('deleteAllFields') as HTMLButtonElement).addEventListener('click', () => {
+  const fields = [...pdfviewer.formFieldCollections]; // clone to avoid mutation issues
+  fields.forEach(field => pdfviewer.formDesignerModule.deleteFormField(field));
+});
+
+(document.getElementById('deleteById') as HTMLButtonElement).addEventListener('click', () => {
+  if (pdfviewer.formFieldCollections.length > 0) {
+    const id = pdfviewer.formFieldCollections[0].id;
+    if(id){
+    pdfviewer.formDesignerModule.deleteFormField(id);
+    }
+  }
+});
\ No newline at end of file
diff --git a/Form Designer/Remove Form Fields/src/index.html b/Form Designer/Remove Form Fields/src/index.html
new file mode 100644
index 0000000..52ac991
--- /dev/null
+++ b/Form Designer/Remove Form Fields/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>
+    <!--Element which will render as PDF Viewer -->
+    <button id="deleteAllFields">Delete Form Fields</button>
+    <button id="deleteById">Delete First Field By ID</button>
+    <div id="PdfViewer"></div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/Form Designer/Remove Form Fields/src/resources/favicon.ico b/Form Designer/Remove Form Fields/src/resources/favicon.ico
new file mode 100644
index 0000000..d8d5c15
Binary files /dev/null and b/Form Designer/Remove Form Fields/src/resources/favicon.ico differ
diff --git a/Form Designer/Remove Form Fields/src/styles/styles.css b/Form Designer/Remove Form Fields/src/styles/styles.css
new file mode 100644
index 0000000..c5d413e
--- /dev/null
+++ b/Form Designer/Remove Form Fields/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/Form Designer/Remove Form Fields/tsconfig.json b/Form Designer/Remove Form Fields/tsconfig.json
new file mode 100644
index 0000000..db9b7c2
--- /dev/null
+++ b/Form Designer/Remove Form Fields/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/Form Designer/Remove Form Fields/webpack.config.js b/Form Designer/Remove Form Fields/webpack.config.js
new file mode 100644
index 0000000..f61e596
--- /dev/null
+++ b/Form Designer/Remove Form Fields/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/Form Designer/Style Form Fields/.gitignore b/Form Designer/Style Form Fields/.gitignore
new file mode 100644
index 0000000..1eae0cf
--- /dev/null
+++ b/Form Designer/Style Form Fields/.gitignore	
@@ -0,0 +1,2 @@
+dist/
+node_modules/
diff --git a/Form Designer/Style Form Fields/README.md b/Form Designer/Style Form Fields/README.md
new file mode 100644
index 0000000..46e0b02
--- /dev/null
+++ b/Form Designer/Style Form Fields/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/Form Designer/Style Form Fields/e2e/index.spec.js b/Form Designer/Style Form Fields/e2e/index.spec.js
new file mode 100644
index 0000000..e69de29
diff --git a/Form Designer/Style Form Fields/e2e/protractor.conf.js b/Form Designer/Style Form Fields/e2e/protractor.conf.js
new file mode 100644
index 0000000..43eee1b
--- /dev/null
+++ b/Form Designer/Style Form Fields/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/Form Designer/Style Form Fields/gulpfile.js b/Form Designer/Style Form Fields/gulpfile.js
new file mode 100644
index 0000000..6a623f3
--- /dev/null
+++ b/Form Designer/Style Form Fields/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/Form Designer/Style Form Fields/license b/Form Designer/Style Form Fields/license
new file mode 100644
index 0000000..111c12a
--- /dev/null
+++ b/Form Designer/Style Form Fields/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/Form Designer/Style Form Fields/package.json b/Form Designer/Style Form Fields/package.json
new file mode 100644
index 0000000..f108444
--- /dev/null
+++ b/Form Designer/Style Form Fields/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": "^5.2.1",
+    "webpack-stream": "^7.0.0"
+  },
+  "dependencies": {
+    "@syncfusion/ej2": "*"
+  }
+}
diff --git a/Form Designer/Style Form Fields/src/app/app.ts b/Form Designer/Style Form Fields/src/app/app.ts
new file mode 100644
index 0000000..3a678d1
--- /dev/null
+++ b/Form Designer/Style Form Fields/src/app/app.ts	
@@ -0,0 +1,156 @@
+import {
+  PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView,
+  BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, FontStyle,
+  TextFieldSettings, PasswordFieldSettings, CheckBoxFieldSettings, RadioButtonFieldSettings,
+  SignatureFieldSettings, InitialFieldSettings, DropdownFieldSettings
+} from '@syncfusion/ej2-pdfviewer';
+
+PdfViewer.Inject(
+  Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView,
+  BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner
+);
+
+// Initialize viewer
+const pdfviewer: PdfViewer = new PdfViewer();
+pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf';
+pdfviewer.resourceUrl = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib';
+pdfviewer.appendTo('#PdfViewer');
+
+// Textbox
+(document.getElementById('updateTextboxStyle') as HTMLButtonElement)?.addEventListener('click', () => {
+  const fields = pdfviewer.retrieveFormFields();
+  const tb = fields.find((f: any) => f.name === 'First Name') || fields[0];
+  if (tb) {
+    pdfviewer.formDesignerModule.updateFormField(tb, {
+      value: 'John',
+      fontFamily: 'Courier',
+      fontSize: 12,
+      fontStyle: FontStyle.None,
+      color: 'black',
+      borderColor: 'black',
+      backgroundColor: 'white',
+      alignment: 'Left',
+      thickness: 2
+    } as TextFieldSettings);
+  }
+});
+
+// Password
+(document.getElementById('updatePasswordStyle') as HTMLButtonElement)?.addEventListener('click', () => {
+  const fields = pdfviewer.retrieveFormFields();
+  const pw = fields.find((f: any) => f.name === 'Password');
+  if (pw) {
+    pdfviewer.formDesignerModule.updateFormField(pw, {
+      tooltip: 'Enter password',
+      fontFamily: 'Courier',
+      fontSize: 10,
+      color: 'black',
+      borderColor: 'black',
+      backgroundColor: 'white',
+      alignment: 'Left',
+      maxLength: 20,
+      thickness: 1
+    } as PasswordFieldSettings);
+  }
+});
+
+// CheckBox
+(document.getElementById('updateCheckBoxStyle') as HTMLButtonElement)?.addEventListener('click', () => {
+  const fields = pdfviewer.retrieveFormFields();
+  const cb = fields.find((f: any) => f.name === 'Subscribe');
+  if (cb) {
+    pdfviewer.formDesignerModule.updateFormField(cb, {
+      isChecked: true,
+      backgroundColor: 'white',
+      borderColor: 'black',
+      thickness: 2,
+      tooltip: 'Subscribe'
+    } as CheckBoxFieldSettings);
+  }
+});
+
+// RadioButton
+(document.getElementById('updateRadioStyle') as HTMLButtonElement)?.addEventListener('click', () => {
+  const fields = pdfviewer.retrieveFormFields();
+  const radios = fields.filter((f: any) => f.name === 'Gender');
+  if (radios.length > 1) {
+    pdfviewer.formDesignerModule.updateFormField(radios[0], { isSelected: false } as RadioButtonFieldSettings);
+    pdfviewer.formDesignerModule.updateFormField(radios[1], {
+      isSelected: true, thickness: 2, borderColor: 'black'
+    } as RadioButtonFieldSettings);
+  }
+});
+
+// ListBox
+(document.getElementById('updateListBoxStyle') as HTMLButtonElement)?.addEventListener('click', () => {
+  const fields = pdfviewer.retrieveFormFields();
+  const lb = fields.find((f: any) => f.name === 'States');
+  if (lb) {
+    pdfviewer.formDesignerModule.updateFormField(lb, {
+      options: [
+        { itemName: 'Item 1', itemValue: 'item1' },
+        { itemName: 'Item 2', itemValue: 'item2' },
+        { itemName: 'Item 3', itemValue: 'item3' }
+      ],
+      value: 'item2',
+      fontFamily: 'Courier',
+      fontSize: 10,
+      color: 'black',
+      borderColor: 'black',
+      backgroundColor: 'white'
+    } as unknown as TextFieldSettings);
+  }
+});
+
+// DropDown (uses ListBox settings)
+(document.getElementById('updateDropDownStyle') as HTMLButtonElement)?.addEventListener('click', () => {
+  const fields = pdfviewer.retrieveFormFields();
+  const dd = fields.find((f: any) => f.name === 'Country');
+  if (dd) {
+    pdfviewer.formDesignerModule.updateFormField(dd, {
+      options: [
+        { itemName: 'USA', itemValue: 'US' },
+        { itemName: 'Canada', itemValue: 'CA' },
+        { itemName: 'Mexico', itemValue: 'MX' }
+      ],
+      value: 'US',
+      fontFamily: 'Courier',
+      fontSize: 10,
+      color: 'black',
+      borderColor: 'black',
+      backgroundColor: 'white'
+    } as DropdownFieldSettings);
+  }
+});
+
+// Signature
+(document.getElementById('updateSignatureStyle') as HTMLButtonElement)?.addEventListener('click', () => {
+  const fields = pdfviewer.retrieveFormFields();
+  const sig = fields.find((f: any) => f.name === 'Sign');
+  if (sig) {
+    pdfviewer.formDesignerModule.updateFormField(sig, {
+      tooltip: 'Please sign here',
+      thickness: 3,
+      isRequired: true,
+      isPrint: true,
+      backgroundColor: 'white',
+      borderColor: 'black'
+    } as unknown as SignatureFieldSettings);
+  }
+});
+
+// Initial
+(document.getElementById('updateInitialStyle') as HTMLButtonElement)?.addEventListener('click', () => {
+  const fields = pdfviewer.retrieveFormFields();
+  const init = fields.find((f: any) => f.name === 'Initial');
+  if (init) {
+    pdfviewer.formDesignerModule.updateFormField(init, {
+      tooltip: 'Add your initials',
+      thickness: 2,
+      isRequired: true,
+      isPrint: true,
+      backgroundColor: 'white',
+      borderColor: 'black'
+    } as unknown as InitialFieldSettings);
+  }
+});
\ No newline at end of file
diff --git a/Form Designer/Style Form Fields/src/index.html b/Form Designer/Style Form Fields/src/index.html
new file mode 100644
index 0000000..6e48311
--- /dev/null
+++ b/Form Designer/Style Form Fields/src/index.html	
@@ -0,0 +1,27 @@
+<!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 -->
+  <button id="updateTextboxStyle">Update Textbox Style</button>
+  <button id="updatePasswordStyle">Update Password Style</button>
+  <button id="updateCheckBoxStyle">Update CheckBox Style</button>
+  <button id="updateRadioStyle">Update RadioButton Style</button>
+  <button id="updateListBoxStyle">Update ListBox Style</button>
+  <button id="updateDropDownStyle">Update DropDown Style</button>
+  <button id="updateSignatureStyle">Update Signature Style</button>
+  <button id="updateInitialStyle">Update Initial Style</button>
+    <div id="PdfViewer"></div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/Form Designer/Style Form Fields/src/resources/favicon.ico b/Form Designer/Style Form Fields/src/resources/favicon.ico
new file mode 100644
index 0000000..d8d5c15
Binary files /dev/null and b/Form Designer/Style Form Fields/src/resources/favicon.ico differ
diff --git a/Form Designer/Style Form Fields/src/styles/styles.css b/Form Designer/Style Form Fields/src/styles/styles.css
new file mode 100644
index 0000000..c5d413e
--- /dev/null
+++ b/Form Designer/Style Form Fields/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/Form Designer/Style Form Fields/tsconfig.json b/Form Designer/Style Form Fields/tsconfig.json
new file mode 100644
index 0000000..db9b7c2
--- /dev/null
+++ b/Form Designer/Style Form Fields/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/Form Designer/Style Form Fields/webpack.config.js b/Form Designer/Style Form Fields/webpack.config.js
new file mode 100644
index 0000000..f61e596
--- /dev/null
+++ b/Form Designer/Style Form Fields/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/Form Designer/Validate Form Fields/.gitignore b/Form Designer/Validate Form Fields/.gitignore
new file mode 100644
index 0000000..1eae0cf
--- /dev/null
+++ b/Form Designer/Validate Form Fields/.gitignore	
@@ -0,0 +1,2 @@
+dist/
+node_modules/
diff --git a/Form Designer/Validate Form Fields/README.md b/Form Designer/Validate Form Fields/README.md
new file mode 100644
index 0000000..46e0b02
--- /dev/null
+++ b/Form Designer/Validate Form Fields/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/Form Designer/Validate Form Fields/e2e/index.spec.js b/Form Designer/Validate Form Fields/e2e/index.spec.js
new file mode 100644
index 0000000..e69de29
diff --git a/Form Designer/Validate Form Fields/e2e/protractor.conf.js b/Form Designer/Validate Form Fields/e2e/protractor.conf.js
new file mode 100644
index 0000000..43eee1b
--- /dev/null
+++ b/Form Designer/Validate Form Fields/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/Form Designer/Validate Form Fields/gulpfile.js b/Form Designer/Validate Form Fields/gulpfile.js
new file mode 100644
index 0000000..6a623f3
--- /dev/null
+++ b/Form Designer/Validate Form Fields/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/Form Designer/Validate Form Fields/license b/Form Designer/Validate Form Fields/license
new file mode 100644
index 0000000..111c12a
--- /dev/null
+++ b/Form Designer/Validate Form Fields/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/Form Designer/Validate Form Fields/package.json b/Form Designer/Validate Form Fields/package.json
new file mode 100644
index 0000000..f108444
--- /dev/null
+++ b/Form Designer/Validate Form Fields/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": "^5.2.1",
+    "webpack-stream": "^7.0.0"
+  },
+  "dependencies": {
+    "@syncfusion/ej2": "*"
+  }
+}
diff --git a/Form Designer/Validate Form Fields/src/app/app.ts b/Form Designer/Validate Form Fields/src/app/app.ts
new file mode 100644
index 0000000..2a240e7
--- /dev/null
+++ b/Form Designer/Validate Form Fields/src/app/app.ts	
@@ -0,0 +1,39 @@
+import {
+  PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView,
+  BookmarkView, TextSelection, FormDesigner, FormFields, TextFieldSettings, Print
+} from '@syncfusion/ej2-pdfviewer';
+
+PdfViewer.Inject(
+  Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView,
+  BookmarkView, TextSelection, FormDesigner, FormFields, Print
+);
+
+const pdfviewer = new PdfViewer({
+  documentPath: 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf',
+  resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
+});
+
+// Enable built-in validation BEFORE user actions
+pdfviewer.enableFormFieldsValidation = true;
+
+pdfviewer.appendTo('#pdfViewer');
+
+// Add a required textbox so validation has something to catch
+pdfviewer.documentLoad = () => {
+  try {
+    pdfviewer.formDesignerModule.addFormField('Textbox', {
+      name: 'Email',
+      bounds: { X: 146, Y: 260, Width: 220, Height: 24 },
+      isRequired: true,
+      tooltip: 'Email is required'
+    } as TextFieldSettings);
+  } catch {
+    // Ignore if designer not available
+  }
+};
+
+// Fires on Print/Download; cancel if required fields are empty
+pdfviewer.validateFormFields = (args: any) => {
+  //validateFormFields event args contains the collection of form fields which are not filled properly
+  alert("Please fill all required fields. Missing: "+args.formField[0].name);
+};
\ No newline at end of file
diff --git a/Form Designer/Validate Form Fields/src/index.html b/Form Designer/Validate Form Fields/src/index.html
new file mode 100644
index 0000000..14386c7
--- /dev/null
+++ b/Form Designer/Validate Form Fields/src/index.html	
@@ -0,0 +1,20 @@
+<!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>
+    </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/Form Designer/Validate Form Fields/src/resources/favicon.ico b/Form Designer/Validate Form Fields/src/resources/favicon.ico
new file mode 100644
index 0000000..d8d5c15
Binary files /dev/null and b/Form Designer/Validate Form Fields/src/resources/favicon.ico differ
diff --git a/Form Designer/Validate Form Fields/src/resources/form-designer.json b/Form Designer/Validate Form Fields/src/resources/form-designer.json
new file mode 100644
index 0000000..4bc1436
--- /dev/null
+++ b/Form Designer/Validate Form Fields/src/resources/form-designer.json	
@@ -0,0 +1 @@
+{"Textbox1":"sdFASDFASDF","Password2":"ADFASDFASDFAS","Check Box3":"Yes"}
\ No newline at end of file
diff --git a/Form Designer/Validate Form Fields/src/styles/styles.css b/Form Designer/Validate Form Fields/src/styles/styles.css
new file mode 100644
index 0000000..7acd9ce
--- /dev/null
+++ b/Form Designer/Validate Form Fields/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";
diff --git a/Form Designer/Validate Form Fields/tsconfig.json b/Form Designer/Validate Form Fields/tsconfig.json
new file mode 100644
index 0000000..db9b7c2
--- /dev/null
+++ b/Form Designer/Validate Form Fields/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/Form Designer/Validate Form Fields/webpack.config.js b/Form Designer/Validate Form Fields/webpack.config.js
new file mode 100644
index 0000000..f61e596
--- /dev/null
+++ b/Form Designer/Validate Form Fields/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
+    },
+};